/* ============================================================
   SK Hair — Design System layer (Layer 2)
   Web-first SK tokens applied over Woodmart. Source of truth: DESIGN.md
   (WP project root). Generated 2026-05-24.
   Safe to delete to revert. Uses !important only where needed to beat
   Woodmart's compiled CSS / inline values.
   ============================================================ */

:root {
  --sk-brand:#923F2F;        --sk-brand-dark:#6E2D20;   --sk-brand-hover:#7A3327;
  --sk-brand-tint:#F3E9E5;   --sk-gold:#B98A4B;
  --sk-cream:#FAF6F4;        --sk-card:#FFFFFF;         --sk-surface-muted:#F1ECE8;
  --sk-ink:#2B2421;          --sk-text-soft:#6B5F58;    --sk-text-muted:#B6ADA7;
  /* --sk-text-soft is AA-safe (~5.8:1 on cream, ~6.2:1 on white) — use for secondary/body text.
     --sk-text-muted (#B6ADA7) is NOT AA for normal text — decorative/disabled/large only. */
  --sk-divider:#EEE6E1;
  --sk-success:#2E7D5E;      --sk-warning:#B87914;      --sk-danger:#B84B3F;
  --sk-r-field:12px;         --sk-r-chip:12px;          --sk-r-card:16px;  --sk-r-pill:999px;
}

/* 1. Cream canvas (Cream-Not-White). The content wrapper is #F5F7F8 cool-gray;
      warm it to cream. Body/website-wrapper are white. */
body,
.website-wrapper,
.main-page-wrapper,
.wd-page-content {
  background-color: var(--sk-cream) !important;
}

/* 2. Headings: warm ink + stronger weight (kill the soft w500 grays) */
h1, h2, h3, h4, h5,
.product_title, .entry-title, .wd-entities-title,
.woocommerce-loop-product__title, .section-title {
  color: var(--sk-ink);
}
.product_title, .entry-title, h1, h2,
.wd-entities-title, .woocommerce-loop-product__title {
  font-weight: 700;
}
/* Sub-headings (h3–h6) were left at Woodmart's light w500 — notably the WC
   checkout form sections ("Billing details", "Your order"). Give them a
   semibold floor so nothing reads light, while h1/h2 stay 700 for weight
   contrast. .woocommerce-scoped to beat Woodmart's `.woocommerce h3`. */
h3, h4, h5, h6,
.woocommerce h3, .woocommerce-checkout h3, #order_review_heading {
  font-weight: 600;
}

/* 3. Tailored radius — override Woodmart's 35px pills down to 12/16px */
.btn, .button, button.button, a.button,
input[type="submit"], .single_add_to_cart_button, #place_order,
.wd-buy-now-btn .button,
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="password"], input.input-text,
textarea, select, .select2-selection, .select2-container .select2-selection {
  border-radius: var(--sk-r-field) !important;
}
.onsale, .product-label, .wd-shape-round,
.wd-buttons .wd-tooltip, .product-labels .product-label {
  border-radius: var(--sk-r-chip) !important;
}

/* 4. Sale label: kill the fire-engine red (rgb(255,79,79)); quiet on-brand maroon.
      The brand forbids red urgency (Danger-Is-For-Danger). */
.onsale,
span.onsale,
.product-labels .onsale,
.product-label.onsale {
  background-color: var(--sk-brand) !important;
  color: var(--sk-cream) !important;
  font-weight: 600;
}

/* 5. Inputs: cream fill, hairline border, brand focus (was white + faint 0.1 border) */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="password"], input.input-text,
textarea, select {
  background-color: var(--sk-cream);
  border: 1px solid var(--sk-divider);
  color: var(--sk-ink);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="search"]:focus, input[type="number"]:focus, input[type="password"]:focus,
input.input-text:focus, textarea:focus, select:focus {
  border-color: var(--sk-brand) !important;
  outline: none;
}

/* 6. Primary buttons: reinforce maroon fill + warm hover (Woodmart primary is
      already maroon; lock label to cream + hover to brand-hover). */
.btn-color-primary, .single_add_to_cart_button, #place_order,
.button.alt, .wd-buy-now-btn .button {
  background-color: var(--sk-brand);
  color: var(--sk-cream);
}
.btn-color-primary:hover, .single_add_to_cart_button:hover, #place_order:hover,
.button.alt:hover {
  background-color: var(--sk-brand-hover);
  color: var(--sk-cream);
}
/* 6b. CONTRAST FIX: the rule above locks ALL primary buttons to cream text, but
      Woodmart's *bordered* and *link* variants are transparent — cream text on a
      light page = invisible (was the home hero "View Guide" + "View All"). These
      variants must use maroon text (matching their border); on hover the bordered
      one fills maroon so the label inverts to cream. Specificity (0,2,0) > §6. */
