/* Coffee Vibes — Premium FULL-WIDTH Cart (v2.2.28 — certification)
 * v2.2.28 fixes the reason the approved layout never appeared on the LIVE cart: page.php
 * nests the cart inside `article.cv-prose { max-width: 820px }` (a reading measure) and
 * pays `--cv-gutter` twice, so each row was ~672px at a 1440px viewport — the information
 * column collapsed to ~204px and the two variation selects to ~94px each. Raising
 * `.woocommerce`'s max-width (v2.2.25) was inert: its parent capped it. See the page-width
 * block below. Also: `.cv-prose ul/li` were indenting every row ~20px (packshot not flush
 * left), the image track is now the approved clamp(180px,16vw,220px), the price column has
 * a floor so long totals cannot clip, and the ≤820px/≤560px trash offsets now track the
 * row's real top padding. No DOM, no JS selector, no WooCommerce logic changed.
 *
 * Pixel-perfect implementation of the approved boutique row. The cart is ONE flowing,
 * wide column on the Coffee Vibes espresso gradient — each product is a single elegant
 * horizontal composition of FOUR clearly defined areas: IMAGE (≈20%, a 200–220px cream
 * pack tile — no transparent background) · INFORMATION+CONTROLS (≈52%) · PRICE (far right,
 * large total + "each") · REMOVE (trash, far right). v2.2.27 corrects the four defects the
 * approved mockup exposed: (1) the two variation dropdowns now share a locked 2-column grid
 * so they ALWAYS sit beside each other — equal width, equal height, aligned top & bottom,
 * never wrapping under one another; (2) the image is a larger, solid cream pack tile matching
 * the product page (no glassy transparency showing through); (3) more open, luxurious row
 * height; (4) a lighter typographic hierarchy — slightly smaller title, lighter description,
 * gold metadata. Order Summary is a centred rail beneath the products (unchanged — approved).
 * Register: Apple Store / Aesop / Bang & Olufsen / Nespresso Boutique — never default WooCommerce.
 *
 * All functionality is unchanged (live quantity, variation & preparation switching,
 * AJAX totals/shipping, delivery estimator, coupon, zoomable BAM lightbox, local
 * pickup, free-shipping logic). Only the presentation layer changed. Uses ONLY the
 * theme's --cv-* tokens; additive & namespaced (.cvce-*). WooCommerce stays the
 * backend — no change to palette, checkout, payments, shipping rules or pricing.
 *
 * Text is CREAM on the dark page (the cart no longer lives inside white cards), so
 * every colour here resolves to a light-on-dark token. */

