/*
Theme Name:   Woodmart Child
Theme URI:    https://viarose.store
Description:  Child theme for Woodmart. All custom PHP and CSS belongs here so
              that updating the Woodmart parent theme cannot overwrite it.
Author:       Via Rose
Template:     woodmart
Version:      1.0.0
Text Domain:  woodmart-child
*/

/* Add custom CSS below this line. */

/* ==========================================================================
   Mobile / tablet remediation - added from E2E audit (2026-08-27)
   Every value below was chosen from a measured defect, not a guess.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX 3 - iOS Safari auto-zooms the viewport whenever a focused input has a
   font-size below 16px. Eighteen checkout fields measured at 14px, so tapping
   any billing field mid-checkout jerked the page. 16px is the exact threshold;
   it is applied only at the widths where a touch keyboard appears, so the
   desktop design keeps its 14px fields.
   -------------------------------------------------------------------------- */
/*
 * Selectors are prefixed with `body` on purpose. Woodmart enqueues
 * css/parts/base-deferred.css and woocommerce-base-deferred.css in the FOOTER,
 * i.e. after this child stylesheet, so its `.wd select` / `.wd textarea` rules
 * (specificity 0,1,1) would win a tie on source order. `body.woocommerce-checkout select`
 * is 0,2,1 and wins outright. Verified: without the `body` prefix the text
 * inputs took the fix but billing_country, order_comments and the delivery
 * select stayed at 14px.
 */
@media (max-width: 782px) {
	body.woocommerce-checkout input[type="text"],
	body.woocommerce-checkout input[type="email"],
	body.woocommerce-checkout input[type="tel"],
	body.woocommerce-checkout input[type="number"],
	body.woocommerce-checkout input[type="password"],
	body.woocommerce-checkout input[type="search"],
	body.woocommerce-checkout textarea,
	body.woocommerce-checkout select,
	body.woocommerce-cart input[type="text"],
	body.woocommerce-cart input[type="number"],
	body.woocommerce-cart textarea,
	body.woocommerce-cart select,
	body.woocommerce-account input[type="text"],
	body.woocommerce-account input[type="email"],
	body.woocommerce-account input[type="tel"],
	body.woocommerce-account input[type="password"] {
		font-size: 16px;
	}
}

/* --------------------------------------------------------------------------
   FIX 4a - Tap targets below the 44x44 CSS-px minimum (WCAG 2.5.8). Measured
   offenders on mobile: carousel arrows at 70x29 and 50x34, and the off-canvas
   close button at 50x25. Sizing the arrow's inner box rather than the wrapper
   avoids disturbing the slider's absolute positioning.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.wd-btn-arrow .wd-arrow-inner,
	.wd-nav-arrows .wd-btn-arrow .wd-arrow-inner {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.close-side-widget.wd-action-btn > a,
	.wd-close-side-btn > a {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   FIX 4b - Body copy measured at 9px and 10px on mobile. Arabic script loses
   legibility faster than Latin at small sizes because its letterforms rely on
   fine strokes and diacritics. 12px is the floor, applied only where the theme
   or Elementor had gone below it.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/*
	 * Raises theme-level small text to a 12px floor. `body` prefix for the same
	 * source-order reason as the checkout block above.
	 *
	 * EFFECTIVE here: span.onsale.product-label ("-28%") went 10px -> 12px.
	 *
	 * NOT effective on the homepage, by design of the cascade: Elementor writes
	 * per-widget typography into post-<id>.css as e.g.
	 *   .elementor-6014 .elementor-element.elementor-element-ba7dc4d .elementor-icon-box-description
	 * which is specificity 0,4,0 and outranks anything sane a stylesheet can
	 * write. Those 9-10px values were chosen in the page builder and must be
	 * changed there (Elementor -> widget -> Style -> Typography -> Mobile), not
	 * here. Overriding them with !important would fight the builder and leave
	 * the editor showing one size while the site renders another; hardcoding
	 * .elementor-element-<id> would break the next time the page is edited.
	 *
	 * Deliberately NOT touched: span.wd-tools-count (9px). That is the numeral
	 * inside the 40px cart bubble; enlarging it overflows the bubble. A digit in
	 * a counter badge is not reading matter.
	 */
	body .elementor-icon-box-description,
	body .product-labels .product-label.onsale {
		font-size: 12px;
	}
}

