/* =================================================================
   File:    12-product-single.css
   Purpose: Single-product page — gallery + summary + cart card + tabs.

   Clean rewrite (Step 34):
   • ONE layout: gallery left · summary right (sticky on desktop).
     Layout variants were stripped because they were adding complexity
     without a tested baseline. Add them back later, one at a time,
     after the base layout is solid.
   • Image is always 1:1 — aspect-ratio on wrapper, object-fit: contain.
   • Cart buttons: ONE primary (Add to cart) + ONE secondary (Quote).
     Other plugin-injected buttons are LEFT ALONE — no catch-all rule.
   • Two CSS vars exposed to admin: --product-card-bg, --product-image-padding.
   ================================================================= */


/* ---------------------------------------------------------------
   1) LAYOUT — two-column grid, single-column on tablet/mobile.
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   BREADCRUMB — our own `liqui_breadcrumbs()` outputs `<nav>` with
   `.woocommerce-breadcrumb` class. Final item is a `<span>`,
   everything before it is an `<a>`. Separator `/` between every
   non-last item via ::after — keeps the HTML clean.
   --------------------------------------------------------------- */
.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0 0 var(--space-3);
	padding: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-ink);
}

/* Tighten the wrapper section's vertical padding when it contains a
   product page. The default `.liqui-section` pad (clamp 5vw) is right
   for marketing pages but too tall for a product detail page — the
   breadcrumb already provides clear visual separation from the header.
   `:has()` is supported in all evergreen browsers since 2023. */
.liqui-section:has(> .liqui-single) {
	padding-block-start: var(--space-3);
	padding-block-end: var(--space-6);
}
.woocommerce-breadcrumb a {
	color: var(--c-ink-muted);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.woocommerce-breadcrumb a:hover { color: var(--c-accent); }
.woocommerce-breadcrumb > :not(:last-child)::after {
	content: "/";
	margin-inline-start: 8px;
	color: var(--c-ink-soft);
	font-weight: var(--fw-regular);
}
.woocommerce-breadcrumb > span:last-child { color: var(--c-ink); }


/* LAYOUT — `.liqui-single__layout` holds three real children:
   .liqui-gallery · .liqui-single__info · .liqui-single__buybox
   (plus the position:fixed lightbox + a <script>, both out of flow).

   Mobile / tablet (≤1024px): a simple vertical stack.
   Desktop (≥1025px): a grid, with explicit per-layout placement —
   see the LAYOUT VARIANTS block lower in this file. No `display:
   contents` anywhere — placement is plain grid-column / grid-row. */
.liqui-single__layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
@media (min-width: 1025px) {
	.liqui-single__layout {
		display: grid;
		gap: var(--space-6);
		align-items: start;
	}
}

/* Defeat Woo's legacy float layout on the summary column. Woo's default
   `.woocommerce div.product .summary { float: right; width: 48% }` has
   specificity (0,3,1) — higher than our `.liqui-single .summary` (0,2,0),
   so Woo was winning. !important is the cleanest fix here — we're
   explicitly fighting a vendor default. (The gallery side is our own
   `.liqui-gallery` markup now — no Woo float to fight there.) */
.liqui-single .summary {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
}


/* ---------------------------------------------------------------
   2) CUSTOM GALLERY — our own implementation, replaces WC flexslider.
      Markup: template-parts/product/single-gallery.php
        .liqui-gallery
          .liqui-gallery__stage
            .liqui-gallery__zoom / __nav (overlay buttons)
            .liqui-gallery__viewport > .liqui-gallery__main (img)
          .liqui-gallery__thumbs > .liqui-gallery__thumb (buttons)
      Plus a fullscreen .liqui-lightbox appended after it.
   --------------------------------------------------------------- */
.liqui-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Stage — the 1:1 main image area as a clean card. */
.liqui-gallery__stage {
	position: relative;
	background: var(--product-card-bg, #fff);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 0 0 rgba(15, 23, 42, 0.02),
	            0 8px 24px -16px rgba(15, 23, 42, 0.08);
	overflow: hidden;
}
.liqui-gallery__viewport {
	aspect-ratio: 1 / 1;
	background: var(--c-surface-1);
	overflow: hidden;
	cursor: zoom-in;
}
.liqui-gallery__main {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	padding: var(--product-image-padding, var(--space-4));
	box-sizing: border-box;
}

/* ----- LIQUID-GLASS overlay buttons (zoom + prev/next) -----
   Very transparent glass — just a hint of blur so the product image
   stays visible through the button. Kept light on purpose: a heavy
   backdrop blur is expensive to repaint and was making the press
   animation stutter. 3px blur is cheap enough to stay smooth. */
.liqui-gallery__zoom,
.liqui-gallery__nav {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--c-ink);
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.40);
	-webkit-backdrop-filter: blur(3px) saturate(150%);
	backdrop-filter:         blur(3px) saturate(150%);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.6),
		0 6px 18px -8px rgba(15, 23, 42, 0.28);
	transition: background var(--dur-fast) var(--ease),
	            box-shadow var(--dur-fast) var(--ease);
}
/* Glass-bead highlight — a soft radial sheen, top-left. */
.liqui-gallery__zoom::after,
.liqui-gallery__nav::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at 34% 26%,
		rgba(255, 255, 255, 0.5) 0%,
		rgba(255, 255, 255, 0) 60%);
	pointer-events: none;
	z-index: 1;
}
/* Icon sits above the sheen; drop-shadow keeps it legible on busy photos. */
.liqui-gallery__zoom svg,
.liqui-gallery__nav svg {
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.7));
}

