/* =============================================================
 * JAUREA — LIGHT GLASS ONLY  (jaurea-glass.css)
 * -------------------------------------------------------------
 * This sheet used to be theme-toggle.css and it carried the
 * JAUREA dark-mode system. Dark mode has been REMOVED from the
 * storefront: no floating toggle, no <html data-jaurea-theme>
 * state, no jaurea_theme_preference localStorage, no
 * prefers-color-scheme branch. The storefront is LIGHT MODE ONLY
 * on the warm JAUREA canvas.
 *
 * What survived the removal is the theme-independent glass layer:
 *   0   the REAL page canvas  (Woodmart --wd-* tokens, warm cream)
 *   1a  the --ja-* token set at every width
 *   7.4 the cart / wishlist count chip
 *   7.6 two AA ink fixes on the mobile dock
 *   14  the glass correction: product overlay, category cards,
 *       buttons, info boxes, bounded surfaces, badges, stars, motion
 *
 * Every selector that used to read html[data-jaurea-theme] or
 * html[data-jaurea-theme="light"] now reads html:root. Both are
 * specificity (0,1,1), so the cascade is byte-for-byte unchanged for
 * a light visitor. All html[data-jaurea-theme="dark"] rules and all
 * prefers-color-scheme: dark blocks were deleted.
 *
 * Enqueued as `jaurea-glass` after `child-style` (priority 1001)
 * from inc/enqueue-assets.php, so it wins equal-specificity ties
 * against style.css and the parent theme. filemtime() versioning
 * makes LiteSpeed re-hash the combined CSS on edit.
 * ============================================================= */



/* ---------------------------------------------------------
 * 0. REAL PAGE CANVAS — Woodmart token layer, BOTH themes
 * ---------------------------------------------------------
 * Woodmart paints the page through exactly FOUR rules, and every
 * one of them reads `var(--wd-main-bgcolor)`:
 *
 *   .wd-page-wrapper                 { background-color: var(--wd-main-bgcolor) }
 *   body:not([class*=wrapper-boxed]) { background-color: var(--wd-main-bgcolor) }
 *   .wd-page-content                 { background-color: var(--wd-main-bgcolor) }
 *   .wd-prefooter                    { background-color: var(--wd-main-bgcolor) }
 *
 * `--wd-main-bgcolor` is declared at `:root` as #FFF. That is exactly
 * why a `body { background-color }` rule never darkened this site:
 * `body:not([class*=wrapper-boxed])` is (0,1,1) and outranks plain
 * `body` (0,0,1), and `.wd-page-wrapper` paints over the body anyway.
 * The canvas therefore has to be driven through Woodmart's OWN
 * variable instead of being fought with a body-only rule.
 *
 * Specificity: `html[data-jaurea-theme="…"]` is (0,1,1) and beats
 * `:root` (0,1,0) — so it wins even though Woodmart prints its theme
 * settings as an inline <style> in <head>, i.e. AFTER this sheet in
 * source order. No !important is required anywhere in this block.
 *
 * `--wd-primary-color` drives the cart count chip and the current
 * pagination pill; both are #111 by default and would be invisible on
 * a near-black canvas, so it is remapped to champagne in dark mode.
 * --------------------------------------------------------- */

html:root {
	/* warm cream canvas — never pure #fff, matching the JAUREA
	 * warm-neutral language already used by the header/toolbar glass */
	--wd-main-bgcolor: #fbf8f3;
}


/* Belt-and-braces: state the four canvas surfaces explicitly as well.
 * The token above is sufficient on its own, but naming the elements
 * makes the intent auditable and survives a Woodmart refactor that
 * drops one of the var() consumers. */
html:root body,
html:root .wd-page-wrapper,
html:root .wd-page-content {
	background-color: var(--wd-main-bgcolor);
}


/* Layered depth: one restrained warm wash at the top of the canvas.
 * Cheap (no animation, no filter, no scroll listener) and it is what
 * keeps the flat canvas from reading as a plain fill. */
html:root .wd-page-wrapper {
	background-image: radial-gradient(120% 60% at 50% -10%,
		rgba(184, 155, 114, .10), rgba(184, 155, 114, 0) 70%);
	background-repeat: no-repeat;
}


/* ---------------------------------------------------------
 * 1a. LIGHT TOKEN LAYER — all widths
 * ---------------------------------------------------------
 * style.css declares the --ja-* tokens only inside
 * `@media (max-width: 1024px)`, so on desktop every var(--ja-*)
 * fell through to its inline fallback. This block gives the light
 * theme a full token set at EVERY width.
 *
 * The values are byte-identical to the mobile light block in
 * style.css, so nothing on mobile changes; desktop simply gains
 * the same tokens. Placed BEFORE section 4 on purpose — section 4
 * must keep winning on a dark-OS + explicit-Light device, and the
 * two tie on specificity (0,1,2), so source order decides.
 * --------------------------------------------------------- */