:root {
  --cvce-text: var(--cv-cream, #f5ecdd);
  --cvce-text-mute: var(--cv-text-mute, #c9b79c);
  --cvce-accent: var(--cv-gold, #e0a458);
  --cvce-copper: var(--cv-copper-2, #cf8d4e);
  --cvce-line: rgba(245, 236, 221, .14);
  --cvce-line-strong: rgba(245, 236, 221, .28);
  --cvce-glass: rgba(245, 236, 221, .05);
  --cvce-glass-2: rgba(245, 236, 221, .09);
  --cvce-cream: var(--cv-cream, #f5ecdd);
  --cvce-cream-2: var(--cv-cream-2, #efe4d2);
  --cvce-radius: 18px;
  --cvce-radius-sm: 14px;
  --cvce-ease: var(--cv-ease, cubic-bezier(.22, .61, .36, 1));
  --cvce-danger: #e6836a;
  --cvce-success: #9db77e;
  --cvce-page: 1440px;   /* wide luxury page — products breathe horizontally */
  --cvce-maxw: 860px;    /* centred rail for totals / coupon / shipping */
}

/* ═══════════════════════════ Page width — release the cart from the prose measure ═══════════════════════════ */
/* The cart page renders through the theme's page.php, so the shortcode output is nested:
 *
 *   .cv-container (max 1240px, --cv-gutter padding)
 *     └ article.cv-prose (max-width: 820px  ← a READING measure)
 *         └ .woocommerce  (--cv-gutter padding again)
 *             └ .cvce-cart
 *
 * That 820px prose cap + the doubled gutter squeezed each row to ~672px at a 1440px
 * viewport, which is why the "full-width" composition never actually appeared: the
 * information column collapsed to ~204px and the two variation selects to ~94px each.
 * Raising `.woocommerce`'s own max-width (v2.2.25) could never help — it was capped by
 * its parent. Release all three, scoped to the cart body class so page.php's prose
 * measure, checkout and My Account are untouched. */
body.woocommerce-cart .cv-section--dark > .cv-container { max-width: var(--cvce-page); }
body.woocommerce-cart .cv-prose { max-width: 100%; }
/* The outer .cv-container already applies --cv-gutter; don't pay for it twice. */
body.woocommerce-cart .cv-main .woocommerce { max-width: 100%; padding-inline: 0; }

/* ═══════════════════════════ Page shell — ONE full-width column ═══════════════════════════ */
/* The cart is a single flowing column on the espresso gradient: NO grid columns, NO
 * sidebar, NO floating panels. Everything breathes and uses the available page width. */
.cvce-cart {
  font-family: var(--cv-sans, 'Jost', system-ui, sans-serif);
  color: var(--cvce-text);
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}
.cvce-cart-form { min-width: 0; }

/* ─────────────────────────── Cart heading ─────────────────────────── */
.cvce-cart-panel { min-width: 0; }
.cvce-cart-title {
  font: 600 clamp(2.1rem, 4.5vw, 3.2rem)/1.06 var(--cv-serif, 'Playfair Display', Georgia, serif);
  color: var(--cvce-text);
  margin: 0 0 .35rem;
  letter-spacing: -.015em;
}
.cvce-cart-panel > .cvce-cart-title + .cvce-cards { margin-top: 2.25rem; }

/* ═══════════════════════════ Product ROWS (full-width, horizontal) ═══════════════════════════ */
/* `.cv-prose ul { padding-left: 1.2em }` and `.cv-prose li { margin-bottom: .5em }` (theme
 * style.css) out-specify a bare `.cvce-cards` / `.cvce-card`, indenting every row ~20px so
 * the packshot was never flush left. Two-class selectors win it back without !important. */
.cvce-cart .cvce-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cvce-line);
}
.cvce-cart .cvce-cards > .cvce-card { margin-bottom: 0; }
/* One elegant horizontal composition per product, vertically centred:
 * IMAGE ≈20% (min 200px) · INFORMATION+CONTROLS ≈52% · PRICE ≈23% · REMOVE ≈5%.
 * No card background, no shadow — an elegant hairline divider between rows, with
 * generous, open spacing so products are clearly separated and the row feels luxurious. */
.cvce-card {
  position: relative;
  display: grid;
  /* Image track is the approved v2.2.24 value — clamp(180px,16vw,220px) — as an explicit
   * track rather than an fr share, so the packshot lands on exactly the approved size at
   * every width and leaves no dead gap beside itself. Price gets a floor so a long
   * "Sh 133,500" can never clip or collide with the trash column. */
  grid-template-columns: clamp(180px, 16vw, 220px) minmax(0, 10fr) minmax(150px, 4.4fr) minmax(48px, 1fr);
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(2.75rem, 4vw, 3.75rem) 0;
  border-bottom: 1px solid var(--cvce-line);
  transition: opacity .3s var(--cvce-ease);
}

/* ── Hero packshot (the IMAGE area, ≈20%, 200–220px) ──
 * A SOLID cream pack tile — the exact frame used on the product page
 * (.cv-buy__pack: --cv-cream-2, aspect 1). No glassy transparency shows through, so the
 * espresso gradient never bleeds behind the bag. The packshot fills ~84% of the tile so
 * the image reads as large and confident — equal visual weight to the title and controls. */
/* The grid track already carries the approved clamp(180px,16vw,220px) — fill it exactly. */
.cvce-card__media { min-width: 0; width: 100%; }
.cvce-thumb {
  position: relative;
  /* The inset lives HERE (not on the image) so the BAM <picture> and its inner <img> are
   * never both padded — the old double-padding shrank the packshot. One 8% inset, uniform. */
  padding: 8%;
  border: 1px solid var(--cvce-line-strong);
  border-radius: var(--cvce-radius);
  overflow: hidden;
  background: var(--cvce-cream-2, #efe4d2);
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  transition: border-color .3s var(--cvce-ease), transform .35s var(--cvce-ease), box-shadow .35s var(--cvce-ease);
}
.cvce-thumb:hover { transform: translateY(-4px); border-color: var(--cvce-accent); box-shadow: var(--cv-shadow, 0 24px 60px -24px rgba(0, 0, 0, .55)); }
.cvce-thumb:focus-visible { outline: 2px solid var(--cvce-accent); outline-offset: 3px; }
.cvce-thumb__img,
.cvce-thumb img,
.cvce-thumb picture { width: 100%; height: 100%; object-fit: contain; display: block; box-sizing: border-box; }
.cvce-thumb__hint {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(23, 16, 10, .72); color: var(--cvce-cream);
  border: 1px solid var(--cvce-line);
  opacity: 0; transform: scale(.8);
  transition: opacity .3s var(--cvce-ease), transform .3s var(--cvce-ease);
}
.cvce-thumb:hover .cvce-thumb__hint,
.cvce-thumb:focus-visible .cvce-thumb__hint { opacity: 1; transform: scale(1); }

/* ── Information + controls column (≈50%) ──
 * Tight, top-down rhythm — title, variant line, description, selectors, quantity —
 * so the controls sit high and never drift to the bottom of the row. */
.cvce-card__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(.9rem, 1.5vw, 1.2rem);
}
.cvce-card__head { min-width: 0; width: 100%; }
.cvce-name {
  display: inline-block;
  font: 600 clamp(1.15rem, 1.35vw, 1.4rem)/1.22 var(--cv-serif, 'Playfair Display', Georgia, serif);
  color: var(--cvce-text);
  text-decoration: none;
  letter-spacing: -.01em;
  transition: color .25s var(--cvce-ease);
}
a.cvce-name:hover { color: var(--cvce-accent); }
.cvce-card__summary {
  margin: .5rem 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font: 600 .72rem/1.3 var(--cv-sans, 'Jost', system-ui, sans-serif);
  letter-spacing: .18em; text-transform: uppercase; color: var(--cvce-accent);
}
.cvce-card__dot { opacity: .5; }
/* Description — lighter and clamped to ~2 lines so it never pushes the controls down. */
.cvce-card__desc {
  margin: .55rem 0 0;
  font: 300 .9rem/1.55 var(--cv-sans, 'Jost', system-ui, sans-serif);
  color: var(--cvce-text-mute); opacity: .9; max-width: 48ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cvce-card__meta { margin-top: .5rem; font-size: .88rem; color: var(--cvce-text-mute); }
.cvce-card__meta p { margin: .1rem 0; }
.backorder_notification { margin: .5rem 0 0; font-size: .85rem; color: var(--cvce-danger); }

/* ── Variation selectors (SIZE · PREPARATION) — THE main pixel fix ──
 * A LOCKED two-column grid: the two dropdowns ALWAYS sit beside each other, never one
 * under the other. equal-1fr tracks guarantee identical width; the shared row baseline +
 * matching select padding guarantee identical height and aligned top/bottom edges; the
 * single `gap` guarantees equal spacing between them. Capped so they don't sprawl across
 * the whole information column. (Was a wrapping flexbox — the cause of the stacked-dropdown
 * defect in the approved-vs-live comparison.) */
.cvce-vars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
  max-width: 440px;
}
.cvce-var { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.cvce-var__label {
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--cvce-text-mute);
}
.cvce-var__field { position: relative; display: block; }
.cvce-var__select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%; margin: 0;
  padding: .72rem 2.3rem .72rem 1rem;
  font: 500 .92rem/1.2 var(--cv-sans, 'Jost', system-ui, sans-serif);
  color: var(--cvce-text);
  background: var(--cvce-glass);
  border: 1px solid var(--cvce-line-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .25s var(--cvce-ease), box-shadow .25s var(--cvce-ease), background .25s var(--cvce-ease);
}
.cvce-var__select:hover { border-color: var(--cvce-accent); background: var(--cvce-glass-2); }
.cvce-var__select:focus-visible { outline: none; border-color: var(--cvce-accent); box-shadow: 0 0 0 3px rgba(224, 164, 88, .28); }
/* Native dropdown list is dark-on-light in most browsers — keep options legible. */
.cvce-var__select option { color: #241812; background: #fff; }
.cvce-var__caret {
  position: absolute; right: 1rem; top: 50%; width: .5rem; height: .5rem;
  border-right: 1.7px solid var(--cvce-text-mute); border-bottom: 1.7px solid var(--cvce-text-mute);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}

/* ── Quantity — sits directly BELOW the dropdown row, left-aligned (never centred,
 * never drifting toward the price). ── */
.cvce-card__foot { margin-top: .4rem; }
.cvce-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--cvce-line-strong);
  border-radius: 999px;
  background: var(--cvce-glass);
  overflow: hidden;
}
.cvce-qty--single { padding: .5rem 1.2rem; font-weight: 600; color: var(--cvce-text); }
.cvce-qty__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--cvce-text);
  transition: background .2s var(--cvce-ease), color .2s var(--cvce-ease);
}
.cvce-qty__btn:hover { background: var(--cvce-accent); color: #231405; }
.cvce-qty__btn:focus-visible { outline: 2px solid var(--cvce-accent); outline-offset: -2px; }
.cvce-qty__btn:disabled { opacity: .4; cursor: not-allowed; background: transparent; color: var(--cvce-text); }
.cvce-qty__val {
  width: 44px; height: 44px; padding: 0; margin: 0;
  text-align: center; border: 0; background: transparent;
  font: 600 1.05rem/1 var(--cv-sans, 'Jost', system-ui, sans-serif);
  color: var(--cvce-text); -moz-appearance: textfield;
}
.cvce-qty__val:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--cvce-accent); }
.cvce-qty__val::-webkit-outer-spin-button,
.cvce-qty__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Price (≈25%) — its own far-right column, large serif, visually independent ── */
.cvce-card__price {
  min-width: 0;
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: center; text-align: right; line-height: 1.1;
}
.cvce-card__subtotal,
.cvce-card__subtotal .amount {
  font: 700 clamp(1.45rem, 2vw, 1.95rem)/1.1 var(--cv-serif, 'Playfair Display', Georgia, serif);
  color: var(--cvce-text); white-space: nowrap;
}
.cvce-card__unit {
  margin-top: .3rem;
  font: 500 .76rem/1.2 var(--cv-sans, 'Jost', system-ui, sans-serif);
  color: var(--cvce-text-mute); white-space: nowrap;
}
.cvce-card__unit .amount { font-weight: 600; }