.liqui-gallery__zoom { top: 14px; inset-inline-end: 14px; width: 44px; height: 44px; }
.liqui-gallery__zoom svg { width: 18px; height: 18px; }

.liqui-gallery__nav { top: 50%; width: 44px; height: 44px; transform: translateY(-50%); }
.liqui-gallery__nav svg { width: 20px; height: 20px; }
.liqui-gallery__nav--prev { inset-inline-start: 14px; }
.liqui-gallery__nav--next { inset-inline-end: 14px; }

/* Hover — slightly brighter glass. */
.liqui-gallery__zoom:hover,
.liqui-gallery__nav:hover {
	background: rgba(255, 255, 255, 0.22);
	box-shadow:
		inset 0 1px 2px rgba(255, 255, 255, 0.75),
		0 8px 22px -8px color-mix(in oklab, var(--c-accent) 40%, rgba(15,23,42,0.3));
}

/* Short, composited press feedback. Triggered by gallery JS. */
.liqui-gallery__nav.is-pressing {
	animation: liqui-liquid-press 220ms var(--ease-out);
	will-change: transform;
}
@keyframes liqui-liquid-press {
	0%   { transform: translateY(-50%) scale(1, 1); }
	42%  { transform: translateY(-50%) scale(0.97, 0.97); }
	100% { transform: translateY(-50%) scale(1, 1); }
}
/* Water-ripple ring — animates only transform + opacity (both composited). */
.liqui-gallery__nav.is-pressing::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.7);
	pointer-events: none;
	z-index: 0;
	animation: liqui-liquid-ripple 240ms var(--ease-out);
}
@keyframes liqui-liquid-ripple {
	0%   { opacity: 0.8; transform: scale(0.9); }
	100% { opacity: 0;   transform: scale(1.9); }
}

/* Reduced-motion: keep the glass, drop the animation. */
@media (prefers-reduced-motion: reduce) {
	.liqui-gallery__nav.is-pressing { animation: none; }
	.liqui-gallery__nav.is-pressing::before { animation: none; content: none; }
}

/* Badges overlay — top-left of the stage. */
.liqui-gallery .liqui-product-badges {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	z-index: 3;
}

