/* Sarabi Gallery base: tokens, reset, type, header, buttons, footer, motion switch. Ported from the approved Direction 1 mockup. */
/* Bodoni Moda (headings) and Jost (text and interface), chosen by Raouf 2026-10-12 over Libre Caslon + Hanken Grotesk; both OFL,
   self-hosted latin subsets. size-adjust sets Bodoni a little smaller and Jost a little larger so the type scale keeps its measure. */
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-400.woff2") format("woff2"); font-weight: 400; font-display: swap; size-adjust: 88%; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-500.woff2") format("woff2"); font-weight: 500; font-display: swap; size-adjust: 88%; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-400.woff2") format("woff2"); font-weight: 400; font-display: swap; size-adjust: 106%; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-500.woff2") format("woff2"); font-weight: 500; font-display: swap; size-adjust: 106%; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-600.woff2") format("woff2"); font-weight: 600; font-display: swap; size-adjust: 106%; }
/* the header logo's script "Sarabi's" (Raouf 2026-10-13); cut to those letters by scripts/design/fetch-fonts.sh, 4 KB, preloaded */
@font-face { font-family: "Great Vibes"; src: url("../fonts/great-vibes-logo.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* metric-matched fallbacks so the swap adds no layout shift (spec 3); values measured from the font files with fontTools */
@font-face { font-family: "Bodoni Moda Fallback"; src: local("Georgia"); size-adjust: 92.4%; ascent-override: 107.2%; descent-override: 38.1%; line-gap-override: 0%; }
@font-face { font-family: "Jost Fallback"; src: local("Arial"); size-adjust: 101.6%; ascent-override: 111.6%; descent-override: 39.1%; line-gap-override: 0%; }

:root {
  /* colour tokens (spec R4-2). Plain light values here: this is the complete palette for a browser without light-dark(). The
     dark half is declared further down, inside the @supports block, and never beside these (a custom property accepts any value
     at parse time, so an unsupported light-dark() would replace the light value and compute to a transparent background). */
  --c-page: #F8F6F0;
  --c-surface: #FAF5F0;
  --c-wall: #E8E2D7;
  --c-mat: #FFFFFF;
  --c-text: #2B2B2E;
  --c-muted: #5E605F;
  --c-brand: #2B2B2E;
  --c-link: #47544D;
  --c-accent: #BA8554; /* decorative only: never text, never a control's only boundary */
  --c-rule: #DCD6CA; /* decorative hairlines only */
  --c-field: #767676; /* form field and chip borders */
  --c-focus: #47544D;
  --c-error: #8A1C1C;
  --c-on-brand: #F8F6F0;
  --c-ink: #2B2B2E; /* the same in both schemes: text on the khaki band is always ink */
  /* bands (spec R4-3, palette amended 2026-10-12 after Designer Rugs): the footer is deep green (band-lapis slot), the Persian
     block espresso (band-oxblood slot), the home viewing band khaki (band-saffron slot); slot names kept so markup is unchanged */
  --c-band-oxblood: #2E241C;
  --c-band-lapis: #47544D;
  --c-band-saffron: #A69473;
  --c-band-wine: #4A1F24;
  --c-band-stone: #3A3B3D;   /* the home viewing band: deep graphite grey (Raouf 2026-10-14 "an elegant grey") */   /* the home viewing band (Raouf 2026-10-14: "a different elegant colour"): the deep red of a Kashan field */
  --c-on-band: #FAF5F0;
  --c-shadow-soft: rgba(43, 43, 46, 0.08);
  --c-on-photo: #FFFFFF;          /* words on the home showroom photo (2026-10-14) */
  --c-photo-shade: #12100E;       /* the darkening over that photo, mixed with transparent */
  --c-shadow: rgba(43, 43, 46, 0.26);
  --shadow-mat: 0 1px 2px var(--c-shadow-soft), 0 22px 40px -22px var(--c-shadow);
  --shadow-sheet: 0 -12px 40px var(--c-shadow);

  /* type (family strings match theme.json) */
  --font-display: "Bodoni Moda", "Bodoni Moda Fallback", Georgia, serif;
  --font-text: "Jost", "Jost Fallback", system-ui, sans-serif;
  --font-ui: "Jost", "Jost Fallback", system-ui, sans-serif;
  --fs-body: 1.0625rem;
  --fs-ui: 0.9375rem;
  --fs-small: 0.8125rem;
  --fs-h1: clamp(3rem, 10vw, 7rem);
  --fs-h2: clamp(2.25rem, 6.4vw, 4.75rem);
  --fs-label-name: 1.375rem;

  /* space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --sp-9: 112px;

  /* layout */
  --gutter: 16px;
  --page-max: 1440px;
  --header-h: 56px;
  --section-y: 56px;
  --mat-pad: 10px;
  --m: 100px; /* pixels per metre on the hung wall */
}

@media (min-width: 1100px) {
  :root {
    --gutter: 40px;
    --header-h: 80px;
    --section-y: var(--sp-9);
  }
}

/* Dark half of the palette ("Gallery at night"). Every light-dark() lives inside this one @supports block; the .scheme-control
   (built in plan 1b Task 2) is hidden everywhere else, so a browser that cannot switch is never offered a switch. */
.scheme-control { display: none; }

@supports (color: light-dark(#000, #fff)) {
  html { color-scheme: light dark; }
  html[data-scheme="light"] { color-scheme: light; }
  html[data-scheme="dark"] { color-scheme: dark; }

  :root {
    --c-page: light-dark(#F8F6F0, #1C1F1E);
    --c-surface: light-dark(#FAF5F0, #222624);
    --c-wall: light-dark(#E8E2D7, #272C2A);
    --c-mat: light-dark(#FFFFFF, #343B38);
    --c-text: light-dark(#2B2B2E, #EDE9E1);
    --c-muted: light-dark(#5E605F, #B3B5B0);
    --c-brand: light-dark(#2B2B2E, #EDE9E1);
    --c-link: light-dark(#47544D, #A9BBAE);
    --c-accent: light-dark(#BA8554, #C9A07A);
    --c-rule: light-dark(#DCD6CA, #3A403D);
    --c-field: light-dark(#767676, #8E918C);
    --c-focus: light-dark(#47544D, #A9BBAE);
    --c-error: light-dark(#8A1C1C, #F2A7A0);
    --c-on-brand: light-dark(#F8F6F0, #1C1F1E);
    --c-band-oxblood: light-dark(#2E241C, #40332A);
    --c-band-lapis: light-dark(#47544D, #34403A);
    --c-band-saffron: light-dark(#A69473, #A69473);
    --c-band-wine: light-dark(#4A1F24, #57272C);
    --c-band-stone: light-dark(#3A3B3D, #2E3032);
    --c-on-band: light-dark(#FAF5F0, #EDE9E1);
    --c-shadow-soft: light-dark(rgba(43, 43, 46, 0.08), rgba(0, 0, 0, 0.35));
    --c-shadow: light-dark(rgba(43, 43, 46, 0.26), rgba(0, 0, 0, 0.6));
  }

  html[data-scheme-js] .scheme-control { display: inline-flex; }

  /* Bridge for the Site Editor: a colour the owner picks from the theme palette (a preset) follows the scheme like every token.
     :root:root beats WordPress's own :root output of the light values. */
  :root:root {
    --wp--preset--color--page: var(--c-page);
    --wp--preset--color--surface: var(--c-surface);
    --wp--preset--color--wall: var(--c-wall);
    --wp--preset--color--mat: var(--c-mat);
    --wp--preset--color--text: var(--c-text);
    --wp--preset--color--muted: var(--c-muted);
    --wp--preset--color--brand: var(--c-brand);
    --wp--preset--color--link: var(--c-link);
    --wp--preset--color--accent: var(--c-accent);
    --wp--preset--color--rule: var(--c-rule);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 16px;
  scroll-padding-bottom: 16px;
}

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-text);
  font: 400 var(--fs-body) / 1.6 var(--font-text);
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
}

main:focus {
  outline: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.005em;
}

p {
  margin: 0 0 var(--sp-4);
}

/* body a, not a: the live mu-plugin sarabi-frontend-fixes.php prints `a{color:#047a6b}` (4.2:1 on the page) after this sheet. */
body a {
  color: var(--c-link);
}

/* a link inside running text is underlined: colour alone is not the cue (WCAG 1.4.1) */
p a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -120px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--c-brand);
  color: var(--c-on-brand);
  font: 500 var(--fs-ui) / 1 var(--font-ui);
  text-decoration: none;
}

.skip-link:focus {
  top: 8px;
}

.lede {
  max-width: 34rem;
  color: var(--c-muted);
}

/* ---------- header ---------- */
/* markup (parts/header.html): .brand, .nav-toggle, .site-nav, .header-phone, .viewing-count are direct children of .site-header */

.site-header {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--header-h);
  padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  background: var(--c-page);
  box-shadow: 0 1px 0 var(--c-rule);
}

.site-header .brand {
  order: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  font: 500 1.375rem / 1 var(--font-display);
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}

/* logo lockup (Raouf 2026-10-13): a large script "Sarabi's" with a small, widely spaced FINE RUGS centred under it */
.site-header .brand {
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.brand-name {
  font: 400 2.125rem / 0.86 "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  letter-spacing: 0;
  padding: 0.1em 0.06em 0;   /* the script's capital and swashes overhang the box */
  position: relative; top: 2px;   /* Raouf 2026-10-13: 2 px lower */
}
.brand-sub {
  font: 500 0.625rem / 1 var(--font-ui);
  letter-spacing: 0.34em;
  text-transform: uppercase;   /* brand-sub-caps: the logo lockup, the one all-caps line on the site (static test exception) */
  margin-right: -0.34em;   /* the trailing letter space would push the words off centre */
  color: var(--c-muted, currentColor);
}

.site-header .viewing-count {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  color: var(--c-text);
  font: 600 var(--fs-ui) / 1 var(--font-ui);
}

.site-header .viewing-count[hidden] {
  display: none;
}

/* 320 px: Jost sets wider than Hanken did, and the header ran 2 px past the screen (2026-10-12) */
@media (max-width: 359px) {
  .site-header { gap: var(--sp-2, 8px); }
  .site-header .brand { font-size: 1.2rem; }
  .brand-name { font-size: 1.875rem; }
}

/* the menu toggle, the quick links, the three-part header and the unrolling menu: assets/css/menu.css (2026-10-14) */

/* ---------- buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  background: var(--c-brand);
  color: var(--c-on-brand);
  border: 1px solid var(--c-brand);
  border-radius: 0;
  font: 500 var(--fs-ui) / 1.1 var(--font-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn:hover {
  background: var(--c-link);
  border-color: var(--c-link);
}

.btn-primary {
  background: var(--c-brand);
  color: var(--c-on-brand);
}

.btn-quiet {
  background: transparent;
  color: var(--c-brand);
}

.btn-quiet:hover {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-on-brand);
}

.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-link);
  font: 500 var(--fs-ui) / 1.2 var(--font-ui);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.link:hover {
  text-decoration-thickness: 3px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
}

/* ---------- footer: the fringe and the signature (Raouf 2026-10-14: "the footer needs a serious redesign") ----------
   The page ends like the end of a rug: a woven fringe along the top edge, the green band woven like the menu, a calling card
   (Visit, Call, Write), three calm link groups, one small line of controls and the cookie note, and a giant script "Sarabi's"
   cropped by the bottom edge (the 2026 oversized-wordmark footer, in the logo's own script). Every link the old footer had stays. */
.site-footer {
  --c-band: var(--c-band-lapis);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 7vw, 88px);
  margin-top: 28px;   /* room for the fringe above the band */
  padding: clamp(64px, 9vw, 112px) max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))) 0;
  color: var(--c-on-band); font: 400 var(--fs-ui) / 1.5 var(--font-ui);
  background:
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--c-on-band) 3%, transparent) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(to right, color-mix(in srgb, var(--c-on-band) 2.5%, transparent) 0 1px, transparent 1px 5px),
    var(--c-band);
  overflow: visible;
}
.site-footer p { margin: 0; color: var(--c-on-band); }
.site-footer a { color: var(--c-on-band); }
.site-footer :focus-visible { outline-color: var(--c-on-band); }

/* the fringe: undyed wool threads hanging from the band's top edge */
.ft-fringe { position: absolute; left: 0; right: 0; top: -26px; height: 26px; pointer-events: none;
  background:
    repeating-linear-gradient(to right, color-mix(in srgb, var(--c-band) 88%, var(--c-on-band)) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(to right, transparent 0 3px, color-mix(in srgb, var(--c-band) 60%, var(--c-on-band)) 3px 4px, transparent 4px 6px);
  -webkit-mask: linear-gradient(to top, var(--c-ink) 55%, transparent); mask: linear-gradient(to top, var(--c-ink) 55%, transparent);
  transform-origin: 50% 100%; }
@supports (animation-timeline: view()) {
  html[data-motion="full"] .ft-fringe { animation: ft-settle linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  @keyframes ft-settle { from { transform: scaleY(0.35); opacity: 0.4; } to { transform: scaleY(1); opacity: 1; } }
}

.ft-label { margin: 0 0 var(--sp-4) !important; color: color-mix(in srgb, var(--c-on-band) 72%, transparent) !important; font: 500 0.75rem / 1 var(--font-ui); letter-spacing: 0.16em; }
/* the calling card */
.ft-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
@media (min-width: 900px) { .ft-card { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); } }
.ft-col { border-top: 1px solid color-mix(in srgb, var(--c-on-band) 40%, transparent); padding-top: var(--sp-4); min-width: 0; }
.ft-big { font: 400 clamp(1.375rem, 2.2vw, 1.875rem) / 1.2 var(--font-display); }
.site-footer :is(.ft-big, .ft-note) a { text-decoration: none; background: linear-gradient(var(--c-band-saffron), var(--c-band-saffron)) 0 100% / 0 1.5px no-repeat; transition: background-size 0.45s cubic-bezier(0.6, 0, 0.2, 1); }
.site-footer :is(.ft-big, .ft-note) a:is(:hover, :focus-visible) { background-size: 100% 1.5px; }
.ft-mail { font-size: clamp(1.125rem, 1.7vw, 1.5rem); overflow-wrap: anywhere; }
.ft-note { margin-top: var(--sp-2) !important; color: color-mix(in srgb, var(--c-on-band) 85%, transparent) !important; }
.ft-note a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-on-band); }
.ft-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-3) !important; }
.ft-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -11px; border-radius: 50%; transition: background-color 0.3s ease; }
.ft-social a + a { margin-left: 0; }
.ft-social a:hover { background: color-mix(in srgb, var(--c-on-band) 12%, transparent); }

/* the three link groups */
.site-footer .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-6); }
@media (min-width: 900px) { .site-footer .footer-links { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-8); } }
.ft-group:first-child ul { columns: 2; column-gap: var(--sp-5); }
@media (max-width: 599px) { .ft-group:first-child { grid-column: 1 / -1; } }
.site-footer .footer-links ul { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-links li { break-inside: avoid; }
.site-footer .footer-links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--c-on-band); text-decoration: none;
  background: linear-gradient(var(--c-band-saffron), var(--c-band-saffron)) 0 calc(100% - 8px) / 0 1.5px no-repeat; transition: background-size 0.45s cubic-bezier(0.6, 0, 0.2, 1); }
.site-footer .footer-links a:hover, .site-footer .footer-links a:focus-visible { background-size: 100% 1.5px; }

/* one small line of controls and the cookie note */
.ft-utility { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid color-mix(in srgb, var(--c-on-band) 25%, transparent); }
.site-footer .tracking-note { flex: 1 1 28rem; max-width: 46rem; font-size: var(--fs-small); line-height: 1.5; color: color-mix(in srgb, var(--c-on-band) 85%, transparent); }
.site-footer .tracking-note a { text-decoration: underline; text-underline-offset: 2px; }
.ft-utility :is(.motion-switch, .scheme-switch) button { min-height: 40px; padding: 0 12px; font-size: var(--fs-small); }

/* the signature (Raouf 2026-10-14: the cropped giant word read wrong): the logo lockup itself, whole, large and ghosted into the green,
   centred above the address line */
.ft-signature { display: flex; flex-direction: column; align-items: center; margin: 0 !important; padding-top: var(--sp-6); color: color-mix(in srgb, var(--c-on-band) 22%, transparent) !important;
  user-select: none; pointer-events: none; }
.ft-sig-name { font: 400 clamp(4.5rem, 14vw, 11rem) / 0.9 "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive; padding: 0.12em 0.08em 0; }
.ft-sig-sub { margin-top: 0.4em; margin-right: -0.42em; font: 500 clamp(0.75rem, 1.6vw, 1.125rem) / 1 var(--font-ui); letter-spacing: 0.42em; text-transform: uppercase; }   /* brand-sub-caps: the logo lockup (static test exception) */
.ft-copy { padding: var(--sp-5) 0 var(--sp-6); text-align: center; font-size: var(--fs-small); color: color-mix(in srgb, var(--c-on-band) 80%, transparent) !important; }
@media (prefers-reduced-motion: reduce) { .ft-fringe { animation: none !important; } }

/* ---------- motion switch ---------- */
/* motion.js sets html[data-motion] before first paint: full, reduced or none. Page-specific effects key off "full". */

.motion-switch {
  display: inline-flex;
}

.motion-switch,
.scheme-switch {
  align-self: flex-start;
  border: 1px solid var(--c-on-band);
}

.motion-switch button,
.scheme-switch button {
  min-height: 44px;
  padding: 0 14px;
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: var(--c-on-band);
  font: 500 var(--fs-ui) / 1 var(--font-ui);
  cursor: pointer;
}

.motion-switch button + button,
.scheme-switch button + button {
  border-left: 1px solid var(--c-on-band);
}

.motion-switch button[aria-pressed="true"],
.scheme-switch button[aria-pressed="true"] {
  background: var(--c-on-band);
  color: var(--c-band);
}

/* ---------- colour scheme control (header menu; the footer group reuses the motion switch look) ---------- */
/* .scheme-control is hidden unless the browser can switch (see the @supports block); display comes only from there. */

.scheme-menu-wrap {
  order: 2;
  position: relative;
  align-items: center;
}

.scheme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--c-text);
  cursor: pointer;
}

.scheme-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  background: var(--c-surface);
  border: 1px solid var(--c-field);
  box-shadow: 0 18px 30px -20px var(--c-shadow);
}

.scheme-menu[hidden] {
  display: none;
}

.scheme-menu button {
  min-height: 44px;
  padding: 0 var(--sp-4);
  background: transparent;
  border: 0;
  color: var(--c-text);
  font: 500 var(--fs-ui) / 1 var(--font-ui);
  text-align: left;
  cursor: pointer;
}

.scheme-menu button:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.scheme-menu button[aria-pressed="true"] {
  background: var(--c-brand);
  color: var(--c-on-brand);
}

/* ---------- third-party colours (spec R4-5): scoped overrides so plugin output follows the scheme ---------- */
/* Fluent Forms (its inline per-form rules print later at the same specificity, hence the doubled form class on the button): fields, labels, errors and the success message read the tokens. The privacy line carries an inline colour from the
   live mu-plugin (#595959, 2.6:1 on the dark page), so it needs !important. */
form.frm-fluent-form .ff-el-form-control {
  font-family: var(--font-ui);
  font-size: 1rem;   /* Fluent's 13.3 px made iOS zoom the page on focus (responsive audit 2026-10-12) */
  background-color: var(--c-mat);
  color: var(--c-text);
  border-color: var(--c-field);
}

form.frm-fluent-form .ff-el-form-control::placeholder {
  color: var(--c-muted);
  opacity: 1;
}

form.frm-fluent-form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
  min-height: 48px;
  padding: 0 28px;
  background: var(--c-brand);
  color: var(--c-on-brand);
  border: 1px solid var(--c-brand);
  border-radius: 0;
  font: 500 var(--fs-ui) / 1.1 var(--font-ui);
}

form.frm-fluent-form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover {
  background: var(--c-link);
  border-color: var(--c-link);
}

form.frm-fluent-form .ff-el-form-control:focus {
  border-color: var(--c-focus);
  outline: 3px solid var(--c-focus);
  outline-offset: 0;
}

form.frm-fluent-form .ff-el-input--label label,
form.frm-fluent-form .ff-el-form-check-label,
form.frm-fluent-form .ff_t_c {
  color: var(--c-text);
}

form.frm-fluent-form .ff-el-form-check-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  min-height: 44px;
}

/* the box itself meets the 24 px target minimum (WCAG 2.5.8; axe target-size), not only its label */
form.frm-fluent-form .ff-el-form-check-input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--c-brand);
}