/* ── Remove (≈5%) — trash icon, far right, centred beside the price ── */
.cvce-remove {
  justify-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid transparent; background: transparent;
  color: var(--cvce-text-mute); cursor: pointer; border-radius: 50%;
  transition: color .2s var(--cvce-ease), background .2s var(--cvce-ease), border-color .2s var(--cvce-ease), transform .2s var(--cvce-ease);
}
.cvce-remove:hover { color: var(--cvce-danger); background: rgba(230, 131, 106, .12); border-color: rgba(230, 131, 106, .3); transform: translateY(-1px); }
.cvce-remove:focus-visible { outline: 2px solid var(--cvce-accent); outline-offset: 1px; }
.cvce-remove__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Busy / removing states ── */
.cvce-cards[aria-busy="true"] { position: relative; }
.cvce-cards[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; z-index: 5;
  background: rgba(23, 16, 10, .35); backdrop-filter: saturate(1) blur(1px);
  pointer-events: none;
}
.cvce-cards[aria-busy="true"]::before {
  content: ""; position: absolute; z-index: 6; top: 40%; left: 50%;
  width: 32px; height: 32px; margin-left: -16px;
  border: 2.5px solid rgba(245, 236, 221, .25); border-top-color: var(--cvce-accent);
  border-radius: 50%; animation: cvce-spin .7s linear infinite;
}
@keyframes cvce-spin { to { transform: rotate(360deg); } }
.cvce-card.cvce-removing { opacity: .4; }