/* Thumbnail strip — horizontal scroller, fixed 80px thumbs. */
.liqui-gallery__thumbs {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}
.liqui-gallery__thumbs::-webkit-scrollbar { display: none; }
.liqui-gallery__thumb {
	flex: 0 0 80px;
	width: 80px; height: 80px;
	padding: 6px;
	background: var(--c-surface-1);
	border: 2px solid var(--c-line);
	border-radius: var(--radius-sm);
	cursor: pointer;
	opacity: 0.6;
	transition: opacity var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease);
}
.liqui-gallery__thumb img {
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
}
.liqui-gallery__thumb:hover { opacity: 1; transform: translateY(-1px); }
.liqui-gallery__thumb.is-active { opacity: 1; border-color: var(--c-accent); }

/* ---- FULLSCREEN LIGHTBOX ----
   position: fixed so it never participates in the product grid layout. */
.liqui-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, 0.93);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.liqui-lightbox[hidden] { display: none; }
.liqui-lightbox__figure {
	margin: 0;
	max-width: 90vw;
	max-height: 86vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.liqui-lightbox__img {
	max-width: 90vw;
	max-height: 86vh;
	object-fit: contain;
	border-radius: var(--radius);
	background: #fff;
}
.liqui-lightbox__close,
.liqui-lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}
.liqui-lightbox__close:hover,
.liqui-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.liqui-lightbox__close {
	top: 20px;
	inset-inline-end: 20px;
	width: 44px; height: 44px;
}
.liqui-lightbox__close svg { width: 22px; height: 22px; }
.liqui-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 48px; height: 48px;
}
.liqui-lightbox__nav svg { width: 24px; height: 24px; }
.liqui-lightbox__nav--prev { inset-inline-start: 20px; }
.liqui-lightbox__nav--next { inset-inline-end: 20px; }
.liqui-lightbox__counter {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: 0.04em;
}
@media (max-width: 640px) {
	.liqui-lightbox__nav { width: 44px; height: 44px; }
	.liqui-lightbox__nav--prev { inset-inline-start: 8px; }
	.liqui-lightbox__nav--next { inset-inline-end: 8px; }
}


/* ---------------------------------------------------------------
   3) SUMMARY — two layout blocks:
        .liqui-single__info    brand/title/rating/price/excerpt/trust
        .liqui-single__buycol  wraps the buy box + the trade block
      Each is a vertical flex stack; their position in the page grid
      is set by the layout-variant rules near the bottom of this file.
   --------------------------------------------------------------- */
.liqui-single__info,
.liqui-single__buycol,
.liqui-single__buybox {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}
/* Brand — logo image if the brand term has one, else the name text. */
.liqui-single__brand { margin-bottom: 2px; }
.liqui-single__brand-logo {
	display: inline-block;
	line-height: 0;
}
.liqui-single__brand-logo img {
	max-height: 40px;
	width: auto;
	object-fit: contain;
	display: block;
}

/* Product title follows the approved Fraunces editorial hierarchy while
   retaining the compact scale needed beside the product gallery. */