form.frm-fluent-form .ff-el-is-error .ff-el-form-control {
  border-color: var(--c-error);
}

form.frm-fluent-form .error,
form.frm-fluent-form .text-danger,
.ff-errors-in-stack .error {
  color: var(--c-error);
}

.ff-message-success {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-field);
}

.sarabi-form-privacy {
  color: var(--c-muted) !important;
}

/* WooCommerce notices (the stock stylesheet is dequeued) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-field);
  list-style: none;
}

.woocommerce-error {
  color: var(--c-error);
  border-color: var(--c-error);
}

/* PhotoSwipe, if a lightbox is ever switched on: its chrome follows the scheme; the image itself is never touched */
.pswp__bg {
  background: var(--c-page);
}

.pswp__button,
.pswp__counter {
  color: var(--c-text);
}

/* ---------- motion modes ---------- */
/* Reduced: no animation, no smooth scroll. None: additionally no transitions. The system preference is mapped to Reduced by motion.js; the media query is the no-JS fallback. */

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *,
  html:not([data-motion="full"]) *::before,
  html:not([data-motion="full"]) *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation: none !important;
  scroll-behavior: auto !important;
}

html[data-motion="none"] *,
html[data-motion="none"] *::before,
html[data-motion="none"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* common questions (home and contact; visible text only, no FAQ markup) and the product's category list */
.faq { max-width: 46rem; padding-block: var(--section-y); border-top: 1px solid var(--c-rule); }
.faq h3 { margin: var(--sp-6) 0 var(--sp-2); font: 600 var(--fs-body) / 1.4 var(--font-ui); }
.faq p { margin: 0; }
.rug-terms { margin-top: var(--sp-5); color: var(--c-muted); font: 400 var(--fs-small) / 1.6 var(--font-ui); }
.post-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-7); font-family: var(--font-ui); }
.post-nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* text for screen readers only (a rug's name after a repeated "Add to viewing list" or "Ask about this rug": WCAG 2.4.4) */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Phones under 420 px: the header cannot hold the brand, the Viewing list count, the scheme button and Menu (WCAG 1.4.10). There
   the count lives in the menu instead (the menu shows it at every width once the list has rugs); from 420 px it is in the header
   too. The call link sits in the menu's footer line (2026-10-14 menu). */
@media (max-width: 419px) {
  .hd-right > .viewing-count,
  .hd-right > .viewing-count:not([hidden]) {
    display: none;
  }
}

/* the motion buttons need JavaScript (html[data-motion] is set by the inline head script): without it they are hidden, like the
   scheme control (independent UX review: dead controls) */
html:not([data-motion]) .motion-switch {
  display: none;
}

/* ---------- Google reviews on the espresso band (Raouf 2026-10-14: "redesign it in our brown") ----------
   The band runs edge to edge in the brand espresso, woven like the menu and the footer. Left: the rating exactly as Google gives it
   (5.0 from 89), the stars in caramel and the link; right: one review at a time in large serif, a giant ghosted quotation mark, slides
   that scroll sideways (arrows with JavaScript, swipe or keys without). Real reviews only (blocks/google-reviews). */
.google-reviews.gr-band {
  --c-band: var(--c-band-oxblood);
  box-sizing: border-box; max-width: none; margin: 0; border-top: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6, 32px);
  padding: clamp(40px, 5vw, 64px) max(var(--gutter, 16px), calc((100% - var(--page-max, 1440px)) / 2 + var(--gutter, 16px)));
  color: var(--c-on-band);
  background:
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--c-on-band) 3%, transparent) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(to right, color-mix(in srgb, var(--c-on-band) 2.5%, transparent) 0 1px, transparent 1px 5px),
    var(--c-band);
}
@media (min-width: 1000px) { .google-reviews.gr-band { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-8, 72px); align-items: center; } }
.gr-band :focus-visible { outline-color: var(--c-on-band) !important; }
.gr-eyebrow { margin: 0 0 var(--sp-3, 12px); color: color-mix(in srgb, var(--c-on-band) 75%, transparent); font: 500 var(--fs-ui, 0.9375rem) / 1.3 var(--font-ui); letter-spacing: 0.08em; }
.gr-title { margin: 0; color: var(--c-on-band); font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.gr-score { display: flex; align-items: center; gap: var(--sp-4, 16px); margin: var(--sp-4, 16px) 0 0; }
.gr-score-n { font: 400 clamp(2.75rem, 4.5vw, 3.75rem) / 0.9 var(--font-display); color: var(--c-on-band); }
.gr-score-of { display: grid; gap: 6px; color: color-mix(in srgb, var(--c-on-band) 85%, transparent); font: 400 var(--fs-ui, 0.9375rem) / 1.3 var(--font-ui); }
.gr-score-stars { color: var(--c-band-saffron); letter-spacing: 0.18em; font-size: 1.125rem; }
.gr-band .gr-all { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--sp-4, 16px); color: var(--c-on-band); font: 500 var(--fs-ui, 0.9375rem) / 1.2 var(--font-ui);
  text-decoration: underline; text-decoration-color: var(--c-band-saffron); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.gr-nav { display: flex; align-items: center; gap: var(--sp-4, 16px); margin: var(--sp-4, 16px) 0 0; }
.gr-nav[hidden] { display: none; }
.gr-nav button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid color-mix(in srgb, var(--c-on-band) 45%, transparent);
  border-radius: 50%; background: none; color: var(--c-on-band); font: 300 1.25rem / 1 var(--font-ui); cursor: pointer; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; }
