/* ================================================================= Full-width WooCommerce — Divi Caviar Child v3.19.3 File: divi-caviar-child/assets/css/fullwidth-woo.css Loaded by inc/enqueue.php on cart, checkout, and my-account pages. In v3.19.3 this file scopes the CART page only — checkout and my-account get their rules in a future pass. Body classes the rules attach to: - WooCommerce: .woocommerce-cart, .woocommerce, .woocommerce-page - This theme: .caviar-woo-fullwidth (added by the body_class filter in inc/enqueue.php when is_cart() returns true), .caviar-ihoc-page Load order: tokens.css -> global.css -> fullwidth-woo.css. No !important required for new rules. Where existing Divi defaults need to be overridden specifically, that is called out per block. ================================================================= */ /* ---------- 1. Page chrome (full-width container, ivory bg) ---------- */ /* Suppress the Divi sidebar slot on cart so totals can occupy the right rail without competing with et_right_sidebar. */ body.caviar-woo-fullwidth.woocommerce-cart #sidebar { display: none; } body.caviar-woo-fullwidth.woocommerce-cart #left-area { width: 100%; padding-right: 0; float: none; } /* Cart-page container override (v3.19.5). * * The IHOC default page template (page.php) wraps content in *
. ihoc-overrides.css caps that * wrapper at max-width: 760px — intended for narrow text pages like * /about-us/, /policies/*, etc. The cart needs the full container * width to fit the line-items table + totals box side-by-side. * * Specificity must beat ihoc-overrides.css's * body.caviar-ihoc-page .caviar-page-content { max-width: 760px; } * (both rules are 0,2,1). ihoc-overrides.css loads after this file, * so we need an extra class to win the cascade. The double body-class * selector below has specificity 0,3,1 — wins without !important. */ body.caviar-woo-fullwidth.woocommerce-cart .caviar-page-content { max-width: var(--caviar-container); } /* Container width matches the homepage hero/wrappers (--caviar-container). * v3.19.16: padding-bottom reduced 64px -> 24px per user feedback on excess * bottom whitespace. v3.19.21: zeroed entirely — user still saw a gap above * the footer. The navy footer band (.caviar-trust-strip) carries its own * internal padding, so the cart content meets it cleanly without this. */ body.woocommerce-cart .entry-content, body.woocommerce-cart .woocommerce { max-width: var(--caviar-container); width: 100%; margin-left: auto; margin-right: auto; padding-top: var(--caviar-space-12); padding-bottom: 0; padding-left: var(--caviar-space-6); padding-right: var(--caviar-space-6); } /* Note (v3.19.15): an earlier attempt zeroed .woocommerce padding-bottom * via `:has(.caviar-empty-extras)` but that selector never matched — * the YMAL section is rendered by a separate shortcode AFTER the cart * shortcode, so it's a SIBLING of .woocommerce inside * .et_builder_inner_content, NOT a descendant. The actual source of * the whitespace below the YMAL section was .caviar-page-main's * padding-bottom: 5rem from ihoc-overrides.css. Now zeroed via the * existing .caviar-page-main override below (next block). */ /* ---------- 2. Page heading (intentionally empty — v3.19.9) ---------- */ /* The cart page heading uses the canonical IHOC pattern via the page * content itself:

+

* +
inside a
* wrapper. Those classes are defined in ihoc.css (Tailwind) and shared * with the shop archive / shop page. No cart-specific h1 styling here — * if the heading drifts from the rest of the site, fix the source class * (.section-heading) in ihoc.css, not here. */ /* ---------- 2a. Full-bleed escape for breadcrumb + hero (v3.19.10) ---------- */ /* The shop archive's breadcrumb-bar and shop-hero render edge-to-edge * because page-shop.php / archive-product.php do NOT wrap content in * `.caviar-page-content` (which is the IHOC narrow text container at * max-width: 1200px). On cart we DO render through page.php, which * does wrap in `.caviar-page-content`. To match the shop's visual * pattern without editing the template, break the breadcrumb-bar and * hero section out to full viewport width with the standard negative- * margin trick. The inner `.max-w-[1280px]` Tailwind div on each * element keeps the *content* centered to 1280px; only the colored * background escapes to the viewport edges. */ body.caviar-woo-fullwidth.woocommerce-cart .caviar-breadcrumb-bar, body.caviar-woo-fullwidth.woocommerce-cart .caviar-shop-hero, body.caviar-woo-fullwidth.woocommerce-cart .caviar-empty-extras { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; box-sizing: border-box; } /* The empty-cart YMAL / cross-sell section (.caviar-empty-extras) carries * Tailwind `py-16` (4rem top + bottom). The wrapper zero-out below * (.caviar-page-main / .et-l / …) doesn't reach this section, so its 4rem * BOTTOM padding was the residual gap above the footer. Keep the top * padding (separates the grid from the empty-cart message), zero the * bottom so the gray section meets the footer directly. */ body.caviar-woo-fullwidth.woocommerce-cart .caviar-empty-extras { padding-bottom: 0; } /* Zero out top AND bottom padding/margin of every wrapper between *
and the YMAL section on cart: * * - TOP: so the breadcrumb bar sits flush below the site header * (matches the shop archive, which uses page-shop.php / * archive-product.php — those templates don't apply the 5rem top * padding that ihoc-overrides.css adds for narrow text pages). * * - BOTTOM: so the full-bleed YMAL section meets the footer * directly (matches PDP exactly — there, the YMAL section is the * last child of
with no wrapper bottom padding). On * populated cart (YMAL hidden), `.woocommerce`'s padding-bottom * still provides breathing room above the footer, so the wrapper * zero-out is safe in both states. * * The cart wrapper chain is: * * * * * …breadcrumb / hero / [woocommerce_cart] / YMAL… * * ihoc-overrides.css adds 4-5rem padding on .caviar-page-main and * Divi adds default padding on .et_builder_inner_content. Both * would leave residual white below the gray YMAL background — so * we zero them all. * * ihoc-overrides.css: `body.caviar-ihoc-page .caviar-page-main * { padding: 4rem 1rem }` (and `5rem 2rem` at >=1024px). Spec 0,2,1. * Mine below is 0,3,1 — wins without !important. */ body.caviar-woo-fullwidth.woocommerce-cart .caviar-page-main, body.caviar-woo-fullwidth.woocommerce-cart .caviar-page-content, body.caviar-woo-fullwidth.woocommerce-cart .et-l, body.caviar-woo-fullwidth.woocommerce-cart .et_builder_inner_content { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; } /* v3.19.35 — restore the cart's BOTTOM breathing room so it matches every * other IHOC page. The block above zeroes all wrapper padding (originally to * kill the empty-cart YMAL gap); with YMAL gone, the cart was left meeting * the footer too tightly vs other pages. Re-pin ONLY .caviar-page-main's * bottom padding to the same values ihoc-overrides uses site-wide * (4rem mobile / 5rem desktop). Top stays 0 so the breadcrumb sits flush * below the header like the shop. Specificity 0,3,1 + later in file beats * the zeroing rule above without !important. */ body.caviar-woo-fullwidth.woocommerce-cart .caviar-page-main { padding-bottom: 4rem; } @media (min-width: 1024px) { body.caviar-woo-fullwidth.woocommerce-cart .caviar-page-main { padding-bottom: 5rem; } } /* ---------- 3. Two-column layout (table left, totals right on desktop) ---------- */ /* v3.19.24: the cart now renders through our own template override * (woocommerce/cart/cart.php), which wraps the form + .cart-collaterals in * an explicit `.caviar-cart-layout` grid. Previously the grid lived on * `.woocommerce` and relied on auto-placement + `:has()` / full-bleed * hacks, which left a trailing gap above the footer. The grid is now * deterministic and `.caviar-cart-layout` has no bottom margin, so the * last row meets the footer cleanly. `.woocommerce` itself stays a normal * block (it only wraps the notices + our layout). */ body.woocommerce-cart .caviar-cart-layout { margin: 0; } @media (min-width: 980px) { body.woocommerce-cart .caviar-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; /* totals rail width */ gap: var(--caviar-space-12); align-items: start; } body.woocommerce-cart .caviar-cart-layout > .woocommerce-cart-form { grid-column: 1; min-width: 0; } body.woocommerce-cart .caviar-cart-layout > .cart-collaterals { grid-column: 2; width: 100%; margin-top: 0; } } /* Trailing space guard: zero the bottom margin of the last things in the * totals rail so the grid's tallest column (the totals) ends flush — this * was the residual gap above the footer. */ body.woocommerce-cart .caviar-cart-layout .cart_totals, body.woocommerce-cart .caviar-cart-layout .cart-collaterals, body.woocommerce-cart .caviar-cart-layout .wc-proceed-to-checkout { margin-bottom: 0; } /* ---------- 4. Line-items table ---------- */ body.woocommerce-cart table.shop_table.cart { width: 100%; border-collapse: collapse; border: 1px solid var(--caviar-border); background: var(--caviar-white); font-family: var(--caviar-font-body); color: var(--caviar-charcoal); margin: 0 0 var(--caviar-space-8); /* Fixed layout so we control column widths explicitly. With auto * layout the product-name column was getting squeezed to ~144px * because the browser was distributing widths based on the longest * unbreakable word in each cell — fine for short labels, terrible * for long product names like "Imperial Beluga Sturgeon Caviar, * Giaveri - 10 g" which needs ~280px to wrap to 2-3 lines. */ table-layout: fixed; } /* Explicit column widths (v3.19.10). Six cols totaling ~520px of * fixed width; the rest (product-name) flexes via `width: auto`. * On a 744px form column that gives name ~220-280px. */ body.woocommerce-cart table.shop_table.cart .product-remove { width: 60px; } body.woocommerce-cart table.shop_table.cart .product-thumbnail { width: 110px; } body.woocommerce-cart table.shop_table.cart .product-name { width: auto; } body.woocommerce-cart table.shop_table.cart .product-price { width: 90px; } body.woocommerce-cart table.shop_table.cart .product-quantity { width: 110px; } body.woocommerce-cart table.shop_table.cart .product-subtotal { width: 100px; } body.woocommerce-cart table.shop_table.cart thead th { font-family: var(--caviar-font-body); font-weight: 600; font-size: var(--caviar-fs-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--caviar-muted); text-align: left; padding: var(--caviar-space-4) var(--caviar-space-6); border-bottom: 1px solid var(--caviar-border); background: var(--caviar-cream); } body.woocommerce-cart table.shop_table.cart tbody td { padding: var(--caviar-space-6); border-bottom: 1px solid var(--caviar-border); vertical-align: middle; font-size: var(--caviar-fs-base); } body.woocommerce-cart table.shop_table.cart tbody tr:last-child td { border-bottom: 0; } /* Product thumbnail cell + image (v3.19.8 — defeat WC + IHOC defaults). * * Two conflicts to override: * - WC's `.woocommerce-cart table.cart img { width: 32px }` (0,3,1) * winning the cell-sizing path so the column was only ~28px wide. * - ihoc-overrides' `.caviar-page-content img { max-width: 100% }` * then clamping the image to the now-narrow cell. * * Selector below is 0,4,2 (body.caviar-woo-fullwidth + .woocommerce-cart * + table.shop_table.cart + td.product-thumbnail + img) — beats both. * Setting an explicit cell width prevents the table-layout algorithm * from collapsing the column. object-fit: contain keeps full image * visible (no top/bottom cropping on tall product photos). */ /* Note: td.product-thumbnail cell width is set in the explicit-widths * block above (`.product-thumbnail { width: 110px }`) so all six * columns are defined in one place. The block below only sizes the * inner . */ body.caviar-woo-fullwidth.woocommerce-cart table.shop_table.cart td.product-thumbnail img { width: 88px; height: 88px; max-width: 88px; max-height: 88px; object-fit: contain; display: block; } /* Product name + variation */ body.woocommerce-cart table.shop_table.cart .product-name a { color: var(--caviar-navy); font-weight: 500; text-decoration: none; } body.woocommerce-cart table.shop_table.cart .product-name a:hover { color: var(--caviar-gold); } body.woocommerce-cart table.shop_table.cart .variation { color: var(--caviar-muted); font-size: var(--caviar-fs-sm); margin-top: var(--caviar-space-1); } /* Remove (×) link in the .product-remove cell (v3.19.19): * * Default: red × centered in a cream-dark circle. No underline. * Hover: × turns navy, background stays cream-dark. * * `!important` on hover color: a later-loaded stylesheet (Divi parent * or WC core path) wins the cascade despite our higher selector * specificity, so the bang is the reliable fix. * * Fixed-size inline-flex centers the glyph — WC's default `display: * block; line-height: 1` left it visually offset against the cream * pill now that the pill is visible. */ body.woocommerce-cart table.shop_table.cart .product-remove a { background: var(--caviar-cream-dark); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; } body.woocommerce-cart table.shop_table.cart .product-remove a:hover { color: var(--caviar-navy) !important; background: var(--caviar-cream-dark); } /* Quantity input */ body.woocommerce-cart table.shop_table.cart .quantity input.qty { width: 64px; height: 40px; text-align: center; border: 1px solid var(--caviar-border); font-family: var(--caviar-font-body); font-size: var(--caviar-fs-base); color: var(--caviar-charcoal); background: var(--caviar-white); } body.woocommerce-cart table.shop_table.cart .quantity input.qty:focus { outline: none; border-color: var(--caviar-navy); } /* Price + subtotal cells */ body.woocommerce-cart table.shop_table.cart .product-price, body.woocommerce-cart table.shop_table.cart .product-subtotal { font-weight: 500; color: var(--caviar-navy); } /* ---------- 5. Cart actions row (Update Cart + Coupon) ---------- */ body.woocommerce-cart table.shop_table.cart td.actions { padding: var(--caviar-space-6); background: var(--caviar-ivory); border-top: 1px solid var(--caviar-border); } /* Coupon group: label-style placeholder + small button next to input. */ body.woocommerce-cart .coupon { display: inline-flex; align-items: stretch; gap: var(--caviar-space-2); margin-right: var(--caviar-space-4); } body.woocommerce-cart .coupon label { display: none; } body.woocommerce-cart .coupon input.input-text#coupon_code { height: 44px; padding: 0 var(--caviar-space-4); border: 1px solid var(--caviar-border); font-family: var(--caviar-font-body); font-size: var(--caviar-fs-sm); color: var(--caviar-charcoal); background: var(--caviar-white); min-width: 220px; /* wide enough for a typical coupon code */ } body.woocommerce-cart .coupon input.input-text#coupon_code:focus { outline: none; border-color: var(--caviar-navy); } /* Apply Coupon + Update Cart buttons share the ghost-button look. * Explicit `border-radius: 0` defeats WC's default `button.button * { border-radius: 3px }` (without it, removing the declaration left * the WC default winning). */ body.woocommerce-cart td.actions button[name="apply_coupon"], body.woocommerce-cart td.actions button[name="update_cart"] { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 var(--caviar-space-6); background: transparent; color: var(--caviar-navy); border: 1px solid var(--caviar-navy); border-radius: 0; font-family: var(--caviar-font-body); font-weight: 500; font-size: var(--caviar-fs-xs); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background var(--caviar-dur) var(--caviar-ease), color var(--caviar-dur) var(--caviar-ease); } body.woocommerce-cart td.actions button[name="apply_coupon"]:hover, body.woocommerce-cart td.actions button[name="update_cart"]:hover { background: var(--caviar-navy); color: var(--caviar-white); } body.woocommerce-cart td.actions button[name="update_cart"][disabled] { opacity: 0.5; cursor: not-allowed; } /* ---------- 6. Totals box (right rail / desktop, stacked / mobile) ---------- */ /* Override WC's default float-right + 48% width on the totals box. * woocommerce-layout.css sets `.woocommerce .cart-collaterals .cart_totals * { float: right; width: 48%; }` (specificity 0,3,0). We need 0,3,1 to win, * so the body-class scope below is required (don't drop it). Without this * override the totals box renders ~half the width of an already-narrow * grid column and looks crushed (text wraps one or two chars per line). */ body.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; } body.woocommerce-cart .cart_totals { background: var(--caviar-cream); border: 1px solid var(--caviar-border); padding: var(--caviar-space-8); } body.woocommerce-cart .cart_totals h2 { font-family: var(--caviar-font-heading); font-size: var(--caviar-fs-2xl); color: var(--caviar-navy); margin: 0 0 var(--caviar-space-6); font-weight: 500; letter-spacing: -0.01em; } body.woocommerce-cart .cart_totals table.shop_table { width: 100%; border: 0; background: transparent; border-collapse: collapse; } body.woocommerce-cart .cart_totals table.shop_table th, body.woocommerce-cart .cart_totals table.shop_table td { padding: var(--caviar-space-3) 0; border: 0; border-bottom: 1px solid var(--caviar-border); text-align: left; vertical-align: top; font-size: var(--caviar-fs-base); color: var(--caviar-charcoal); } body.woocommerce-cart .cart_totals table.shop_table tr:last-child th, body.woocommerce-cart .cart_totals table.shop_table tr:last-child td { border-bottom: 0; padding-top: var(--caviar-space-4); font-weight: 600; color: var(--caviar-navy); } body.woocommerce-cart .cart_totals table.shop_table th { font-weight: 500; color: var(--caviar-muted); } body.woocommerce-cart .cart_totals table.shop_table td { text-align: right; } /* Shipping calculator collapsed link */ body.woocommerce-cart .cart_totals .shipping-calculator-button { color: var(--caviar-gold); font-weight: 500; text-decoration: none; } body.woocommerce-cart .cart_totals .shipping-calculator-button:hover { color: var(--caviar-gold-dark); } /* Shipping calculator expanded form (v3.19.16). WC defaults render the * select / input fields at their own intrinsic width, which on the * narrow .cart_totals box looks cramped. Force full-width so the * country / province / city / postal-code inputs span the box. The * select2-container wrapper needs the same treatment to match. * * `!important` is required to win against WC's woocommerce.css default * `width: 12em` on select2 + inline width attrs the WC enhancer sets. */ body.woocommerce-cart .cart_totals .shipping-calculator-form { padding: 0; margin: 0; } /* Hide the Country / Region field — site only ships to Canada and the * store base country is CA, so WC defaults the calc correctly without * user input. Keep the field in the DOM so wc-country-select.js / * cart.js stay wired up (removing the field via the * woocommerce_shipping_calculator_enable_country filter broke the * form in v3.19.18). */ body.woocommerce-cart .cart_totals .shipping-calculator-form #calc_shipping_country_field { display: none; } body.woocommerce-cart .cart_totals .shipping-calculator-form .form-row { width: 100%; max-width: 100%; float: none; margin: 0 0 var(--caviar-space-3); padding: 0; box-sizing: border-box; } /* WC defaults `.form-row-first` / `.form-row-last` to width: 47%; the * shipping-calculator only uses `-wide` but on some setups Divi adds * extra width modifiers — override defensively. */ body.woocommerce-cart .cart_totals .shipping-calculator-form .form-row-first, body.woocommerce-cart .cart_totals .shipping-calculator-form .form-row-last, body.woocommerce-cart .cart_totals .shipping-calculator-form .form-row-wide { width: 100%; max-width: 100%; float: none; } body.woocommerce-cart .cart_totals .shipping-calculator-form label { display: block; margin-bottom: var(--caviar-space-2); font-size: var(--caviar-fs-sm); color: var(--caviar-muted); } body.woocommerce-cart .cart_totals .shipping-calculator-form input.input-text, body.woocommerce-cart .cart_totals .shipping-calculator-form select, body.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container, body.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container .select2-selection { width: 100% !important; max-width: 100%; box-sizing: border-box; height: 40px; padding: 0 var(--caviar-space-3); border: 1px solid var(--caviar-border); font-family: var(--caviar-font-body); font-size: var(--caviar-fs-sm); color: var(--caviar-charcoal); background: var(--caviar-white); } body.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container .select2-selection__rendered { line-height: 38px; padding: 0; } body.woocommerce-cart .cart_totals .shipping-calculator-form button[name="calc_shipping"] { width: 100%; height: 44px; margin-top: var(--caviar-space-2); background: var(--caviar-navy); color: var(--caviar-white); border: 1px solid var(--caviar-navy); font-family: var(--caviar-font-body); font-weight: 500; font-size: var(--caviar-fs-xs); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; } body.woocommerce-cart .cart_totals .shipping-calculator-form button[name="calc_shipping"]:hover { background: var(--caviar-navy-light); border-color: var(--caviar-navy-light); } /* ---------- 7. Proceed to Checkout (gold filled CTA) ---------- */ /* v3.19.37: button colour pinned to #B1924A per request (hover = a slightly * darker shade of the same). Hard-coded rather than via --caviar-gold so it * doesn't shift the rest of the site's gold accents. */ body.woocommerce-cart .wc-proceed-to-checkout { margin-top: var(--caviar-space-6); padding: 0; } body.woocommerce-cart .wc-proceed-to-checkout .checkout-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; padding: 0 var(--caviar-space-6); background: #B1924A; color: var(--caviar-white); border: 1px solid #B1924A; font-family: var(--caviar-font-body); font-weight: 600; font-size: var(--caviar-fs-sm); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--caviar-dur) var(--caviar-ease), border-color var(--caviar-dur) var(--caviar-ease); } body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: #9A7D3E; border-color: #9A7D3E; color: var(--caviar-white); } /* v3.19.38: the checkout button carries WooCommerce's `.button.alt` class, * which Divi's Customizer paints #BC8700 (rgb 188,135,0) via a rule that * out-specifies / out-orders the plain rule above — so the colour wasn't * changing. Pin #B1924A with the `.button.alt` class in the selector * (higher specificity) + !important so it wins over the Divi accent. */ body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt, body.woocommerce-cart .wc-proceed-to-checkout .checkout-button.button.alt { background-color: #B1924A !important; border-color: #B1924A !important; color: var(--caviar-white) !important; } body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt:hover, body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt:focus, body.woocommerce-cart .wc-proceed-to-checkout .checkout-button.button.alt:hover, body.woocommerce-cart .wc-proceed-to-checkout .checkout-button.button.alt:focus { background-color: #9A7D3E !important; border-color: #9A7D3E !important; color: var(--caviar-white) !important; } /* ---------- 8. Cross-sells: hide on cart (FunnelKit drawer covers this) ---------- */ body.woocommerce-cart .cross-sells { display: none; } /* ---------- 9. Empty-cart state ---------- */ /* Match the button's typography family on the message so the two * elements visually belong together (DM Sans body, not Playfair). * * v3.19.35: the empty-cart message is emitted as *

