/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* =========================================================
 * JAUREA — PHASE 1 (REFINEMENT) — Mobile UI Visual Transformation
 * ---------------------------------------------------------
 * ART-DIRECTION REFINEMENT (not a restart):
 *   The Phase 3 correction produced the correct direction.
 *   This pass makes it genuinely premium — lighter, quieter,
 *   more integrated, more expensive-feeling.
 *
 *   Changes vs Phase 3 correction:
 *   - blur reduced: 18px -> 12px (light) / 20px -> 14px (dark)
 *   - surface opacity raised: .78 -> .88 (light only)
 *   - radius: 18px -> 20px (both modes)
 *   - scrolled blur: 22px -> 16px (light)
 *   - logo: inline-flex -> flex (fixes 0x0 collapse)
 *   - margin-inline: 10px -> 12px (both modes)
 *
 *   Target feel:
 *     "JAUREA, but evolved into a much more refined premium
 *      mobile storefront. Lighter. Quieter. More expensive."
 *
 *   LIGHT  -> warm white / cream / translucent neutral surfaces
 *   DARK   -> deep charcoal / warm-dark neutral surfaces
 *             (layered: page -> header glass -> nav card -> active)
 *
 * SCOPE: EXISTING mobile HEADER (.whb-main-header / .whb-general-header)
 *        + EXISTING mobile bottom TOOLBAR (.wd-toolbar)
 *        Visual override only. No PHP / JS / templates / plugins.
 *
 * Header source: Woodmart Header Builder (whb_generate_header).
 *   NOTE: selectors intentionally do NOT depend on the row color
 *   class (.whb-color-dark / .whb-color-light) — that class is a
 *   Header-Builder setting and can change. Target the stable row
 *   + wrapper classes only.
 *
 * Functional contracts preserved:
 *   .cart-widget-opener .login-side-opener .wd-filter-icon
 *   .wd-tools-count .wd-cart-number
 *   .jaurea-notif-badge .jaurea-notif-empty
 *   .wd-header-mobile-nav .wd-header-search .wd-header-cart
 *   .wd-header-wishlist .wd-header-my-account .wd-logo
 *
 * Brand logo note: the live brand asset is a monochrome
 * white-on-transparent wordmark. It receives an adaptive
 * monochrome treatment (light surface -> dark mark via invert,
 * dark surface -> natural white mark). No pill, no chip, no
 * aspect-ratio change.
 * ========================================================= */

/* ---------------------------------------------------------
 * Shared tokens — ONE design system for header + toolbar.
 * Mobile + tablet only (<=1024px). Desktop untouched.
 * --------------------------------------------------------- */
@media (max-width: 1024px) {
	body {
		--jt-bar-h: 62px;                        /* toolbar rendered height */
		--jt-float: 14px;                        /* toolbar bottom offset  */
		--ja-radius: 20px;                       /* card radius — refined  */
		--ja-radius-sm: 12px;                    /* control radius         */

	/* LIGHT — warm cream translucent glass. NOT white: the whole JAUREA
	 * light language is a warm beige/cream neutral (never #fff), so the
	 * header, toolbar and card glass all share one warm tint. The hero
	 * panel deliberately runs at a LOWER alpha than the chrome so the
	 * product image stays visible through it (see --ja-glass-panel). */
	--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;

		/* JAUREA accent — used SELECTIVELY only */
		--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);

		/* soft, broad, low-opacity elevation */
		--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;
	}
}

/* =========================================================
 * MOBILE HEADER — one floating glass card wrapping the
 * existing top bar + general header rows.
 * ========================================================= */
