/* LumGem Cart — only loaded on is_cart() (see inc/enqueue.php). */ /** * "Soft Pop Luxury" tokens, scoped to `body.woocommerce-cart` (WooCommerce's * own body class on this page, is_cart() — never leaks onto Product/ * Checkout/My Account even if this file were somehow loaded elsewhere). * Declared on rather than `.lumgem-cart` specifically so the mobile * sticky bar (assets/js/cart.js appends it directly to , as a * sibling of `.lumgem-cart` rather than a descendant) can also use these * variables. Same values as the product page's `.single-product` tokens * (see single-product.css) — one shared palette definition, not a second * copy that could drift. */ body.woocommerce-cart { --lumgem-bg: #FFFDFC; --lumgem-surface: #FFFFFF; --lumgem-blush: #FBEDEA; --lumgem-champagne: #F7F1E8; --lumgem-gold: #C9953E; --lumgem-gold-hover: #AD7A2D; --lumgem-coral: #D96F5D; --lumgem-emerald: #12684F; --lumgem-text: #1D1916; --lumgem-muted: #6F655F; --lumgem-border: #E8DED7; } /* -------------------------------------------------------------------------- Editorial shopping-bag composition The cart remains a native WooCommerce form, but no longer presents its contents as a boxed data table. This layer intentionally owns the final visual hierarchy for both desktop and mobile. -------------------------------------------------------------------------- */ .woocommerce-cart .lumgem-cart__main { min-width: 0; } .woocommerce-cart .lumgem-item-summary { margin: 0; padding: 2px 0 14px; background: transparent; border: 0; border-bottom: 1px solid #ded7cd; } .woocommerce-cart .lumgem-item-summary__title { font-family: var(--lumgem-font-heading); font-size: 21px; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; } .woocommerce-cart .lumgem-item-summary__count { margin-left: 8px; color: #77716a; font-size: 11px; } .woocommerce-cart table.lumgem-cart-items.cart, .woocommerce-cart table.lumgem-cart-items.cart tbody { display: block; width: 100%; margin: 0; border: 0; border-collapse: collapse; background: transparent; } .woocommerce-cart table.lumgem-cart-items.cart thead, .woocommerce-cart table.lumgem-cart-items.cart tr.lumgem-cart-actions { display: none; } .woocommerce-cart table.lumgem-cart-items.cart tr.lumgem-cart-item-card { position: relative; box-sizing: border-box; width: 100%; margin: 0; background: transparent; border: 0; border-bottom: 1px solid #ded7cd; box-shadow: none; } .woocommerce-cart table.lumgem-cart-items.cart tr.lumgem-cart-item-card td { box-sizing: border-box; min-width: 0; background: transparent; border: 0; box-shadow: none; } .woocommerce-cart .lumgem-cart-item-card__edit-options { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--lumgem-emerald); font-size: 12px; font-weight: 600; text-decoration: none; } .woocommerce-cart .lumgem-cart-item-card__edit-options:hover, .woocommerce-cart .lumgem-cart-item-card__edit-options:focus-visible { color: #002f28; text-decoration: underline; text-underline-offset: 3px; } .woocommerce-cart .lumgem-cart-item-card__actions { display: flex; align-items: center; gap: 22px; width: 100%; } .woocommerce-cart .lumgem-cart-item-card__actions::before, .woocommerce-cart .lumgem-cart-item-card__action + .lumgem-cart-item-card__action::before { display: none; } .woocommerce-cart .lumgem-scope .lumgem-cart-item-card__actions .lumgem-cart-item-card__action, .woocommerce-cart .lumgem-cart-item-card__actions .lumgem-cart-item-card__action, .woocommerce-cart a.lumgem-cart-item-card__remove.lumgem-cart-item-card__action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; height: 34px; min-width: 0; padding: 0; background: transparent; border: 0; border-radius: 0; color: #5f5a54; font-size: 11px; font-weight: 400; line-height: 1; text-decoration: none; } .woocommerce-cart .lumgem-cart-item-card__actions .lumgem-cart-item-card__action:hover, .woocommerce-cart .lumgem-cart-item-card__actions .lumgem-cart-item-card__action:focus-visible, .woocommerce-cart a.lumgem-cart-item-card__remove.lumgem-cart-item-card__action:hover, .woocommerce-cart a.lumgem-cart-item-card__remove.lumgem-cart-item-card__action:focus-visible { background: transparent; color: var(--lumgem-emerald); text-decoration: underline; text-underline-offset: 3px; } .woocommerce-cart .lumgem-cart-item-card__actions .lumgem-cart-item-card__action svg { width: 17px; height: 17px; flex: 0 0 17px; } @media (min-width: 1024px) { .woocommerce-cart .lumgem-cart__grid { grid-template-columns: minmax(0, 1.85fr) minmax(360px, 1fr); gap: 30px; align-items: start; } .woocommerce-cart table.lumgem-cart-items.cart tr.lumgem-cart-item-card { display: grid; grid-template-columns: 24px minmax(180px, 26%) minmax(230px, 1fr) minmax(116px, 132px); grid-template-areas: "remove thumb name price" "remove thumb name qty" "remove thumb actions actions"; align-items: start; gap: 7px 18px; min-height: 236px; padding: 18px 0; } .woocommerce-cart table.lumgem-cart-items.cart tr.lumgem-cart-item-card td { padding: 0; text-align: left; } .woocommerce-cart .lumgem-cart-item-card .product-remove { grid-area: remove; padding-top: 6px; } .woocommerce-cart .lumgem-cart-item-card .product-thumbnail { grid-area: thumb; align-self: stretch; } .woocommerce-cart table.lumgem-cart-items.cart .product-thumbnail a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 198px; } .woocommerce-cart table.lumgem-cart-items.cart .product-thumbnail img { width: 100%; height: 100%; max-width: 230px; max-height: 210px; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border: 0; border-radius: 0; } .woocommerce-cart .lumgem-cart-item-card .product-name { grid-area: name; padding-top: 3px; } .woocommerce-cart .lumgem-cart-item-card .product-name > a { display: block; max-width: 410px; font-family: var(--lumgem-font-heading); font-size: clamp(17px, 1.18vw, 20px); font-weight: 400; line-height: 1.32; letter-spacing: -0.01em; } .woocommerce-cart .lumgem-cart-item-card__sku { margin-top: 8px; color: #77716a; font-size: 10px; letter-spacing: 0.03em; } .woocommerce-cart .lumgem-cart-item-card__variants { margin-top: 10px; color: #4f4a44; font-size: 12px; } .woocommerce-cart .lumgem-cart-item-card__variants dl.variation { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin: 0; } .woocommerce-cart .lumgem-cart-item-card__variants dl.variation dt, .woocommerce-cart .lumgem-cart-item-card__variants dl.variation dd, .woocommerce-cart .lumgem-cart-item-card__variants dl.variation p { float: none; clear: none; width: auto; margin: 0; padding: 0; } .woocommerce-cart .lumgem-cart-item-card .product-price { grid-area: price; justify-self: end; padding-top: 4px; text-align: right; } .woocommerce-cart .lumgem-cart-item-card__sale-price { justify-content: flex-end; gap: 6px; padding: 0; background: transparent; } .woocommerce-cart .lumgem-cart-item-card__sale-price del { font-size: 11px; } .woocommerce-cart .lumgem-cart-item-card__sale-price ins { font-size: 15px; font-weight: 600; color: #171714; } .woocommerce-cart .lumgem-cart-item-card__sale-price > span { padding: 3px 5px; font-size: 9px; } .woocommerce-cart .lumgem-cart-item-card .product-quantity { grid-area: qty; justify-self: end; align-self: start; } .woocommerce-cart .lumgem-cart-item-card .product-actions { position: static; grid-area: actions; align-self: end; justify-self: stretch; margin: 8px 0 0; padding: 10px 0 0; border-top: 1px solid #e7e0d7; } .woocommerce-cart .lumgem-cart-item-card .product-actions .lumgem-cart-item-card__actions { justify-content: flex-end; } .woocommerce-cart .lumgem-cart__aside { position: sticky; top: 112px; padding: 20px 18px; background: #fff; border: 1px solid #ded7cd; box-shadow: none; } } @media (max-width: 1023px) { .woocommerce-cart .lumgem-item-summary { padding: 4px 0 12px; } .woocommerce-cart .lumgem-item-summary__title { font-size: 18px; } .woocommerce-cart table.lumgem-cart-items.cart tr.lumgem-cart-item-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "thumb name" "thumb price" "thumb qty" "actions actions"; align-items: start; gap: 8px 12px; min-height: 0; padding: 15px 0 12px; } .woocommerce-cart table.lumgem-cart-items.cart tr.lumgem-cart-item-card td { padding: 0; text-align: left !important; } .woocommerce-cart table.lumgem-cart-items.cart tr.lumgem-cart-item-card td::before { display: none !important; } .woocommerce-cart .lumgem-cart-item-card .product-remove { position: absolute; z-index: 2; top: 19px; left: 4px; width: auto; } .woocommerce-cart .lumgem-cart-item-card .product-remove:empty { display: none; } .woocommerce-cart .lumgem-cart-item-card .product-thumbnail { grid-area: thumb; } .woocommerce-cart table.lumgem-cart-items.cart .product-thumbnail, .woocommerce-cart table.lumgem-cart-items.cart .product-thumbnail a { display: flex; align-items: center; justify-content: center; width: 112px; height: 132px; } .woocommerce-cart table.lumgem-cart-items.cart .product-thumbnail img { width: 112px; height: 112px; max-width: 112px; object-fit: contain; background: #fff; border: 0; border-radius: 0; } .woocommerce-cart .lumgem-cart-item-card .product-name { grid-area: name; padding-top: 1px; } .woocommerce-cart .lumgem-cart-item-card .product-name > a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-family: var(--lumgem-font-heading); font-size: 15px; font-weight: 400; line-height: 1.34; } .woocommerce-cart .lumgem-cart-item-card__sku { margin-top: 6px; font-size: 9px; } .woocommerce-cart .lumgem-cart-item-card__variants { margin-top: 5px; font-size: 11px; } .woocommerce-cart .lumgem-cart-item-card__variants dl.variation { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 5px; margin: 0; } .woocommerce-cart .lumgem-cart-item-card__variants dl.variation dt, .woocommerce-cart .lumgem-cart-item-card__variants dl.variation dd, .woocommerce-cart .lumgem-cart-item-card__variants dl.variation p { display: inline; float: none; clear: none; width: auto; margin: 0; padding: 0; } .woocommerce-cart .lumgem-cart-item-card__edit-options { margin-top: 6px; font-size: 10px; } .woocommerce-cart .lumgem-cart-item-card .product-price { grid-area: price; justify-self: start; } .woocommerce-cart .lumgem-cart-item-card__sale-price { justify-content: flex-start; gap: 6px; padding: 0; background: transparent; white-space: normal; } .woocommerce-cart .lumgem-cart-item-card__sale-price del { font-size: 10px; } .woocommerce-cart .lumgem-cart-item-card__sale-price ins { font-size: 13px; font-weight: 600; color: #171714; } .woocommerce-cart .lumgem-cart-item-card__sale-price > span { padding: 3px 5px; font-size: 8px; } .woocommerce-cart .lumgem-cart-item-card .product-quantity { grid-area: qty; justify-self: start; } .woocommerce-cart .lumgem-cart-item-card .product-actions { position: static; grid-column: 1 / -1 !important; grid-row: auto !important; align-self: auto; justify-self: stretch; margin: 4px 0 0; padding: 8px 0 0; border-top: 1px solid #e7e0d7; } .woocommerce-cart .lumgem-cart-item-card .product-actions .lumgem-cart-item-card__actions { justify-content: flex-end; gap: 20px; } .woocommerce-cart .lumgem-cart-item-card .product-subtotal { display: none !important; } .woocommerce-cart .lumgem-cart__aside { padding: 16px 0 0; background: transparent; border: 0; box-shadow: none; } } @media (max-width: 374px) { .woocommerce-cart table.lumgem-cart-items.cart tr.lumgem-cart-item-card { grid-template-columns: 100px minmax(0, 1fr); gap: 7px 10px; } .woocommerce-cart table.lumgem-cart-items.cart .product-thumbnail, .woocommerce-cart table.lumgem-cart-items.cart .product-thumbnail a { width: 100px; height: 122px; } .woocommerce-cart table.lumgem-cart-items.cart .product-thumbnail img { width: 100px; height: 100px; max-width: 100px; } } .lumgem-cart { max-width: 1200px; margin: 0 auto; padding: var(--lumgem-space-4) var(--lumgem-space-5); padding-bottom: 80px; /* room for the mobile sticky bar */ background: var(--lumgem-bg); } /* Three-step purchase-flow indicator. Plain text/line styling — not a Jeulia brand element — and never marks Shipping & Payment/Order Complete as done, since the visitor hasn't reached them yet. Bottom margin kept small (space-2, not the old space-5/24px) — the Round 3 visual audit flagged this stacking with the container's own top padding into a 48px gap before anything useful (shipping progress/items) appeared. */ .lumgem-cart-steps ol { display: flex; align-items: center; justify-content: center; list-style: none; margin: 0 0 var(--lumgem-space-2); padding: 0; gap: var(--lumgem-space-2); font-size: 13px; color: var(--lumgem-muted); } .lumgem-cart-steps li { position: relative; padding-right: var(--lumgem-space-4); } .lumgem-cart-steps li:not(:last-child)::after { content: '>'; position: absolute; right: 2px; color: var(--lumgem-border); } .lumgem-cart-steps li.is-current { color: var(--lumgem-text); font-weight: 600; } .lumgem-cart__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lumgem-space-6); align-items: start; } .lumgem-cart__main, .lumgem-cart__aside { min-width: 0; } /** * Round 3 visual audit: the old champagne-card treatment (bg + border + * radius) made Order Summary read as "a beige widget" rather than a clear * conversion focal point, and its own padding pushed the "Order Summary" * title down out of alignment with the item list's top edge in the left * column. White/near-white background, no border box, no radius — the * Grand Total row and gold Checkout button below carry the visual weight * instead of a background tint. */ .lumgem-cart__aside { background: var(--lumgem-surface, #fff); padding: 0; } .lumgem-cart__aside-title { font-size: 18px; color: var(--lumgem-text); margin: 0 0 var(--lumgem-space-3); } /* Compact, thin-line free-shipping status — was a champagne rounded card (73px tall); now a plain white row with a single bottom rule, closer to the audit's ~58-72px target and far less visually heavy. */ .lumgem-shipping-progress { margin-bottom: var(--lumgem-space-3); font-size: 12px; background: none; border: none; border-bottom: 1px solid var(--lumgem-border); border-radius: 0; padding: var(--lumgem-space-2) 0 var(--lumgem-space-3); } .lumgem-shipping-progress p { margin: 0 0 var(--lumgem-space-1); } .lumgem-shipping-progress__bar { display: block; height: 4px; border-radius: 2px; background: var(--lumgem-border); overflow: hidden; margin-top: var(--lumgem-space-2); } .lumgem-shipping-progress__bar span { display: block; height: 100%; background: var(--lumgem-gold); } .lumgem-item-summary { display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-bottom: var(--lumgem-space-3); } /* Select-all + per-row select checkboxes — warm gold to match the rest of the LumGem palette instead of the browser's default blue. */ .lumgem-item-summary__select-all, .lumgem-cart-item-card__select { accent-color: var(--lumgem-gold); } /** * The generic `.lumgem-scope button` reset (1 class + 1 element, * specificity (0,0,1,1) — see base.css) otherwise beats a plain 1-class * `.lumgem-item-summary__mass-delete` rule (0,0,1,0) outright, rendering it * as that reset's solid near-black button — exactly the large dark block * P1-3 of the independent audit warned against, and the same recurring * specificity bug already fixed elsewhere in this project (accordion * toggles, carousel arrows, header icon buttons). Matching the element * selector here guarantees this wins regardless of load order. */ button.lumgem-item-summary__mass-delete { background: none; border: none; color: var(--lumgem-color-danger); text-decoration: underline; padding: 0; } button.lumgem-item-summary__mass-delete:hover { background: none; color: var(--lumgem-color-danger); } .lumgem-item-summary__mass-delete:disabled { opacity: 0.5; cursor: wait; } /* Real gift cart-item display (template-parts/cart-free-gift.php) — only ever rendered when WC()->cart genuinely contains the auto-added $0 Gift-Ready Package (see LumGemOps\Cart\FreeGiftService), never a decorative card for an item that isn't actually in the cart. */ .lumgem-cart-free-gift { margin: var(--lumgem-space-4) 0; } .lumgem-cart-free-gift__title { font-size: 15px; margin-bottom: var(--lumgem-space-2); } .lumgem-cart-free-gift__item { display: flex; align-items: center; gap: var(--lumgem-space-2); padding: var(--lumgem-space-2); border: 1px solid var(--lumgem-border); border-radius: 8px; background: var(--lumgem-blush); } .lumgem-cart-free-gift__image img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: var(--lumgem-radius); } .lumgem-cart-free-gift__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .lumgem-cart-free-gift__name { font-weight: 600; } .lumgem-cart-free-gift__note { font-size: 12px; color: var(--lumgem-color-muted); } .lumgem-cart-free-gift__price { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; color: var(--lumgem-emerald); flex-shrink: 0; } .lumgem-cart-free-gift__price-zero { font-size: 11px; font-weight: 400; color: var(--lumgem-muted); text-decoration: line-through; } .lumgem-cart-free-gift__qty { font-size: 12px; color: var(--lumgem-color-muted); flex-shrink: 0; } /* Non-editable quantity text on the gift's (hidden, since it's excluded from the main product loop entirely) row — kept for any other renderer that might still call woocommerce_cart_item_quantity on it. */ .lumgem-free-gift-qty { display: inline-block; padding: 0 var(--lumgem-space-2); } /* Cart item rows restyled as cards, no structural HTML change (table kept for accessibility / woocommerce_quantity_input() table-cell assumptions). */ .lumgem-cart-items { width: 100%; border-collapse: collapse; } /** * Hidden at EVERY width, not just mobile — a visible Product/Price/ * Quantity/Subtotal/Actions header row is exactly the "beautified admin * table" look the Round 3 visual audit flagged on desktop (Jeulia shows a * plain product shelf with no column-header matrix). Each `` still * carries its own `data-title`/`