/* --------------------------------------------------------------------------
   FIX 5 - The cart table measured 337px of content inside a 330px box with the
   parent at overflow-x: visible, so the last column was clipped rather than
   reachable. Letting the wrapper scroll keeps the whole row available without
   forcing a page-level horizontal scrollbar.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.woocommerce-cart-form,
	.woocommerce-cart .shop_table_responsive,
	.cart_totals .shop_table {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* --------------------------------------------------------------------------
   Screen-reader-only heading injected by viarose-theme-fixes.php on pages that
   render no <h1> at all. Uses the standard WordPress .screen-reader-text
   pattern (clip-path, not display:none - display:none would hide it from
   assistive technology too, defeating the point). Declared here so the rule
   holds even if the theme ever stops shipping .screen-reader-text.
   -------------------------------------------------------------------------- */
.viarose-a11y-h1 {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   FIX 4c - Remaining sub-44px tap targets (WCAG 2.5.5 Target Size (Enhanced)).
   Measured geometry drove each decision; nothing here is applied blindly.

     social icons  14x14, 14px gaps  -> 28px pitch
     swiper dots   21x8,  12px gaps  -> 33px pitch
     header icons  40x40, 0px gap    -> already touching each other
     .btn          112x42 / 132x42   -> 2px short in height only

   Growing a target WIDER than its pitch makes neighbouring targets overlap,
   so a tap lands on the wrong control. That is a worse outcome than a small
   target, so width is only increased where the measured gap allows it, and
   height (which has free space everywhere here) does the rest.
   ========================================================================== */

@media (max-width: 1024px) {

	/* 1. Buttons were 42px - two pixels short. Nothing else needed. */
	.wd-button-wrapper > a.btn,
	a.btn.btn-style-default {
		min-height: 44px;
	}

	/* 2. Header tool icons (search, cart, burger) and the scroll-to-top button.
	      These sit flush against each other (measured gap: 0px), so the hit
	      area is grown VERTICALLY only, via a pseudo-element that takes no
	      space in layout and therefore cannot change the header's height. */
	.wd-header-search-mobile > a,
	.wd-header-cart > a,
	.wd-header-mobile-nav > a,
	a.scrollToTop {
		position: relative;
	}
	.wd-header-search-mobile > a::after,
	.wd-header-cart > a::after,
	.wd-header-mobile-nav > a::after,
	a.scrollToTop::after {
		content: "";
		position: absolute;
		top: 50%;
		height: 44px;
		width: 44px;
		transform: translateY(-50%);
		/* purely a touch surface - must never paint or catch the cursor style */
		background: transparent;
		pointer-events: auto;
	}

	/* The icons are 40px wide and sit flush against each other, so the extra
	   4px is taken from the OUTSIDE edge of the header rather than from a
	   neighbour. Measured: the burger starts at x=29 with 29px of free margin
	   to its left; the search icon ends at x=331 with 44px free to its right.
	   Growing outward keeps every hit area disjoint. */
	.wd-header-mobile-nav > a::after {
		right: 0;
		left: auto;
	}
	.wd-header-search-mobile > a::after {
		left: 0;
		right: auto;
	}
	.wd-header-cart > a::after,
	a.scrollToTop::after {
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 3. Social icons: 5 x 44px = 220px, which fits inside a 375px viewport,
	      so here the row CAN legitimately be spread. Padding grows the target
	      without scaling the glyph. */
	.elementor-social-icons-wrapper .elementor-grid-item,
	a.elementor-social-icon {
		min-width: 44px;
		min-height: 44px;
	}
	a.elementor-social-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* 4. Swiper pagination dots: 4 x 44px = 176px, also fits, so the pitch is
	      widened rather than the dot itself - the dot must stay small to still
	      read as a dot. The pseudo-element carries the touch area. */
	/* Pitch must be >= 44px or the 44px touch surfaces overlap and a tap can
	   land on the wrong slide. Measured original pitch was 33px (21px dot +
	   12px gap); margin-inline alone was overridden by the theme, so the
	   margins are set explicitly with both physical properties.
	   21 + 15 + 15 = 51px pitch. 45px was tried first and still stole taps at
	   the edges: a 44px surface inside a 45px pitch leaves 1px of clearance,
	   which sub-pixel rounding consumes. 51px gives 7px of real clearance, and
	   4 x 51 = 204px still fits a 375px screen. */
	.swiper-pagination-bullets .swiper-pagination-bullet,
	.swiper-pagination.swiper-pagination-bullets span.swiper-pagination-bullet {
		position: relative;
		margin-left: 15px;
		margin-right: 15px;
	}
	.swiper-pagination-bullets .swiper-pagination-bullet::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
		background: transparent;
	}
}

/*
 * DELIBERATELY NOT FORCED: links inside h3.wd-entities-title (product titles,
 * 130x27) and the site-logo links (100x21, 319x25).
 *
 * WCAG 2.5.5/2.5.8 both carve out an explicit exception for targets whose size
 * is constrained by the line-height of surrounding text - which is exactly what
 * a product-title link is. Padding them to 44px would push each card's hit area
 * over the price link directly beneath it, so taps meant for the price would
 * open the product instead. The whole product card is already clickable, so the
 * large target the user actually needs is present.
 */

/* ==========================================================================
   FIX 9 - Colour contrast (WCAG 1.4.3 Contrast Minimum, Level AA)
   Measured with the WCAG relative-luminance formula against each element's
   real composited background. Replacement colours were computed by darkening
   each ORIGINAL colour along its own hue until it reaches 4.5:1, so the brand
   character is kept rather than everything collapsing to grey.

     #d9cab3 on #f7f7f7   1.50:1  ->  #797164  4.5:1   privacy-policy link
     #bbbbbb on #ffffff   1.92:1  ->  #767676  4.54:1  "(اختياري)" optional labels
     #999caa on #f8f4f8   2.51:1  ->  #6e707b  4.5:1   footer policy links
     #999caa on #ffffff   2.73:1  ->  #6e707b  >4.5:1  info-box titles

   #6e707b and #797164 are each solved against the DARKER of the two
   backgrounds they appear on, so they pass on both.
   ========================================================================== */

/* WooCommerce "(optional)" field markers - 1.92:1 is unreadable for anyone,
   not just users with low vision, at 11.2px. */
.woocommerce span.optional,
.woocommerce-checkout span.optional,
body span.optional {
	color: #767676;
}

/* Checkout privacy-policy link. A legal link a customer cannot read is a
   compliance problem in itself, not only an accessibility one. */
.woocommerce-privacy-policy-text a.woocommerce-privacy-policy-link,
body a.woocommerce-privacy-policy-link {
	color: #797164;
}

/* Footer policy headings/links (Terms, Privacy, Refund & Cancellation).
   Elementor writes per-widget colour into post-<id>.css at specificity 0,3,0
   or higher, so this needs the extra class to win on merit rather than with
   !important. If a future Elementor edit re-lightens these, change the colour
   in the widget rather than adding weight here. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget.elementor-widget-heading .elementor-heading-title,
footer .elementor-widget-heading .elementor-heading-title {
	color: #6e707b;
}

/* Woodmart info-box titles, same grey on white. */
.info-box-title.title,
h4.info-box-title,
body .wd-info-box .info-box-title {
	color: #6e707b;
}

/* ==========================================================================
   FIX 10 - Visible focus indicator (WCAG 2.4.7 Focus Visible, Level AA)

   Measured on /checkout/: #billing_first_name, #billing_phone and
   #billing_country all computed to `outline: none` with NO box-shadow and no
   other affordance - a keyboard user filling in the checkout cannot see which
   field they are in. Only #place_order had an indicator.

   14 rules across the theme and plugins set `outline: none` or `outline: 0`.
   Rather than hunt each one, this restores a strong indicator on the focused
   element itself. :focus-visible is used so the ring appears for keyboard and
   assistive input but not on mouse click, which is why it was removed in the
   first place.
   ========================================================================== */
/* NOT written with :where() on purpose. :where() contributes zero specificity,
   so every one of the 14 `outline: none` rules (which have real specificity)
   would still win and the ring would never appear - verified: outline-style
   stayed `none` until this was changed to a plain selector list. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	/*
	 * !important is deliberate and is the correct tool here, unlike elsewhere
	 * in this file where it is avoided.
	 *
	 * Fourteen separate rules across the theme and four plugins set
	 * `outline: none` / `outline: 0` at specificities from 0,2,0 up to 0,3,0.
	 * Matching each one would mean hardcoding fourteen third-party selectors
	 * that any plugin update can rename, and every miss is an invisible
	 * keyboard focus - a WCAG 2.4.7 Level AA failure. Verified: without
	 * !important the rule is present in the cascade but loses, and the
	 * computed outline-style stays `none`.
	 *
	 * This is an accessibility floor, not a design preference. It should win.
	 */
	outline: 3px solid #7a1e2e !important;   /* brand red, carries 3:1 on white */
	outline-offset: 2px !important;
	border-radius: 2px;
}