html:root body {
	--ja-radius: 20px;
	--ja-radius-sm: 12px;

	--ja-surface: rgba(248, 240, 227, .72);
	--ja-surface-2: rgba(250, 244, 234, .9);
	--ja-glass-panel: rgba(248, 238, 221, .58);
	--ja-hairline: rgba(74, 58, 40, .14);
	--ja-hairline-strong: rgba(74, 58, 40, .22);
	--ja-ink: #2c2622;
	--ja-ink-soft: #7d7163;

	--ja-camel: #a8865b;
	--ja-champagne: #b08d57;
	--ja-warm: #8f6f44;
	--ja-accent-bg: rgba(176, 141, 87, .10);
	--ja-accent-bg-2: rgba(176, 141, 87, .16);

	--ja-sh-1: 0 1px 2px rgba(74, 58, 40, .06), 0 8px 24px rgba(74, 58, 40, .08);
	--ja-sh-2: 0 2px 6px rgba(74, 58, 40, .08), 0 16px 40px rgba(74, 58, 40, .12);
	--ja-hl: inset 0 1px 0 rgba(255, 255, 255, .5);

	--ja-blur: blur(14px) saturate(1.25);
	--ja-ease: cubic-bezier(.22, .61, .36, 1);
	--ja-d: .22s;
}


/* ---------------------------------------------------------
 * 7. SURFACE CORRECTIONS — two details that outlive dark mode
 * ---------------------------------------------------------
 * 7.4 the cart / wishlist count chip: Woodmart paints it white with
 *     champagne digits (3.09:1). Repointed as a champagne pill with
 *     dark ink (5.90:1) and tighter geometry.
 * 7.6 two inks that sat just under AA on the cream toolbar surface
 *     (.wd-toolbar-label 4.13:1, .wd-filter-icon 4.44:1) are deepened
 *     to #6b6156 (5.35:1).
 *
 * The dark-only corrections (7.1/7.2/7.3/7.5) were removed with dark
 * mode: with a light-only storefront the Elementor kit colours, the
 * shop-transition section and the two homepage containers render as
 * authored.
 * --------------------------------------------------------- */

/* --- 7.1 Elementor global colour tokens ----------------------
 * The kit rule is `.elementor-kit-36` = (0,1,0). `html[data-…] body`
 * is (0,1,2) and wins without !important. `--e-global-color-accent`
 * is the brand champagne and is deliberately left alone. */

/* --- 7.2 the shop-transition section ------------------------
 * Its own inline block sets `#jaurea-shop-transition{background:#fff}`
 * at (1,0,0) and is printed in the body, i.e. after this sheet.
 * `html[data-…] #id` is (1,1,1), so specificity decides, not order. */


/* --- 7.3 the two light homepage containers ------------------
 * Both are Elementor containers whose background is stored in
 * _elementor_data. They are addressed by their Elementor element id
 * so no Elementor content, template or global setting is touched.
 * The background is re-pointed at the same L1 glass surface used by
 * every other card, so they read as part of the system rather than
 * as holes punched in it. */

/* --- 7.4 the cart / wishlist count chip ---------------------
 * CORRECTED. The first version of this rule was (0,2,1):
 *     html[data-jaurea-theme="dark"] .wd-tools-count
 * and it did NOTHING. Woodmart paints the chip with
 *     .wd-tools-element:is([class*=wd-design-6],[class*=wd-design-7],
 *                          .wd-design-8) .wd-tools-count
 *       { background-color:#fff; color:var(--wd-primary-color);
 *         position:absolute; top:-3px; inset-inline-end:-7px;
 *         font-size:11px }
 * `:is()` takes the specificity of its most specific argument, so that
 * rule is (0,3,0) — it beat both this block AND the header-chip block
 * already in style.css (0,2,1). The chip therefore stayed WHITE with
 * champagne digits (3.09:1) and kept Woodmart's geometry, i.e. the
 * child theme's chip design had never applied at all.
 *
 * `… body .whb-main-header .wd-tools-element .wd-tools-count` is
 * (0,4,2) and wins in the combined bundle. Champagne fill + #17150f
 * digits is 5.90:1; the previous white-on-champagne was 3.09:1. */