.btn-style-bordered.btn-color-primary,
.btn-style-link.btn-color-primary {
  background-color: transparent;
  color: var(--sk-brand);
}
.btn-style-bordered.btn-color-primary:hover {
  background-color: var(--sk-brand);
  color: var(--sk-cream);
}
.btn-style-link.btn-color-primary:hover {
  background-color: transparent;
  color: var(--sk-brand-hover);
}

/* 7. Arabic webfont — Cairo (Satoshi has no Arabic glyphs). Locally bundled,
      applied only under lang="ar" so LTR stays Satoshi. (Decision 2026-05-24.) */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/cairo/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/cairo/cairo-latin.woff2') format('woff2');
}
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5,
html[lang="ar"] .btn, html[lang="ar"] .button,
html[lang="ar"] .product_title, html[lang="ar"] .wd-entities-title,
html[lang="ar"] .woocommerce-loop-product__title {
  font-family: 'Cairo', 'Satoshi', system-ui, sans-serif !important;
}

/* 8. Off-canvas side cart — keep the Subtotal + View Cart / Checkout footer
      always pinned and visible. Woodmart scrolls the item list inside an inner
      .wd-scroll-content (position:absolute; inset:0). When that wrapper is
      missing (a fragment / JS-timing hiccup), the items <ul> sits in-flow in
      .shopping-cart-widget-body, whose min-height:auto propagates up the flex
      chain and refuses to shrink — so the whole panel scrolls and the footer
      drops below the fold (buttons "out of view"). Let the flex chain shrink
      and give the body a scroll fallback. Harmless when the wrapper IS present:
      the body has no in-flow content, so no double scrollbar appears and the
      wrapper keeps handling the scroll. */
.cart-widget-side .widget_shopping_cart,
.cart-widget-side .widget_shopping_cart_content,
.cart-widget-side .shopping-cart-widget-body {
  min-height: 0;
}
.cart-widget-side .shopping-cart-widget-body {
  overflow-y: auto;
}

/* 9. Checkout page <h1> (output by sk_checkout_h1() in functions.php) — a11y/SEO.
      A single focal heading above the form; keeps the minimal checkout layout. */
.sk-checkout-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--sk-ink);
  text-align: center;
  margin: 0 0 28px;
}

/* 10. a11y tap targets (audit #14): product-card action buttons were ~36px on
       mobile. Enforce a 44px minimum on touch/mobile only — desktop stays
       compact. (qty ARIA finding from the audit is already clean: inputs now
       carry aria-label + min, no invalid aria-valuemax/min.) */