.liqui-single__info .product_title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.35rem);
	font-weight: var(--fw-regular);
	line-height: 1.13;
	letter-spacing: -0.025em;
	color: var(--c-ink);
	text-wrap: balance;
	font-optical-sizing: auto;
}
.liqui-single__rating { display: flex; align-items: center; gap: var(--space-2); }
.liqui-single__rating .star-rating { color: var(--c-warning); }
.liqui-single__price { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.liqui-single__price del { color: var(--c-ink-soft); font-weight: var(--fw-regular); font-size: var(--fs-md); }
.liqui-single__price ins { text-decoration: none; color: var(--c-accent); }
.liqui-single__excerpt { color: var(--c-ink-muted); }

/* Trade-account CTA uses the same blue family as the primary path. */
.liqui-single__trade {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid color-mix(in oklab, var(--c-accent) 26%, var(--c-line));
	border-radius: var(--radius);
	background: color-mix(in oklab, var(--c-accent) 7%, #fff);
}
.liqui-single__trade-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	color: var(--c-accent);
}
.liqui-single__trade-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
.liqui-single__trade-title {
	font-family: var(--ff-display);
	font-size: var(--fs-md);
	font-weight: var(--fw-regular);
	color: var(--c-ink);
	font-optical-sizing: auto;
}
.liqui-single__trade-text {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-ink-muted);
	line-height: 1.4;
}
.liqui-single__trade-btn {
	align-self: flex-start;
	margin-top: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	background: var(--c-warm);
	color: #fff;
	border-radius: var(--radius-sm);
	font-weight: var(--fw-semi);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.liqui-single__trade-btn:hover {
	background: color-mix(in oklab, var(--c-warm) 82%, #000);
}
.liqui-single__trade-btn:active { transform: scale(0.97); }


/* ---------------------------------------------------------------
   4) CART CARD — primary CTA + outline quote button.
   No catch-all rule. Plugin-injected buttons keep their own styling.
   --------------------------------------------------------------- */
.liqui-single__cart {
	background: var(--c-surface-1);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* The Woo form (`form.cart`) holds the qty stepper + add-to-cart button.
   Qty inline with button on desktop, stacks vertically on narrow widths. */
.liqui-single__cart .cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: stretch;     /* consistent height row */
	margin: 0;
}

/* Shared sizing — all primary/outline buttons in the cart card share one
   visual rhythm (height, radius, weight). */
.liqui-single__cart .single_add_to_cart_button,
.liqui-single__cart .btn-quote {
	min-height: 48px;
	padding: 0 22px;
	border-radius: var(--radius-sm);
	font-weight: var(--fw-semi);
	font-size: var(--fs-base);
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease);
}

/* Primary: Woo's "Add to cart". Fills remaining row space next to qty. */
.liqui-single__cart .single_add_to_cart_button {
	flex: 1 1 200px;
	background: var(--c-accent) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 4px 14px -6px color-mix(in oklab, var(--c-accent) 60%, transparent);
}
.liqui-single__cart .single_add_to_cart_button:hover {
	background: var(--c-accent-2) !important;
}
.liqui-single__cart .single_add_to_cart_button:active,
.liqui-single__cart .btn-quote:active { transform: scale(0.97); }

/* Secondary: our "Request a quote" button. Full-width below the cart form. */
.liqui-single__cart .btn-quote {
	flex: 1 1 100%;
	background: transparent;
	color: var(--c-ink);
	border: 1.5px solid var(--c-line);
}
.liqui-single__cart .btn-quote:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}


/* ---------------------------------------------------------------
   5) META / QTY / TABS / TRUST STRIP / STICKY BAR
   --------------------------------------------------------------- */
.liqui-single__meta-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Qty stepper */
.liqui-single .quantity,
.woocommerce-cart-form .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	background: #fff;
	overflow: hidden;
}
.liqui-qty__btn {
	width: 44px;
	height: 44px;
	font-size: 18px;
	color: var(--c-ink);
	background: transparent;
}
.liqui-qty__btn:hover { background: var(--c-surface-2); }
.liqui-single .quantity input.qty,
.woocommerce-cart-form .quantity input.qty {
	width: 56px;
	height: 44px;
	border: 0;
	text-align: center;
	background: transparent;
	font-weight: var(--fw-semi);
	-moz-appearance: textfield;
}
.liqui-single .quantity input.qty::-webkit-outer-spin-button,
.liqui-single .quantity input.qty::-webkit-inner-spin-button,
.woocommerce-cart-form .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart-form .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.liqui-gallery__viewport:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 3px;
}
.liqui-stock-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--c-success);
	background: color-mix(in oklab, var(--c-success) 9%, var(--c-surface-1));
	border-color: color-mix(in oklab, var(--c-success) 24%, var(--c-line));
}

/* Product detail SECTIONS — collapsible cards (native <details>/<summary>).
   Specifications first, Description below. Click the title row to
   expand / collapse; the chevron rotates. Open by default. */