, and FunnelKit/Divi paint * .woocommerce-info with a dark (near-black) background — the same trap as * the account coupon notice. Force transparent with !important so our clean * centered text shows instead of a black box. */ body.woocommerce-cart .wc-empty-cart-message, body.woocommerce-cart .cart-empty, body.woocommerce-cart .cart-empty.woocommerce-info { text-align: center; font-family: var(--caviar-font-body); color: var(--caviar-navy) !important; font-size: var(--caviar-fs-lg); font-weight: 500; letter-spacing: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0; } /* Apply the vertical spacing ONLY to the outer wrapper (v3.19.14). The * inner .cart-empty (nested inside .wc-empty-cart-message) was inheriting * the same `margin: var(--caviar-space-12) 0 var(--caviar-space-6)` from * the combined selector above, doubling the top space (48px wrapper + * 48px inner = 96px). Now only the wrapper gets the margin; the inner * sits flush. */ body.woocommerce-cart .wc-empty-cart-message { margin: var(--caviar-space-12) 0 var(--caviar-space-6); } body.woocommerce-cart .cart-empty { margin: 0; } /* Suppress WC's default `.woocommerce-info::before` info icon — clashes * with our cleaner notification look. */ body.woocommerce-cart .cart-empty.woocommerce-info::before { display: none; } body.woocommerce-cart .return-to-shop { text-align: center; margin: 0 0 var(--caviar-space-12); } body.woocommerce-cart .return-to-shop .button.wc-backward { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 var(--caviar-space-8); background: var(--caviar-navy); color: var(--caviar-white); border: 1px solid var(--caviar-navy); font-family: var(--caviar-font-body); font-weight: 500; font-size: var(--caviar-fs-sm); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: background var(--caviar-dur) var(--caviar-ease); } body.woocommerce-cart .return-to-shop .button.wc-backward:hover { background: var(--caviar-navy-light); border-color: var(--caviar-navy-light); color: var(--caviar-white); } /* ---------- 10. Mobile (<768px): strategic 2-row line layout ---------- */ /* v3.19.39 redesign (per request — the old layout squished the product * name). Each cart line becomes a card: * Row 1: [✕] [thumbnail] [product name …] * Row 2: PRICE | QUANTITY | SUBTOTAL (equal thirds, labelled) * Built with a deterministic 12-column CSS grid (flex-wrap couldn't force the * break reliably — items shrank onto one line and overflowed). Each cell is * placed by grid-column/grid-row, so the split is exact regardless of name * length. WC's per-cell data-title gives the row-2 labels. */ @media (max-width: 767px) { body.woocommerce-cart table.shop_table.cart, body.woocommerce-cart table.shop_table.cart tbody { display: block; width: 100%; } body.woocommerce-cart table.shop_table.cart thead { display: none; } body.woocommerce-cart table.shop_table.cart tbody tr { display: block; } /* Product line → 12-col grid: row 1 = remove(1) thumb(2-3) name(4-12); * row 2 = price(1-4) quantity(5-8) subtotal(9-12) = three equal thirds. */ body.woocommerce-cart table.shop_table.cart tbody tr.cart_item { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 0.5rem; row-gap: 0.85rem; align-items: center; padding: var(--caviar-space-4) var(--caviar-space-2); border-bottom: 1px solid var(--caviar-border); } body.woocommerce-cart table.shop_table.cart tbody tr.cart_item:last-child { border-bottom: 0; } body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td { padding: 0; border: 0; min-width: 0; } body.woocommerce-cart table.shop_table.cart tbody td.product-remove { grid-column: 1 / 2; grid-row: 1; display: flex; } body.woocommerce-cart table.shop_table.cart tbody td.product-thumbnail { grid-column: 2 / 4; grid-row: 1; display: flex; } body.woocommerce-cart table.shop_table.cart tbody td.product-name { grid-column: 4 / 13; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; font-size: var(--caviar-fs-sm); } body.woocommerce-cart table.shop_table.cart tbody td.product-price { grid-column: 1 / 5; grid-row: 2; } body.woocommerce-cart table.shop_table.cart tbody td.product-quantity { grid-column: 5 / 9; grid-row: 2; } body.woocommerce-cart table.shop_table.cart tbody td.product-subtotal { grid-column: 9 / 13; grid-row: 2; } body.woocommerce-cart table.shop_table.cart tbody td.product-price, body.woocommerce-cart table.shop_table.cart tbody td.product-quantity, body.woocommerce-cart table.shop_table.cart tbody td.product-subtotal { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; } /* Row-2 labels from WC's data-title */ body.woocommerce-cart table.shop_table.cart tbody td.product-price::before, body.woocommerce-cart table.shop_table.cart tbody td.product-quantity::before, body.woocommerce-cart table.shop_table.cart tbody td.product-subtotal::before { content: attr(data-title); font-size: var(--caviar-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--caviar-muted); } /* compact thumbnail on mobile */ body.caviar-woo-fullwidth.woocommerce-cart table.shop_table.cart td.product-thumbnail img { width: 56px; height: 56px; max-width: 56px; max-height: 56px; } /* Actions row (coupon + update cart) — stack full width */ body.woocommerce-cart table.shop_table.cart td.actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--caviar-space-3); width: 100%; padding: var(--caviar-space-4) 0 0; } body.woocommerce-cart .coupon { width: 100%; margin-right: 0; } body.woocommerce-cart .coupon input.input-text#coupon_code { flex: 1; min-width: 0; } body.woocommerce-cart td.actions button[name="update_cart"] { width: 100%; } } /* ---------- 11. Breadcrumb (cart only — added v3.19.6) ---------- */ /* Rendered by WC's woocommerce_breadcrumb() via the [caviar_breadcrumb] * shortcode. The native function emits `