/* Inputs sit on white and often have their own border; an offset ring alone
   can read as part of the field. The inner shadow separates them clearly. */
.woocommerce-checkout input:focus-visible,
.woocommerce-checkout select:focus-visible,
.woocommerce-checkout textarea:focus-visible,
.woocommerce-cart input:focus-visible,
.woocommerce-account input:focus-visible {
	outline: 3px solid #7a1e2e !important;
	outline-offset: 1px !important;
	box-shadow: 0 0 0 1px #7a1e2e inset;
}

/* Skip links must be visible once focused, or they are decorative only. */
.wd-skip-navigation:focus,
.wd-skip-content:focus {
	outline: 3px solid #7a1e2e !important;
	outline-offset: 2px !important;
}

/* ==========================================================================
   Design tokens - single source of truth (2026-10-16)
   `:root:root` and `body.wd` out-rank Woodmart's own :root/body variables
   whatever order the combined stylesheet ends up in.
   ========================================================================== */
:root:root,
body.wd {
	/* Typography: each script gets the stack built for it. IBMPI (IBM Plex
	   Sans Arabic, self-hosted) carries both scripts; the fallbacks differ. */
	--vr-font-arabic: "IBMPI", "IBM Plex Sans Arabic", Tahoma, "Segoe UI", sans-serif;
	--vr-font-latin: "IBMPI", "IBM Plex Sans Arabic", "Helvetica Neue", Arial, sans-serif;

	/* Radius scale. md is large enough that one-line controls keep the
	   brand's pill shape, small enough that multi-line notices stay boxes. */
	--vr-radius-sm: 6px;
	--vr-radius-md: 24px;
	--vr-radius-lg: 16px;

	/* Colour roles. Every pair was measured (WCAG 2.1 relative luminance)
	   against the surface it is used on:
	   primary #242424 on #fff 15.9:1 | secondary #666 on #fff 5.7:1,
	   on #f7f7f7 5.3:1, on #f8f4f8 5.3:1 | brand #5e0b15 on #fff 13.6:1. */
	--vr-bg-page: #ffffff;
	--vr-bg-surface: #f7f7f7;
	--vr-header-bg: #ffffff;
	--vr-header-bg-translucent: rgba(255, 255, 255, 0.86);
	--vr-text-primary: #242424;
	--vr-text-secondary: #666666;
	--vr-text-brand: #5e0b15;
	--vr-text-on-image: #ffffff;
	--vr-scrim: linear-gradient(to top, rgba(20, 6, 9, 0.62) 0%, rgba(20, 6, 9, 0.25) 55%, rgba(20, 6, 9, 0) 100%);

	/* Woodmart's own variables, mapped onto the tokens. */
	--wd-form-brd-radius: var(--vr-radius-md);
	--btn-default-brd-radius: var(--vr-radius-md);
	--btn-accented-brd-radius: var(--vr-radius-md);
	--wd-brd-radius: var(--vr-radius-lg);
	--wd-text-color: var(--vr-text-secondary); /* was #767676: 4.5:1 on white, below it on tints */
	--wd-title-color: var(--vr-text-primary);
	--wd-link-color: var(--vr-text-brand);     /* was rgb(217,202,179): 1.6:1 */
	--wd-main-bgcolor: var(--vr-bg-page);
	--notices-success-bg: #2e7d32;             /* white text 5.1:1 (was 3.6:1) */
	--notices-warning-bg: #f5d27a;
	--notices-warning-color: #3b2a00;          /* 10.3:1 on #f5d27a (white on gold was 2.0:1) */
}