.liqui-single__sections {
	margin-top: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.liqui-single__section {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: var(--space-5);
}
/* The <summary> is the clickable title row. Default disclosure triangle
   removed — we use our own rotating chevron instead. */
.liqui-single__section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0;
	font-family: var(--ff-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-regular);
	color: var(--c-ink);
	font-optical-sizing: auto;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.liqui-single__section-title::-webkit-details-marker { display: none; }
.liqui-single__section-chevron {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--c-ink-muted);
	transition: transform var(--dur) var(--ease);
}
.liqui-single__section[open] .liqui-single__section-chevron {
	transform: rotate(180deg);
}
/* When open, a hairline divider sits between the title and the body. */
.liqui-single__section[open] .liqui-single__section-title {
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--c-line);
}
.liqui-single__section-body :first-child { margin-top: 0; }
.liqui-single__section-body :last-child  { margin-bottom: 0; }

/* Hide Woo's tab callback h2 since our section already has its own
   title — would otherwise double-up "Description Description". */
.liqui-single__section-body > h2 { display: none; }

/* SPECIFICATIONS — WooCommerce's native product-attributes table, scoped
   beneath the Liqui section so no template override is required. Borderless:
   no dividers, no cell backgrounds, no striping.

   table-layout MUST stay auto: the label column uses the shrink-to-fit
   trick (width:1% + nowrap) so it hugs its widest label.

   IMPORTANT — why padding is split: vertical padding uses `padding-block`
   on the shared th/td rule; the column gap uses `padding-inline` on the
   per-column rules. They are SEPARATE properties, so the gap can never be
   lost to a cascade clash. */
.liqui-single__section-body .shop_attributes {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
}
.liqui-single__section-body .shop_attributes th,
.liqui-single__section-body .shop_attributes td {
	padding-block: 3px;         /* vertical only — tight rows, low line spacing */
	border: 0;
	text-align: start;
	vertical-align: baseline;
	font-style: normal;
	background: transparent;
}
.liqui-single__section-body .shop_attributes th {
	width: 1%;                  /* shrink-to-fit: column hugs the widest label */
	white-space: nowrap;
	padding-inline: 0 60px;     /* 60px gap between label and value */
	color: var(--c-ink);
	font-weight: var(--fw-regular);   /* lighter — the table was looking bold */
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.3;
}
.liqui-single__section-body .shop_attributes td {
	padding-inline: 0;
	color: var(--c-ink-muted);   /* a little lighter than the label, not pure black */
	font-weight: var(--fw-regular);
	font-size: var(--fs-sm);
	line-height: 1.3;
}
.liqui-single__section-body .shop_attributes td p { margin: 0; }

/* Narrow screens — let long labels wrap; smaller column gap. */
@media (max-width: 768px) {
	.liqui-single__section-body .shop_attributes th {
		width: 35%;
		white-space: normal;
		padding-inline: 0 20px;
	}
}

/* ---------------------------------------------------------------
   RELATED PRODUCTS CAROUSEL — horizontal scroll, one row, hidden
   scrollbar, smooth scrolling with snap. Touch swipe is native.
   Arrow buttons drive scrollBy() via inline JS in the template.
   --------------------------------------------------------------- */
.liqui-single__related {
	margin-top: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.liqui-carousel { display: flex; flex-direction: column; gap: var(--space-3); }
.liqui-carousel__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.liqui-carousel__head .h3 { margin: 0; }
.liqui-carousel__nav { display: flex; gap: 6px; }
.liqui-carousel__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--c-line);
	background: #fff;
	color: var(--c-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease);
}
.liqui-carousel__btn:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #fff;
}
@media (max-width: 640px) {
	.liqui-carousel__nav { display: none; }   /* touch swipe is enough on mobile */
}