/* ── Continue shopping — left aligned, boutique spacing ── */
.cvce-cart-actions { margin-top: 2.25rem; }
.cvce-continue { display: inline-flex; align-items: center; gap: .55rem; }

/* ═══════════════════════════ Order Summary — centred beneath the products ═══════════════════════════ */
/* No floating card. A centred rail (≤860px) that reads as part of the page, with a large
 * whitespace lead-in: heading centred, totals, shipping and the checkout CTA, coupon under. */
.cvce-collaterals {
  width: 100%;
  max-width: var(--cvce-maxw);
  margin: clamp(4rem, 8vw, 6.5rem) auto 0;
  padding: 0;
}
.cvce-summary-title {
  font: 600 clamp(1.7rem, 2.8vw, 2.3rem)/1.1 var(--cv-serif, 'Playfair Display', Georgia, serif);
  color: var(--cvce-text); margin: 0 0 2rem; text-align: center; letter-spacing: -.01em;
}

/* ── Neutralise WooCommerce core float layout (keep the .woocommerce prefix so the reset
 * out-specifies WC core at 0,3,0; see docs/12-changelog v2.2.19). ── */
.woocommerce .cvce-collaterals .cart_totals,
.woocommerce .cvce-collaterals .shipping_calculator,
.woocommerce .cvce-collaterals .cross-sells,
.woocommerce .cvce-collaterals .cvce-coupon {
  float: none;
  width: 100%;
  max-width: 100%;
  clear: both;
  box-sizing: border-box;
}
.cvce-collaterals .cart_totals { margin: 0; }
.cvce-collaterals .shipping_calculator select,
.cvce-collaterals .shipping_calculator input { max-width: 100%; box-sizing: border-box; }

