/* LUMEN — v0.49.0: Cart final-pass styles (moved, unchanged). * * These rules were written in v0.48.0 inside lumen-experience.css, which * loads on EVERY public page. Every selector is scoped to * body.woocommerce-cart, so v0.49.0 moves them byte-for-byte into this * Cart-only stylesheet (enqueued by DBL_BCS_Lumen_Experience only when * is_cart(), after lumen-experience.css so the cascade is identical). * Nothing about how the Cart looks changes; other pages stop downloading it. */ /* ════════════════════════════════════════════════════════════════════ v0.48.0 — CART FINAL PASS (desktop + mobile) Written against Blocksy's REAL cart template (blocksy/woocommerce/cart/ cart.php): thead = PRODUCT (colspan 2) · QUANTITY · SUBTOTAL · (remove); each row = thumbnail · name(+price, +mobile actions) · quantity · subtotal · remove. The table has NO shop_table_responsive class: below 1000px Blocksy hides the quantity/subtotal/remove cells and shows `.product-mobile-actions` (qty × unit price + remove) inside the name cell — which is why phones show only a PRODUCT heading. lumen-cart-checkout.css is still left byte-for-byte unchanged. ════════════════════════════════════════════════════════════════════ */ body.lumen-universe.woocommerce-cart { --lumen-cart-thumb: clamp(88px, 5vw + 36px, 112px); } @media (max-width: 689.98px) { body.lumen-universe.woocommerce-cart { --lumen-cart-thumb: clamp(72px, 16vw + 20px, 86px); } } /* 1. TOP BREATHING ROOM. ROOT CAUSE: the heading row's padding comes from Blocksy's `--theme-table-padding`, an em value — and LUMEN sets these headings in 11px Space Mono, so "1em" there is only ~11–16px, far less than the rows below get at 15px. The top of the frame therefore sat tight on PRODUCT / QUANTITY / SUBTOTAL. The heading row now uses the same pixel-based frame scale as the left/right/bottom. */ body.lumen-universe.woocommerce-cart table.shop_table.cart thead th { padding-top: var(--lumen-frame-pad-md); padding-bottom: clamp(12px, 1.2vw, 16px); vertical-align: bottom; } body.lumen-universe.woocommerce-cart table.shop_table.cart tbody td.actions { padding-top: clamp(16px, 2vw, 24px); padding-bottom: var(--lumen-frame-pad-md); } /* 2. MODEST CONTENT SCALE-UP. */ body.lumen-universe.woocommerce-cart table.shop_table.cart .product-name > a { font-size: clamp(15px, 0.35vw + 13.5px, 18px); line-height: 1.35; } body.lumen-universe.woocommerce-cart table.shop_table.cart .product-name .price, body.lumen-universe.woocommerce-cart table.shop_table.cart .product-name .price .amount, body.lumen-universe.woocommerce-cart table.shop_table.cart .product-subtotal .amount, body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions > .amount, body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions > .woocommerce-Price-amount { font-size: clamp(15px, 0.25vw + 14px, 17px); } body.lumen-universe.woocommerce-cart table.shop_table.cart div.quantity { --quantity-height: 46px; --quantity-width: 116px; } body.lumen-universe.woocommerce-cart table.shop_table.cart div.quantity input.qty { font-size: 16px; /* 16px also prevents iOS Safari's zoom-on-focus. */ } body.lumen-universe.woocommerce-cart table.shop_table.cart td.actions #coupon_code, body.lumen-universe.woocommerce-cart table.shop_table.cart td.actions input[name="coupon_code"] { min-height: 46px; font-size: 15px; padding-inline: 14px; } /* !important only because lumen-cart-checkout.css (unchanged) locks these two buttons at 11px / 12px 24px with !important. */ body.lumen-universe.woocommerce-cart table.shop_table.cart td.actions button[name="apply_coupon"], body.lumen-universe.woocommerce-cart table.shop_table.cart td.actions button[name="update_cart"] { min-height: 46px; font-size: 12.5px !important; padding: 12px 26px !important; } body.lumen-universe.woocommerce-cart .cart_totals .checkout-button.button.alt { min-height: 52px; font-size: 13px !important; } /* Remove (trash) control: a real 40–44px touch target around the icon. */ body.lumen-universe.woocommerce-cart table.shop_table.cart a.remove { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; } body.lumen-universe.woocommerce-cart table.shop_table.cart a.remove svg { width: 14px; height: 14px; } /* 3. THUMBNAIL. ROOT CAUSE: Blocksy fixes the thumbnail cell at 100px (120px below 1000px) under border-box sizing, so v0.47.0's first-cell frame padding came OUT of the image's own space; and for protected products (Product #111) LUMEN Photo Protection returns a bare without Blocksy's sized media container. The cell is now sized as image + padding, and the image fills its slot either way — aspect ratio preserved (object-fit: contain, so a protected preview is never cropped; Blocksy's own configured ratio still applies to its media container), row height capped. */ body.lumen-universe.woocommerce-cart table.shop_table.cart tr > .product-thumbnail { width: calc(var(--lumen-cart-thumb) + var(--lumen-frame-pad-md) + 14px); padding-inline-start: var(--lumen-frame-pad-md); padding-inline-end: 14px; } body.lumen-universe.woocommerce-cart table.shop_table.cart .product-thumbnail .ct-media-container { width: var(--lumen-cart-thumb); max-width: none; } body.lumen-universe.woocommerce-cart table.shop_table.cart .product-thumbnail > img, body.lumen-universe.woocommerce-cart table.shop_table.cart .product-thumbnail > a:not(.ct-media-container) > img { display: block; width: var(--lumen-cart-thumb); max-width: none; height: auto; max-height: calc(var(--lumen-cart-thumb) * 1.25); object-fit: contain; object-position: center; } /* 4. MOBILE ROW CONTEXT (below 1000px, where Blocksy shows the compact `.product-mobile-actions` row instead of the Quantity/Subtotal columns). Small labels above the REAL controls/values: "Quantity" over the stepper and "Price" over the unit price Blocksy prints after "×" (it is the per-item price — the line subtotal is not in this row, so it is not labelled "Subtotal"). CSS-generated, with empty alt text so screen readers are not given duplicate words (the quantity input keeps its own real accessible label). No data is duplicated or invented. */ @media (max-width: 999.98px) { /* Two intentional lines: [Quantity stepper ........ remove] / [Price]. The "×" glyph is hidden here only because the labels now say what each value is; it stays on desktop. */ body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "qty . remove" "price price price"; align-items: end; column-gap: 12px; row-gap: 26px; margin-top: calc(1em + 16px); } body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions > div.quantity { grid-area: qty; } body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions > .woocommerce-Price-amount { grid-area: price; justify-self: start; } body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions > a.remove { grid-area: remove; margin: 0; padding: 0; align-self: center; } body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions > .ct-product-multiply-symbol { display: none; } body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions div.quantity::before, body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions > .woocommerce-Price-amount::before { position: absolute; left: 0; bottom: calc(100% + 5px); font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: rgba(169, 159, 136, 0.9); pointer-events: none; } body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions div.quantity::before { content: 'Quantity'; content: 'Quantity' / ''; } body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions > .woocommerce-Price-amount { position: relative; display: inline-block; } body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions > .woocommerce-Price-amount::before { content: 'Price'; content: 'Price' / ''; } } @media (max-width: 374.98px) { /* Narrow phones: keep the stepper (still 46px tall) and the remove target on one line without overflowing the cell. */ body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions div.quantity { --quantity-width: 92px; } body.lumen-universe.woocommerce-cart table.shop_table.cart .product-mobile-actions { column-gap: 8px; } }