.liqui-carousel__track {
	display: flex;
	gap: var(--space-3);
	/* BOTH axes hidden on pointer devices. The element stays
	   programmatically scrollable, so the prev/next arrows (scrollBy)
	   still work — but the mouse wheel is NEVER captured: not hijacked
	   sideways, and not trapped vertically. The wheel always scrolls the
	   PAGE when the cursor is over the carousel. Touch swipe is restored
	   for touch devices below. */
	overflow: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;             /* Firefox */
	-ms-overflow-style: none;          /* IE/Edge */
	padding-bottom: 2px;               /* breathing room for any shadow */
}
.liqui-carousel__track::-webkit-scrollbar { display: none; }   /* Safari/Chrome */
/* Touch devices have no mouse wheel to hijack — restore native swipe. */
@media (hover: none) {
	.liqui-carousel__track { overflow-x: auto; }
}
/* Inside the carousel, drop the card's hover LIFT. The translateY(-4px)
   lift pokes a few px above the track; with the track now hiding overflow
   that lift caused a vertical scroll catcher (mouse wheel got trapped).
   Hover shadow + image zoom still play, so hover feedback remains. */
.liqui-carousel__track .liqui-card:hover { transform: none; }
.liqui-carousel__slide {
	flex: 0 0 auto;
	width: 220px;                      /* compact card width */
	scroll-snap-align: start;
}
@media (max-width: 480px) {
	.liqui-carousel__slide { width: 70vw; }  /* one-and-a-bit cards visible on mobile */
}

/* Trust strip — Amazon-style. 3 badges in one row, each a centered
   vertical stack: icon on top, title + subtitle below. Stays a single
   3-column row on EVERY screen size (just scales down on mobile).

   Equal sizing is bulletproofed: explicit 1fr×3 columns, `align-items:
   stretch` so every item fills the full row height, and each item is
   `box-sizing: border-box; width: 100%` so border + padding never make
   one box wider/taller than its siblings. */
.liqui-trust-strip {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: stretch;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
}
.liqui-trust-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: 4px;
	width: 100%;
	box-sizing: border-box;
	/* margin: 0 is load-bearing — 02-typography.css has a global
	   `li + li { margin-top: var(--space-1) }` rule. Without this reset,
	   the 2nd + 3rd items inherit a top margin and, as stretched grid
	   items, end up shorter than the 1st (which has no preceding li). */
	margin: 0;
	padding: 10px 6px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	background: #fff;
	transition: border-color var(--dur-fast) var(--ease);
}
.liqui-trust-strip__item:hover {
	border-color: color-mix(in oklab, var(--c-accent) 50%, var(--c-line));
}
.liqui-trust-strip__icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: color-mix(in oklab, var(--c-accent) 12%, transparent);
	color: var(--c-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.liqui-trust-strip__icon svg {
	display: block;
	width: 17px;
	height: 17px;
}
.liqui-trust-strip__title {
	display: block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	line-height: 1.25;
	color: var(--c-ink);
}
.liqui-trust-strip__sub {
	display: block;
	font-size: 10.5px;
	line-height: 1.3;
	color: var(--c-ink-muted);
}

/* Mobile — keep all 3 in ONE row, scale down a touch more. */
@media (max-width: 560px) {
	.liqui-trust-strip { gap: 5px; }
	.liqui-trust-strip__item { padding: 8px 4px; }
	.liqui-trust-strip__icon { width: 26px; height: 26px; }
	.liqui-trust-strip__icon svg { width: 15px; height: 15px; }
	.liqui-trust-strip__sub { font-size: 9.5px; }
}

/* Sticky bottom add-to-cart bar */
.liqui-sticky-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: var(--z-sticky);
	background: var(--glass-bg-strong);
	border-block-start: 1px solid var(--c-line);
	box-shadow: 0 -8px 28px -12px rgba(15, 23, 42, 0.15);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
	backdrop-filter:         blur(var(--glass-blur)) saturate(140%);
	transform: translateY(100%);
	transition: transform var(--dur) var(--ease);
}
.liqui-sticky-bar.is-visible { transform: translateY(0); }
.liqui-sticky-bar[hidden]    { display: none; }
.liqui-sticky-bar__inner { display: flex; align-items: center; gap: var(--space-3); padding-block: 10px; }
.liqui-sticky-bar__media {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	padding: 4px;
}
.liqui-sticky-bar__media img { width: 100%; height: 100%; object-fit: contain; }
.liqui-sticky-bar__body { flex: 1; min-width: 0; }
.liqui-sticky-bar__title {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--c-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.liqui-sticky-bar__price { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-muted); }
.liqui-sticky-bar__cta { flex-shrink: 0; }
@media (max-width: 600px) {
	.liqui-sticky-bar__media { display: none; }
}