@media (max-width: 1024px) {

	/* --- The card: applies to the in-flow header AND the sticky
	       clone (the clone element itself carries .whb-main-header) --- */
	body .whb-main-header {
		inset-block-start: calc(8px + env(safe-area-inset-top, 0px));
		margin-inline: 12px;
		border: 1px solid var(--ja-hairline, rgba(28, 24, 20, .09));
		border-radius: var(--ja-radius, 20px);
		background-color: var(--ja-surface, rgba(255, 254, 252, .88));
		-webkit-backdrop-filter: var(--ja-blur, blur(12px) saturate(1.15));
		backdrop-filter: var(--ja-blur, blur(12px) saturate(1.15));
		box-shadow: var(--ja-sh-1), var(--ja-hl);
		overflow: hidden;                        /* clip rows to the radius */
		transition: background-color var(--ja-d, .22s) var(--ja-ease, ease),
		            box-shadow var(--ja-d, .22s) var(--ja-ease, ease),
		            border-color var(--ja-d, .22s) var(--ja-ease, ease);
	}

	/* delicate top sheen across the card */
	body .whb-main-header::after {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		height: 45%;
		pointer-events: none;
		background: linear-gradient(to bottom, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0));
	}

	/* keep row content above the sheen */
	body .whb-main-header .container {
		position: relative;
		z-index: 1;
	}

	/* --- top bar: micro shipping strip --------------------------
	       Compact info ribbon. Content preserved, visually subdued
	       so the logo row remains the primary anchor. ------------- */
	body .whb-main-header .whb-top-bar {
		background-color: transparent !important;
		border-bottom: 1px solid var(--ja-hairline, rgba(28, 24, 20, .09));
		min-height: 26px;
		padding-block: 2px;
	}

	/* inline style sets color:#fff — override so it reads on the
	   warm-white card; camel dot keeps the JAUREA accent */
	body .whb-main-header .whb-top-bar strong {
		color: var(--ja-ink-soft, #7a736b) !important;
		font-weight: 500 !important;
		font-size: 10.5px;
		letter-spacing: .02em;
		gap: 5px;
	}

	body .whb-main-header .whb-top-bar strong svg {
		color: var(--ja-champagne, #b08d57);
		width: 13px;
		height: 13px;
	}

	/* --- general header row: transparent so the card surface shows */
	body .whb-main-header .whb-general-header {
		background-color: transparent !important;
		border: 0 !important;
		padding-block: 6px;
	}

	/* header-bottom row is empty on mobile (all its columns are
	   desktop-only) — collapse the dead 50px of space */
	body .whb-main-header .whb-header-bottom {
		display: none;
	}

	/* rebalance columns: logo column breathes, side columns stay compact */
	body .whb-main-header .whb-mobile-center {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
	}

	body .whb-main-header .whb-mobile-left,
	body .whb-main-header .whb-mobile-right {
		flex: 0 0 auto;
	}

	/* --- SCROLLED state: the pinned clone gets denser glass ------- */
	body.whb-sticked .whb-main-header,
	body .whb-clone.whb-main-header {
		background-color: rgba(255, 254, 252, .90);
		-webkit-backdrop-filter: blur(16px) saturate(1.25);
		backdrop-filter: blur(16px) saturate(1.25);
		box-shadow: var(--ja-sh-2), var(--ja-hl);
	}

	body .whb-clone .whb-general-header-inner {
		min-height: 52px;
	}

	/* --- Controls: minimal + tactile. NO boxes/circles around the
	       icons by default — only a faint champagne wash on press. --- */
	body .whb-main-header .wd-tools-element {
		position: relative;
		z-index: 2;
	}

	body .whb-main-header .wd-tools-element > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding-inline: 8px;
		border-radius: var(--ja-radius-sm, 12px);
		color: var(--ja-ink, #221f1c) !important;
		background-color: transparent;
		transition: background-color var(--ja-d, .22s) var(--ja-ease, ease),
		            transform var(--ja-d, .22s) var(--ja-ease, ease);
	}

	/* no visible hover box — controls belong to ONE surface */
	body .whb-main-header .wd-tools-element:hover > a,
	body .whb-main-header .wd-tools-element:hover > a:hover {
		background-color: transparent;
	}

	/* tactile press is the only visible control feedback */
	body .whb-main-header .wd-tools-element:active > a {
		transform: scale(.94);
		background-color: var(--ja-accent-bg, rgba(176, 141, 87, .10));
	}

	body .whb-main-header .wd-tools-element > a:focus-visible {
		outline: 2px solid var(--ja-champagne, #b08d57);
		outline-offset: -2px;
	}

	/* icon ink */
	body .whb-main-header .wd-tools-icon::before {
		color: var(--ja-ink, #221f1c) !important;
		font-size: 20px;
		line-height: 1;
	}

	/* hide the flat dividers between header tools — the card
	   spacing already separates the controls */
	body .whb-main-header .wd-header-divider {
		--wd-divider-width: 0px;
		min-width: 2px;
	}

	/* cart badge: a small champagne chip, soft shadow only */
	body .whb-main-header .wd-tools-count {
		top: 2px;
		inset-inline-end: 0;
		min-width: 17px;
		height: 17px;
		padding-inline: 4px;
		border-radius: 9px;
		background-color: var(--ja-champagne, #b08d57);
		color: #fff;
		font-size: 9.5px;
		font-weight: 700;
		line-height: 17px;
		box-shadow: 0 1px 3px rgba(28, 24, 20, .22);
	}

	/* --- LOGO: the real brand asset, no pill / no chip -------------
	   The live asset is a monochrome white-on-transparent wordmark.
	   Light surface: invert -> dark mark (the original JAUREA black
	   mark direction). Dark surface: natural white mark.          */
	body .whb-main-header .wd-logo {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background-color: transparent;
		border-radius: 0;
		box-shadow: none;
		min-width: 44px;        /* ensure flex container has size even if img collapses */
		min-height: 44px;
	}

	body .whb-main-header .wd-logo img {
		height: auto;
		max-height: 32px;
		width: auto;
		min-width: 80px;      /* prevent flex collapse to 0 */
		max-width: 140px;
		object-fit: contain;
		filter: invert(1);
		display: block;
	}
}

/* =========================================================
 * MOBILE BOTTOM TOOLBAR — floating navigation card
 * Same surface / border / radius / shadow language as the
 * header card => ONE coherent system.
 * ========================================================= */
@media (max-width: 1024px) {

	.wd-toolbar {
		--jt-pad: 8px;
		--jt-gap: 4px;
		--jt-icon: 21px;
		--jt-label: 10px;

		position: fixed;
		inset-inline: 12px !important;
		bottom: calc(var(--jt-float, 14px) + env(safe-area-inset-bottom, 0px));
		z-index: 350;
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		gap: var(--jt-gap);
		padding: var(--jt-pad) !important;
		min-height: var(--jt-bar-h);
		height: auto;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;

		/* same card language as the header */
		border: 1px solid var(--ja-hairline, rgba(28, 24, 20, .09));
		border-radius: var(--ja-radius, 20px);
		background-color: var(--ja-surface, rgba(255, 254, 252, .88)) !important;
		-webkit-backdrop-filter: var(--ja-blur, blur(12px) saturate(1.15));
		backdrop-filter: var(--ja-blur, blur(12px) saturate(1.15));
		box-shadow: var(--ja-sh-2), var(--ja-hl);
	}

	/* PART A — restore the toolbar's glass shadow / float / geometry.
	 *
	 * The parent Woodmart base rule `.wd-toolbar{ ... box-shadow:0 0 9px
	 * rgb(0 0 0 / .12); bottom:0; align-items:center }` is TOP-LEVEL in the
	 * combined stylesheet (rule ~1641 of 1972) while the rule above is only
	 * (0,1,0) — so at equal specificity the LATER parent rule wins and the
	 * toolbar loses the warm shadow, the float offset and the stretch
	 * geometry that the header card has. The header avoids this because the
	 * child scopes it as `body .whb-main-header` (0,1,1). Mirror that here:
	 * re-declare only the three lost declarations at (0,1,1). Nothing else
	 * changes, so the responsive `inset-inline:10px` override for small
	 * screens and every !important contract keep working, and the dark-mode
	 * rules — `html[data-jaurea-theme="dark"] .wd-toolbar` (0,2,1) and the
	 * `prefers-color-scheme: dark` block — still outrank this. */
	body .wd-toolbar {
		bottom: calc(var(--jt-float, 14px) + env(safe-area-inset-bottom, 0px));
		align-items: stretch;
		box-shadow: var(--ja-sh-2), var(--ja-hl);
	}

	/* --- item distribution (keeps the a11y flex contract) --------- */
	.wd-toolbar > :is(a, div) {
		flex: 1 1 0%;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 1;
	}

	.wd-toolbar > a,
	.wd-toolbar > div a {
		/* full-width anchor so the absolutely-positioned label has a
		   complete containing block (prevents label truncation) */
		width: 100%;
		height: calc(var(--jt-bar-h) - (var(--jt-pad) * 2));
		gap: 0;
		padding-inline: 2px;
		padding-block: 0;
		border-radius: 14px;
		position: relative;
		transition: background-color var(--ja-d, .22s) var(--ja-ease, ease),
		            transform var(--ja-d, .22s) var(--ja-ease, ease),
		            color var(--ja-d, .22s) var(--ja-ease, ease);
	}

	/* inactive items carry NO background — one clean surface */
	.wd-toolbar > a,
	.wd-toolbar > div a {
		background-color: transparent;
	}

	/* --- icons --------------------------------------------------- */
	.wd-toolbar .wd-tools-icon {
		font-size: 0;
		gap: 0;
	}

	.wd-toolbar .wd-tools-icon::before {
		font-size: var(--jt-icon);
		color: var(--ja-ink-soft, #7a736b);
		line-height: 1;
		transition: color var(--ja-d, .22s) var(--ja-ease, ease),
		            transform var(--ja-d, .22s) var(--ja-ease, ease);
	}

	.wd-toolbar > a:hover .wd-tools-icon::before,
	.wd-toolbar > div a:hover .wd-tools-icon::before {
		color: var(--ja-ink, #221f1c);
	}

	/* --- labels -------------------------------------------------- */
	.wd-toolbar .wd-toolbar-label {
		position: absolute;
		inset-inline: 1px;
		bottom: 5px;
		display: block;
		overflow: hidden;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: "Cabin", sans-serif;
		font-weight: 600;
		font-size: var(--jt-label);
		line-height: 1.3;
		color: var(--ja-ink-soft, #7a736b);
		padding: 1px 0;
		transition: color var(--ja-d, .22s) var(--ja-ease, ease);
	}

	.wd-toolbar > a:hover .wd-toolbar-label,
	.wd-toolbar > div a:hover .wd-toolbar-label {
		color: var(--ja-ink, #221f1c);
	}

	/* --- ACTIVE state: the selected control ----------------------
	   Woodmart emits NO current-menu-item / current_page_item class
	   on sticky-toolbar items (verified in sticky-toolbar.php: every
	   item is printed as a plain wd-toolbar-{key} wd-tools-element).
	   So the selected control is resolved from the WordPress page
	   context (body class) + the theme's own wd-opened panel state.
	   Pure CSS. No JS, no PHP, no template change.

	       home        -> body.home
	       shop        -> body.woocommerce-shop / post-type-archive /
	                     tax-product_cat / single-product
	       filter      -> .wd-opened (theme toggles it with its panel)
	       wishlist    -> body.woocommerce-wishlist / body.page-id-22
	       cart        -> body.woocommerce-cart
	       my account  -> body.woocommerce-account

	   Subtle champagne-tinted rounded surface + accent icon/label.
	   No heavy blob, no glow.                                     */
	.wd-toolbar > .is-active > a,
	body.home .wd-toolbar .wd-toolbar-home > a,
	body.woocommerce-shop .wd-toolbar .wd-toolbar-shop > a,
	body.post-type-archive-product .wd-toolbar .wd-toolbar-shop > a,
	body.tax-product_cat .wd-toolbar .wd-toolbar-shop > a,
	body.single-product .wd-toolbar .wd-toolbar-shop > a,
	body.woocommerce-cart .wd-toolbar .wd-header-cart > a,
	body.woocommerce-account .wd-toolbar .wd-header-my-account > a,
	body.woocommerce-wishlist .wd-toolbar .wd-header-wishlist > a,
	body.page-id-22 .wd-toolbar .wd-header-wishlist > a,
	.wd-toolbar .wd-toolbar-sidebar.wd-opened > a {
		background-color: rgba(176, 141, 87, .10);
		box-shadow: inset 0 0 0 1px rgba(176, 141, 87, .22);
		color: var(--ja-warm, #8f6f44);
	}

	.wd-toolbar > .is-active > a .wd-tools-icon::before,
	body.home .wd-toolbar .wd-toolbar-home > a .wd-tools-icon::before,
	body.woocommerce-shop .wd-toolbar .wd-toolbar-shop > a .wd-tools-icon::before,
	body.post-type-archive-product .wd-toolbar .wd-toolbar-shop > a .wd-tools-icon::before,
	body.tax-product_cat .wd-toolbar .wd-toolbar-shop > a .wd-tools-icon::before,
	body.single-product .wd-toolbar .wd-toolbar-shop > a .wd-tools-icon::before,
	body.woocommerce-cart .wd-toolbar .wd-header-cart > a .wd-tools-icon::before,
	body.woocommerce-account .wd-toolbar .wd-header-my-account > a .wd-tools-icon::before,
	body.woocommerce-wishlist .wd-toolbar .wd-header-wishlist > a .wd-tools-icon::before,
	body.page-id-22 .wd-toolbar .wd-header-wishlist > a .wd-tools-icon::before,
	.wd-toolbar .wd-toolbar-sidebar.wd-opened > a .wd-tools-icon::before {
		color: var(--ja-warm, #8f6f44);
	}

	.wd-toolbar > .is-active > a .wd-toolbar-label,
	body.home .wd-toolbar .wd-toolbar-home > a .wd-toolbar-label,
	body.woocommerce-shop .wd-toolbar .wd-toolbar-shop > a .wd-toolbar-label,
	body.post-type-archive-product .wd-toolbar .wd-toolbar-shop > a .wd-toolbar-label,
	body.tax-product_cat .wd-toolbar .wd-toolbar-shop > a .wd-toolbar-label,
	body.single-product .wd-toolbar .wd-toolbar-shop > a .wd-toolbar-label,
	body.woocommerce-cart .wd-toolbar .wd-header-cart > a .wd-toolbar-label,
	body.woocommerce-account .wd-toolbar .wd-header-my-account > a .wd-toolbar-label,
	body.woocommerce-wishlist .wd-toolbar .wd-header-wishlist > a .wd-toolbar-label,
	body.page-id-22 .wd-toolbar .wd-header-wishlist > a .wd-toolbar-label,
	.wd-toolbar .wd-toolbar-sidebar.wd-opened > a .wd-toolbar-label {
		color: var(--ja-warm, #8f6f44);
		font-weight: 700;
	}

	/* slim champagne indicator at the top of the selected control.
	   NOTE: the ::after pseudo-element MUST be repeated on every
	   selector in the list. A list where only the last selector
	   carries ::after applies the whole declaration block (position:
	   absolute / width / background) to the anchor element itself,
	   which collapses the anchor out of flow and truncates every
	   label. Keep this rule identical in form to the dark block. */
	.wd-toolbar > .is-active > a::after,
	body.home .wd-toolbar .wd-toolbar-home > a::after,
	body.woocommerce-shop .wd-toolbar .wd-toolbar-shop > a::after,
	body.post-type-archive-product .wd-toolbar .wd-toolbar-shop > a::after,
	body.tax-product_cat .wd-toolbar .wd-toolbar-shop > a::after,
	body.single-product .wd-toolbar .wd-toolbar-shop > a::after,
	body.woocommerce-cart .wd-toolbar .wd-header-cart > a::after,
	body.woocommerce-account .wd-toolbar .wd-header-my-account > a::after,
	body.woocommerce-wishlist .wd-toolbar .wd-header-wishlist > a::after,
	body.page-id-22 .wd-toolbar .wd-header-wishlist > a::after,
	.wd-toolbar .wd-toolbar-sidebar.wd-opened > a::after {
		content: "";
		position: absolute;
		inset-block-start: 1px;
		inset-inline-start: 50%;
		transform: translateX(-50%);
		width: 18px;
		height: 2.5px;
		border-radius: 2px;
		background-color: var(--ja-champagne, #b08d57);
	}

	/* --- tactile feedback ---------------------------------------- */
	.wd-toolbar > a:active,
	.wd-toolbar > div a:active {
		transform: scale(.94);
		background-color: var(--ja-accent-bg-2, rgba(176, 141, 87, .16));
	}

	.wd-toolbar > a:focus-visible,
	.wd-toolbar > div a:focus-visible {
		outline: 2px solid var(--ja-champagne, #b08d57);
		outline-offset: -2px;
	}

	/* --- badges --------------------------------------------------- */
	.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: #fff;
		font-family: "Cabin", sans-serif;
		font-size: 9px;
		font-weight: 700;
		line-height: 16px;
		box-shadow: 0 1px 3px rgba(28, 24, 20, .22);
	}

	.wd-toolbar .wd-cart-number {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wd-toolbar .wd-cart-number > span {
		font-size: 8px;
		font-weight: 600;
		opacity: .85;
	}

	.wd-toolbar .jaurea-notif-badge {
		inset-block-start: 2px;
		inset-inline-end: 10px;
	}

	/* --- page compensation: stays in sync with the bar ------------ */
	body.sticky-toolbar-on {
		padding-bottom: calc(var(--jt-bar-h, 60px) + var(--jt-float, 14px) + env(safe-area-inset-bottom, 0px));
	}

	body.sticky-toolbar-on .wd-sticky-btn {
		bottom: calc(var(--jt-bar-h, 60px) + var(--jt-float, 14px) + env(safe-area-inset-bottom, 0px));
	}

	body.sticky-toolbar-on .scrollToTop {
		bottom: calc(12px + var(--jt-bar-h, 60px) + var(--jt-float, 14px) + env(safe-area-inset-bottom, 0px));
	}

	body.sticky-toolbar-on .wd-sticky-btn-shown.scrollToTop {
		bottom: calc(12px + var(--jt-bar-h, 60px) + var(--jt-float, 14px) + env(safe-area-inset-bottom, 0px) + var(--wd-sticky-btn-height, 0px));
	}

	/* --- tablet: airier ------------------------------------------- */
	@media (min-width: 769px) and (max-width: 1024px) {
		.wd-toolbar {
			--jt-icon: 22px;
			--jt-label: 11px;
			--jt-gap: 6px;
		}
	}

	/* --- small mobile: keep all six labels usable at 375 --------- */
	@media (max-width: 768.98px) {
		.wd-toolbar {
			--jt-gap: 2px;
			--jt-pad: 7px;
			--jt-label: 9.5px;
			inset-inline: 10px !important;
		}

		.wd-toolbar > a,
		.wd-toolbar > div a {
			padding-inline: 0;
		}

		.wd-toolbar .wd-toolbar-label {
			inset-inline: 0;
			letter-spacing: 0;
		}
	}
}

/* =========================================================
 * DARK MODE PAGE BACKGROUND — TRUE BLACK (#000000)
 * §20: "MAKE DARK MODE TRUE BLACK"
 * Two triggers:
 *   1) explicit theme toggle -> html[data-jaurea-theme="dark"]
 *   2) OS-level dark preference -> @media (prefers-color-scheme: dark)
 * In both cases the page background is #000000 so the dark glass
 * header/toolbar/showcase float correctly over a true-black canvas.
 * Light theme on dark-OS gets warm cream (#f8f0e3), never white.
 * ========================================================= */



/* =========================================================
 * DARK MODE — layered charcoal depth (prefers-color-scheme)
 * Layering: page bg -> header glass -> nav card -> active
 * control. NOT a light-mode inversion; warm-dark neutrals,
 * never pure black, never brown surfaces.
 * ========================================================= */


/* =========================================================
 * DESKTOP — bar stays hidden; header fully untouched (>=1025)
 * ========================================================= */
@media (min-width: 1025px) {
	.wd-toolbar {
		display: none;
	}
}

/* =========================================================
 * REDUCED MOTION
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.wd-toolbar,
	.wd-toolbar > a,
	.wd-toolbar > div a,
	.wd-toolbar .wd-tools-icon::before,
	.wd-toolbar .wd-toolbar-label,
	body .whb-main-header,
	body .whb-main-header .wd-tools-element > a,
	body .whb-main-header .wd-tools-icon::before {
		transition: none;
	}

	.wd-toolbar > a:active,
	.wd-toolbar > div a:active,
	body .whb-main-header .wd-tools-element:active > a {
		transform: none;
	}
}


/* =============================================================
 * JAUREA PRODUCT SHOWCASE  ("عروض جارويا")
 * --------------------------------------------------------------
 * COMPLETELY REBUILT from zero (Phase B). One large rounded card:
 * the product image fills the card; a translucent warm-cream glass
 * panel overlays the LOWER portion of the image carrying the title,
 * price, and a warm-charcoal pill CTA inside the panel. The image
 * continues BEHIND the panel — the panel overlaps the image, not
 * the other way around.
 *
 * Data source: Woodmart's real wd_products widget (layout:carousel,
 * post_type:"sale") — 100% dynamic, zero hardcoded identity.
 * Built ABOVE the existing Hero (Elementor index 0). Hero preserved.
 *
 * All offsets use logical properties for RTL (/ar/) + LTR (/en/).
 * Scoped under .ja-hero-slider so it never bleeds into other widgets.
 *
 * Reference: clipboard-2026-09-19T23-54-14-996Z-4011990e.jpg
 *   light mode. Card ~336x420 @390. Glass panel ~45% bottom.
 *   Dark header in light mode (RGB~48,48,48). Side-peek neighbours.
 * ============================================================= */

/* --- token layer: light mode ---------------------------------- */
/* The selector list deliberately EXCLUDES @media from the same
 * block (CSS error-recovery would drop the whole rule). */
.ja-hero-slider {
	--jhs-radius:        22px;
	--jhs-radius-sm:     16px;
	--jhs-surface:       rgba(248, 238, 221, .58);
	--jhs-surface-strong:rgba(250, 244, 234, .82);
	--jhs-ink:           #2c2622;
	--jhs-ink-soft:      #5a524b;
	--jhs-warm:          #b08d57;
	--jhs-champagne:     #b08d57;
	/* hero CTA is the "عرض المنتج" button, so it wears the same
	   JAUREA champagne glass as every other card CTA (see the
	   --jg-cta-* tokens in jaurea-glass.css §14.0): translucent
	   warm-beige surface, dark warm-brown ink. */
	--jhs-cta-bg:        rgba(184, 155, 114, .36);
	--jhs-cta-fg:        #3a2e20;
	--jhs-border:        rgba(74, 58, 40, .18);
	--jhs-shadow:        rgba(28, 24, 20, .14);
	--jhs-d:             180ms;
	--jhs-ease:          cubic-bezier(.25, .1, .25, 1);
	--jhs-blur:          blur(16px) saturate(1.3);
}
.ja-hero-slider .wd-nav-style-graphic .wd-nav-pagin-item,
.ja-hero-slider .wd-nav-bullet {
	--jhs-dot-size:      8px;
	--jhs-dot-active-w:  20px;
}

/* --- token layer: dark mode (#000000 page bg) ----------------- */

/* --- token layer: dark OS, light theme override --------------- */


/* mobile-specific token remap (768 / 375px wide) */
@media (max-width: 1024px) {
	.ja-hero-slider {
		--jhs-radius:      20px;
		--jhs-radius-sm:   14px;
		--jhs-surface:     rgba(248, 238, 221, .62);
	}
}

/* =============================================================
 * 1. CAROUSEL VIEWPORT — side-peek + controlled overflow
 * ============================================================= */
/* The carousel wrapper shows ~1.3 cards at a time so neighbours
 * peek from the sides (reference: x=0..~40 and x=~720..760 at 768px).
 * No scroll hijack; native scroll-snap for touch/drag. */
.ja-hero-slider .wd-slider.mod-carousel .wd-carousel-wrap {
	overflow: visible;              /* allow peek without clipping */
	scroll-snap-type: x mandatory;
}
.ja-hero-slider .wd-slider.mod-carousel .wd-carousel-wrap .wd-carousel-page {
	scroll-snap-align: center;
}
.ja-hero-slider .wd-slider.mod-carousel .wd-carousel-container {
	gap: 10px;
}
.ja-hero-slider .wd-slider.mod-carousel .wd-products-in-carousel {
	display: flex;
	gap: 10px;
}

/* side-peek: neighbouring slides partially visible */
@media (max-width: 1024px) {
	.ja-hero-slider .wd-slider.mod-carousel .wd-carousel-container {
		padding-inline: 8px;
	}
	.ja-hero-slider .wd-slider.mod-carousel .wd-carousel-page {
		flex: 0 0 calc(100% - 16px);
		max-width: calc(100% - 16px);
		opacity: .4;
		scale: .92;
		transition: opacity var(--jhs-d) var(--jhs-ease),
		            scale var(--jhs-d) var(--jhs-ease);
	}
	.ja-hero-slider .wd-slider.mod-carousel .wd-carousel-page.active,
	.ja-hero-slider .wd-slider.mod-carousel .wd-carousel-page:hover {
		opacity: 1;
		scale: 1;
	}
}

/* desktop: full-width single card, no peek needed */
@media (min-width: 1025px) {
	.ja-hero-slider .wd-slider.mod-carousel .wd-carousel-page {
		opacity: 1;
		scale: 1;
	}
}

/* =============================================================
 * 2. CARD — large radius, premium depth
 * ============================================================= */
.ja-hero-slider .wd-product {
	position: relative;
	display: block;
	margin: 0 auto;
	max-width: 360px;
	border-radius: var(--jhs-radius);
	overflow: hidden;
	background-color: rgba(0, 0, 0, .02);
	box-shadow:
		0 4px 16px var(--jhs-shadow),
		inset 0 0 0 1px var(--jhs-border);
}
.ja-hero-slider .wd-product.wd-hover-with-fade {
	/* keep hover behaviour but force the panel to overlay */
}

/* =============================================================
 * 3. PRODUCT IMAGE — fills card, object-fit cover, CLS ≈ 0
 * ============================================================= */
.ja-hero-slider .wd-product-thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;      /* reference ~336x420 at 390 */
	object-fit: cover;
	border-radius: var(--jhs-radius);
}
/* desktop: slightly wider aspect */
@media (min-width: 1025px) {
	.ja-hero-slider .wd-product-thumb {
		max-height: 480px;
	}
}

/* =============================================================
 * 4. SALE / PRODUCT BADGES — warm champagne, NEVER blue
 *    (Woodmart's .wd .product-label.onsale is (0,3,0); we raise
 *     specificity via body prefix + !important to win after
 *     LiteSpeed concatenates parent CSS after child.)
 * ============================================================= */
body .ja-hero-slider .product-labels {
	inset-block-start: 10px;
	inset-inline-start: 10px;
	z-index: 3;
	display: flex;
	gap: 6px;
}
body .ja-hero-slider .product-labels .onsale,
body .ja-hero-slider .product-labels .product-label {
	min-width: 38px;
	padding: 4px 9px;
	border-radius: 999px;
	background-color: var(--jhs-champagne) !important;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	box-shadow: 0 1px 3px rgba(74, 58, 40, .26);
	border: none;
}

/* =============================================================
 * 5. GLASS INFORMATION PANEL — translucent warm cream
 *    overlays the LOWER portion of the image (~45% height).
 *    The image peeks ABOVE/BEHIND the panel.
 * ============================================================= */
.ja-hero-slider .wd-product .product-element-bottom {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 16px 14px;
	/* translucent warm-cream veil; image visible behind via blur */
	background-color: var(--jhs-surface);
	/* fade top of panel into image — no hard edge */
	background-image: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--jhs-surface) 0%, transparent) 0%,
		color-mix(in srgb, var(--jhs-surface) 30%, transparent) 22%,
		var(--jhs-surface) 68%
	);
	-webkit-backdrop-filter: var(--jhs-blur);
	backdrop-filter: var(--jhs-blur);
	border-radius: 0 0 var(--jhs-radius) var(--jhs-radius);
	color: var(--jhs-ink);
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
}
/* dark mode panel */



/* =============================================================
 * 6. TITLE
 * ============================================================= */
.ja-hero-slider .wd-entities-title {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--jhs-ink);
}
.ja-hero-slider .wd-entities-title a {
	color: inherit;
	text-decoration: none;
}
.ja-hero-slider .wd-entities-title a:hover {
	color: var(--jhs-warm);
}
.ja-hero-slider .wd-entities-title a:focus-visible {
	outline: 2px solid var(--jhs-champagne) !important;
	outline-offset: 2px !important;
	border-radius: 3px;
}

/* =============================================================
 * 7. PRICE ROW
 * ============================================================= */
.ja-hero-slider .wrap-price {
	margin: 0 0 8px;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.ja-hero-slider .wrap-price .price {
	margin: 0;
	font-size: 14px;
	color: var(--jhs-ink);
}
.ja-hero-slider .wrap-price .price del {
	color: var(--jhs-ink-soft);
	font-size: 12px;
	opacity: .85;
}
.ja-hero-slider .wrap-price .price ins {
	color: var(--jhs-warm);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

/* =============================================================
 * 8. CTA — warm-charcoal pill, cream text, dynamic permalink
 *    (Woodmart .wd-add-btn > a forces width:100% + champagne bg
 *     at (0,3,1); we override to auto-width pill with !important
 *     on the props Woodmart would clobber.)
 * ============================================================= */
.ja-hero-slider .wd-add-btn {
	position: static;
	display: flex;
	justify-content: center;         /* centre the CTA pill in the hero panel */
	margin-block-start: 2px;
	opacity: 1;
	transform: none;
}
.ja-hero-slider .wd-product .wd-add-btn a.button,
.ja-hero-slider .wd-product .wd-add-btn a.add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: auto !important;
	max-width: 100%;
	margin: 0;
	padding: 10px 20px;
	min-height: 40px;                 /* synced with the glass rule (it wins on specificity) */
	min-width: 240px;                 /* REQUEST #2 — wider hero pill, height untouched */
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--jhs-champagne) 42%, transparent);
	background-color: var(--jhs-cta-bg, #2c2622) !important;
	color: var(--jhs-cta-fg, #f6efe3) !important;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .01em;
	text-align: center;
	text-transform: none;
	text-decoration: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
	            0 2px 8px var(--jhs-shadow);
	transition: background-color var(--jhs-d) var(--jhs-ease),
	            transform var(--jhs-d) var(--jhs-ease),
	            box-shadow var(--jhs-d) var(--jhs-ease),
	            border-color var(--jhs-d) var(--jhs-ease);
}
.ja-hero-slider .wd-product .wd-add-btn a.button:hover,
.ja-hero-slider .wd-product .wd-add-btn a.add_to_cart_button:hover {
	background-color: var(--jhs-warm) !important;
	border-color: color-mix(in srgb, var(--jhs-champagne) 70%, transparent);
	color: #2c2622 !important;
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2),
	            0 4px 14px var(--jhs-shadow);
}
/* Woodmart global focus is !important — ours must be too (0,4,1) > (0,1,1) */
.ja-hero-slider .wd-add-btn a.button:focus-visible,
.ja-hero-slider .wd-add-btn a.add_to_cart_button:focus-visible {
	outline: 2px solid var(--jhs-champagne) !important;

	outline-offset: 2px !important;
}
.ja-hero-slider .wd-add-btn .wd-action-icon {
	font-size: 0;
}
.ja-hero-slider .wd-add-btn .wd-action-text {
	font-size: 13.5px;
	font-weight: 700;
}
.ja-hero-slider .wd-add-btn .screen-reader-text {
	display: none;
}

/* =============================================================
 * 9. NAVIGATION ARROWS — 44px rounded pips, RTL-aware
 * ============================================================= */
.ja-hero-slider .wd-nav-prev,
.ja-hero-slider .wd-nav-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	border: 1px solid var(--jhs-border);
	background-color: var(--jhs-surface-strong);
	color: var(--jhs-ink);
	backdrop-filter: var(--jhs-blur);
	-webkit-backdrop-filter: var(--jhs-blur);
	box-shadow: 0 2px 10px var(--jhs-shadow);
	transition: background-color var(--jhs-d) var(--jhs-ease),
	            border-color var(--jhs-d) var(--jhs-ease);
	z-index: 4;
}
.ja-hero-slider .wd-nav-prev:hover,
.ja-hero-slider .wd-nav-next:hover {
	background-color: var(--jhs-warm);
	color: #fff;
	border-color: var(--jhs-champagne);
}
.ja-hero-slider .wd-nav-prev:focus-visible,
.ja-hero-slider .wd-nav-next:focus-visible {
	outline: 2px solid var(--jhs-champagne) !important;
	outline-offset: 2px !important;
}
/* arrow position: float above the card, at the card's sides */
.ja-hero-slider .wd-nav-prev {
	inset-inline-start: -16px;
}
.ja-hero-slider .wd-nav-next {
	inset-inline-end: -16px;
}
/* dark mode arrow colour */

/* =============================================================
 * 10. PAGINATION DOTS — small circles, active wider
 *     (Woodmart .wd .wd-nav-pagin-item base is (0,2,0); scoped
 *      .ja-hero-slider prefix lifts us above it.)
 * ============================================================= */
.ja-hero-slider .wd-nav-pagin {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-block-start: 12px;
}
.ja-hero-slider .wd-nav-pagin-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	border: none;
	background-color: rgba(74, 58, 40, .42);
	cursor: pointer;
	box-shadow: none;
	transition: background-color var(--jhs-d) var(--jhs-ease),
	            width var(--jhs-d) var(--jhs-ease);
}
.ja-hero-slider .wd-nav-pagin-item:hover {
	background-color: var(--jhs-ink);
}
.ja-hero-slider .wd-nav-pagin-item.active,
.ja-hero-slider .wd-nav-pagin-item.wd-active {
	width: 20px;
	background-color: var(--jhs-champagne);
}
.ja-hero-slider .wd-nav-pagin-item:focus-visible {
	outline: 2px solid var(--jhs-champagne) !important;
	outline-offset: 2px !important;
}
/* dark mode dots */


/* =============================================================
 * 11. RESPONSIVE TUNING
 * ============================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
	.ja-hero-slider .wd-product {
		max-width: 320px;
	}
	.ja-hero-slider .wd-entities-title {
		font-size: 16px;
	}
	.ja-hero-slider .wrap-price .price {
		font-size: 15px;
	}
	.ja-hero-slider .wd-nav-prev {
		inset-inline-start: -12px;
	}
	.ja-hero-slider .wd-nav-next {
		inset-inline-end: -12px;
	}
}
@media (min-width: 1025px) {
	.ja-hero-slider .wd-product {
		max-width: 360px;
	}
	.ja-hero-slider .wd-entities-title {
		font-size: 18px;
	}
	.ja-hero-slider .wrap-price .price {
		font-size: 16px;
	}
	.ja-hero-slider .wd-nav-prev,
	.ja-hero-slider .wd-nav-next {
		inset-inline-start: -20px;
	}
	.ja-hero-slider .wd-nav-next {
		inset-inline-end: -20px;
	}
}

/* =============================================================
 * 12. REDUCED MOTION
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
	.ja-hero-slider .wd-product,
	.ja-hero-slider .wd-add-btn a.button,
	.ja-hero-slider .wd-add-btn a.add_to_cart_button,
	.ja-hero-slider .wd-nav-pagin-item {
		transition: none;
	}
	.ja-hero-slider .wd-add-btn a.button:hover,
	.ja-hero-slider .wd-add-btn a.add_to_cart_button:hover {
		transform: none;
	}
	.ja-hero-slider .wd-carousel-page {
		scroll-snap-align: none;
	}
}

/* =============================================================
 * 13. GLASS DESIGN LANGUAGE — all widths, both themes
 * -------------------------------------------------------------
 * The component half of the glass system. jaurea-glass.css owns the
 * token VALUES and the page canvas; this section owns the
 * language that is identical at every width.
 *
 * Every rule below targets an EXISTING Woodmart or child-theme
 * selector. Nothing is rebuilt, nothing is duplicated, no new
 * component is introduced, and no Woodmart template is overridden.
 *
 * Load order matters and is relied on deliberately: this file is
 * enqueued as `child-style` at priority 1000, and jaurea-glass.css
 * depends on it at priority 1001 — so jaurea-glass.css wins every
 * equal-specificity tie. See 13.1.
 * ============================================================= */

/* -------------------------------------------------------------
 * 13.1 Woodmart geometry tokens
 * -------------------------------------------------------------
 * Woodmart already routes its geometry through tokens, so the rounded
 * language is applied by re-declaring those tokens instead of
 * re-styling each component. Coverage per token:
 *
 *   --wd-brd-radius       .wd-product-wrapper, .wd-product-thumb,
 *                         .wd-image img, .wd-dropdown, .wd-buttons,
 *                         pagination pills
 *   --wd-form-brd-radius  every input / select / textarea
 *   --btn-*-brd-radius    every Woodmart button
 *
 * `html:root` is (0,1,1). It outranks Woodmart's inline
 * `:root` (0,1,0) regardless of source order, and it TIES with the
 * token block in jaurea-glass.css — which therefore wins on
 * source order for the tokens that must override Woodmart
 * (e.g. --wd-form-brd-color).
 * ------------------------------------------------------------- */
html:root {
	--wd-brd-radius: 18px;
	--wd-form-brd-radius: 14px;
	--btn-default-brd-radius: 14px;
	--btn-accented-brd-radius: 14px;

	/* Inputs shipped with border-width 0 and a white border colour,
	 * i.e. no visible edge at all. A soft warm hairline instead. */
	--wd-form-brd-width: 1px;
	--wd-form-brd-color: rgba(74, 58, 40, .16);
}


/* -------------------------------------------------------------
 * 13.2 Desktop header — one continuous glass surface
 * -------------------------------------------------------------
 * On desktop Woodmart leaves .whb-main-header transparent and paints
 * the shipping strip (a Header Builder setting, emitted inline) as a
 * solid BLACK bar — the opposite of the soft language we are moving
 * to. Making that strip transparent lets the same glass show through,
 * exactly as the mobile treatment already does.
 *
 * The strip's row is `whb-color-light`, i.e. its text was authored
 * for a black background, so the ink has to be re-pointed at the same
 * time or it would vanish on cream. Content, links, the sticky clone
 * and every header trigger are untouched.
 * ------------------------------------------------------------- */
@media (min-width: 1025px) {

	body .whb-main-header {
		background-color: var(--ja-surface);
		-webkit-backdrop-filter: var(--ja-blur);
		backdrop-filter: var(--ja-blur);
		border-bottom: 1px solid var(--ja-hairline);
		box-shadow: var(--ja-sh-1);
	}

	body.whb-sticked .whb-main-header,
	body .whb-clone.whb-main-header {
		background-color: var(--ja-surface-2);
		box-shadow: var(--ja-sh-2);
	}

	body .whb-main-header .whb-top-bar {
		background-color: transparent !important;
		border-bottom: 1px solid var(--ja-hairline);
	}

	body .whb-main-header .whb-top-bar,
	body .whb-main-header .whb-top-bar .wd-header-text,
	body .whb-main-header .whb-top-bar strong,
	body .whb-main-header .whb-top-bar a {
		color: var(--ja-ink-soft);
	}

	/* premium icon treatment: the tools row sits in its own soft well */
	body .whb-main-header .wd-tools-element > a {
		border-radius: 12px;
		transition: background-color .22s var(--ja-ease), color .22s var(--ja-ease);
	}

	body .whb-main-header .wd-tools-element:hover > a {
		background-color: var(--ja-accent-bg);
		color: var(--ja-warm);
	}
}


/* -------------------------------------------------------------
 * 13.3 Product cards
 * -------------------------------------------------------------
 * Geometry, image radius, title and price colour are already
 * token-driven, so this only adds what tokens cannot express:
 * a refined hover elevation and press feedback on the CTA.
 *
 * Woodmart's own hover elevation is the absolutely-positioned
 * .wd-product-card-bg layer, so that layer is REFINED rather than
 * a second shadow being stacked on top of it. box-shadow is used
 * instead of transform so nothing can shift layout or be clipped
 * by a carousel viewport.
 * ------------------------------------------------------------- */
body .wd-hover-with-fade .wd-product-card-bg {
	box-shadow: var(--ja-sh-2);
}

.wd-product-wrapper {
	transition: box-shadow .3s var(--ja-ease), background-color .3s var(--ja-ease);
}

.wd-product .wd-add-btn .button,
.wd-product .wd-add-btn a.button {
	border-radius: 14px;
	transition: transform .18s var(--ja-ease),
	            background-color .22s var(--ja-ease),
	            color .22s var(--ja-ease),
	            box-shadow .22s var(--ja-ease);
}

.wd-product .wd-add-btn .button:active,
.wd-product .wd-add-btn a.button:active {
	transform: scale(.97);
}

/* badges: soft chips, never hard squares */
body .product-label {
	border-radius: 999px;
	letter-spacing: .01em;
}


/* -------------------------------------------------------------
 * 13.4 Form controls
 * -------------------------------------------------------------
 * Radius, border, background and the champagne focus colour all come
 * from the --wd-form-* tokens (13.1 here, values in
 * jaurea-glass.css). This adds only the tactile focus ring, and it is
 * ADDITIVE — no `outline:none`, so Woodmart's existing :focus-visible
 * affordance is preserved for keyboard users.
 * ------------------------------------------------------------- */
body .wd input,
body .wd select,
body .wd textarea,
body .wd .input-text {
	transition: border-color .2s var(--ja-ease),
	            box-shadow .2s var(--ja-ease),
	            background-color .2s var(--ja-ease);
}

body .wd input:focus-visible,
body .wd select:focus-visible,
body .wd textarea:focus-visible,
body .wd .input-text:focus-visible {
	box-shadow: 0 0 0 3px var(--ja-accent-bg-2);
}


/* -------------------------------------------------------------
 * 13.5 Motion
 * -------------------------------------------------------------
 * Press feedback on the header tools and the mobile toolbar items.
 * The selectors mirror the ones the existing toolbar block in this
 * file already uses, so nothing new is being introduced.
 * ------------------------------------------------------------- */
body .whb-main-header .wd-tools-element > a,
body .wd-toolbar > a,
body .wd-toolbar > div a,
body .wd-nav > li > a {
	transition: color .22s var(--ja-ease),
	            background-color .22s var(--ja-ease),
	            transform .18s var(--ja-ease);
}

body .whb-main-header .wd-tools-element:active > a,
body .wd-toolbar > a:active,
body .wd-toolbar > div a:active {
	transform: scale(.94);
}

@media (prefers-reduced-motion: reduce) {
	.wd-product-wrapper,
	.wd-product .wd-add-btn .button,
	.wd-product .wd-add-btn a.button,
	body .wd input,
	body .wd select,
	body .wd textarea,
	body .whb-main-header .wd-tools-element > a,
	body .wd-toolbar > a,
	body .wd-toolbar > div a,
	body .wd-nav > li > a {
		transition: none;
	}

	.wd-product .wd-add-btn .button:active,
	.wd-product .wd-add-btn a.button:active,
	body .whb-main-header .wd-tools-element:active > a,
	body .wd-toolbar > a:active,
	body .wd-toolbar > div a:active {
		transform: none;
	}
}