/* ==========================================================================
   Task 1 - language switcher as text (markup: functions.php)
   ========================================================================== */
.vr-lang-label {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 2px 14px;
	border: 1px solid rgba(94, 11, 21, 0.35);
	border-radius: 999px;
	color: var(--vr-text-brand);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-transform: none; /* a language name is never shouted */
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* The word is shaped by its own script's stack, whatever the page language. */
.vr-lang-label:lang(ar) {
	font-family: var(--vr-font-arabic);
	letter-spacing: 0;
}
.vr-lang-label:lang(en) {
	font-family: var(--vr-font-latin);
	letter-spacing: 0.01em;
}

a:hover .vr-lang-label {
	background: var(--vr-text-brand);
	border-color: var(--vr-text-brand);
	color: #fff; /* 13.6:1 on the brand colour */
}

a:focus-visible .vr-lang-label {
	outline: 3px solid #7a1e2e;
	outline-offset: 2px;
}

a:active .vr-lang-label {
	transform: translateY(1px);
}

/* The pill carries the state; Woodmart's nav underline would double it. */
.trp-language-switcher-container > .woodmart-nav-link {
	padding-inline: 4px;
}
.trp-language-switcher-container > .woodmart-nav-link::after {
	display: none;
}

.trp-shortcode-switcher .trp-language-item {
	padding: 0;
	background: transparent;
}

/* Any flag that still slips through (a future switcher placement). */
.trp-flag-image {
	display: none !important;
}

/* ==========================================================================
   Task 2 - one radius scale everywhere
   ========================================================================== */
/* Small: badges, tags, checkboxes, tooltips */
.onsale,
.product-label,
.wd-tag,
.tagcloud a,
input[type="checkbox"],
.wd-tooltip,
.tooltip-inner {
	border-radius: var(--vr-radius-sm);
}

/* Medium: buttons, inputs, selects, notices, quantity steppers */
.button,
.btn[class*="btn-shape-"],
.wd-button-wrapper .btn,
button,
.btn,
.wp-element-button,
.wc-block-components-button,
.single_add_to_cart_button,
.elementor-button,
.checkout-button,
#place_order,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.coupon .input-text,
#coupon_code,
.quantity,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice,
.wc-block-components-notice-banner {
	border-radius: var(--vr-radius-md);
}

/* Radio buttons and round icon buttons stay circular. */
input[type="radio"],
.wd-action-btn > a,
.woocommerce-mini-cart .remove,
a.remove {
	border-radius: 50%;
}

/* Large: product/category cards, media, modals, checkout and cart boxes */
ul.products li.product,
.wd-product .product-wrapper,
.product-grid-item .product-element-top,
.product-grid-item .product-image-link img,
.wd-cat .wd-cat-inner,
.category-grid-item .wrapp-category,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-control-thumbs img,
.mfp-content,
.wd-popup,
.dialog-message,
.woocommerce-cart-form,
.cart_totals,
#order_review,
.woocommerce-checkout-review-order,
.woocommerce-checkout-payment,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
	border-radius: var(--vr-radius-lg);
}