/* =================================================================
   LAYOUT VARIANTS — desktop only (≥1025px). The layout grid has three
   real children: .liqui-gallery · .liqui-single__info ·
   .liqui-single__buybox. Each variant places them with explicit
   grid-column / grid-row — no `display: contents`.
   ================================================================= */
@media (min-width: 1025px) {

	/* The layout grid has THREE children: gallery · info · buycol.
	   `.liqui-single__buycol` wraps the buy box + trade block so they
	   stack tightly together in their column — no big gap. */

	/* ---- CLASSIC + COMPACT — 2 columns ----------------------------
	   Gallery fills the left column; info above buycol on the right. */
	.liqui-single--classic .liqui-single__layout {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
	.liqui-single--compact .liqui-single__layout {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}
	.liqui-single--classic .liqui-gallery,
	.liqui-single--compact .liqui-gallery {
		grid-column: 1;
		grid-row: 1 / span 2;       /* spans info + buycol rows */
	}
	.liqui-single--classic .liqui-single__info,
	.liqui-single--compact .liqui-single__info {
		grid-column: 2;
		grid-row: 1;
	}
	.liqui-single--classic .liqui-single__buycol,
	.liqui-single--compact .liqui-single__buycol {
		grid-column: 2;
		grid-row: 2;
	}

	/* ---- AMAZON — 3 columns: GALLERY · INFO · BUY COLUMN ----------
	   Real Amazon product-page split. The gallery flips to a horizontal
	   row internally (thumbnail strip left of the main image). The buy
	   column (buy box + trade block) is column 3. */
	.liqui-single--amazon .liqui-single__layout {
		grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
		gap: var(--space-5);
	}
	.liqui-single--amazon .liqui-gallery       { grid-column: 1; grid-row: 1; }
	.liqui-single--amazon .liqui-single__info  { grid-column: 2; grid-row: 1; }
	.liqui-single--amazon .liqui-single__buycol{ grid-column: 3; grid-row: 1; }

	/* Gallery → thumbnail column left of the main image. */
	.liqui-single--amazon .liqui-gallery {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-3);
	}
	.liqui-single--amazon .liqui-gallery__thumbs {
		order: -1;                       /* thumb strip → left of image */
		flex: 0 0 72px;
		width: 72px;
		flex-direction: column;
		align-items: center;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: 540px;
		margin: 0;
	}
	.liqui-single--amazon .liqui-gallery__thumb {
		flex: none;                      /* button keeps its explicit size */
		width: 66px;
		height: 66px;
		min-width: 66px;
		min-height: 66px;
	}
	.liqui-single--amazon .liqui-gallery__stage { flex: 1 1 auto; min-width: 0; }

	/* Buy box → bordered card, the Amazon buy-box panel. Not sticky:
	   the trade block sits directly below it in the same column, and a
	   sticky buy box would overlap the trade block as the page scrolls. */
	.liqui-single--amazon .liqui-single__buybox {
		border: 1px solid var(--c-line);
		border-radius: var(--radius-lg);
		background: #fff;
		padding: var(--space-4);
	}
	/* The cart form sheds its own card border inside the buy-box panel —
	   the buy box already provides the card, so this avoids card-in-card. */
	.liqui-single--amazon .liqui-single__cart {
		border: 0;
		background: transparent;
		padding: 0;
	}
}