/* Totals table — long hairline dividers, wide spacing, cream text, gold grand total */
.cvce-collaterals .cart_totals > h2,
.cvce-collaterals .cross-sells > h2 {
  font: 600 .72rem/1 var(--cv-sans, 'Jost', system-ui, sans-serif);
  letter-spacing: .18em; text-transform: uppercase; color: var(--cvce-text-mute);
  margin: 0 0 .8rem; text-align: left;
}
.cvce-collaterals table.shop_table { width: 100%; border: 0; background: transparent; border-collapse: collapse; }
.cvce-collaterals table.shop_table th,
.cvce-collaterals table.shop_table td {
  padding: 1.25rem 0; border: 0; border-bottom: 1px solid var(--cvce-line);
  font: 500 1rem/1.5 var(--cv-sans, 'Jost', system-ui, sans-serif); color: var(--cvce-text);
  vertical-align: top;
}
.cvce-collaterals table.shop_table th { font-weight: 500; color: var(--cvce-text-mute); text-align: left; white-space: nowrap; }
.cvce-collaterals table.shop_table td { text-align: right; }
.cvce-collaterals .order-total th,
.cvce-collaterals .order-total td .amount,
.cvce-collaterals .order-total td {
  font-size: 1.35rem; font-weight: 700; color: var(--cvce-text); border-bottom: 0;
  padding-top: 1.4rem;
}
.cvce-collaterals .order-total th { font-family: var(--cv-serif, 'Playfair Display', Georgia, serif); font-weight: 600; }
.cvce-collaterals .order-total td .amount { color: var(--cvce-accent); }
/* Shipping options — right aligned beneath Delivery, consistent spacing */
.cvce-collaterals .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; text-align: right; }
.cvce-collaterals .woocommerce-shipping-methods li { margin: .35rem 0; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.cvce-collaterals .woocommerce-shipping-methods label { color: var(--cvce-text); }
.cvce-collaterals .woocommerce-shipping-methods input[type="radio"] { accent-color: var(--cvce-accent); }
.cvce-collaterals .woocommerce-shipping-destination { font-size: .82rem; color: var(--cvce-text-mute); }
.cvce-collaterals .shipping-calculator-button { color: var(--cvce-accent); }

/* Proceed to Checkout — full-width luxury copper CTA, centred */
.cvce-collaterals .wc-proceed-to-checkout { padding: 2rem 0 0; margin: 0; }
.cvce-collaterals .wc-proceed-to-checkout .checkout-button {
  display: block; width: 100%; text-align: center;
  padding-top: 1.2rem; padding-bottom: 1.2rem; font-size: .92rem; letter-spacing: .08em;
}
.cvce-collaterals .woocommerce-remove-coupon {
  color: var(--cvce-danger); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
}

/* ── Coupon — further down, generous whitespace above; input ≈80% · apply ≈20% ── */
.cvce-coupon { margin: 3rem 0 0; padding: 2.5rem 0 0; border-top: 1px solid var(--cvce-line); }
.cvce-coupon__label {
  display: block; font: 600 .72rem/1 var(--cv-sans, 'Jost', system-ui, sans-serif);
  letter-spacing: .18em; text-transform: uppercase; color: var(--cvce-text-mute); margin-bottom: .8rem;
}
.cvce-coupon__row { display: flex; gap: .75rem; align-items: stretch; }
.cvce-coupon__input {
  flex: 0 1 80%; min-width: 0;
  padding: .9rem 1rem; margin: 0;
  font: 500 .95rem/1.2 var(--cv-sans, 'Jost', system-ui, sans-serif);
  color: var(--cvce-text); background: var(--cvce-glass);
  border: 1px solid var(--cvce-line-strong); border-radius: 12px;
  transition: border-color .25s var(--cvce-ease), box-shadow .25s var(--cvce-ease), background .25s var(--cvce-ease);
}
.cvce-coupon__input::placeholder { color: var(--cvce-text-mute); opacity: .7; }
.cvce-coupon__input:focus-visible { outline: none; border-color: var(--cvce-accent); background: var(--cvce-glass-2); box-shadow: 0 0 0 3px rgba(224, 164, 88, .28); }
.cvce-coupon__apply { flex: 1 1 20%; min-width: 0; padding-top: .75rem; padding-bottom: .75rem; white-space: nowrap; }
.cvce-coupon__msg { margin: .7rem 0 0; font-size: .85rem; min-height: 1em; }
.cvce-coupon__msg.is-error { color: var(--cvce-danger); }
.cvce-coupon__msg.is-success { color: var(--cvce-success); }

/* Free-delivery bar sits above the cart (rendered on woocommerce_before_cart). */
.cvce-cart .cvc-free-bar,
.cvc-cart-editable .cvc-free-bar { margin-bottom: 1.75rem; }

/* ═══════════════════════════ Responsive ═══════════════════════════ */
/* Tablet: preserve the horizontal composition, tighten columns & gaps. */
@media (max-width: 1024px) {
  .cvce-card {
    grid-template-columns: clamp(160px, 18vw, 200px) minmax(0, 9fr) minmax(140px, 4.4fr) minmax(48px, 1fr);
    gap: clamp(1.25rem, 2.4vw, 2rem);
  }
  .cvce-vars { max-width: 400px; }
}

/* Small tablet: image + info on one line, price + remove drop to a neat second band. */
@media (max-width: 820px) {
  .cvce-card {
    grid-template-columns: clamp(140px, 26vw, 200px) minmax(0, 1fr);
    grid-template-areas:
      "media main"
      "media price";
    align-items: start;
    gap: 1.5rem 1.75rem;
  }
  .cvce-card__media { grid-area: media; }
  .cvce-card__main  { grid-area: main; }
  .cvce-card__price {
    grid-area: price; flex-direction: row; align-items: baseline; gap: .6rem;
    justify-content: flex-start; text-align: left; margin-top: .5rem;
  }
  .cvce-card__unit { margin-top: 0; }
  /* Track the row's own top padding so the trash sits on the title's optical line. */
  .cvce-remove { position: absolute; top: clamp(2.75rem, 4vw, 3.75rem); right: 0; justify-self: end; }
}

/* Mobile: stack the row vertically — image, information, selectors, quantity, price. */
@media (max-width: 560px) {
  .cvce-card {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "main" "price";
    justify-items: center;
    text-align: center;
    gap: 1.4rem;
    padding: 2.1rem 0;
  }
  .cvce-card__media { max-width: 220px; width: 70%; margin-inline: auto; }
  .cvce-card__main { align-items: center; text-align: center; }
  .cvce-card__summary { justify-content: center; }
  .cvce-card__desc { margin-inline: auto; text-align: center; }
  .cvce-vars { margin-inline: auto; max-width: 340px; }
  .cvce-card__price { flex-direction: column; align-items: center; text-align: center; margin-top: .25rem; }
  .cvce-card__unit { margin-top: .3rem; }
  .cvce-remove { top: 2.1rem; right: 0; }
  .cvce-coupon__row { flex-wrap: wrap; }
  .cvce-coupon__input, .cvce-coupon__apply { flex-basis: 100%; }
}
@media (max-width: 380px) {
  .cvce-vars { grid-template-columns: 1fr; }
}

/* ═══════════════════════════ Lightbox (reuses BAM gallery — unchanged) ═══════════════════════════ */
body.cvce-lb-open { overflow: hidden; }

.cvce-lightbox {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--cvce-ease), visibility .28s var(--cvce-ease);
}
.cvce-lightbox.is-open { opacity: 1; visibility: visible; }
.cvce-lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(16, 11, 7, .88); backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.cvce-lightbox__dialog {
  position: relative; z-index: 2;
  width: min(94vw, 960px); max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--cvce-cream);
  border-radius: var(--cv-radius, 16px);
  box-shadow: var(--cv-shadow, 0 24px 60px -24px rgba(0, 0, 0, .55));
  overflow: hidden;
  transform: translateY(14px) scale(.98);
  transition: transform .3s var(--cvce-ease);
}
.cvce-lightbox.is-open .cvce-lightbox__dialog { transform: none; }
.cvce-lightbox__close {
  position: absolute; top: .7rem; right: .7rem; z-index: 5;
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(23, 16, 10, .55); color: #fff;
  transition: background .2s var(--cvce-ease), transform .2s var(--cvce-ease);
}
.cvce-lightbox__close:hover { background: rgba(23, 16, 10, .85); transform: rotate(90deg); }
.cvce-lightbox__close:focus-visible { outline: 2px solid var(--cvce-accent); outline-offset: 2px; }
.cvce-lightbox__body { display: flex; flex-direction: column; padding: 1rem; gap: .75rem; min-height: 0; }