/* Media inside a rounded card has to be clipped by it. */
.product-grid-item .product-element-top,
.woocommerce-product-gallery__wrapper,
.wd-cat .wd-cat-inner {
	overflow: hidden;
}

/* ==========================================================================
   Task 3 - colour roles and measured contrast fixes
   ========================================================================== */
body {
	background-color: var(--vr-bg-page);
	color: var(--vr-text-secondary);
}

/* Footer policy links: rgb(153,156,170) on #f8f4f8 measured 2.5:1. The
   colour is set per widget in Elementor (0,3,1), so this has to out-rank it. */
footer .elementor-widget a:not(.elementor-button) {
	color: var(--vr-text-secondary) !important;
}
footer .elementor-widget a:not(.elementor-button):hover {
	color: var(--vr-text-brand) !important;
}

/* Muted headings #6e707b on the pink home tiles measured 2.8-2.9:1 (large
   text needs 3:1). Darkened only on those tiles; on white they pass. */
.elementor-element-62512e0 .elementor-heading-title,
.elementor-element-cd0229f .elementor-heading-title,
.elementor-element-fe4c2c6 .elementor-heading-title,
.elementor-element-c0c1503 .elementor-heading-title,
.elementor-element-31ca6b9 .elementor-heading-title {
	color: #4a4c57 !important; /* 4.6:1 on rgb(214,195,197) */
}

