/* ========================================================================= Batiself — WooCommerce pages styling. Master template woocommerce.php wraps every WC page in the BATISELF design system (hero strip + .home-section + .home-container). This file styles the inner WC markup so it feels native to the site — same tokens, typography roles, palette, spacing, button language. Pages covered: - .batiself-woo--cart (Cart) - .woocommerce-checkout (Checkout) - .batiself-woo--account (My Account) - .batiself-wishlist (custom wishlist page) ========================================================================= */ /* ---------- Page hero (shared by every WC page) ----------------------- */ .batiself-woo { background: #fff; } .bs-woo-hero { background: var(--bs-color-bg-alt); padding: var(--bs-space-xl) 0 var(--bs-space-lg); border-bottom: 1px solid var(--bs-color-border); } .bs-woo-hero__eyebrow { margin: 0 0 var(--bs-space-xs); color: var(--bs-color-muted); font-size: var(--bs-type-eyebrow-size); font-weight: var(--bs-type-eyebrow-weight); letter-spacing: var(--bs-type-eyebrow-tracking); text-transform: var(--bs-type-eyebrow-case); } .bs-woo-hero__title { margin: 0 0 var(--bs-space-sm); color: var(--bs-color-primary); font-size: var(--bs-type-h1-size); font-weight: var(--bs-type-h1-weight); line-height: var(--bs-type-h1-leading); letter-spacing: var(--bs-type-h1-tracking); text-transform: var(--bs-type-h1-case); } .bs-woo-hero__intro { margin: 0; max-width: 640px; color: var(--bs-color-text); font-size: var(--bs-type-body-size); line-height: var(--bs-type-body-leading); } .bs-woo-section { padding: var(--bs-section-pad-y) 0; } /* ---------- Global WC overrides — fonts, links, notices --------------- */ .woocommerce, .woocommerce * { font-family: var(--bs-font-family); } /* IMPORTANT — `.woocommerce` is a BODY class WooCommerce adds on every shop / category / product / cart / checkout / account page. So a bare `.woocommerce a {…}` selector matches the WHOLE document on those pages (header, footer, hero, drawer, buttons), turning unrelated text blue. Scope every GENERIC element rule below to `.woocommerce .site-main` so it only reaches the in-page content area — the header (.bs-header), footer (.bs-footer) and mobile drawer live OUTSIDE
and are therefore left alone. Buttons keep their own color via the :not()s. */ /* Link + heading COLOR is scoped tighter, to .batiself-woo (cart / checkout / account — the only places that render raw WooCommerce text markup). Category & single-product pages embed our own .home-section rails (with their own /

/

already styled), so a .site-main scope would still tint those blue — .batiself-woo leaves them alone. Buttons keep their own color. */ /* Exclude block-based buttons too — otherwise the Cart's primary checkout anchor (Blue bg) would also get blue TEXT and read as invisible. */ .batiself-woo a:not(.home-btn):not(.home-arrow):not(.button):not(.wc-block-cart__submit-button):not(.wp-block-button__link):not(.wc-block-components-button) { color: var(--bs-color-primary); } .batiself-woo a:not(.home-btn):not(.home-arrow):not(.button):not(.wc-block-cart__submit-button):not(.wp-block-button__link):not(.wc-block-components-button):hover { color: var(--bs-color-primary-dark); } /* Notices: success / info / error — all unified with a left accent. */ .woocommerce-message, .woocommerce-info, .woocommerce-error { margin: 0 0 var(--bs-space-md); padding: var(--bs-space-sm) var(--bs-space-md); background: #fff; border: 1px solid var(--bs-color-border); border-left: 4px solid var(--bs-color-primary); color: var(--bs-color-text); font-size: var(--bs-type-body-sm-size); line-height: var(--bs-type-body-sm-leading); list-style: none; } .woocommerce-error { border-left-color: var(--bs-color-promo); } .woocommerce-message a.button, .woocommerce-info a.button { margin-left: var(--bs-space-sm); } /* WooCommerce notice icon glyphs depend on the WC icon font (not loaded here) → strip the ::before so no broken box shows before the message text. */ .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none !important; display: none !important; } /* Empty account endpoint (no orders yet, etc.) → charte card: message on the left, pill CTA on the right, no broken icon. */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bs-space-md); padding: var(--bs-space-md) var(--bs-space-lg); } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button { margin: 0; background: var(--bs-color-primary); color: #fff; border: 0; border-radius: 999px; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button:hover { background: var(--bs-color-primary-dark); color: #fff; } /* Unified pill button language across ALL WC buttons. Targets every variant WC outputs (button, .button, alt, input[type=submit]). */ .woocommerce .site-main .button, .woocommerce .site-main input[type="submit"], .woocommerce .site-main input[type="submit"].button, .woocommerce .site-main a.button, .woocommerce .site-main button.button, .batiself-woo--cart .wc-proceed-to-checkout .button.checkout-button, .batiself-woo--account .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--bs-space-xs); padding: 14px 32px; background: var(--bs-color-primary); color: #fff; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; transition: background .2s ease; font-family: var(--bs-font-family); font-size: var(--bs-type-button-size); font-weight: var(--bs-type-button-weight); line-height: var(--bs-type-button-leading); letter-spacing: var(--bs-type-button-tracking); text-transform: var(--bs-type-button-case); } .woocommerce .site-main .button:hover, .woocommerce .site-main input[type="submit"]:hover, .woocommerce .site-main a.button:hover, .woocommerce .site-main button.button:hover { background: var(--bs-color-primary-dark); color: #fff; } .woocommerce .site-main .button.alt:disabled, .woocommerce .site-main .button:disabled { opacity: .5; cursor: not-allowed; } /* "Ghost" variant — used for secondary actions (Update cart, Continue shopping). */ .woocommerce .site-main .button[name="update_cart"], .woocommerce .site-main .button.return-to-shop { background: #fff; color: var(--bs-color-primary); border: 1px solid var(--bs-color-primary); } .woocommerce .site-main .button[name="update_cart"]:hover, .woocommerce .site-main .button.return-to-shop:hover { background: var(--bs-color-bg-alt); color: var(--bs-color-primary-dark); border-color: var(--bs-color-primary-dark); } /* Form inputs / selects unified (scoped to .site-main so the header search + footer newsletter inputs are never restyled on WC pages). */ .woocommerce .site-main input[type="text"], .woocommerce .site-main input[type="email"], .woocommerce .site-main input[type="tel"], .woocommerce .site-main input[type="password"], .woocommerce .site-main input[type="number"], .woocommerce .site-main textarea, .woocommerce .site-main select { width: 100%; padding: 12px 16px; background: #fff; border: 1px solid var(--bs-color-border); font-family: var(--bs-font-family); font-size: var(--bs-type-body-size); color: var(--bs-color-text); box-sizing: border-box; transition: border-color .2s ease; } .woocommerce .site-main input:focus, .woocommerce .site-main textarea:focus, .woocommerce .site-main select:focus { outline: none; border-color: var(--bs-color-primary); } .woocommerce .site-main label { display: block; margin-bottom: var(--bs-space-2xs); color: var(--bs-color-muted); font-size: var(--bs-type-body-sm-size); font-weight: var(--bs-weight-medium); } /* Section headings inside the cart/checkout/account WC markup only — scoped to .batiself-woo so footer column titles AND the home-section rails that appear on category / single-product pages keep their own colors. */ .batiself-woo h2, .batiself-woo h3 { color: var(--bs-color-primary); font-family: var(--bs-font-family); margin: 0 0 var(--bs-space-md); } .batiself-woo h2 { font-size: var(--bs-type-h3-size); font-weight: var(--bs-type-h3-weight); letter-spacing: var(--bs-type-h3-tracking); } .batiself-woo h3 { font-size: var(--bs-type-h4-size); font-weight: var(--bs-type-h4-weight); letter-spacing: var(--bs-type-h4-tracking); text-transform: var(--bs-type-h4-case); } /* ========================================================================= CART PAGE Layout: items table on the left, totals box on the right (sticky). ========================================================================= */ .batiself-woo--cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--bs-space-xl); align-items: start; } /* Neutralise WooCommerce/Storefront float defaults + clearfix pseudo-elements so the form / collaterals behave as clean grid items (mirrors the account fix). Without this the core `.cart-collaterals { float:right; width:48% }` shrinks the totals box inside the grid cell. */ .batiself-woo--cart .woocommerce::before, .batiself-woo--cart .woocommerce::after { content: none; display: none; } .batiself-woo--cart .woocommerce > form.woocommerce-cart-form, .batiself-woo--cart .woocommerce > .cart-collaterals { float: none; width: auto; max-width: none; margin: 0; min-width: 0; } .batiself-woo--cart .woocommerce > form.woocommerce-cart-form { grid-column: 1; } .batiself-woo--cart .woocommerce > .cart-collaterals { grid-column: 2; } .batiself-woo--cart .cart-collaterals .cart_totals, .batiself-woo--cart .cart-collaterals .cross-sells { float: none; width: 100%; } .batiself-woo--cart .cart-collaterals .cross-sells { margin-top: var(--bs-space-lg); } .batiself-woo--cart .woocommerce > .woocommerce-notices-wrapper, .batiself-woo--cart .woocommerce > .return-to-shop, .batiself-woo--cart .woocommerce > .cart-empty { grid-column: 1 / -1; } @media (max-width: 900px) { .batiself-woo--cart .woocommerce { display: block; } .batiself-woo--cart .woocommerce > .cart-collaterals { position: static; margin-top: var(--bs-space-lg); } } /* Cart items table — a clean rounded card holding the line items. */ .batiself-woo--cart .shop_table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--bs-color-border); border-radius: 0; overflow: hidden; box-shadow: 0 10px 30px rgba(16, 54, 86, .05); } .batiself-woo--cart .shop_table thead th { padding: var(--bs-space-sm) var(--bs-space-md); border-bottom: 1px solid var(--bs-color-border); text-align: left; background: var(--bs-color-bg-alt); color: var(--bs-color-primary); font-size: var(--bs-type-h4-size); font-weight: var(--bs-type-h4-weight); letter-spacing: var(--bs-type-h4-tracking); text-transform: var(--bs-type-h4-case); } .batiself-woo--cart .shop_table tbody td { padding: var(--bs-space-md); border-bottom: 1px solid var(--bs-color-border); vertical-align: middle; } .batiself-woo--cart .shop_table tbody tr:last-child td { border-bottom: 0; } .batiself-woo--cart .shop_table .product-thumbnail img { width: 84px; height: 84px; object-fit: contain; background: var(--bs-color-bg-alt); border: 1px solid var(--bs-color-border); border-radius: 0; padding: 6px; display: block; } .batiself-woo--cart .shop_table .product-name a { color: var(--bs-color-text); text-decoration: none; font-weight: var(--bs-weight-medium); font-size: var(--bs-type-body-size); line-height: var(--bs-leading-snug); } .batiself-woo--cart .shop_table .product-name a:hover { color: var(--bs-color-primary); } .batiself-woo--cart .shop_table .product-price, .batiself-woo--cart .shop_table .product-subtotal { color: var(--bs-color-text); font-weight: var(--bs-weight-bold); font-size: var(--bs-type-body-size); } /* Remove (×) — discreet round button. */ .batiself-woo--cart .shop_table .product-remove a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--bs-color-bg-alt); color: var(--bs-color-muted); border-radius: 50%; text-decoration: none; font-size: 16px; font-weight: bold; line-height: 1; transition: background .2s ease, color .2s ease; } .batiself-woo--cart .shop_table .product-remove a:hover { background: var(--bs-color-primary); color: #fff; } /* Quantity stepper */ .batiself-woo--cart .quantity input.qty { width: 76px; padding: 10px; text-align: center; border: 1px solid var(--bs-color-border); border-radius: 0; } /* Cart row: coupon + update cart actions — sits on a light band, visually detached from the line items above it. */ .batiself-woo--cart .cart-form__actions, .batiself-woo--cart .shop_table .actions { padding: var(--bs-space-md); background: var(--bs-color-bg-alt); border-top: 1px solid var(--bs-color-border); display: flex; flex-wrap: wrap; gap: var(--bs-space-sm); align-items: center; justify-content: space-between; } .batiself-woo--cart .coupon { display: inline-flex; gap: var(--bs-space-xs); align-items: stretch; } .batiself-woo--cart .coupon input[type="text"] { min-width: 200px; padding: 10px 16px; border-radius: 999px; } /* Totals box — sticky on desktop. */ .batiself-woo--cart .cart-collaterals { position: sticky; top: calc(var(--bs-header-h) + 56px + var(--bs-space-md)); } .batiself-woo--cart .cart_totals { background: var(--bs-color-bg-alt); padding: var(--bs-space-lg); border: 1px solid var(--bs-color-border); border-top: 4px solid var(--bs-color-primary); border-radius: 0; box-shadow: 0 10px 30px rgba(16, 54, 86, .05); } .batiself-woo--cart .cart_totals h2 { margin: 0 0 var(--bs-space-md); color: var(--bs-color-primary); font-size: var(--bs-type-h3-size); font-weight: var(--bs-type-h3-weight); letter-spacing: var(--bs-type-h3-tracking); } .batiself-woo--cart .cart_totals table { width: 100%; border: 0; } .batiself-woo--cart .cart_totals th, .batiself-woo--cart .cart_totals td { padding: var(--bs-space-xs) 0; border: 0; border-bottom: 1px solid var(--bs-color-border); background: transparent; text-align: left; font-size: var(--bs-type-body-size); color: var(--bs-color-text); } .batiself-woo--cart .cart_totals .order-total th, .batiself-woo--cart .cart_totals .order-total td { border-bottom: 0; padding-top: var(--bs-space-sm); font-weight: var(--bs-weight-bold); font-size: var(--bs-type-h3-size); color: var(--bs-color-primary); } .batiself-woo--cart .wc-proceed-to-checkout { margin-top: var(--bs-space-md); padding: 0; } .batiself-woo--cart .wc-proceed-to-checkout .checkout-button { width: 100%; padding: 16px 32px; } /* Empty cart state */ .batiself-woo--cart .cart-empty { text-align: center; padding: var(--bs-space-2xl) var(--bs-space-md); color: var(--bs-color-primary); font-size: var(--bs-type-h3-size); font-weight: var(--bs-weight-bold); background: var(--bs-color-bg-alt); border: 1px dashed var(--bs-color-border); border-radius: 0; } .batiself-woo--cart .return-to-shop { text-align: center; margin: var(--bs-space-md) 0 0; } /* Mobile — cart table stacks as cards. */ @media (max-width: 700px) { .batiself-woo--cart .shop_table { border: 0; background: transparent; } .batiself-woo--cart .shop_table thead { display: none; } .batiself-woo--cart .shop_table tbody, .batiself-woo--cart .shop_table tr, .batiself-woo--cart .shop_table td { display: block; width: 100%; } .batiself-woo--cart .shop_table tbody tr { background: #fff; border: 1px solid var(--bs-color-border); border-radius: 0; padding: var(--bs-space-md); margin-bottom: var(--bs-space-sm); box-shadow: 0 6px 18px rgba(16, 54, 86, .04); } /* The actions row (coupon + update) keeps its band look on mobile too. */ .batiself-woo--cart .shop_table tr.cart_item ~ tr td.actions, .batiself-woo--cart .shop_table .actions { border-radius: 0; } .batiself-woo--cart .shop_table td { padding: var(--bs-space-2xs) 0; border: 0; } .batiself-woo--cart .shop_table td[data-title]::before { content: attr(data-title) ' : '; font-weight: var(--bs-weight-medium); color: var(--bs-color-muted); margin-right: var(--bs-space-xs); font-size: var(--bs-type-body-sm-size); } .batiself-woo--cart .coupon input[type="text"] { min-width: 0; flex: 1; } } /* ========================================================================= CHECKOUT PAGE ========================================================================= */ .woocommerce-checkout #customer_details { background: #fff; border: 1px solid var(--bs-color-border); padding: var(--bs-space-lg); margin-bottom: var(--bs-space-lg); } .woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bs-space-lg); } @media (max-width: 900px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr; } } .woocommerce-checkout #order_review { background: var(--bs-color-bg-alt); padding: var(--bs-space-lg); border-top: 4px solid var(--bs-color-primary); } .woocommerce-checkout #order_review_heading { margin: 0 0 var(--bs-space-md); color: var(--bs-color-primary); font-size: var(--bs-type-h3-size); font-weight: var(--bs-type-h3-weight); } .woocommerce-checkout #payment { background: transparent; margin-top: var(--bs-space-md); } .woocommerce-checkout #payment ul.payment_methods { padding: 0; border-bottom: 1px solid var(--bs-color-border); margin: 0 0 var(--bs-space-md); } /* ========================================================================= MY ACCOUNT PAGE Layout: nav on the left (sidebar), content on the right. --------------------------------------------------------------------------- Scoped to our master-template wrapper (.batiself-woo--account → .bs-woo-section) instead of the `woocommerce-account` body class: the account page is a regular WP Page holding the [woocommerce_my_account] shortcode, so that body class isn't guaranteed. The 3-class chain also lifts specificity (0,3,0) above the parent theme's float-based WC defaults (`.batiself-woo--account .woocommerce-MyAccount-*` = 0,2,0), so the grid wins WITHOUT !important. Floats/widths on the columns are reset so they behave as clean grid items. ========================================================================= */ .batiself-woo--account .bs-woo-section .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--bs-space-xl); align-items: start; width: 100%; max-width: none; float: none; } /* Neutralise the WooCommerce/Storefront clearfix pseudo-elements that would otherwise create phantom grid items. */ .batiself-woo--account .bs-woo-section .woocommerce::before, .batiself-woo--account .bs-woo-section .woocommerce::after { content: none; display: none; } .batiself-woo--account .bs-woo-section .woocommerce-MyAccount-navigation, .batiself-woo--account .bs-woo-section .woocommerce-MyAccount-content { float: none; width: auto; max-width: none; margin: 0; } .batiself-woo--account .bs-woo-section .woocommerce-MyAccount-navigation { grid-column: 1; } .batiself-woo--account .bs-woo-section .woocommerce-MyAccount-content { grid-column: 2; min-width: 0; } /* Full-width rows span both columns (notices, login/register, lost-password, and our reassurance banner). */ .batiself-woo--account .bs-woo-section .woocommerce > .woocommerce-notices-wrapper, .batiself-woo--account .bs-woo-section .woocommerce > .u-columns, .batiself-woo--account .bs-woo-section .woocommerce > form.woocommerce-form-login, .batiself-woo--account .bs-woo-section .woocommerce > form.woocommerce-form-register, .batiself-woo--account .bs-woo-section .woocommerce > form.lost_reset_password, .batiself-woo--account .bs-woo-section .woocommerce > .bs-account-login-intro { grid-column: 1 / -1; } @media (max-width: 900px) { .batiself-woo--account .bs-woo-section .woocommerce { grid-template-columns: 1fr; } .batiself-woo--account .bs-woo-section .woocommerce-MyAccount-navigation, .batiself-woo--account .bs-woo-section .woocommerce-MyAccount-content { grid-column: 1; } } /* Sidebar nav */ .woocommerce-MyAccount-navigation { background: var(--bs-color-bg-alt); padding: var(--bs-space-md); } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; background: #fff; color: var(--bs-color-text); text-decoration: none; border: 1px solid var(--bs-color-border); font-size: var(--bs-type-body-sm-size); font-weight: var(--bs-weight-medium); transition: background .2s ease, border-color .2s ease, color .2s ease; } .woocommerce-MyAccount-navigation li a:hover { border-color: var(--bs-color-primary); color: var(--bs-color-primary); } /* Active tab — forced over WooCommerce/Elementor link-colour rules that load after the child theme and would otherwise repaint the label (blue-on-blue or white-on-white). Covers aria-current + hover/focus so the active label stays white in every state. */ .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li.is-active a:link, .woocommerce-MyAccount-navigation li.is-active a:visited, .woocommerce-MyAccount-navigation li.is-active a:hover, .woocommerce-MyAccount-navigation li.is-active a:focus, .woocommerce-MyAccount-navigation li a[aria-current="page"] { background: var(--bs-color-primary) !important; border-color: var(--bs-color-primary) !important; color: #fff !important; } /* "Se déconnecter" — visually set apart from the other menu items: pushed down a little and given the Batiself Yellow so it clearly reads as a distinct (exit) action. */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: var(--bs-space-sm); } .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { background: var(--bs-color-accent); border-color: var(--bs-color-accent); color: var(--bs-color-primary-dark); font-weight: var(--bs-weight-bold); } .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: var(--bs-color-primary-dark); border-color: var(--bs-color-primary-dark); color: #fff; } @media (max-width: 900px) { .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; } .woocommerce-MyAccount-navigation li a { padding: 10px 14px; } } /* Account content */ .woocommerce-MyAccount-content { min-width: 0; } .woocommerce-MyAccount-content > p:first-of-type { margin-top: 0; font-size: var(--bs-type-body-size); line-height: var(--bs-type-body-leading); } /* Orders / Addresses tables */ .batiself-woo--account table.shop_table, .batiself-woo--account .woocommerce-orders-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bs-color-border); margin: 0 0 var(--bs-space-lg); } .batiself-woo--account table.shop_table thead th, .batiself-woo--account .woocommerce-orders-table thead th { padding: var(--bs-space-sm) var(--bs-space-md); background: var(--bs-color-bg-alt); border-bottom: 1px solid var(--bs-color-border); text-align: left; color: var(--bs-color-primary); font-size: var(--bs-type-h4-size); font-weight: var(--bs-type-h4-weight); letter-spacing: var(--bs-type-h4-tracking); text-transform: var(--bs-type-h4-case); } .batiself-woo--account table.shop_table tbody td, .batiself-woo--account .woocommerce-orders-table tbody td { padding: var(--bs-space-sm) var(--bs-space-md); border-bottom: 1px solid var(--bs-color-border); font-size: var(--bs-type-body-sm-size); } .batiself-woo--account table.shop_table tbody tr:last-child td, .batiself-woo--account .woocommerce-orders-table tbody tr:last-child td { border-bottom: 0; } /* ========================================================================= ADDRESSES (edit-address list) — two equal-height cards. The wrapper also carries .u-columns/.col2-set; we reset those float widths and drive the layout with an explicit grid so the billing + shipping cards always sit side-by-side at the SAME height (align-items: stretch + the card as a flex column). Edit link harmonised as a small pill button. ========================================================================= */ .batiself-woo--account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bs-space-lg); align-items: stretch; margin-bottom: var(--bs-space-2xl); /* breathing room before the footer */ } /* The wrapper also carries the .u-columns clearfix → its ::before/::after would otherwise become phantom grid cells and shove the billing/shipping cards into a diagonal stagger (same neutralisation as the outer grid). Any stray intro

inside the wrapper is forced full-width too. */ .batiself-woo--account .woocommerce-Addresses::before, .batiself-woo--account .woocommerce-Addresses::after { content: none; display: none; } .batiself-woo--account .woocommerce-Addresses > p { grid-column: 1 / -1; margin: 0 0 var(--bs-space-sm); } @media (max-width: 700px) { .batiself-woo--account .woocommerce-Addresses { grid-template-columns: 1fr; } } /* Reset the float widths the .u-columns/.col-1/.col-2 defaults would add. */ .batiself-woo--account .woocommerce-Addresses > .woocommerce-Address { float: none; width: auto; margin: 0; } .batiself-woo--account .woocommerce-Address { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--bs-color-border); border-radius: 0; padding: var(--bs-space-lg); box-shadow: 0 6px 18px rgba(16, 54, 86, .04); } .batiself-woo--account .woocommerce-Address-title { display: flex; flex-direction: column; /* title full-width on top, CTA below — the title can never be squeezed by the button (no more one-word-per-line), whatever the CTA length. */ align-items: flex-start; gap: var(--bs-space-sm); margin-bottom: var(--bs-space-md); padding-bottom: var(--bs-space-sm); border-bottom: 1px solid var(--bs-color-border); } .batiself-woo--account .woocommerce-Address-title h3 { margin: 0; width: 100%; } .batiself-woo--account .woocommerce-Address-title .edit { flex-shrink: 0; display: inline-flex; align-items: center; padding: 8px 18px; background: #fff; border: 1px solid var(--bs-color-primary); border-radius: 999px; color: var(--bs-color-primary); text-decoration: none; font-size: var(--bs-type-button-size); font-weight: var(--bs-type-button-weight); letter-spacing: var(--bs-type-button-tracking); text-transform: var(--bs-type-button-case); transition: background .2s ease, color .2s ease; } .batiself-woo--account .woocommerce-Address-title .edit:hover { background: var(--bs-color-primary); color: #fff; } /* The address body fills the remaining height so both cards stay even. */ .batiself-woo--account .woocommerce-Address address { flex: 1 1 auto; margin: 0; color: var(--bs-color-text); font-style: normal; font-size: var(--bs-type-body-size); line-height: var(--bs-leading-loose); } /* ========================================================================= EDIT-ACCOUNT + ADDRESS EDIT forms — clean, grouped, on-brand. ========================================================================= */ .batiself-woo--account .woocommerce-EditAccountForm, .batiself-woo--account .woocommerce-MyAccount-content form .woocommerce-address-fields { max-width: 760px; } /* Edit-account: name fields side-by-side, everything else full width. */ .batiself-woo--account .woocommerce-EditAccountForm { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bs-space-sm) var(--bs-space-md); background: var(--bs-color-bg-alt); border: 1px solid var(--bs-color-border); border-radius: 0; padding: var(--bs-space-lg); } .batiself-woo--account .woocommerce-EditAccountForm .woocommerce-form-row { float: none; width: auto; margin: 0; padding: 0; } .batiself-woo--account .woocommerce-EditAccountForm > .form-row-first { grid-column: 1; } .batiself-woo--account .woocommerce-EditAccountForm > .form-row-last { grid-column: 2; } .batiself-woo--account .woocommerce-EditAccountForm > .woocommerce-form-row:not(.form-row-first):not(.form-row-last), .batiself-woo--account .woocommerce-EditAccountForm > fieldset, .batiself-woo--account .woocommerce-EditAccountForm > .clear, .batiself-woo--account .woocommerce-EditAccountForm > p { grid-column: 1 / -1; } /* Password-change group → its own white panel with a labelled legend. min-width:0 + box-sizing → kills the default

min-content width that made the panel overflow the grid column on the right. */ .batiself-woo--account .woocommerce-EditAccountForm fieldset { min-width: 0; box-sizing: border-box; margin: var(--bs-space-xs) 0 0; padding: var(--bs-space-md) var(--bs-space-lg) var(--bs-space-lg); background: #fff; border: 1px solid var(--bs-color-border); border-radius: 0; } .batiself-woo--account .woocommerce-EditAccountForm legend { width: 100%; margin-bottom: var(--bs-space-md); padding-bottom: var(--bs-space-xs); border-bottom: 1px solid var(--bs-color-border); color: var(--bs-color-primary); font-size: var(--bs-type-h4-size); font-weight: var(--bs-type-h4-weight); letter-spacing: var(--bs-type-h4-tracking); text-transform: var(--bs-type-h4-case); } .batiself-woo--account .woocommerce-EditAccountForm fieldset .woocommerce-form-row { margin-bottom: var(--bs-space-md); } .batiself-woo--account .woocommerce-EditAccountForm fieldset .woocommerce-form-row:last-child { margin-bottom: 0; } /* Password fields wrap input + show/hide toggle in span.password-input. Without WC's own CSS it sizes to content + overflows the panel → force full width and anchor the eye toggle inside on the right. */ .batiself-woo--account .woocommerce-EditAccountForm .password-input, .batiself-woo--account .woocommerce-EditAccountForm fieldset .input-text { display: block; width: 100%; max-width: 100%; box-sizing: border-box; } .batiself-woo--account .woocommerce-EditAccountForm .password-input { position: relative; } .batiself-woo--account .woocommerce-EditAccountForm .password-input .show-password-input { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); cursor: pointer; } /* Helper text ("leave blank to leave unchanged", etc.). */ .batiself-woo--account .woocommerce-EditAccountForm em, .batiself-woo--account .woocommerce-MyAccount-content .description { display: block; margin-top: 4px; color: var(--bs-color-muted); font-style: normal; font-size: var(--bs-type-body-sm-size); line-height: var(--bs-type-body-sm-leading); } /* Address edit form: name fields side-by-side too. */ .batiself-woo--account .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bs-space-sm) var(--bs-space-md); } .batiself-woo--account .woocommerce-address-fields__field-wrapper .form-row { float: none; width: auto; margin: 0; grid-column: 1 / -1; } .batiself-woo--account .woocommerce-address-fields__field-wrapper .form-row-first { grid-column: 1; } .batiself-woo--account .woocommerce-address-fields__field-wrapper .form-row-last { grid-column: 2; } @media (max-width: 600px) { .batiself-woo--account .woocommerce-EditAccountForm, .batiself-woo--account .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; } .batiself-woo--account .woocommerce-EditAccountForm > .form-row-first, .batiself-woo--account .woocommerce-EditAccountForm > .form-row-last, .batiself-woo--account .woocommerce-address-fields__field-wrapper .form-row-first, .batiself-woo--account .woocommerce-address-fields__field-wrapper .form-row-last { grid-column: 1; } } /* Login + Register columns (when both shown). Scoped to #customer_login (the login/register container) so these rules do NOT bleed onto the edit-address page — there the address wrapper ALSO carries .u-columns/.col2-set, which would otherwise paint the address cards bg-alt and break their dedicated .woocommerce-Address styling. */ .batiself-woo--account #customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bs-space-lg); } /* Neutralise the WC clearfix pseudo-elements (#customer_login is .col2-set) — in display:grid they become phantom items that throw the two columns into a diagonal layout (login top-right, register bottom-left). */ .batiself-woo--account #customer_login::before, .batiself-woo--account #customer_login::after { content: none !important; display: none !important; } .batiself-woo--account #customer_login > .col-1, .batiself-woo--account #customer_login > .col-2 { width: auto !important; float: none; margin: 0; background: #fff; border: 1px solid var(--bs-color-border); border-top: 4px solid var(--bs-color-primary); border-radius: 0; padding: var(--bs-space-lg); box-shadow: 0 6px 18px rgba(16, 54, 86, .04); } .batiself-woo--account #customer_login h2 { margin-top: 0; margin-bottom: var(--bs-space-md); color: var(--bs-color-primary); font-size: var(--bs-type-h3-size); font-weight: var(--bs-weight-bold); letter-spacing: var(--bs-type-h3-tracking); text-transform: none; } @media (max-width: 700px) { .batiself-woo--account #customer_login { grid-template-columns: 1fr; } } /* ── Login / Register form controls → charte ───────────────────────────── */ .batiself-woo--account #customer_login label, .batiself-woo--account form.woocommerce-form-login label, .batiself-woo--account form.woocommerce-form-register label { display: block; margin-bottom: 6px; color: var(--bs-color-text); font-weight: var(--bs-weight-medium); font-size: var(--bs-type-body-sm-size); } .batiself-woo--account #customer_login .woocommerce-form__label-for-checkbox { display: inline-flex; } .batiself-woo--account #customer_login .input-text, .batiself-woo--account form.woocommerce-form-login .input-text, .batiself-woo--account form.woocommerce-form-register .input-text { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--bs-color-border); border-radius: 0; background: #fff; color: var(--bs-color-text); font-family: var(--bs-font-family); font-size: var(--bs-type-body-size); transition: border-color .15s ease, box-shadow .15s ease; } .batiself-woo--account #customer_login .input-text:focus { outline: none; border-color: var(--bs-color-primary); box-shadow: 0 0 0 3px rgba(0, 91, 167, .12); } /* Password show/hide eye, kept inside the field. */ .batiself-woo--account .password-input { position: relative; display: block; } .batiself-woo--account .password-input .input-text { padding-right: 44px; } .batiself-woo--account .show-password-input { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; color: var(--bs-color-muted); } /* Submit buttons — full-width charte primary. */ .batiself-woo--account #customer_login .button, .batiself-woo--account form.woocommerce-form-login .button, .batiself-woo--account form.woocommerce-form-register .button { display: block; width: 100%; margin-top: 6px; padding: 13px 24px; background: var(--bs-color-primary); color: #fff; border: 0; border-radius: 0; cursor: pointer; font-family: var(--bs-font-family); font-weight: var(--bs-weight-bold); font-size: var(--bs-type-button-size); letter-spacing: var(--bs-type-button-tracking); text-transform: var(--bs-type-button-case); transition: background .15s ease; } .batiself-woo--account #customer_login .button:hover, .batiself-woo--account form.woocommerce-form-login .button:hover, .batiself-woo--account form.woocommerce-form-register .button:hover { background: var(--bs-color-primary-dark); } .batiself-woo--account #customer_login a { color: var(--bs-color-primary); } .batiself-woo--account #customer_login .woocommerce-privacy-policy-text { color: var(--bs-color-muted); font-size: var(--bs-type-body-sm-size); } /* Standalone login (when only login shown) */ .batiself-woo--account form.woocommerce-form-login { max-width: 480px; margin: 0 auto; background: var(--bs-color-bg-alt); padding: var(--bs-space-lg); } .batiself-woo--account .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: var(--bs-space-xs); margin: var(--bs-space-sm) 0; cursor: pointer; } .batiself-woo--account .lost_password { margin-top: var(--bs-space-sm); } /* ---- Logged-out: reassurance banner above login / register ---------- */ .bs-account-login-intro { grid-column: 1 / -1; background: var(--bs-color-bg-alt); border: 1px solid var(--bs-color-border); border-radius: 0; padding: var(--bs-space-md) var(--bs-space-lg); margin: 0 0 var(--bs-space-lg); } .bs-account-login-intro__lead { margin: 0 0 var(--bs-space-sm); max-width: 720px; color: var(--bs-color-text); font-size: var(--bs-type-lead-size); font-weight: var(--bs-type-lead-weight); line-height: var(--bs-type-lead-leading); } .bs-account-login-intro__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--bs-space-xs) var(--bs-space-lg); } .bs-account-login-intro__perks li { display: inline-flex; align-items: center; gap: 8px; color: var(--bs-color-muted); font-size: var(--bs-type-body-sm-size); line-height: var(--bs-type-body-sm-leading); } .bs-account-login-intro__perks svg { color: var(--bs-color-primary); flex-shrink: 0; } /* ========================================================================= MY ACCOUNT — DASHBOARD LANDING (hook-rendered blocks, inc/account.php) ========================================================================= */ .bs-account-dash { display: flex; flex-direction: column; gap: var(--bs-space-lg); margin-top: var(--bs-space-md); } /* Quick-access cards */ .bs-account-quick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bs-space-sm); } @media (max-width: 700px) { .bs-account-quick { grid-template-columns: repeat(2, 1fr); } } .bs-account-quick__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--bs-space-xs); padding: var(--bs-space-md); background: #fff; border: 1px solid var(--bs-color-border); border-radius: 0; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .bs-account-quick__card:hover { border-color: var(--bs-color-primary); box-shadow: 0 8px 24px rgba(16, 54, 86, .06); } .bs-account-quick__icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: var(--bs-color-bg-alt); color: var(--bs-color-primary); border-radius: 10px; } .bs-account-quick__label { color: var(--bs-color-primary-dark); font-size: var(--bs-type-body-sm-size); font-weight: var(--bs-weight-bold); line-height: var(--bs-leading-snug); } /* Panels (recent orders, info, address, help, retrait) */ .bs-account-panel { background: #fff; border: 1px solid var(--bs-color-border); border-radius: 0; padding: var(--bs-space-lg); } .bs-account-panel--accent { background: var(--bs-color-bg-alt); border-color: var(--bs-color-primary); } .bs-account-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bs-space-sm); margin-bottom: var(--bs-space-sm); } .bs-account-panel__title { margin: 0; color: var(--bs-color-primary); font-size: var(--bs-type-h4-size); font-weight: var(--bs-type-h4-weight); letter-spacing: var(--bs-type-h4-tracking); text-transform: var(--bs-type-h4-case); } .bs-account-panel__link { color: var(--bs-color-primary); text-decoration: none; font-size: var(--bs-type-button-size); font-weight: var(--bs-type-button-weight); letter-spacing: var(--bs-tracking-wide); text-transform: uppercase; } .bs-account-panel__link:hover { color: var(--bs-color-primary-dark); } .bs-account-panel__line { margin: 0 0 4px; color: var(--bs-color-text); font-size: var(--bs-type-body-sm-size); line-height: var(--bs-type-body-sm-leading); } .bs-account-panel__actions { display: flex; align-items: center; gap: var(--bs-space-md); flex-wrap: wrap; margin-top: var(--bs-space-sm); } .bs-account-empty { color: var(--bs-color-muted); } .bs-account-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bs-space-md); } @media (max-width: 700px) { .bs-account-grid2 { grid-template-columns: 1fr; } } /* Recent orders list */ .bs-account-order-list { list-style: none; margin: 0; padding: 0; } .bs-account-order { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: var(--bs-space-sm) var(--bs-space-md); padding: var(--bs-space-sm) 0; border-top: 1px solid var(--bs-color-border); } .bs-account-order:first-child { border-top: 0; } .bs-account-order__num { color: var(--bs-color-primary-dark); font-size: var(--bs-type-body-sm-size); font-weight: var(--bs-weight-bold); } .bs-account-order__date { color: var(--bs-color-muted); font-size: var(--bs-type-body-sm-size); } .bs-account-order__status { padding: 3px 10px; border-radius: 999px; background: var(--bs-color-bg-alt); color: var(--bs-color-primary-dark); font-size: 11px; font-weight: var(--bs-weight-semibold); white-space: nowrap; } .bs-account-order__status--completed { background: rgba(0, 91, 167, .1); color: var(--bs-color-primary); } .bs-account-order__status--processing { background: rgba(250, 184, 0, .18); color: #7a5b00; } .bs-account-order__status--cancelled, .bs-account-order__status--failed { background: rgba(0, 0, 0, .06); color: var(--bs-color-muted); } .bs-account-order__total { color: var(--bs-color-text); font-size: var(--bs-type-body-sm-size); font-weight: var(--bs-weight-semibold); white-space: nowrap; } .bs-account-order__view { color: var(--bs-color-primary); text-decoration: none; font-size: var(--bs-type-button-size); font-weight: var(--bs-type-button-weight); letter-spacing: var(--bs-tracking-wide); text-transform: uppercase; white-space: nowrap; } .bs-account-order__view:hover { color: var(--bs-color-primary-dark); } @media (max-width: 600px) { .bs-account-order { grid-template-columns: 1fr auto; gap: 4px var(--bs-space-sm); } .bs-account-order__date { grid-column: 1; } .bs-account-order__status { grid-column: 2; grid-row: 1; justify-self: end; } .bs-account-order__view { grid-column: 2; } } /* ========================================================================= WISHLIST PAGE ========================================================================= */ .batiself-wishlist { background: #fff; } .bs-wishlist-hero { background: var(--bs-color-bg-alt); padding: var(--bs-space-xl) 0 var(--bs-space-lg); border-bottom: 1px solid var(--bs-color-border); } .bs-wishlist-hero__eyebrow { margin: 0 0 var(--bs-space-xs); color: var(--bs-color-muted); font-size: var(--bs-type-eyebrow-size); font-weight: var(--bs-type-eyebrow-weight); letter-spacing: var(--bs-type-eyebrow-tracking); text-transform: var(--bs-type-eyebrow-case); } .bs-wishlist-hero__title { margin: 0 0 var(--bs-space-sm); color: var(--bs-color-primary); font-size: var(--bs-type-h1-size); font-weight: var(--bs-type-h1-weight); letter-spacing: var(--bs-type-h1-tracking); text-transform: var(--bs-type-h1-case); } .bs-wishlist-hero__intro { margin: 0; max-width: 640px; color: var(--bs-color-text); font-size: var(--bs-type-body-size); line-height: var(--bs-type-body-leading); } .bs-wishlist-section { padding: var(--bs-section-pad-y) 0; } .bs-wishlist-empty { text-align: center; padding: var(--bs-space-xl) 0; } .bs-wishlist-empty .home-section__title { color: var(--bs-color-primary); } .bs-wishlist-empty__text { margin: var(--bs-space-sm) auto var(--bs-space-lg); max-width: 520px; color: var(--bs-color-muted); font-size: var(--bs-type-body-size); line-height: var(--bs-type-body-leading); } .bs-wishlist-empty__ctas { display: flex; justify-content: center; gap: var(--bs-space-sm); flex-wrap: wrap; } .bs-wishlist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bs-space-md); list-style: none; margin: 0; padding: 0; } @media (max-width: 1100px) { .bs-wishlist-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .bs-wishlist-grid { grid-template-columns: repeat(2, 1fr); } } .bs-wishlist-grid > li { display: flex; min-width: 0; } .bs-wishlist-grid > li > .product-card { flex: 1 1 auto; } .bs-wishlist-loading { padding: var(--bs-space-lg); text-align: center; color: var(--bs-color-muted); font-size: var(--bs-type-body-sm-size); } /* ========================================================================= WOOCOMMERCE BLOCKS — CART PAGE (visuals only, NO layout override) --------------------------------------------------------------------------- The cart now uses block markup (.wp-block-woocommerce-cart → .wc-block-cart…). The 2-column layout is provided natively by WooCommerce — we DO NOT override it (that's what broke the previous attempt: a grid set on .wc-block-cart fought WC's flex columns, ratatining the right sidebar). Here we only re-style the visible visuals inside. Scoped to .batiself-woo--cart so nothing leaks onto the checkout block. ========================================================================= */ /* ---- Items table — typography + spacing only, layout untouched ------- */ .batiself-woo--cart .wc-block-cart-items { background: transparent; border: 0; } .batiself-woo--cart .wc-block-cart-items thead th, .batiself-woo--cart .wc-block-cart-items__header-image, .batiself-woo--cart .wc-block-cart-items__header-product, .batiself-woo--cart .wc-block-cart-items__header-total { background: transparent; border-bottom: 1px solid var(--bs-color-border); color: var(--bs-color-muted); font-family: var(--bs-font-family); font-size: var(--bs-type-h4-size); font-weight: var(--bs-type-h4-weight); letter-spacing: var(--bs-type-h4-tracking); text-transform: var(--bs-type-h4-case); } .batiself-woo--cart .wc-block-cart-items__row { border-bottom: 1px solid var(--bs-color-border); } /* Image — flat thumbnail (charte droite). */ .batiself-woo--cart .wc-block-cart-item__image img, .batiself-woo--cart td.wc-block-cart-item__image img { background: var(--bs-color-bg-alt); border: 1px solid var(--bs-color-border); border-radius: 0; } /* Product cell typography. */ .batiself-woo--cart .wc-block-cart-item__product a.wc-block-components-product-name, .batiself-woo--cart .wc-block-cart-item__product .wc-block-components-product-name { color: var(--bs-color-text); font-family: var(--bs-font-family); font-size: var(--bs-type-body-size); font-weight: var(--bs-weight-bold); line-height: var(--bs-leading-snug); letter-spacing: 0; text-transform: none; text-decoration: none; } .batiself-woo--cart .wc-block-cart-item__product a.wc-block-components-product-name:hover { color: var(--bs-color-primary); } .batiself-woo--cart .wc-block-cart-item__product .wc-block-components-product-price { color: var(--bs-color-text); font-size: var(--bs-type-body-size); font-weight: var(--bs-weight-medium); } .batiself-woo--cart .wc-block-cart-item__product .wc-block-components-product-metadata, .batiself-woo--cart .wc-block-cart-item__product .wc-block-components-product-metadata__description { color: var(--bs-color-muted); font-size: var(--bs-type-body-sm-size); line-height: var(--bs-leading-snug); } /* Quantity stepper — pill, sized to its content (not stretched). The !important neutralises any inherited block flex that would make the stepper grow to fill the row width (cause of the previous bug). */ .batiself-woo--cart .wc-block-components-quantity-selector { display: inline-flex !important; width: auto; max-width: 130px; align-items: stretch; background: #fff; border: 1px solid var(--bs-color-border); border-radius: 999px; overflow: hidden; } .batiself-woo--cart .wc-block-cart-item__quantity { max-width: 100%; } .batiself-woo--cart .wc-block-components-quantity-selector__button { width: 32px; background: transparent; border: 0; cursor: pointer; color: var(--bs-color-text); font-family: var(--bs-font-family); font-size: 16px; line-height: 1; } .batiself-woo--cart .wc-block-components-quantity-selector__button:hover { background: var(--bs-color-bg-alt); } .batiself-woo--cart .wc-block-components-quantity-selector__input { width: 40px; padding: 6px 4px; background: transparent; border: 0; border-left: 1px solid var(--bs-color-border); border-right: 1px solid var(--bs-color-border); text-align: center; font-family: var(--bs-font-family); font-size: var(--bs-type-body-size); color: var(--bs-color-text); } /* Remove (Supprimer l'élément) — discreet underlined link. */ .batiself-woo--cart .wc-block-cart-item__remove-link { display: inline-block; margin-top: var(--bs-space-xs); padding: 0; background: transparent; border: 0; color: var(--bs-color-muted); text-decoration: underline; text-underline-offset: 3px; font-family: var(--bs-font-family); font-size: var(--bs-type-body-sm-size); font-weight: var(--bs-weight-medium); cursor: pointer; } .batiself-woo--cart .wc-block-cart-item__remove-link:hover { color: var(--bs-color-primary); } /* Total column. */ .batiself-woo--cart .wc-block-cart-item__total .wc-block-components-product-price { color: var(--bs-color-text); font-size: var(--bs-type-body-size); font-weight: var(--bs-weight-bold); } /* ---- Right side — paint ONLY the order-summary block as the card. No bg/padding on the outer wrapper (that previously hijacked the whole page bg and squashed the column). */ .batiself-woo--cart .wp-block-woocommerce-cart-order-summary-block { background: var(--bs-color-bg-alt); border: 1px solid var(--bs-color-border); border-top: 4px solid var(--bs-color-primary); border-radius: 0; padding: var(--bs-space-lg); box-shadow: 0 6px 18px rgba(16, 54, 86, .04); } /* Section headings inside the card. */ .batiself-woo--cart .wp-block-woocommerce-cart-order-summary-block h2, .batiself-woo--cart .wp-block-woocommerce-cart-order-summary-heading-block { margin: 0 0 var(--bs-space-sm); color: var(--bs-color-primary); font-family: var(--bs-font-family); font-size: var(--bs-type-h4-size); font-weight: var(--bs-type-h4-weight); letter-spacing: var(--bs-type-h4-tracking); text-transform: var(--bs-type-h4-case); } /* Totals rows. */ .batiself-woo--cart .wc-block-components-totals-item { color: var(--bs-color-text); font-size: var(--bs-type-body-size); border-bottom: 1px solid var(--bs-color-border); padding: var(--bs-space-sm) 0; } .batiself-woo--cart .wc-block-components-totals-item:last-child { border-bottom: 0; } .batiself-woo--cart .wc-block-components-totals-item__label { color: var(--bs-color-text); text-transform: none; font-weight: var(--bs-weight-medium); letter-spacing: 0; } .batiself-woo--cart .wc-block-components-totals-item__value { font-weight: var(--bs-weight-bold); } /* Coupon link / expand panel. */ .batiself-woo--cart .wc-block-components-totals-coupon-link, .batiself-woo--cart .wc-block-components-totals-coupon__button { color: var(--bs-color-primary); font-family: var(--bs-font-family); font-size: var(--bs-type-body-sm-size); font-weight: var(--bs-weight-bold); letter-spacing: var(--bs-tracking-wide); text-transform: uppercase; text-decoration: none; } .batiself-woo--cart .wc-block-components-totals-coupon-link:hover, .batiself-woo--cart .wc-block-components-totals-coupon__button:hover { color: var(--bs-color-primary-dark); } /* Final "Total estimé" row. */ .batiself-woo--cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--bs-color-primary); font-weight: var(--bs-weight-bold); text-transform: uppercase; letter-spacing: var(--bs-type-h4-tracking); } .batiself-woo--cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--bs-color-primary); font-size: var(--bs-type-h3-size); font-weight: var(--bs-weight-black); } /* Checkout submit button — Batiself primary Blue pill. */ .batiself-woo--cart .wp-block-woocommerce-proceed-to-checkout-block { margin-top: var(--bs-space-md); } .batiself-woo--cart .wc-block-cart__submit-button, .batiself-woo--cart a.wc-block-cart__submit-button, .batiself-woo--cart .wp-block-woocommerce-proceed-to-checkout-block a { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px 32px; background: var(--bs-color-primary); color: #fff; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; transition: background .2s ease; font-family: var(--bs-font-family); font-size: var(--bs-type-button-size); font-weight: var(--bs-type-button-weight); line-height: var(--bs-type-button-leading); letter-spacing: var(--bs-type-button-tracking); text-transform: var(--bs-type-button-case); } .batiself-woo--cart .wc-block-cart__submit-button:hover, .batiself-woo--cart a.wc-block-cart__submit-button:hover, .batiself-woo--cart .wp-block-woocommerce-proceed-to-checkout-block a:hover { background: var(--bs-color-primary-dark); color: #fff; } /* Force WHITE text on every nested span/text node inside the button — recent WC Blocks wrap the label in which has its own inherited color from the page anchor rule. */ .batiself-woo--cart .wc-block-cart__submit-button, .batiself-woo--cart .wc-block-cart__submit-button *, .batiself-woo--cart .wp-block-woocommerce-proceed-to-checkout-block a, .batiself-woo--cart .wp-block-woocommerce-proceed-to-checkout-block a * { color: #fff; } /* ========================================================================= WOOCOMMERCE BLOCKS — CHECKOUT PAGE (/commander/) --------------------------------------------------------------------------- The checkout uses block markup (.wc-block-checkout). WC provides the 2-column sidebar layout natively — we DO NOT override it (same lesson as the cart: fighting WC's flex columns breaks the sidebar). We only re-skin the visible components to the Batiself charte. Everything is scoped to .batiself-woo--checkout so nothing leaks onto the cart block (which shares many .wc-block-components-* class names). Conventions reused: - form inputs → contact form (12/14 padding, radius 10, brand-blue focus ring 0 0 0 3px rgba(0,91,167,.15)) - summary card / pill submit → the cart block above - colors / type / spacing → tokens.css only ========================================================================= */ /* ---- Step blocks: branded titles + thin separators (no heavy boxes) --- */ .batiself-woo--checkout .wc-block-components-checkout-step { border: 0; margin: 0 0 var(--bs-space-lg); padding: 0 0 var(--bs-space-lg); border-bottom: 1px solid var(--bs-color-border); } .batiself-woo--checkout .wc-block-components-checkout-step:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .batiself-woo--checkout .wc-block-components-checkout-step__title, .batiself-woo--checkout .wc-block-components-checkout-step__heading .wc-block-components-title { margin: 0; color: var(--bs-color-primary); font-family: var(--bs-font-family); font-size: var(--bs-type-h3-size); font-weight: var(--bs-weight-bold); line-height: var(--bs-type-h3-leading); letter-spacing: 0; text-transform: none; } .batiself-woo--checkout .wc-block-components-checkout-step__description { color: var(--bs-color-muted); font-size: var(--bs-type-body-sm-size); line-height: var(--bs-type-body-sm-leading); } /* ---- Text inputs + selects + textarea ------------------------------- Branded, comfortable fields: a soft light-blue (bg-alt) at rest so they read as part of the Batiself charte, lifting to WHITE + a brand-blue ring on focus. The floating label is muted at rest and turns brand-blue once it lifts (active / focus). 2px border so the field has more presence. */ .batiself-woo--checkout .wc-block-components-text-input input, .batiself-woo--checkout .wc-block-components-textarea, .batiself-woo--checkout .wc-blocks-components-select__select { box-sizing: border-box; background: var(--bs-color-bg-alt); border: 2px solid var(--bs-color-border); border-radius: 12px; color: var(--bs-color-text); font-family: var(--bs-font-family); font-size: var(--bs-type-body-size); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } /* Taller, more substantial single-line fields. */ .batiself-woo--checkout .wc-block-components-text-input input, .batiself-woo--checkout .wc-blocks-components-select__select { min-height: 56px; } .batiself-woo--checkout .wc-block-components-textarea { min-height: 104px; } /* Hover — hint the field is interactive. */ .batiself-woo--checkout .wc-block-components-text-input input:hover, .batiself-woo--checkout .wc-block-components-textarea:hover, .batiself-woo--checkout .wc-blocks-components-select__select:hover { border-color: rgba(0, 91, 167, .45); } /* Focus — white field + brand-blue border + soft ring. */ .batiself-woo--checkout .wc-block-components-text-input input:focus, .batiself-woo--checkout .wc-block-components-textarea:focus, .batiself-woo--checkout .wc-blocks-components-select__select:focus { outline: none; background: #fff; border-color: var(--bs-color-primary); box-shadow: 0 0 0 4px rgba(0, 91, 167, .14); } /* Placeholder tone. */ .batiself-woo--checkout .wc-block-components-text-input input::placeholder, .batiself-woo--checkout .wc-block-components-textarea::placeholder { color: rgba(0, 0, 0, .4); } /* Floating labels — muted at rest, brand-blue + medium once lifted/focus. */ .batiself-woo--checkout .wc-block-components-text-input label, .batiself-woo--checkout .wc-blocks-components-select__label { color: var(--bs-color-muted); font-family: var(--bs-font-family); } .batiself-woo--checkout .wc-block-components-text-input.is-active label, .batiself-woo--checkout .wc-block-components-text-input:focus-within label, .batiself-woo--checkout .wc-block-components-country-input:focus-within .wc-blocks-components-select__label { color: var(--bs-color-primary); font-weight: var(--bs-weight-medium); } /* Select chevron — neutral, turns brand-blue on focus. */ .batiself-woo--checkout .wc-blocks-components-select__expand { fill: var(--bs-color-muted); transition: fill .2s ease; } .batiself-woo--checkout .wc-blocks-components-select:focus-within .wc-blocks-components-select__expand { fill: var(--bs-color-primary); } /* "+ Ajouter appartement, suite…" toggle. */ .batiself-woo--checkout .wc-block-components-address-form__address_2-toggle { color: var(--bs-color-primary); font-weight: var(--bs-weight-semibold); } .batiself-woo--checkout .wc-block-components-address-form__address_2-toggle:hover { color: var(--bs-color-primary-dark); } /* ---- Saved-address summary card + "Modifier" link ------------------- */ .batiself-woo--checkout .wc-block-components-address-card { background: var(--bs-color-bg-alt); border: 1px solid var(--bs-color-border); border-radius: 0; padding: var(--bs-space-md); } .batiself-woo--checkout .wc-block-components-address-card address { color: var(--bs-color-text); font-style: normal; } .batiself-woo--checkout .wc-block-components-address-card__edit { color: var(--bs-color-primary); font-family: var(--bs-font-family); font-size: var(--bs-type-body-sm-size); font-weight: var(--bs-weight-bold); letter-spacing: var(--bs-tracking-wide); text-transform: uppercase; text-decoration: none; cursor: pointer; } .batiself-woo--checkout .wc-block-components-address-card__edit:hover { color: var(--bs-color-primary-dark); } /* ---- "Expédier / Retrait" delivery-method toggle -------------------- */ .batiself-woo--checkout .wc-block-checkout__shipping-method-container { gap: var(--bs-space-sm); } .batiself-woo--checkout .wc-block-checkout__shipping-method-option { background: #fff; border: 1px solid var(--bs-color-border); border-radius: 10px; color: var(--bs-color-text); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .batiself-woo--checkout .wc-block-checkout__shipping-method-option:hover { border-color: var(--bs-color-primary); } .batiself-woo--checkout .wc-block-checkout__shipping-method-option--selected { border-color: var(--bs-color-primary); background: var(--bs-color-bg-alt); box-shadow: inset 0 0 0 1px var(--bs-color-primary); } .batiself-woo--checkout .wc-block-checkout__shipping-method-option-icon { color: var(--bs-color-primary); fill: currentColor; } .batiself-woo--checkout .wc-block-checkout__shipping-method-option-title { color: var(--bs-color-text); font-weight: var(--bs-weight-semibold); } /* ---- Shipping-rate radio options ------------------------------------ */ .batiself-woo--checkout .wc-block-components-radio-control__option { border: 1px solid var(--bs-color-border); border-radius: 10px; margin-bottom: var(--bs-space-xs); padding-top: var(--bs-space-sm); padding-bottom: var(--bs-space-sm); } .batiself-woo--checkout .wc-block-components-radio-control__option:last-child { margin-bottom: 0; } .batiself-woo--checkout .wc-block-components-radio-control__option-checked, .batiself-woo--checkout .wc-block-components-radio-control__option--checked-option-highlighted { border-color: var(--bs-color-primary); background: var(--bs-color-bg-alt); } .batiself-woo--checkout .wc-block-components-radio-control__input { accent-color: var(--bs-color-primary); } .batiself-woo--checkout .wc-block-components-radio-control__input:checked { border-color: var(--bs-color-primary); } .batiself-woo--checkout .wc-block-components-radio-control__label { color: var(--bs-color-text); font-weight: var(--bs-weight-medium); } /* "Gratuit" secondary label — brand-blue, confident. */ .batiself-woo--checkout .wc-block-checkout__shipping-option--free, .batiself-woo--checkout .wc-block-components-radio-control__secondary-label { color: var(--bs-color-primary); font-weight: var(--bs-weight-bold); } /* ---- Checkboxes (use same address, order note, terms) --------------- */ .batiself-woo--checkout .wc-block-components-checkbox__input { accent-color: var(--bs-color-primary); } .batiself-woo--checkout .wc-block-components-checkbox__input:checked { background: var(--bs-color-primary); border-color: var(--bs-color-primary); } .batiself-woo--checkout .wc-block-components-checkbox__mark { fill: #fff; } .batiself-woo--checkout .wc-block-components-checkbox__label { color: var(--bs-color-text); font-size: var(--bs-type-body-sm-size); line-height: var(--bs-type-body-sm-leading); } /* ---- Notices (e.g. "Aucun moyen de paiement disponible") ------------ */ .batiself-woo--checkout .wc-block-components-notice-banner { border-radius: 10px; font-family: var(--bs-font-family); font-size: var(--bs-type-body-sm-size); } /* ---- Terms / privacy line ------------------------------------------- */ .batiself-woo--checkout .wc-block-checkout__terms { color: var(--bs-color-muted); font-size: var(--bs-type-body-sm-size); line-height: var(--bs-type-body-sm-leading); } /* ---- Actions row: "Commander" pill + "Retour au panier" link -------- */ .batiself-woo--checkout .wc-block-components-button.wc-block-components-checkout-place-order-button, .batiself-woo--checkout button.wc-block-components-checkout-place-order-button { min-width: 220px; padding: 16px 36px; background: var(--bs-color-primary); color: #fff; border: 0; border-radius: 999px; cursor: pointer; transition: background .2s ease; font-family: var(--bs-font-family); font-size: var(--bs-type-button-size); font-weight: var(--bs-type-button-weight); line-height: var(--bs-type-button-leading); letter-spacing: var(--bs-type-button-tracking); text-transform: var(--bs-type-button-case); } .batiself-woo--checkout .wc-block-components-checkout-place-order-button:hover, .batiself-woo--checkout button.wc-block-components-checkout-place-order-button:hover { background: var(--bs-color-primary-dark); } .batiself-woo--checkout .wc-block-components-checkout-place-order-button, .batiself-woo--checkout .wc-block-components-checkout-place-order-button * { color: #fff; } .batiself-woo--checkout a.wc-block-components-checkout-return-to-cart-button { color: var(--bs-color-muted); font-family: var(--bs-font-family); font-size: var(--bs-type-body-sm-size); font-weight: var(--bs-weight-medium); text-decoration: none; } .batiself-woo--checkout a.wc-block-components-checkout-return-to-cart-button:hover { color: var(--bs-color-primary); } .batiself-woo--checkout .wc-block-components-checkout-return-to-cart-button svg { fill: currentColor; } /* ========================================================================= CHECKOUT SIDEBAR — order summary card ========================================================================= */ .batiself-woo--checkout .wc-block-checkout__sidebar { background: var(--bs-color-bg-alt); border: 1px solid var(--bs-color-border); border-top: 4px solid var(--bs-color-primary); border-radius: 0; padding: var(--bs-space-lg); box-shadow: 0 6px 18px rgba(16, 54, 86, .04); } /* Summary title (the heading + collapse toggle on mobile). */ .batiself-woo--checkout .wc-block-components-checkout-order-summary__title-text { color: var(--bs-color-primary); font-family: var(--bs-font-family); font-size: var(--bs-type-h4-size); font-weight: var(--bs-type-h4-weight); letter-spacing: var(--bs-type-h4-tracking); text-transform: var(--bs-type-h4-case); } .batiself-woo--checkout .wc-block-components-checkout-order-summary__title-price { color: var(--bs-color-primary); font-weight: var(--bs-weight-bold); } /* ---- Line items ----------------------------------------------------- */ .batiself-woo--checkout .wc-block-components-order-summary-item__image img { background: #fff; border: 1px solid var(--bs-color-border); border-radius: 0; } .batiself-woo--checkout .wc-block-components-order-summary-item__quantity { background: var(--bs-color-primary); color: #fff; border: 0; } .batiself-woo--checkout .wc-block-components-order-summary-item__quantity span[aria-hidden="true"] { color: #fff; } .batiself-woo--checkout .wc-block-components-product-name { color: var(--bs-color-text); font-family: var(--bs-font-family); font-size: var(--bs-type-body-sm-size); font-weight: var(--bs-weight-bold); line-height: var(--bs-leading-snug); } .batiself-woo--checkout .wc-block-components-order-summary-item__individual-price, .batiself-woo--checkout .wc-block-components-order-summary-item .wc-block-components-product-price__value { color: var(--bs-color-text); font-size: var(--bs-type-body-sm-size); } .batiself-woo--checkout .wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value { font-weight: var(--bs-weight-bold); } .batiself-woo--checkout .wc-block-components-product-metadata, .batiself-woo--checkout .wc-block-components-product-metadata__description { color: var(--bs-color-muted); font-size: var(--bs-type-body-sm-size); line-height: var(--bs-leading-snug); } /* ---- Coupon panel --------------------------------------------------- */ .batiself-woo--checkout .wc-block-components-panel__button { color: var(--bs-color-primary); font-family: var(--bs-font-family); font-size: var(--bs-type-body-sm-size); font-weight: var(--bs-weight-bold); letter-spacing: var(--bs-tracking-wide); text-transform: uppercase; } .batiself-woo--checkout .wc-block-components-panel__button:hover { color: var(--bs-color-primary-dark); } .batiself-woo--checkout .wc-block-components-panel__button-icon { fill: var(--bs-color-primary); } /* ---- Totals rows (shared classes, scoped) --------------------------- */ .batiself-woo--checkout .wc-block-components-totals-item { color: var(--bs-color-text); font-size: var(--bs-type-body-size); padding: var(--bs-space-xs) 0; } .batiself-woo--checkout .wc-block-components-totals-item__label { color: var(--bs-color-text); text-transform: none; font-weight: var(--bs-weight-medium); letter-spacing: 0; } .batiself-woo--checkout .wc-block-components-totals-item__value { font-weight: var(--bs-weight-bold); } /* Final total. */ .batiself-woo--checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--bs-color-primary); font-weight: var(--bs-weight-bold); text-transform: uppercase; letter-spacing: var(--bs-type-h4-tracking); } .batiself-woo--checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value, .batiself-woo--checkout .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value { color: var(--bs-color-primary); font-size: var(--bs-type-h3-size); font-weight: var(--bs-weight-black); } /* ========================================================================= CHECKOUT — RESPONSIVE (tablet + mobile) --------------------------------------------------------------------------- WC sizes the two columns by flex-basis and lets the row wrap; forcing a 100% basis on each makes them STACK cleanly on tablet (we never impose a grid — that's what broke the cart). !important guarantees the stack over WC's container-width "is-large" sizing on tablet viewports. ========================================================================= */ @media (max-width: 1024px) { .batiself-woo--checkout .wc-block-checkout__main, .batiself-woo--checkout .wc-block-checkout__sidebar { flex: 1 1 100% !important; max-width: 100% !important; box-sizing: border-box; } .batiself-woo--checkout .wc-block-checkout__sidebar { margin-top: var(--bs-space-lg); padding: var(--bs-space-md); position: static; /* drop sticky once stacked */ } /* The "Expédier / Retrait" toggle keeps two columns but with room to wrap. */ .batiself-woo--checkout .wc-block-checkout__shipping-method-container { flex-wrap: wrap; } } @media (max-width: 600px) { /* Stack the actions: full-width "Commander", "Retour au panier" centered. */ .batiself-woo--checkout .wc-block-checkout__actions_row { flex-direction: column-reverse; align-items: stretch; gap: var(--bs-space-sm); } .batiself-woo--checkout .wc-block-components-checkout-place-order-button, .batiself-woo--checkout button.wc-block-components-checkout-place-order-button { width: 100%; min-width: 0; } .batiself-woo--checkout a.wc-block-components-checkout-return-to-cart-button { justify-content: center; } /* Single-column delivery-method toggle on phones. */ .batiself-woo--checkout .wc-block-checkout__shipping-method-container { flex-direction: column; } } /* Shop « Explorez par univers » — top categories rendered as a swiper rail (slider mode of the .bs-categories component). Keeps the category cards at their natural height and gives the scrollbar some breathing room. */ .bs-categories-swiper { width: 100%; } .bs-categories-swiper .swiper-slide.bs-category-card { height: auto; margin: 0; } .bs-categories-swiper .swiper-scrollbar { margin-top: 16px; } /* ── Saferpay block-checkout : option de paiement sélectionnée ────────────── 1) L'option cochée = UNE seule boîte à la charte (ligne + contenu déplié) : on neutralise la bordure noire par défaut des blocs WooCommerce + la bordure dupliquée du label interne. 2) Saferpay injecte dans le contenu déplié un