.cvce-lightbox__stage {
  position: relative; width: 100%; flex: 1 1 auto;
  aspect-ratio: 1 / 1; max-height: 66vh;
  border-radius: var(--cvce-radius-sm); overflow: hidden;
  background: #f5ede1; touch-action: none;
}
.cvce-lightbox__stage .cv-pg__slide {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
}
.cvce-lightbox__stage .cv-pg__slide.is-active { display: flex; }
.cvce-lightbox__stage .cv-pg__media,
.cvce-lightbox__stage .cv-pg__slide picture,
.cvce-lightbox__stage .cv-pg__slide img {
  width: 100%; height: 100%; object-fit: contain; display: block; will-change: transform;
  transform-origin: center center;
}
.cvce-lightbox__stage .cv-pg__slide.is-zoomed img { cursor: grab; }
.cvce-lightbox__stage .cv-pg__model-mount,
.cvce-lightbox__stage .cv-pg__model-mount model-viewer {
  width: 100%; height: 100%; display: block; background: #f5ede1;
}

.cvce-lightbox__thumbs {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .2rem;
  scrollbar-width: thin;
}
.cvce-lightbox__thumbs .cv-pg__thumb {
  position: relative; flex: 0 0 auto; width: 62px; height: 62px; padding: 0;
  border: 1px solid rgba(42, 21, 12, .18); border-radius: 10px; overflow: hidden;
  background: #f5ede1; cursor: pointer;
  transition: border-color .2s var(--cvce-ease), transform .2s var(--cvce-ease);
}
.cvce-lightbox__thumbs .cv-pg__thumb:hover { transform: translateY(-2px); }
.cvce-lightbox__thumbs .cv-pg__thumb.is-active { border-color: var(--cvce-accent); box-shadow: 0 0 0 2px rgba(224, 164, 88, .4); }
.cvce-lightbox__thumbs .cv-pg__thumb:focus-visible { outline: 2px solid var(--cvce-accent); outline-offset: 1px; }
.cvce-lightbox__thumbs .cv-pg__thumb img,
.cvce-lightbox__thumbs .cv-pg__thumb picture { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 600px) {
  .cvce-lightbox__dialog { width: 100vw; height: 100%; max-height: 100%; border-radius: 0; }
  .cvce-lightbox__stage { max-height: 60vh; }
  .cvce-lightbox__thumbs .cv-pg__thumb { width: 54px; height: 54px; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .cvce-thumb, .cvce-qty__btn, .cvce-remove, .cvce-card,
  .cvce-lightbox, .cvce-lightbox__dialog, .cvce-lightbox__close, .cvce-lightbox__stage img { transition: none !important; }
  .cvce-cards[aria-busy="true"]::before { animation: none; }
}