/* Cart product names inherited Elementor's default sky blue (2.1:1). */
.elementor-widget-woocommerce-cart {
	--product-link-normal-color: var(--vr-text-primary);
	--product-link-hover-color: var(--vr-text-brand);
}

/* Inactive tab titles #bcbfcc measured 1.8:1. */
.e-n-tab-title[aria-selected="false"] .e-n-tab-title-text {
	color: var(--vr-text-secondary) !important;
}

/* Mini-cart "1 x" quantity #bbb measured 1.9:1. */
.woocommerce-mini-cart .quantity,
.widget_shopping_cart .quantity {
	color: var(--vr-text-secondary);
}

/* Sticky header: when it slides over photography it keeps a legible,
   frosted surface instead of whatever the image is underneath. */
.whb-sticked .whb-row {
	background-color: var(--vr-header-bg-translucent) !important;
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.whb-sticked .whb-row {
		background-color: var(--vr-header-bg) !important;
	}
}

/* Header overlapping the hero: a light protective wash behind transparent
   rows, so links and icons stay legible over bright flowers. */
.whb-overcontent:not(.whb-sticked) .whb-row:not(.whb-with-bg) {
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

/* Scrim for text over images. Opt in on any Elementor container/section
   with the CSS class `vr-scrim` (Advanced > CSS Classes); tune strength per
   block by overriding --vr-scrim. Woodmart's page-title banner: see below. */
.vr-scrim {
	position: relative;
	isolation: isolate;
}
.vr-scrim::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--vr-scrim);
	border-radius: inherit;
	pointer-events: none;
}
.vr-scrim,
.vr-scrim .elementor-heading-title,
.vr-scrim .elementor-widget-text-editor {
	color: var(--vr-text-on-image);
}
/* Secondary fallback only: thin script fonts the scrim cannot fully carry. */
.vr-scrim .elementor-heading-title {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Gift-card designer (King Addons popup on the cart): while closed it waits
   off-screen, but its fields were still reachable by Tab and read out by
   screen readers. Hidden until opened; visibility flips after the slide-out
   so the closing animation still plays. */
.king-addons-popup:not(.king-addons-popup-active) {
	visibility: hidden;
	transition: bottom 500ms, top 500ms, left 500ms, right 500ms, transform 500ms, visibility 0s linear 500ms;
}

/* Shop price filter label: #767676 on #f8f9fd measured 4.3:1. */
.price_slider_amount .price_label,
.widget_price_filter .price_label {
	color: var(--vr-text-secondary);
}

/* Woodmart's page-title banner (Shop, Cart, categories) prints white text on
   a light pink floral image: measured 1.8:1. Its light-text scheme gets a flat
   scrim: white on the darkened pink measures 4.8:1, enough for the small
   "N products" counts as well as the title. ::after on the background layer
   paints over the image but under the title container that follows it. */
.wd-page-title.color-scheme-light > .wd-page-title-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(60, 8, 16, 0.45);
	pointer-events: none;
}