@media (max-width: 768.98px) {
  .products .product .add_to_cart_button,
  .products .product .wd-add-btn > a.button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .product .wd-wishlist-btn > a,
  .product .wd-compare-btn > a,
  .product .wd-buttons .wd-tooltip,
  .product .wd-action-btn > a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* 11. PDP primary CTA prominence (audit #9): add-to-cart was a small 116px
       control beside the qty, far weaker than the full-width Place Order.
       Make it a full-width primary below the qty, ~48px tall to match the
       checkout primary ("one prominent primary"). */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
  flex-wrap: wrap;
}
.single-product form.cart .single_add_to_cart_button {
  flex: 1 1 100%;
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
}

/* ============================================================
   12. Shop filters (#11) — native Woodmart shop_filters panel.
       Scoped to .open-filters / .filters-area / .wd-active-filters so
       nothing else (product cards, other sidebars/widgets) is touched.
       Selectors reconciled with the real live DOM (Task 4): the term
       link is a.layered-nav-link; the *selected* term row is
       li.wc-layered-nav-term.wd-active (not .chosen / not .wd-swatch.wd-active);
       the active-filter pill is .widget_layered_nav_filters li.chosen a.
   ============================================================ */
/* Filter opener button: outlined maroon-on-card.
   Woodmart's wd-style-text button ships with 0 padding + 21px height, so a
   bordered pill looked cramped/broken — give it real padding + a gap so the
   border encloses the icon+label as a clean rounded button. */
.wd-filter-buttons .open-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  line-height: 1;
  background: var(--sk-card, #fff);
  color: var(--sk-brand, #923F2F);
  border: 1px solid var(--sk-brand, #923F2F);
  border-radius: var(--sk-r-field, 12px);
  font-weight: 600;
}
.wd-filter-buttons .open-filters:hover {
  background: var(--sk-brand-tint, #F3E9E5);
  color: var(--sk-brand, #923F2F);
}

/* Panel surface: cream card with hairline border */
.filters-area {
  background: var(--sk-cream, #FAF6F4);
  border: 1px solid var(--sk-divider, #EEE6E1);
  border-radius: var(--sk-r-card, 16px);
  padding: 24px;
}
.filters-area .widget { border-color: var(--sk-divider, #EEE6E1); }
.filters-area .widget-title,
.filters-area .widgettitle { color: var(--sk-ink, #2B2421); font-weight: 700; }

/* Layered-nav term rows: ink labels, maroon selected (li.wd-active) */
.filters-area a.layered-nav-link { color: var(--sk-ink, #2B2421); }
.filters-area li.wd-active > a.layered-nav-link {
  color: var(--sk-brand, #923F2F);
  font-weight: 600;
}

/* Shade swatches: pill shape; maroon ring on selected term (li.wd-active) + hover */
.filters-area .wd-swatch { border-radius: var(--sk-r-pill, 999px); }
.filters-area li.wd-active .wd-swatch,
.filters-area .wd-swatch:hover {
  box-shadow: 0 0 0 2px var(--sk-brand, #923F2F);
}

/* Active-filter pills above the grid (removable term + clear-filters) */
.wd-active-filters .widget_layered_nav_filters li.chosen a {
  background: var(--sk-surface-muted, #F1ECE8);
  color: var(--sk-ink, #2B2421);
  border-radius: var(--sk-r-field, 12px);
  padding: 4px 12px;
}
.wd-active-filters .widget_layered_nav_filters li.chosen a:hover {
  background: var(--sk-brand-tint, #F3E9E5);
  color: var(--sk-brand, #923F2F);
}

/* RTL: panel + pills already flow from dir=rtl; align text for when AR
   routing is fixed (currently AR renders EN chrome — known separate bug). */
html[lang="ar"] .filters-area { text-align: right; }

/* Mobile (≤768px): meet the ≥44px tap-target requirement (spec §4).
   Native Woodmart rows are only ~21–35px tall on touch. */
@media (max-width: 768px) {
  .wd-filter-buttons .open-filters {
    min-height: 44px;
  }
  .filters-area a.layered-nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .wd-active-filters .widget_layered_nav_filters li.chosen a,
  .wd-active-filters .wd-clear-filters a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================
   13. Contrast sweep fixes (2026-05-25) — storefront a11y pass via the
       §6a pre-ship contrast audit (PDP + cart). All text now ≥ WCAG AA.
   ============================================================ */
/* PDP variation "Clear" reset link — Woodmart's #767676 grey on the cream
   canvas computes to 4.23 (< AA 4.5). Use ink (de-emphasis comes from its
   small size, not low contrast). !important: woo-mod-variation-form.min.css
   sets the same selector at equal specificity but loads AFTER this file. */
.reset_variations {
  color: var(--sk-ink, #2B2421) !important;
}
/* WC notice forward buttons ("View cart" in the add-to-cart message) shipped
   WC-default green (#459647) with white text = 3.68 (< AA) AND off-brand.
   Rebrand to maroon (cream text = 6.57) like every other CTA. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  background-color: var(--sk-brand, #923F2F);
  color: var(--sk-cream, #FAF6F4);
  border-color: var(--sk-brand, #923F2F);
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
  background-color: var(--sk-brand-hover, #7A3327);
  color: var(--sk-cream, #FAF6F4);
}

/* ====================================================================
   §14 Product reviews (PDP) — gated reviews, on-brand
   Brand: maroon #923F2F, gold #B98A4B, ink #2B2421, cream #FAF6F4, tint #F3E9E5
   ==================================================================== */

/* Star rating → gold accent (summary + per-review + form selector) */
.woocommerce #reviews .star-rating,
.woocommerce .woocommerce-product-rating .star-rating,
.woocommerce #reviews #respond p.stars a {
	color: var(--sk-gold, #B98A4B);
}
.woocommerce #reviews .star-rating::before {
	color: var(--sk-gold, #B98A4B);
	opacity: .30;
}
.woocommerce #reviews .star-rating span::before {
	color: var(--sk-gold, #B98A4B);
	opacity: 1;
}

/* Review cards */
.woocommerce #reviews #comments ol.commentlist li.review,
.woocommerce #reviews #comments ol.commentlist li.comment {
	list-style: none;
	background: var(--sk-card, #FFFFFF);
	border: 1px solid rgba(43, 36, 33, .10);
	border-radius: var(--sk-r-card, 16px);
	padding: 20px 22px;
	margin: 0 0 16px;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text p {
	color: var(--sk-ink, #2B2421);
}
.woocommerce #reviews #comments .comment-author .fn,
.woocommerce #reviews #comments strong.woocommerce-review__author {
	font-weight: 600;
	color: var(--sk-ink, #2B2421);
}
.woocommerce #reviews #comments .woocommerce-review__published-date,
.woocommerce #reviews #comments .comment-author .meta time {
	color: var(--sk-text-soft, #6B5F58); /* token is now AA-safe */
}

/* Verified-owner badge as a pill */
.woocommerce #reviews .woocommerce-review__verified.verified {
	display: inline-block;
	font-style: normal;
	font-size: 12px;
	line-height: 1;
	padding: 4px 10px;
	border-radius: var(--sk-r-pill, 999px);
	background: var(--sk-brand-tint, #F3E9E5);
	color: var(--sk-brand, #923F2F);
	margin-inline-start: 8px;
	vertical-align: middle;
}

/* Aggregate summary near the title */
.woocommerce .woocommerce-product-rating a.woocommerce-review-link {
	color: var(--sk-brand, #923F2F);
}

/* Mobile ≥44px tap targets for the rating selector + submit */
@media (max-width: 768.98px) {
	.woocommerce #reviews #respond p.stars a {
		width: 44px;
		height: 44px;
		line-height: 44px;
		display: inline-block;
		text-align: center;
	}
	.woocommerce #reviews #respond #submit {
		min-height: 44px;
	}
}

/* ====================================================================
   §15 Inherited-contrast a11y overrides (re-audit 2026-05-25)
   Woodmart body-inherited greys that failed WCAG-AA on cream.
   ==================================================================== */

/* Shop breadcrumb + results-per-page: grey #767676 (4.23:1) → AA-safe soft ink.
   NOTE: .wd-products-per-page is inside .wd-shop-tools (no .woocommerce ancestor)
   so scoping to .woocommerce would silently miss it. Use the Woodmart classes directly.
   !important needed to beat Woodmart's compiled stylesheet specificity. */
.wd-breadcrumbs,
.wd-breadcrumbs .wd-last,
.wd-breadcrumbs .wd-last-link,
.wd-breadcrumbs .wd-delimiter,
.wd-products-per-page,
.wd-products-per-page .per-page-title,
.wd-products-per-page .per-page-variation {
	color: var(--sk-text-soft, #6B5F58) !important;
}

/* Mobile: product-card quick-add overlay ≥44px tap target.
   Woodmart's woo-product-loop-base.min.css sets
   `.wd-product.wd-hover-base .wd-bottom-actions:not(.wd-add-small-btn) .wd-add-btn > a { min-height: unset }`
   which beats a plain `.wd-add-btn a` rule. Mirror the same specificity and
   add !important so the compiled sheet cannot win. */
@media (max-width: 768.98px) {
	.wd-product .wd-bottom-actions .wd-add-btn > a,
	.wd-product .wd-bottom-actions .wd-add-btn > .button {
		min-height: 44px !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
}

/* ====================================================================
   §17  Login / My-Account (Digits plugin) — SK "Warm Atelier" restyle
   ====================================================================
   SCOPE: all selectors are children of .digits-form_container or
   .digits-form_page so they cannot bleed to any storefront element.

   HOW DIGITS THEMING WORKS:
   Digits injects an inline <style> setting CSS variables on
   .digits-form_container / .digits-form_page:
     --dprimary:#1C2434  (button bg + primary text)
     --dtitle:#2D333D    (heading colour)
     --dfield_bg:#F8F8F8 (input fill)
     --daccent:#9CF5FF   (focus border — a cyan, off-brand)
     --dform_bg:#FFFFFF  (panel bg)
     --dbutton_text:#FFFFFF (button label)
   A dark-mode @media rule also flips these; we override that too.
   !important is used precisely where Digits' own CSS uses it first
   (border-color on focus: `border-color:var(--daccent) !important`)
   or where Digits' compiled sheet specificity wins.
   ==================================================================== */

/* ── 17.1  Re-map Digits CSS variables to SK tokens ─────────────────
   Override the inline vars at higher specificity (#digits_protected is
   the <div> that wraps .digits-form_page; combining it with the same
   selector Digits uses wins the cascade without touching markup).      */
#digits_protected .digits-form_container,
#digits_protected .digits-form_page {
  --dprimary:    var(--sk-brand, #923F2F);      /* button bg, primary text */
  --dtitle:      var(--sk-ink, #2B2421);         /* heading colour */
  --dfield_bg:   var(--sk-cream, #FAF6F4);       /* input fill */
  --daccent:     var(--sk-brand, #923F2F);       /* focus border */
  --dform_bg:    var(--sk-card, #FFFFFF);        /* panel bg */
  --dbutton_text:var(--sk-cream, #FAF6F4);       /* button label */
}

/* Block Digits' dark-mode media query from flipping back to navy.
   Same selector pattern as Digits' own dark rule but added here so
   our file (enqueued after Digits) wins. */
@media (prefers-color-scheme: dark) {
  #digits_protected .digits-form_container,
  #digits_protected .digits-form_page {
    --dprimary:    var(--sk-brand, #923F2F);
    --dtitle:      var(--sk-ink, #2B2421);
    --dfield_bg:   var(--sk-cream, #FAF6F4);
    --daccent:     var(--sk-brand, #923F2F);
    --dform_bg:    var(--sk-card, #FFFFFF);
    --dbutton_text:var(--sk-cream, #FAF6F4);
  }
}

/* ── 17.2  Page canvas: cream background, centred card ──────────────*/
.digits-form_page {
  background-color: var(--sk-cream, #FAF6F4) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 17.3  Card / panel surface ─────────────────────────────────────
   Digits sets .digits-form_container { background-color:var(--dform_bg) }
   which our var re-map already handles, but the border/shadow/radius
   come from here. Digits' own rule: border-radius:0, no shadow. */
.digits-form_container {
  background-color: var(--sk-card, #FFFFFF) !important;
  border: 1px solid var(--sk-divider, #EEE6E1) !important;
  border-radius: var(--sk-r-card, 16px) !important;
  box-shadow: 0 4px 24px rgba(43, 36, 33, 0.08) !important;
  padding: 40px 36px !important;
}

/* ── 17.4  SK logo above the form (CSS-only, no markup change) ───────
   .digits-form_wrapper is the first child inside .digits-form_container.
   We insert a pseudo-element above it carrying the SK logo.
   Logo src from the live site header (.site-logo img):
   /wp-content/uploads/2025/12/HUMAN-HAIR-EXTENSIONS-1.png (230×60)
   If Digits changes its internal markup this block degrades gracefully
   (the logo simply doesn't appear — it never breaks the form).        */
.digits-form_container .digits-form_wrapper {
  position: relative;
}
.digits-form_container .digits-form_wrapper::before {
  content: '';
  display: block;
  width: 160px;
  height: 42px;
  margin: 0 auto 28px;
  background-image: url('/wp-content/uploads/2025/12/HUMAN-HAIR-EXTENSIONS-1.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── 17.5  Heading ("Login") ─────────────────────────────────────────*/
.digits-form_container .digits-form_heading {
  color: var(--sk-ink, #2B2421);
  font-weight: 700;           /* Digits ships 900; 700 is the SK heading floor */
  margin-bottom: 24px;
}
.digits-form_container .digits-form_heading_text {
  color: var(--sk-ink, #2B2421);
}

/* ── 17.6  Tab bar ("Use Phone Number" / "Use Email Address") ────────
   Digits: font-size:20px, font-weight:900, opacity:0.35 on inactive.
   We soften to ink/soft-text + brand underline on active, keep the
   opacity fade (it is structural, not a contrast issue — active tab is
   always shown at opacity:1).                                          */
.digits-form_container .digits-form_tab-item {
  color: var(--sk-text-soft, #6B5F58);
  font-weight: 600;
  font-size: 16px;
}
.digits-form_container .digits-form_tab-item.digits-tab_active {
  color: var(--sk-ink, #2B2421);
  opacity: 1;
}
/* Active-tab underline slider */
.digits-form_container .digits-slider_line {
  background-color: var(--sk-brand, #923F2F) !important;
}

/* ── 17.7  Input row border wrapper (.digits-form_border) ────────────
   Digits: border:1px solid transparent; border-radius:8px;
   We give it a cream fill, hairline divider border, and SK radius.
   Focus state: Digits uses `border-color:var(--daccent) !important` —
   our var re-map already sets --daccent to maroon, but we add an
   explicit !important rule here to be certain.                        */
.digits-form_container .digits-form_border {
  border: 1px solid var(--sk-divider, #EEE6E1) !important;
  border-radius: var(--sk-r-field, 12px) !important;
  background-color: var(--sk-cream, #FAF6F4);
}
.digits-form_container .digits-form_border.digits-row_active,
.digits-form_container .digits-form_input input:focus,
.digits-form_container .digits-form_input textarea:focus {
  border-color: var(--sk-brand, #923F2F) !important;
  outline: none !important;
}

/* ── 17.8  Standalone input rows (email tab, register fields) ────────
   These live in .digits-form_input_row without a .digits-form_border
   wrapper (the phone tab wraps them; the email tab does not).         */
.digits-form_container .digits-form_input_row {
  border: 1px solid var(--sk-divider, #EEE6E1);
  border-radius: var(--sk-r-field, 12px);
  background-color: var(--sk-cream, #FAF6F4);
  margin-bottom: 16px;
}
.digits-form_container .digits-form_input_row:focus-within {
  border-color: var(--sk-brand, #923F2F);
}

/* ── 17.9  All inputs inside Digits ─────────────────────────────────
   Digits: background-color:var(--dfield_bg); border:1px solid transparent.
   The var re-map handles fill; explicit !important here to beat
   Digits' compiled `.digits2_box .digits-form_input input` rule.     */
.digits-form_container .digits-form_input input,
.digits-form_container .digits-form_input input[type="text"],
.digits-form_container .digits-form_input input[type="email"],
.digits-form_container .digits-form_input input[type="tel"],
.digits-form_container .digits-form_input input[type="password"],
.digits-form_container .digits-form_input textarea {
  background-color: var(--sk-cream, #FAF6F4) !important;
  color: var(--sk-ink, #2B2421) !important;
  border: 1px solid transparent !important; /* border lives on the row wrapper */
  border-radius: var(--sk-r-field, 12px) !important;
  min-height: 48px;
  line-height: 48px;
}
.digits-form_container .digits-form_input input::placeholder,
.digits-form_container .digits-form_input textarea::placeholder {
  color: var(--sk-text-soft, #6B5F58);
  opacity: 0.7;
}

/* Country-code subfield: transparent (sits inside .digits-form_border) */
.digits-form_container .digits-form_input input.countrycode,
.digits-form_container .digits-form_input input.digits_countrycode {
  background-color: transparent !important;
  color: var(--sk-ink, #2B2421) !important;
  border: none !important;
  border-radius: var(--sk-r-field, 12px) 0 0 var(--sk-r-field, 12px) !important;
}

/* ── 17.10  Primary submit button ────────────────────────────────────
   Digits: height:52px; border-radius:8px; background-color:var(--dprimary).
   var re-map covers bg; we lock radius, height ≥44px, and use !important
   to beat the compiled `.digits-form_button` rule.                    */
.digits-form_container .digits-form_button,
.digits-form_container .digits-form_button[type="submit"] {
  background-color: var(--sk-brand, #923F2F) !important;
  color: var(--sk-cream, #FAF6F4) !important;
  border-radius: var(--sk-r-field, 12px) !important;
  min-height: 48px !important;
  height: auto !important;
  line-height: 1.2 !important;
  padding: 12px 24px !important;
  font-weight: 700;
  transition: background-color 0.18s ease;
}
.digits-form_container .digits-form_button:hover,
.digits-form_container .digits-form_button[type="submit"]:hover {
  background-color: var(--sk-brand-hover, #7A3327) !important;
  color: var(--sk-cream, #FAF6F4) !important;
}
/* The animated arrow icon inside the button (mask-image SVG fill) */
.digits-form_container .digits-form_button .digits-form_button_ic {
  background-color: var(--sk-cream, #FAF6F4) !important;
}
/* Button label text */
.digits-form_container .digits-form_button .digits-form_button-text {
  color: var(--sk-cream, #FAF6F4) !important;
}

/* ── 17.11  Secondary / toggle links ─────────────────────────────────
   "Not a member yet? Register Now" / "Already have an account? Login"
   Digits: color:inherit → resolves to --dtitle (#2D333D).
   Re-map already changes --dtitle to ink. Reinforce the CTA link.    */
.digits-form_container .dig_login_signup_bar {
  color: var(--sk-text-soft, #6B5F58);
  font-size: 16px;
  font-weight: 500;
  margin-top: 24px;
}
.digits-form_container .dig_login_signup_bar a,
.digits-form_container .digits-form_toggle_login_register {
  color: var(--sk-brand, #923F2F) !important;
  font-weight: 600;
  text-decoration: none;
}
.digits-form_container .dig_login_signup_bar a:hover,
.digits-form_container .digits-form_toggle_login_register:hover {
  color: var(--sk-brand-hover, #7A3327) !important;
  text-decoration: underline;
}

/* ── 17.12  Remember-me row ──────────────────────────────────────────
   .digits-form_rememberme { height:20px } from Digits — too short for
   a 44px tap target on mobile. Overridden in the mobile block below.
   The checkbox icon colour is mask-based (background-color on ::after
   maps to --dprimary which our var re-map covers).                    */
.digits-form_container .digits-form_input_row.digits-form_rememberme {
  border: none;
  background: transparent;
  margin-bottom: 20px;
}

/* ── 17.13  "Go back" cancel link ────────────────────────────────────*/
.digits-cancel,
.digits-form_container .digits_back_icon {
  color: var(--sk-text-soft, #6B5F58);
}
.digits-cancel:hover,
.digits-form_container .digits_back_icon:hover {
  color: var(--sk-brand, #923F2F);
}

/* ── 17.14  Footer zone (Terms / Privacy links) ─────────────────────*/
.digits-form_container .digits-form_footer {
  color: var(--sk-text-soft, #6B5F58);
  font-size: 13px;
}
.digits-form_container .digits-form_footer a {
  color: var(--sk-brand, #923F2F);
}

/* ── 17.15  Font override — Cairo for Arabic ─────────────────────────
   Digits inlines `font-family:Roboto,sans-serif !important` on a very
   broad selector covering `.digits_ui *`. We need higher specificity
   for the AR locale. #digits_protected > .digits-form_page gives us
   (1,1,0) vs the inline rule's (0,1,0) + !important — so we also
   add !important here.                                                */
html[lang="ar"] #digits_protected,
html[lang="ar"] #digits_protected *,
html[lang="ar"] .digits-form_container,
html[lang="ar"] .digits-form_container *,
html[lang="ar"] .digits-form_page,
html[lang="ar"] .digits-form_page * {
  font-family: 'Cairo', system-ui, sans-serif !important;
  direction: rtl;
  text-align: right;
}
/* Country-code flag + field alignment in RTL */
html[lang="ar"] .digits-form_container .digits-form_countrycode {
  border-radius: 0 var(--sk-r-field, 12px) var(--sk-r-field, 12px) 0;
}

/* ── 17.16  Mobile tap targets (≥44px, max-width 768px) ─────────────*/
@media (max-width: 768px) {
  .digits-form_container .digits-form_button {
    min-height: 48px !important;
    padding: 12px 24px !important;
  }
  .digits-form_container .digits-form_input input,
  .digits-form_container .digits-form_input input[type="text"],
  .digits-form_container .digits-form_input input[type="email"],
  .digits-form_container .digits-form_input input[type="tel"],
  .digits-form_container .digits-form_input input[type="password"] {
    min-height: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
  }
  .digits-form_container .digits-form_input_row.digits-form_rememberme {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .digits-form_container .dig_login_signup_bar a,
  .digits-form_container .digits-form_toggle_login_register {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Tighten panel padding on small screens */
  .digits-form_container {
    padding: 28px 20px !important;
  }
}
/* ── End §17 ─────────────────────────────────────────────────────── */

/* ====================================================================
   §16 Three a11y fixes — 2026-05-25 audit pass
   Each measured BEFORE and verified AFTER via Playwright/getComputedStyle.
   ==================================================================== */

/* --- Fix 1a: Product-card brand/generation label ---
   Woodmart's woo-loop-prod-predefined.min.css scopes a CSS custom-property
   override: `:where(.wd-loop-builder-off) :is(... .wd-product-brands-links ...)`
   { --wd-link-color: var(--color-gray-400) }  (--color-gray-400 = #A5A5A5).
   The :where() wrapper has 0 specificity, but the property is set on the
   ancestor so all <a> inside inherit it → rgb(165,165,165) = 2.46:1 on white.
   Fix: target the <a> directly at higher specificity with !important so the
   inherited custom property cannot win. BEFORE: rgb(165,165,165)/2.46:1. */
.wd-product-brands-links a {
	color: var(--sk-text-soft, #6B5F58) !important;
}

/* --- Fix 1b: Struck/old price ---
   Woodmart's woocommerce-base.min.css: `.price del { color: var(--color-gray-300) }`
   (--color-gray-300 = #BBB). The <del> wrapper sets grey and the inner
   .woocommerce-Price-amount inherits it → rgb(187,187,187) = 1.92:1 on white.
   Target the <del> (and the amount inside for specificity safety).
   !important required: the compiled rule wins by source-order at equal specificity.
   BEFORE: rgb(187,187,187)/1.92:1. */
.price del,
.price del .woocommerce-Price-amount {
	color: var(--sk-text-soft, #6B5F58) !important;
}

/* --- Fix 1c: Result count, filter count badges, shop page-title wrapper ---
   .woocommerce-result-count and .page-title inherit --wd-text-color (#767676)
   from .color-scheme-dark = 4.23:1 on cream. No explicit rule competes, so
   no !important needed for those.
   Filter count badges: Woodmart's woo-widget-wd-layered-nav.min.css sets
   `.wd-filter-list .count { color: var(--color-gray-500) }` (specificity 0,1,1).
   Our rule must match or exceed that specificity — use the same scoped selector
   with !important so any source-order conflict is also won.
   BEFORE: rgb(118,118,118)/4.23:1. */
.woocommerce-result-count,
.page-title {
	color: var(--sk-text-soft, #6B5F58);
}
.wd-filter-list .count {
	color: var(--sk-text-soft, #6B5F58) !important;
}

/* --- Fix 2a: PDP quantity stepper (qty input + plus/minus) ---
   Woodmart JS sets height:42px inline on the input; .btn gets
   min-height: var(--btn-height, 42px) from base.min.css.
   Both require !important to beat inline style and the compiled rule.
   BEFORE: 42px. Scoped to mobile only — desktop stays compact. */
@media (max-width: 768.98px) {
	.quantity .qty,
	.quantity .plus,
	.quantity .minus {
		min-height: 44px !important;
		height: 44px !important;
	}
}

/* --- Fix 2b: Mobile nav toggle ---
   .wd-header-mobile-nav a is 40×40px with no min-height rule.
   Target the anchor inside the toggle (the clickable area) to 44×44px.
   No !important needed (no competing rule). Scoped to mobile only. */
@media (max-width: 768.98px) {
	.wd-header-mobile-nav a {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* --- Fix 2c: Hero primary CTA buttons (Shop Now / View Guide / Book Now) ---
   Woodmart's base.min.css: `:is(.btn) { min-height: var(--btn-height, 42px) }`.
   No custom --btn-height is set, so all .btn fall to 42px.
   Target only filled/bordered primary action buttons (not link-style small ones):
   .btn-style-default and .btn-style-bordered (both are solid/outlined CTAs).
   .btn-style-link (the tiny "View All" inline link) is excluded.
   !important needed to beat the compiled Woodmart rule. Scoped to mobile only. */
@media (max-width: 768.98px) {
	.btn.btn-style-default,
	.btn.btn-style-bordered {
		min-height: 44px !important;
	}
}

/* --- Fix 3: Cairo font in AR top-nav ---
   On html[lang="ar"], Woodmart's header-base-rtl.min.css sets:
   `.wd-nav-header > li > a { font-family: var(--wd-header-el-font) }`
   where --wd-header-el-font = "Satoshi", Arial, Helvetica, sans-serif.
   That rule has specificity 0,1,2 and beats our existing §7 rule which only
   targets body/button/heading — not nav links.
   Fix: add the nav link selectors under html[lang="ar"] (specificity 0,2,1
   beats 0,1,2 without needing !important).
   BEFORE: fontFamily = "Satoshi, Arial, Helvetica, sans-serif". */
html[lang="ar"] .wd-nav a,
html[lang="ar"] .wd-nav-header > li > a,
html[lang="ar"] .wd-nav-main a,
html[lang="ar"] .woodmart-nav-link {
	font-family: 'Cairo', 'Satoshi', system-ui, sans-serif !important;
}

/* ==========================================================================
   §18 — Trust & Reassurance Strips (Checkout + PDP)
   Quiet, on-brand. Cream/transparent surface, ink text, gold hairline accent.
   Tokens: --sk-brand #923F2F | --sk-gold #B98A4B | --sk-ink #2B2421
           --sk-text-soft #6B5F58 | --sk-cream | --sk-divider
   No urgency — pure reassurance. RTL via logical properties.
   ========================================================================== */

/* --- §18a — Checkout trust strip (below Place Order button) --- */
.sk-checkout-trust-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 1.25rem;
	margin-block-start: 0.875rem;
	padding-block: 0.625rem;
	border-block-start: 1px solid var(--sk-gold, #B98A4B);
	color: var(--sk-text-soft, #6B5F58);
	font-size: 0.75rem;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.sk-checkout-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	white-space: nowrap;
}

.sk-checkout-trust-icon {
	color: var(--sk-brand, #923F2F);
	font-size: 0.8rem;
	line-height: 1;
	flex-shrink: 0;
}

/* Pipe separator between items on wider viewports — hidden on narrow */
.sk-checkout-trust-item + .sk-checkout-trust-item::before {
	content: '·';
	color: var(--sk-divider, #D9CFC9);
	margin-inline-end: 1.25rem;
	pointer-events: none;
}

/* On very narrow viewports wrap naturally; hide the pipe-separator */
@media (max-width: 360px) {
	.sk-checkout-trust-item + .sk-checkout-trust-item::before {
		display: none;
	}
}

/* --- §18b — PDP authenticity reassurance (near price/Add-to-Cart) --- */
.sk-pdp-reassurance {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
	margin-block: 0.625rem 0.75rem;
	padding-block-start: 0.625rem;
	border-block-start: 1px solid var(--sk-gold, #B98A4B);
	color: var(--sk-text-soft, #6B5F58);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.sk-pdp-reassurance-item {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.sk-pdp-reassurance-icon {
	color: var(--sk-brand, #923F2F);
	font-size: 0.875rem;
	line-height: 1;
	flex-shrink: 0;
}

/* Separator dot between the two claims */
.sk-pdp-reassurance-sep {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: var(--sk-gold, #B98A4B);
	flex-shrink: 0;
	align-self: center;
}

/* RTL: logical properties handle direction automatically.
   No extra overrides needed — gap/margin-inline/padding-inline are already logical. */
html[lang="ar"] .sk-checkout-trust-strip,
html[lang="ar"] .sk-pdp-reassurance {
	font-family: 'Cairo', system-ui, sans-serif;
}