html:root body .whb-main-header .wd-tools-element .wd-tools-count,
html:root body .whb-main-header .wd-tools-count {
	top: 2px;
	inset-inline-end: 0;
	width: auto;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	border-radius: 9px;
	background-color: var(--ja-champagne, #b08d57);
	color: #17150f;
	font-size: 9.5px;
	font-weight: 700;
	line-height: 17px;
	box-shadow: 0 1px 3px rgba(28, 24, 20, .22);
}

html:root body .wd-toolbar .wd-tools-element .wd-tools-count,
html:root body .wd-toolbar .wd-tools-count {
	top: -2px;
	inset-inline-end: -4px;
	width: auto;
	min-width: 16px;
	height: 16px;
	padding-inline: 4px;
	border-radius: 8px;
	background-color: var(--ja-champagne, #b08d57);
	color: #17150f;
	font-size: 9px;
	font-weight: 700;
	line-height: 16px;
}


/* --- 7.5 TranslatePress language switcher ------------------
 * Its default ink is rgb(20,56,82) — a cold navy, the only non-brand
 * blue in the chrome. Re-pointed at the warm ink used everywhere
 * else. Only the colour changes; the widget's markup, behaviour and
 * the language list are untouched. */

html:root .trp-language-switcher .trp-language-item-name,
html:root .trp-language-switcher .trp-ls-shortcode-current-language {
	color: #2c2622;
	border-color: rgba(74, 58, 40, .18);
}

/* --- 7.6 two LIGHT-theme inks that sat just under AA ---------
 * Measured on the rendered glass toolbar surface
 * rgba(248,240,227,.88) = #f8f0e3:
 *     .wd-toolbar-label   #7a736b   4.13:1
 *     .wd-filter-icon     #6f6f6f   4.44:1
 * Both are real UI labels on the mobile dock / shop tools bar, and
 * both sit on a translucent cream surface, so they take a slightly
 * deeper warm grey (#6b6156 = 5.35:1). Dark mode already reads
 * 7.3:1 and 8.65:1 and is deliberately left alone. */
html:root body .wd-toolbar .wd-toolbar-label,
html:root body .wd-filter-icon {
	color: #6b6156;
}

/* =============================================================
 * 14. GLASS CORRECTION — product overlay, category cards,
 *     buttons and bounded surfaces
 * -------------------------------------------------------------
 * WHY THIS SECTION EXISTS
 *
 * A read-only forensic pass over the RENDERED page (not the source)
 * found that the glass work in section 13 never reached the product
 * cards. Two rules in the same LiteSpeed bundle:
 *
 *   .ja-hero-slider .wd-product .product-element-bottom
 *       { position: absolute }   child theme, (0,3,0), byte 100 465
 *   .wd-hover-with-fade.wd-fade-off .product-element-bottom
 *       { position: static }     parent theme, (0,3,0), byte 303 815
 *
 * They TIE on specificity, so source order decides — and the combine
 * emits the parent theme LAST. The parent won. Result: every product
 * panel rendered BELOW its image as a solid block instead of
 * overlaying it, which is exactly the anti-pattern being corrected.
 *
 * The fix is a corrected cascade, not a new system: the child
 * selector is lifted above the parent with
 * `html[data-jaurea-theme] body .ja-hero-slider …` so it outranks
 * the parent unconditionally.
 *
 * A second, independent defect was found the same way:
 *   .product-element-bottom .wd-add-btn a.button .wd-action-text
 *       { color:#111 !important }   parent theme, (0,4,0)
 * The add-to-cart LABEL is hardcoded near-black, so in dark mode it
 * measured 1.05:1 against the canvas — invisible. Corrected below.
 *
 * Everything in this section styles an EXISTING Woodmart or
 * child-theme selector. No markup, template, product, price,
 * Elementor or WooCommerce change is involved.
 *
 * -------------------------------------------------------------
 * SCOPE — REVISED (homepage-showcase glass correction)
 *
 * Every product-card, category-card, badge and star rule in this
 * section is now prefixed `.ja-hero-slider` (the single homepage
 * showcase container, `elementor-element-423ad59`, present exactly
 * once on `/` and `/en/` and never on shop/category/related pages).
 *
 * This was REQUIRED, not cosmetic. Before the revision this section
 * matched `.wd-product` globally, which produced two defects:
 *
 *  1. SCOPE LEAK — the overlay spread to every shop, category,
 *     related, archive and widget product card.
 *
 *  2. SPLIT CASCADE on the hero itself. Two glass systems declared
 *     the same panel property:
 *
 *       style.css   .ja-hero-slider .wd-product
 *                    .product-element-bottom         (0,3,0)
 *       this file   body .wd-product …
 *                    .product-element-bottom         (0,3,2)
 *
 *     style.css kept the higher-specificity slot for
 *     `background-color`, so in dark mode the hero panel resolved to
 *     --jhs-surface rgba(255,255,255,.04) — a 4 % white veil on
 *     near-black, i.e. an OPAQUE-BLACK RECTANGLE — while this file
 *     kept `backdrop-filter`. The correct dark glass --jg-panel
 *     rgba(22,20,18,.62) was declared but never applied.
 *
 *     With both systems now scoped to `.ja-hero-slider`, this file
 *     wins at (0,4,2) on every property, the split disappears, and
 *     the panel resolves to ONE coherent glass: --jg-panel surface +
 *     --jg-blur + --jg-brd border in both themes.
 *
 * A third defect was in 14.11: the dark sweep painted `.product-grid-item`
 * (which every `.wd-product` carries) opaque `#0d0b0a !important`,
 * killing the translucency of the card AND of the hero. That selector
 * has been removed from the sweep; ordinary cards keep their existing
 * `--jg-card` / section-5 surfaces and the image stays the hero.
 *
 * CONSEQUENCE TO NOTE: with §14.8 badges now showcase-scoped, shop and
 * category sale badges revert to the parent theme default. Making them
 * JAUREA-champagne everywhere is a separate, deliberately global
 * decision and must be requested explicitly.
 * ============================================================= */

/* -------------------------------------------------------------
 * 14.0 Tokens — the glass hierarchy, both themes, all widths
 * -------------------------------------------------------------
 * Four levels, strongest glass on the most transient surfaces:
 *   L4 drawers / search / mini-cart   --jg-surface-2
 *   L3 product information overlay    --jg-panel
 *   L2 buttons, chips, controls       --jg-btn
 *   L1 informational cards            --jg-card
 * Colour stays inside the JAUREA palette: warm cream and camel in
 * light, warm near-black and champagne in dark. No blue, no purple,
 * no cold grey, no neon.
 * ------------------------------------------------------------- */
html:root {
	--jg-r:        18px;
	--jg-r-sm:     12px;
	--jg-r-pill:   999px;

	/* L1 — informational card */
	--jg-card:        rgba(255, 255, 255, .46);
	/* L2 — button / chip */
	--jg-btn:         rgba(255, 255, 255, .58);
	--jg-btn-hover:   rgba(255, 255, 255, .82);
	/* L3 — product information overlay */
	--jg-panel:       rgba(250, 244, 234, .70);
	--jg-panel-fade:  rgba(250, 244, 234, 0);
	/* L4 — drawer / dropdown */
	--jg-surface-2:   rgba(252, 248, 242, .86);

	--jg-brd:         rgba(74, 58, 40, .15);
	--jg-brd-2:       rgba(74, 58, 40, .26);
	--jg-ink:         #2c2622;
	--jg-ink-2:       #6f6459;
	--jg-hl:          inset 0 1px 0 rgba(255, 255, 255, .55);
	--jg-sh:          0 1px 2px rgba(74, 58, 40, .05), 0 10px 30px rgba(74, 58, 40, .10);
	--jg-sh-sm:       0 1px 3px rgba(74, 58, 40, .10);
	--jg-blur:        blur(16px) saturate(1.35);

	/* the CTA is a warm champagne glass pill with dark warm-brown ink.
	 * #3a2e20 on the composite reads ~7.5:1; the solid-champagne hover
	 * with #2c2622 ink reads 4.82:1 (AA). White on champagne is only
	 * 3.10:1 and is deliberately not used. */
	--jg-cta-bg:      rgba(184, 155, 114, .36);
	--jg-cta-ink:     #3a2e20;
	--jg-cta-brd:     rgba(120, 92, 52, .42);

	/* rating ink. Woodmart ships a bright yellow rgb(234,190,18) that
	 * is not in the palette; champagne fixed dark mode (6.4:1) but
	 * only reached 2.92:1 on the cream canvas, so light mode takes a
	 * deeper camel (4.71:1) and dark mode keeps champagne. */
	--jg-star:        #8a6a3a;
}


/* -------------------------------------------------------------
 * 14.1 THE CORE CORRECTION — product information OVER the image
 * -------------------------------------------------------------
 * The panel is anchored to the bottom of the CARD, not of the
 * document flow, so the image and its information occupy the SAME
 * card and the image is never pushed upward.
 *
 * The first selector carries no theme attribute so the layout still
 * works with JavaScript disabled; the second is the one that wins
 * the cascade against the parent theme.
 *
 * DO NOT make the product <img> absolutely positioned. Taking BOTH
 * the panel and the image out of flow zeroes the thumbnail's
 * min-content height, which collapses the whole 30-card grid
 * container (3536px grid inside a 166px container) and paints the
 * cards over the footer. See the note on the image rule in 14.1b.
 * ------------------------------------------------------------- */
body .ja-hero-slider .wd-product.wd-hover-with-fade .product-element-bottom,
html:root body .ja-hero-slider .wd-product .product-element-bottom {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	padding: 15px 12px 11px;
	margin: 0;
	/* translucent veil — the image stays visible THROUGH it */
	background-color: var(--jg-panel);
	background-image: linear-gradient(
		to bottom,
		var(--jg-panel-fade) 0%,
		var(--jg-panel-fade) 14%,
		var(--jg-panel) 66%
	);
	-webkit-backdrop-filter: var(--jg-blur);
	backdrop-filter: var(--jg-blur);
	border-radius: 0 0 var(--jg-r) var(--jg-r);
	border-top: 1px solid var(--jg-brd);
	color: var(--jg-ink);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
}

/* the card itself becomes the glass container that clips image +
 * panel to one radius */
html:root body .ja-hero-slider .wd-product {
	position: relative;
	isolation: isolate;
	border-radius: var(--jg-r);
	overflow: hidden;
	background-color: var(--jg-card);
	box-shadow: var(--jg-hl), var(--jg-sh-sm);
	transition: box-shadow .3s var(--ja-ease), transform .25s var(--ja-ease);
}

/* The image has to be tall enough that a real part of it stays
 * clear above the panel, and it must actually FILL its box.
 * Measured before: the <img> was 192.6px inside a 224.7px frame,
 * leaving a 32px strip of bare card under every image, because
 * `height:100%` resolved against an auto-height <a>.
 *
 * IMPORTANT — the image must stay IN FLOW.
 * An earlier attempt anchored it with `position:absolute; inset:0`.
 * That filled the frame, but it made the thumbnail's min-content
 * height 0, which propagated into the automatic minimum size of the
 * `.wd-products-element` flex item, and the whole 30-card grid
 * container collapsed to 166px while the grid itself stayed 3536px —
 * the cards then painted over the footer. Isolated with a
 * leave-one-out pass over every rule: removing EITHER the absolute
 * panel OR the absolute image restored container === grid, so the two
 * absolute rules were only fatal together.
 *
 * The in-flow form below is verified to give container === grid ===
 * 3536 and img === thumb === 225 (image fills its frame) at the same
 * time. Do not "optimise" it back to absolute. */
html:root body .ja-hero-slider .wd-product.wd-col .product-element-top {
	aspect-ratio: 3 / 4;
}

html:root body .ja-hero-slider .wd-product .product-element-top {
	position: relative;
}

html:root body .ja-hero-slider .wd-product .product-element-top img {
	position: relative;
	inset: auto;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center 16%;
}

/* the image-swap layer Woodmart paints on hover carries the height
 * down to the <img>, and must stay above it */
html:root body .ja-hero-slider .wd-product .product-element-top .wd-product-grid-slider,
html:root body .ja-hero-slider .wd-product .product-element-top .product-image-link {
	position: relative;
	z-index: 1;
	height: 100%;
}

/* desktop cards are wider, so the panel can breathe */
@media (min-width: 1025px) {
	html:root body .ja-hero-slider .wd-product .product-element-bottom {
		padding: 18px 16px 14px;
		gap: 6px;
	}
}


/* -------------------------------------------------------------
 * 14.2 Panel content — title, price, CTA
 * -------------------------------------------------------------
 * Measured on the live card before this correction: the panel was
 * 200.3px tall against a 192.6px image, because `.wrap-price` alone
 * was 123.4px — the colour swatch grid lives INSIDE it. The panel is
 * therefore split in two: the essential purchase information stays in
 * the glass sheet, and the swatches + rating ride in a slim strip
 * just above it, over the image, exactly like the reference's top
 * pill. Nothing is removed and nothing is hidden — the swatch strip
 * scrolls horizontally so every colour stays reachable.
 * ------------------------------------------------------------- */
html:root body .ja-hero-slider .wd-product .product-element-bottom .wd-entities-title {
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--jg-ink);
}

html:root body .ja-hero-slider .wd-product .product-element-bottom .wd-entities-title a {
	color: inherit;
	text-decoration: none;
}

html:root body .ja-hero-slider .wd-product .product-element-bottom .wd-entities-title a:hover {
	color: var(--ja-champagne);
}

html:root body .ja-hero-slider .wd-product .product-element-bottom .wrap-price {
	margin: 0 0 5px;
	display: flex;
	align-items: baseline;
	gap: 5px;
	flex-wrap: nowrap;
	min-width: 0;
}

html:root body .ja-hero-slider .wd-product .product-element-bottom .price {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.35;
	white-space: nowrap;
	color: var(--jg-ink);
}

html:root body .ja-hero-slider .wd-product .product-element-bottom .price del,
html:root body .ja-hero-slider .wd-product .product-element-bottom .price del .amount {
	color: var(--jg-ink-2);
	font-size: 11px;
	opacity: .85;
}

html:root body .ja-hero-slider .wd-product .product-element-bottom .price ins,
html:root body .ja-hero-slider .wd-product .product-element-bottom .price ins .amount {
	color: var(--ja-champagne);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

/* light-mode sale price on the cream canvas: champagne is 2.92:1,
 * so the ink is darkened to #8a6a3a which measures 4.72:1 on
 * #fbf8f3 and 4.53:1 on #f7f3f0 — both pass WCAG AA.
 * Dark mode keeps champagne (6.4:1 on the black canvas). */
html:root body .ja-hero-slider .wd-product .product-element-bottom .price ins,
html:root body .ja-hero-slider .wd-product .product-element-bottom .price ins .amount {
	color: #8a6a3a;
}

/* --- the strip above the panel: swatches (start) + rating (end) ---
 * Both are absolutely positioned against the panel, so they sit ON
 * the image just above the glass sheet instead of adding height to
 * it. `inset-block-end: 100%` puts their bottom edge on the panel's
 * top edge; the margin lifts them clear of it. */
html:root body .ja-hero-slider .wd-product .product-element-bottom .wd-swatches-grid {
	position: absolute;
	inset-block-end: 100%;
	inset-inline-start: 12px;
	inset-inline-end: auto;
	max-width: calc(100% - 74px);
	margin: 0 0 7px;
	padding: 3px 4px;
	gap: 5px;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	border-radius: var(--jg-r-pill);
	background-color: var(--jg-panel);
	-webkit-backdrop-filter: var(--jg-blur);
	backdrop-filter: var(--jg-blur);
	box-shadow: var(--jg-hl), 0 1px 3px rgba(44, 38, 34, .14);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html:root body .ja-hero-slider .wd-product .product-element-bottom .wd-swatches-grid::-webkit-scrollbar {
	display: none;
}

html:root body .ja-hero-slider .wd-product .product-element-bottom .wd-swatch {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 1px solid var(--jg-brd-2);
	box-shadow: var(--jg-hl);
}

html:root body .ja-hero-slider .wd-product .product-element-bottom .wd-swatch .wd-swatch-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* the rating is kept (content is never removed) but moved onto the
 * same strip so it does not compete with the title inside the panel */
html:root body .ja-hero-slider .wd-product .product-element-bottom .star-rating {
	position: absolute;
	inset-block-end: 100%;
	inset-inline-end: 12px;
	inset-inline-start: auto;
	width: auto;
	margin: 0 0 11px;
	padding: 0;
	font-size: 11px;
	line-height: 1;
	opacity: .95;
}
/* -------------------------------------------------------------
 * 14.3 The CTA — one glass button language
 * -------------------------------------------------------------
 * The loop button for a variable product is a product-VIEW CTA:
 * its href is already the product permalink, so only the visible
 * label changes (see inc/jaurea-product-cta.php, which filters
 * woocommerce_product_add_to_cart_text). No purchase, variation,
 * cart or product-data logic is involved.
 *
 * Woodmart hardcodes the LABEL ink:
 *   .product-element-bottom .wd-add-btn a.button .wd-action-text
 *     { color:#111 !important }   ->  (0,4,0)
 * `html:root body .wd-product` gives (0,5,2), which outranks it.
 *
 * SCOPE: the visual language applies to EVERY product card — the
 * hero showcase AND the shop / category / archive / related grids.
 * The panel-position rules in 14.1 stay hero-only (PART 6).
 * ------------------------------------------------------------- */
html:root body .ja-hero-slider .wd-product .product-element-bottom .wd-add-btn {
	position: static;
	display: flex;
	margin-block-start: 2px;
	opacity: 1;
	transform: none;
}

html:root body .wd-product .product-element-bottom .wd-add-btn a.button,
html:root body .wd-product .product-element-bottom .wd-add-btn a.add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 7px 12px;
	min-height: 40px;                 /* compact pill; 40px stays a solid touch target */
	border: 1px solid var(--jg-cta-brd);
	border-radius: var(--jg-r-pill);
	background-color: var(--jg-cta-bg);
	background-image: none;
	color: var(--jg-cta-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	text-decoration: none;
	box-shadow: var(--jg-hl), var(--jg-sh-sm);
	-webkit-backdrop-filter: var(--jg-blur);
	backdrop-filter: var(--jg-blur);
	transition: background-color .22s var(--ja-ease),
	            border-color .22s var(--ja-ease),
	            color .22s var(--ja-ease),
	            transform .18s var(--ja-ease),
	            box-shadow .22s var(--ja-ease);
}

html:root body .wd-product .product-element-bottom .wd-add-btn a.button:hover,
html:root body .wd-product .product-element-bottom .wd-add-btn a.add_to_cart_button:hover {
	background-color: var(--ja-champagne);
	border-color: var(--ja-champagne);
	color: #2c2622;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(74, 58, 40, .22), var(--jg-hl);
}

html:root body .wd-product .product-element-bottom .wd-add-btn a.button:active,
html:root body .wd-product .product-element-bottom .wd-add-btn a.add_to_cart_button:active {
	transform: scale(.98);
}

/* the hardcoded #111 label — corrected. `line-height` also has to be
 * reset: Woodmart leaves the span inheriting the button's 38px line
 * box, which alone made every CTA 58px tall instead of 36. */
html:root body .wd-product .product-element-bottom .wd-add-btn a.button .wd-action-text,
html:root body .wd-product .product-element-bottom .wd-add-btn a.add_to_cart_button .wd-action-text {
	color: inherit !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	white-space: normal;
	/* Woodmart's `.wd-add-btn-replace > a span` declares
	 * min-height: inherit, which pulls the BUTTON's 40px down onto the
	 * span and double-counts it: span 40 + padding 14 + border 2 = 56px.
	 * Zeroing it here lets the span size to its own line box so the
	 * button height is decided by min-height alone. Vertical-only: no
	 * width, padding-inline or radius is touched. */
	min-height: 0;
}

/* REQUEST #1 — the replace/press state: label out, cart glyph in.
 *
 * Woodmart's `.wd-add-btn-replace > a:hover span` declares
 * `transform: translateY(-100%)`, but that percentage resolves against the
 * SPAN's own height (14.39px), not the button's 40px, so the label only
 * cleared 12.8px of the button and stayed visibly clipped over the glyph.
 * (Woodmart assumed the span fills the button via min-height:inherit, which
 * the 40px-height correction removed.)
 *
 * The glyph lives on the <a>::before, not on this span, so hiding the span
 * cannot hide the glyph. visibility:hidden + opacity:0 take the label out of
 * the visual layout entirely (not merely transparent) while the span keeps
 * its place in the flow — the button's width and 40px height therefore do not
 * twitch. The transition on `.wd-action-text` is inherited from Woodmart, so
 * the fade is the existing animation, not a new one.
 */
html:root body .wd-product .product-element-bottom .wd-add-btn a.button:hover .wd-action-text,
html:root body .wd-product .product-element-bottom .wd-add-btn a.add_to_cart_button:hover .wd-action-text,
html:root body .wd-product .product-element-bottom .wd-add-btn a.button:active .wd-action-text,
html:root body .wd-product .product-element-bottom .wd-add-btn a.add_to_cart_button:active .wd-action-text {
	visibility: hidden;
	opacity: 0;
}

/* one button language: the cart glyph is hidden in favour of the label */
html:root body .wd-product .product-element-bottom .wd-add-btn .wd-action-icon {
	font-size: 0;
}

html:root body .wd-product .product-element-bottom .wd-add-btn .screen-reader-text {
	display: none;
}

/* Woodmart's global focus style is !important — match it */
html:root body .wd-product .product-element-bottom .wd-add-btn a.button:focus-visible,
html:root body .wd-product .product-element-bottom .wd-add-btn a.add_to_cart_button:focus-visible {
	outline: 2px solid var(--ja-champagne) !important;
	outline-offset: 2px !important;
}


/* -------------------------------------------------------------
 * 14.4 Category cards — image + glass category layer
 * -------------------------------------------------------------
 * Categories render through the child-theme override
 * woocommerce/content-product-cat.php:
 *
 *   .product-category
 *     .wd-cat-inner.wrapp-category
 *       .wd-cat-thumb.category-image-wrapp
 *         .wd-cat-image.category-image > img
 *       .wd-cat-content.hover-mask
 *         h3.wd-entities-title
 *         .wd-cat-count.more-products > a
 *       a.wd-fill.category-link
 *
 * The image fills the card and the category name sits on a glass
 * layer over its lower edge — the same language as the product
 * showcase.
 *
 * GLOBAL, not hero-scoped. Category cards live in the homepage
 * carousel (elementor-element-cbdd09f) and the shop carousel
 * (elementor-element-31338db); they are NEVER inside .ja-hero-slider
 * (verified: heroHasCats = 0 on / and /shop/). The earlier rescope
 * to .ja-hero-slider therefore matched nothing and the cards
 * reverted to the parent default — transparent, radius 0,
 * object-fit fill, title static below the image. That is the
 * regression this block fixes.
 *
 * pointer-events: the glass title layer must not swallow the card
 * click. .wd-cat-count stays clickable.
 * ------------------------------------------------------------- */
html:root body .product-category .wd-cat-inner {
	position: relative;
	isolation: isolate;
	border-radius: var(--jg-r);
	overflow: hidden;
	background-color: var(--jg-card);
	box-shadow: var(--jg-hl), var(--jg-sh-sm);
	transition: box-shadow .3s var(--ja-ease), transform .25s var(--ja-ease);
}

html:root body .product-category:hover .wd-cat-inner {
	box-shadow: var(--jg-hl), var(--jg-sh);
	transform: translateY(-2px);
}

html:root body .product-category .wd-cat-image {
	display: block;
}

html:root body .product-category img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 22%;
	border-radius: 0;
	transition: transform .5s var(--ja-ease);
}

html:root body .product-category:hover img {
	transform: scale(1.04);
}

/* the category name becomes a glass layer over the lower image */
html:root body .product-category .wd-cat-content {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 3;
	margin: 0;
	padding: 20px 10px 11px;
	text-align: center;
	color: var(--jg-ink);
	background-color: var(--jg-panel);
	background-image: linear-gradient(
		to bottom,
		var(--jg-panel-fade) 0%,
		var(--jg-panel-fade) 10%,
		var(--jg-panel) 60%
	);
	-webkit-backdrop-filter: var(--jg-blur);
	backdrop-filter: var(--jg-blur);
	border-top: 1px solid var(--jg-brd);
	border-radius: 0 0 var(--jg-r) var(--jg-r);
	pointer-events: none;
}

html:root body .product-category .wd-entities-title {
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

html:root body .product-category .wd-entities-title a {
	color: inherit;
	text-decoration: none;
}

/* the product count is real content — keep it, quietly */
html:root body .product-category .wd-cat-count {
	margin-block-start: 2px;
	color: var(--jg-ink-2);
	font-size: 11px;
	font-weight: 400;
}

html:root body .product-category .wd-cat-count a {
	color: inherit;
	text-decoration: none;
	pointer-events: auto;
}


/* -------------------------------------------------------------
 * 14.5 Buttons — the same material everywhere
 * -------------------------------------------------------------
 * Default (secondary) buttons were solid #111 rectangles with a 5px
 * radius. They become L2 glass.
 * ------------------------------------------------------------- */
html:root body .btn-default,
html:root body .button.btn-default,
html:root body button[type="submit"].btn-default,
html:root body a.btn.btn-style-default {
	border: 1px solid var(--jg-brd-2);
	border-radius: var(--jg-r-pill);
	background-color: var(--jg-btn);
	background-image: none;
	color: var(--jg-ink);
	box-shadow: var(--jg-hl), var(--jg-sh-sm);
	-webkit-backdrop-filter: var(--jg-blur);
	backdrop-filter: var(--jg-blur);
	transition: background-color .22s var(--ja-ease),
	            border-color .22s var(--ja-ease),
	            color .22s var(--ja-ease),
	            transform .18s var(--ja-ease),
	            box-shadow .22s var(--ja-ease);
}

html:root body .btn-default:hover,
html:root body .button.btn-default:hover,
html:root body a.btn.btn-style-default:hover {
	background-color: var(--jg-btn-hover);
	border-color: var(--ja-champagne);
	color: var(--ja-warm);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(74, 58, 40, .14), var(--jg-hl);
}

html:root body .btn-default:active,
html:root body .button.btn-default:active,
html:root body a.btn.btn-style-default:active {
	transform: scale(.98);
}

/* accent buttons keep the brand champagne but gain the same
 * geometry and tactile behaviour */
html:root body .btn-accent,
html:root body .button.btn-accent,
html:root body button.btn-accent,
html:root body .btn.btn-accent {
	border: 1px solid rgba(184, 155, 114, .45);
	border-radius: var(--jg-r-pill);
	box-shadow: var(--jg-hl), var(--jg-sh-sm);
	transition: background-color .22s var(--ja-ease),
	            transform .18s var(--ja-ease),
	            box-shadow .22s var(--ja-ease);
}

html:root body .btn-accent:hover,
html:root body .button.btn-accent:hover,
html:root body button.btn-accent:hover,
html:root body .btn.btn-accent:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 16px rgba(74, 58, 40, .20), var(--jg-hl);
}

html:root body .btn-accent:active,
html:root body .button.btn-accent:active,
html:root body .btn.btn-accent:active {
	transform: scale(.98);
}


/* -------------------------------------------------------------
 * 14.6 Informational cards (Woodmart info-box widgets)
 * -------------------------------------------------------------
 * Measured before: transparent background, radius 18px, no shadow.
 * These are L1 — the quietest glass in the hierarchy.
 * ------------------------------------------------------------- */
html:root body .wd-info-box.box-style-base {
	border: 1px solid var(--jg-brd);
	border-radius: var(--jg-r);
	background-color: var(--jg-card);
	box-shadow: var(--jg-hl);
	transition: background-color .25s var(--ja-ease),
	            border-color .25s var(--ja-ease),
	            transform .25s var(--ja-ease);
}

html:root body .wd-info-box.box-style-base:hover {
	background-color: var(--jg-btn);
	border-color: var(--jg-brd-2);
	transform: translateY(-2px);
}

html:root body .wd-info-box .info-box-inner h3,
html:root body .wd-info-box .info-box-inner h1,
html:root body .wd-info-box .info-box-inner h2,
html:root body .wd-info-box .info-box-inner h4 {
	color: var(--jg-ink);
}

html:root body .wd-info-box .info-box-inner p {
	color: var(--jg-ink-2);
}


/* -------------------------------------------------------------
 * 14.7 Bounded overlay surfaces — L4 glass
 * -------------------------------------------------------------
 * Measured before: `.wd-side-hidden` (cart drawer, account drawer)
 * and `.wd-search-dropdown` were SOLID rgb(255,255,255) with no
 * backdrop-filter — flat panels, the opposite of the language.
 * ------------------------------------------------------------- */
html:root body .wd-side-hidden,
html:root body .cart-widget-side,
html:root body .wd-search-dropdown,
html:root body .wd-dropdown {
	background-color: var(--jg-surface-2);
	-webkit-backdrop-filter: var(--jg-blur);
	backdrop-filter: var(--jg-blur);
	border-color: var(--jg-brd);
	box-shadow: var(--jg-sh);
	color: var(--jg-ink);
}

html:root body .wd-search-dropdown {
	border-radius: var(--jg-r);
	border: 1px solid var(--jg-brd);
	overflow: hidden;
}

/* Woodmart paints the drawer body white as well */
html:root body .wd-side-hidden .widget,
html:root body .cart-widget-side .widget,
html:root body .wd-side-hidden .wd-heading,
html:root body .cart-widget-side .wd-heading {
	background-color: transparent;
	color: var(--jg-ink);
}

html:root body .cart-widget-side .cart-widget-side-title,
html:root body .wd-side-hidden .wd-heading span {
	color: var(--jg-ink);
}


/* -------------------------------------------------------------
 * 14.8 Product badges — the only blue and the only salmon on the
 *      storefront were Woodmart's own label defaults.
 * -------------------------------------------------------------
 * Measured: `.product-label.onsale` was rgb(126,164,222) — a generic
 * blue, present 30 times on /shop/ alone; `.product-label.featured`
 * was rgb(227,162,141). Both are re-pointed at the brand palette.
 * The `body` prefix + !important is required because Woodmart
 * declares the label colours after the child theme in the combine.
 * ------------------------------------------------------------- */
body .ja-hero-slider .product-label,
body .ja-hero-slider .product-label.onsale,
body .ja-hero-slider .product-label.featured,
body .ja-hero-slider .product-label.new {
	border-radius: var(--jg-r-pill) !important;
	border: 1px solid rgba(255, 255, 255, .28);
	background-color: var(--ja-champagne) !important;
	background-image: none !important;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: none;
	box-shadow: 0 1px 4px rgba(44, 38, 34, .22);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* "hot" / featured gets the warm brown, not salmon */
body .ja-hero-slider .product-label.featured {
	background-color: #8f6f44 !important;
}


/* -------------------------------------------------------------
 * 14.9 Star rating ink — Woodmart's default is a bright yellow
 *      rgb(234,190,18), which is not part of the JAUREA palette.
 *      --jg-star is per-theme: deeper camel in light (4.71:1 on the
 *      cream canvas), champagne in dark (6.4:1 on the black canvas).
 * ------------------------------------------------------------- */
html:root body .ja-hero-slider .star-rating,
html:root body .ja-hero-slider .star-rating::before {
	color: var(--jg-star);
}


/* -------------------------------------------------------------
 * 14.10 Motion — one consistent, quiet, interruptible language
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html:root body .ja-hero-slider .wd-product,
	html:root body .ja-hero-slider .product-category,
	html:root body .ja-hero-slider .product-category img,
	html:root body .wd-info-box.box-style-base,
	html:root body .ja-hero-slider .wd-product .product-element-bottom .wd-add-btn a.button,
	html:root body .btn-default,
	html:root body .btn-accent {
		transition: none;
	}

	html:root body .ja-hero-slider .product-category:hover img,
	html:root body .wd-info-box.box-style-base:hover,
	html:root body .ja-hero-slider .wd-product .product-element-bottom .wd-add-btn a.button:hover,
	html:root body .btn-default:hover,
	html:root body .btn-accent:hover {
		transform: none;
	}
}


@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	html:root body .ja-hero-slider .wd-product .product-element-bottom,
	html:root body .product-category .wd-cat-content {
		background-color: var(--jg-surface-2);
		background-image: none;
	}
}