.gr-nav button:hover { background: var(--c-on-band); color: var(--c-band); border-color: var(--c-on-band); }
.gr-nav button:disabled { opacity: 0.35; cursor: default; background: none; color: var(--c-on-band); }
.gr-count { color: color-mix(in srgb, var(--c-on-band) 80%, transparent); font: 500 var(--fs-small, 0.8125rem) / 1 var(--font-ui); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
/* the slides */
.gr-band .gr-row { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 0; }
.gr-band .gr-row::-webkit-scrollbar { display: none; }
.gr-band .gr-row:focus-visible { outline: 2px solid var(--c-on-band); outline-offset: 6px; }
.gr-band .gr-list { display: flex; gap: var(--sp-6, 32px); list-style: none; margin: 0; padding: 0; }
.gr-band .gr-card { position: relative; flex: 0 0 100%; scroll-snap-align: start; margin: 0; padding: 0 0 0 clamp(52px, 5vw, 72px); background: none; box-shadow: none; display: flex; flex-direction: column; }
.gr-band .gr-card::before { content: "\201C"; position: absolute; left: 0; top: -0.12em; font: 400 clamp(4.5rem, 6vw, 6rem) / 1 var(--font-display);
  color: color-mix(in srgb, var(--c-band-saffron) 55%, transparent); pointer-events: none; }
.gr-band .gr-stars { margin: 0 0 var(--sp-3, 12px); color: var(--c-band-saffron); font-size: 1rem; letter-spacing: 0.2em; }
.gr-band .gr-text { margin: 0; padding: 0; border: 0; }
.gr-band .gr-text p { margin: 0; color: var(--c-on-band); font: 400 clamp(1.125rem, 1.5vw, 1.375rem) / 1.5 var(--font-display); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; text-wrap: pretty; }
.gr-band .gr-who { margin: var(--sp-4, 16px) 0 0; color: var(--c-on-band); font: 500 var(--fs-ui, 0.9375rem) / 1.3 var(--font-ui); letter-spacing: 0.04em; }
.gr-band .gr-date { display: inline; margin-left: var(--sp-2, 8px); color: color-mix(in srgb, var(--c-on-band) 70%, transparent); font-weight: 400; font-size: var(--fs-small, 0.8125rem); }
@media (max-width: 599px) { .gr-band .gr-card { padding-left: 40px; } .gr-band .gr-card::before { font-size: 3.5rem; } }
@media (prefers-reduced-motion: reduce) { .gr-band .gr-row { scroll-behavior: auto; } }

/* ---------- the enquiry form (Fluent form 3, rug pages and contact), laid out by inc/forms.php (2026-10-12) ---------- */
.enq-intro { max-width: 40rem; margin: var(--sp-3, 12px) 0 var(--sp-6, 32px); color: var(--c-muted); font: 400 1rem / 1.6 var(--font-text); }
.enq-intro a { color: var(--c-link); white-space: nowrap; }
form.frm-fluent-form .ff-el-group { margin-bottom: var(--sp-5, 24px); }
form.frm-fluent-form .ff-el-input--label label { font: 500 var(--fs-ui, 0.9375rem) / 1.3 var(--font-ui); letter-spacing: 0.01em; }
form.frm-fluent-form .ff-el-is-required.asterisk-right label::after { color: var(--c-brand); }
form.frm-fluent-form input.ff-el-form-control,
form.frm-fluent-form select.ff-el-form-control { min-height: 48px; padding: 10px 14px; border-radius: 0; }
form.frm-fluent-form textarea.ff-el-form-control { min-height: 96px; padding: 12px 14px; border-radius: 0; }
form.frm-fluent-form .ff-el-form-control::placeholder { color: var(--c-muted); font-style: normal; }
/* name and phone side by side from 600 px; one column below */
form.frm-fluent-form .enq-contact .ff-t-container { gap: var(--sp-4, 16px); }
@media (max-width: 599px) {
  form.frm-fluent-form .enq-contact .ff-t-container { flex-direction: column; gap: 0; }
}
/* the optional part: a rule, a small heading and one quiet line */
form.frm-fluent-form .enq-opt-head { margin: var(--sp-6, 32px) 0 var(--sp-5, 24px); padding-top: var(--sp-5, 24px); border-top: 1px solid var(--c-rule); }
.enq-opt-title { margin: 0; font: 500 1.375rem / 1.25 var(--font-display); color: var(--c-text); }
.enq-opt-note { margin: var(--sp-2, 8px) 0 0; font: 400 var(--fs-ui, 0.9375rem) / 1.5 var(--font-ui); color: var(--c-muted); }
/* checkbox choices as tiles in a grid, so 21 options read as two tidy groups instead of a long list */
form.frm-fluent-form .ff-el-input--content:has(> .ff-el-form-check) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
  gap: var(--sp-2, 8px);
}
form.frm-fluent-form .ff-el-form-check { margin: 0; padding: 0; }
form.frm-fluent-form .ff-el-input--content:has(> .ff-el-form-check) > .ff-el-form-check { display: flex; margin-bottom: 0; }
form.frm-fluent-form.frm-fluent-form .ff-el-form-check label.ff-el-form-check-label { margin: 0; min-height: 48px; }   /* Fluent sets a 7 px bottom margin */
form.frm-fluent-form .ff-el-form-check .ff-el-form-check-label {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--c-field);
  background: var(--c-mat);
  font: 400 var(--fs-ui, 0.9375rem) / 1.25 var(--font-ui);
  cursor: pointer;
}
form.frm-fluent-form .ff-el-form-check .ff-el-form-check-label:hover { border-color: var(--c-text); }
form.frm-fluent-form .ff-el-form-check .ff-el-form-check-label:has(input:checked) { border-color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); }
form.frm-fluent-form .ff-el-form-check .ff-el-form-check-label:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
/* the button: full width on phones, then its natural width */
form.frm-fluent-form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) { width: 100%; min-height: 52px; font-size: 1rem; }
@media (min-width: 600px) {
  form.frm-fluent-form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) { width: auto; min-width: 14rem; }
}

/* ---------- the showroom visit card (blocks/visit; home "wide", contact "stacked"), 2026-10-12 ---------- */
.visit-card { box-sizing: border-box; display: grid; gap: 0; background: var(--c-mat); box-shadow: var(--shadow-mat); }
.visit-photo { margin: 0; min-height: 0; overflow: hidden; background: var(--c-wall); }
.visit-photo img { display: block; width: 100%; height: 100%; max-height: 32rem; object-fit: cover; object-position: 50% 45%; }
.visit-body { padding: var(--sp-6, 32px) var(--sp-5, 24px); }
.visit-card h2 { margin: 0 0 var(--sp-3, 12px); font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.05; }
.visit-lede { margin: 0 0 var(--sp-5, 24px); max-width: 32rem; color: var(--c-muted); font: 400 1.0625rem / 1.6 var(--font-text); }
.visit-facts-list { margin: 0 0 var(--sp-5, 24px); border-top: 1px solid var(--c-rule); }
.visit-facts-list > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--sp-4, 16px); padding: 12px 0; border-bottom: 1px solid var(--c-rule); }
.visit-facts-list dt { margin: 0; font: 500 var(--fs-ui, 0.9375rem) / 1.5 var(--font-ui); color: var(--c-muted); }
.visit-facts-list dd { margin: 0; font: 500 1rem / 1.5 var(--font-ui); color: var(--c-text); }
.visit-facts-list a { color: var(--c-link); }
.visit-sub { display: inline; font-weight: 400; font-size: var(--fs-small, 0.8125rem); color: var(--c-muted); }
.visit-facts-list dd br + .visit-sub, .visit-facts-list dd > br + a { display: inline; }
.visit-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3, 12px); margin: 0; }
/* the car park button sits right under the showroom directions (Raouf 2026-10-13); the home viewing button stays beside them */
@media (min-width: 600px) {
  .visit-actions { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: start; }
  /* the contact page's card sits in a narrow column: one button per row, full width (two side by side overflowed at 1024 px) */
  .visit-card.is-stacked .visit-actions { grid-template-columns: minmax(0, 1fr); }
  .visit-card.is-stacked .visit-actions > * { grid-column: 1; grid-row: auto; }
  .visit-actions a.sarabi-directions { grid-column: 1; grid-row: 1; }
  .visit-actions .visit-parking { grid-column: 1; grid-row: 2; }
  .visit-actions .btn:not(.visit-parking) { grid-column: 2; grid-row: 1; }
}
.visit-actions .btn { min-height: 52px; }
/* the directions link keeps class="sarabi-directions" alone (the live mu-plugin's conversion and the tests match it exactly), so
   it is drawn as the primary button from here */
.visit-actions a.sarabi-directions { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--sp-5, 24px);
  background: var(--c-brand); color: var(--c-on-brand); border: 1px solid var(--c-brand); font: 500 var(--fs-ui, 0.9375rem) / 1.1 var(--font-ui); text-decoration: none; }
.visit-actions a.sarabi-directions:hover { background: var(--c-link); border-color: var(--c-link); }
.visit-actions a.sarabi-directions:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.visit-map { margin: var(--sp-3, 12px) 0 0; font: 400 var(--fs-ui, 0.9375rem) / 1.4 var(--font-ui); }
.visit-map a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-link); }
@media (max-width: 599px) { .visit-actions :is(.btn, a.sarabi-directions) { flex: 1 1 100%; justify-content: center; } }
/* wide (home): photo beside the facts */
@media (min-width: 900px) {
  .visit-card.is-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: stretch; }
  .visit-card.is-wide .visit-photo img { max-height: none; min-height: 100%; }
  .visit-card.is-wide .visit-body { padding: var(--sp-8, 72px) var(--sp-7, 48px); align-self: center; }
}
/* home: the card sits in the page measure with the section rhythm */
main > .visit-card.is-wide { max-width: calc(var(--page-max, 1440px) - 2 * var(--gutter, 16px)); margin: var(--section-y, 56px) auto; width: calc(100% - 2 * var(--gutter, 16px)); }
.visit-facts-list dd { overflow-wrap: break-word; word-break: normal; }
@media (max-width: 479px) {
  .visit-facts-list > div { grid-template-columns: 4.25rem minmax(0, 1fr); gap: var(--sp-3, 12px); }
  .visit-facts-list dd { font-size: 0.9375rem; }
  .visit-body { padding-inline: var(--sp-4, 16px); }
}