/* Gumela is the single brand typeface, Arabic and Latin, storefront-wide.
   It ships as two separate families ("Gumela Arabic" / "Gumela Arabic Light")
   which are unified here under one CSS family at weights 400 and 300.
   One file per weight covers both scripts, so there is no unicode-range split.
   The shipped font has no U+060C (Arabic comma) despite the copy using it, so
   the served files are built by scripts/build_fonts.py, which synthesizes that
   glyph from the family's own comma. Never replace these files with the raw
   .ttf originals or every Arabic comma falls back to another font. */
@font-face {
  font-family: "Gumela";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/gumela-400.woff2") format("woff2");
}
@font-face {
  font-family: "Gumela";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/gumela-300.woff2") format("woff2");
}

:root {
  --ivory: oklch(98.5% .008 85);
  --cream: oklch(95.5% .018 80);
  --burgundy: oklch(27% .09 18);
  --crimson: oklch(36% .13 20);
  --gold: oklch(72% .09 80);
  --gold-soft: oklch(78% .1 82);
  --onyx: oklch(13% .004 60);
  --champagne: oklch(97% .012 85);
  --ink: oklch(18% .005 60);
  --muted-ink: oklch(43% .012 60);
  --bg: var(--ivory);
  --surface: oklch(100% 0 0);
  --surface-alt: var(--cream);
  --fg: var(--ink);
  --muted: var(--muted-ink);
  --line: oklch(86% .018 75);
  --focus: var(--crimson);
  --radius: .75rem;
  --page: min(100% - 2.5rem, 78rem);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --reveal-distance: 1.4rem;
  --reveal-duration: .85s;
  --reveal-stagger: 70ms;
  /* Single-family typography. Gumela ships exactly two cuts: Light (300) and
     Regular (400). Those are the only legal font-weight values on the
     storefront — anything else makes the browser synthesize a fake bold, which
     smears badly in Arabic.
       display -> 300  large headings and brand; Light reads elegant at size
       strong  -> 400  buttons, prices, labels, kickers, badges, nav
       medium  -> 400  body and secondary UI
     strong and medium are both 400 on purpose. With two cuts, emphasis comes
     from size and colour, not weight, and small UI text stays at 400 so
     nothing renders thin. Do not "bump the weight" to fix legibility. */
  --weight-display: 300;
  --weight-strong: 400;
  --weight-medium: 400;
  color-scheme: light;
  font-family: "Gumela", ui-sans-serif, system-ui, sans-serif;
}

.dark {
  --bg: oklch(11.5% .006 25);
  --surface: oklch(16.5% .008 25);
  --surface-alt: oklch(20% .012 25);
  --fg: oklch(96.5% .006 80);
  --muted: oklch(78% .012 75);
  --line: oklch(74% .06 78 / .22);
  --focus: var(--gold-soft);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font-kerning: normal;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 {
  font-weight: var(--weight-display);
  line-height: 1.22;
  text-wrap: balance;
}

/* ARABIC LEADING — do not set a heading line-height below 1.2.
   Arabic carries tashkeel above the letter body and descenders well below the
   baseline. At sub-1.2 leading a two-line Arabic heading collides with itself:
   the marks on line 2 crash into line 1 and read as detached specks floating
   over the text. Latin tolerates 0.9; Arabic does not. Every heading rule
   below inherits 1.22 unless it has a documented reason to differ. */

/* The storefront is one family in both languages — Gumela inherits from :root
   and covers Arabic and Latin from a single file per weight. There is no
   per-language family or weight override; if you ever need Arabic to sit
   lighter than Latin, add a `[lang="ar"] { --weight-*: … }` block here and
   nothing else has to change. */

/* Admin is an internal data tool, not brand surface: a serif hurts scanning of
   tables, SKUs and stock numbers, so it opts out to the system sans. It always
   renders lang="en" / dir="ltr". No webfont is loaded for it. */
.admin-body,
.login-screen {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.admin-body h1,
.admin-body h2,
.admin-body h3,
.login-screen h1 { font-family: inherit; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes marquee-ltr {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}
@keyframes hanora-rise {
  from { opacity: 0; transform: translateY(1.75rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hanora-shimmer {
  from { transform: translateX(-120%); }
  to { transform: translateX(320%); }
}

/* ==========================================================================
   Scroll reveal system
   --------------------------------------------------------------------------
   store.js adds `motion-ready` to <html> once it has confirmed IntersectionObserver
   support and that the visitor has not asked for reduced motion. The hidden
   initial state therefore only ever applies when JS is able to reveal it again —
   with JS off, broken, or reduced-motion on, every element renders fully visible.
   Never write the hidden state without that `.motion-ready` guard.
   ========================================================================== */
[data-reveal] { --reveal-index: 0; }

.motion-ready [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--reveal-duration) var(--ease-out-expo),
    transform var(--reveal-duration) var(--ease-out-expo),
    clip-path var(--reveal-duration) var(--ease-out-expo);
  transition-delay: calc(var(--reveal-index) * var(--reveal-stagger));
}
.motion-ready [data-reveal="up"] { transform: translateY(var(--reveal-distance)); }
.motion-ready [data-reveal="fade"] { transform: none; }
.motion-ready [data-reveal="scale"] { transform: scale(.94); }
.motion-ready [data-reveal="image"] {
  clip-path: inset(12% 0 0 0);
  transform: scale(1.06);
}
.motion-ready [data-reveal="start"] { transform: translateX(calc(var(--reveal-distance) * -1.4)); }
.motion-ready [data-reveal="end"] { transform: translateX(calc(var(--reveal-distance) * 1.4)); }
[dir="rtl"].motion-ready [data-reveal="start"] { transform: translateX(calc(var(--reveal-distance) * 1.4)); }
[dir="rtl"].motion-ready [data-reveal="end"] { transform: translateX(calc(var(--reveal-distance) * -1.4)); }

.motion-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 60;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--crimson));
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease-out-quart);
}
[dir="rtl"] .scroll-progress { transform-origin: right center; }
.scroll-progress.is-active { opacity: 1; }

/* Header condenses once the page has scrolled past the hero band */
.store-header { transition: min-height .3s var(--ease-out-quart), background .3s var(--ease-out-quart), box-shadow .3s var(--ease-out-quart); }
.store-header.is-stuck {
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  box-shadow: 0 1px 24px -12px color-mix(in oklab, var(--onyx) 60%, transparent);
}
.store-header.is-stuck .nav-shell { min-height: 4.25rem; }
.home-hero .store-header.is-stuck { background: linear-gradient(180deg, rgba(0,0,0,.62), transparent); }

/* Hero parallax + entrance, driven by --hero-progress from store.js */
.home-hero video { transform: translate3d(0, calc(var(--hero-progress, 0) * 6vh), 0) scale(calc(1 + var(--hero-progress, 0) * .06)); }
.motion-ready .hero-content > * {
  animation: hanora-rise .95s var(--ease-out-expo) both;
  animation-delay: calc(120ms + var(--reveal-index) * 90ms);
}

/* Product card lift */
.product-card {
  transition:
    border-color .3s var(--ease-out-quart),
    transform .45s var(--ease-out-quint),
    box-shadow .45s var(--ease-out-quint);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px -28px color-mix(in oklab, var(--onyx) 70%, transparent);
}
.product-card:hover .product-image img { transform: scale(1.07); }
.product-image { position: relative; }
.product-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  opacity: 0;
  pointer-events: none;
}
.product-card:hover .product-image::after { opacity: 1; animation: hanora-shimmer .9s var(--ease-out-quart); }

/* Interactive polish on commerce controls */
.variant-swatch { transition: border-color .25s var(--ease-out-quart), background .25s var(--ease-out-quart), transform .2s var(--ease-out-quart); }
.variant-swatch:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); }
.variant-swatch:active:not(:disabled) { transform: translateY(0) scale(.97); }
.swatches span, .color-tiles article, .review-grid blockquote, .atelier-notes article {
  transition: transform .4s var(--ease-out-quint), box-shadow .4s var(--ease-out-quint), border-color .3s var(--ease-out-quart);
}
.color-tiles article:hover, .review-grid blockquote:hover { transform: translateY(-4px); }
.color-tiles img { transition: transform .7s var(--ease-out-quint); }
.color-tiles article:hover img { transform: scale(1.05); }
.swatches span:hover { transform: scale(1.14); }
.cart-row { transition: transform .3s var(--ease-out-quart), border-color .3s var(--ease-out-quart); }
.cart-row:hover { border-color: color-mix(in oklab, var(--gold) 55%, var(--line)); }
.store-footer a, .desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: -.35rem;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: inline-start center;
  transition: transform .3s var(--ease-out-quart);
}
.desktop-nav a:hover::after { transform: scaleX(1); }

.store-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
}
.home-hero .store-header {
  position: absolute;
  inset: 0 0 auto;
  color: var(--champagne);
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(0,0,0,.42), transparent);
  backdrop-filter: none;
}
.nav-shell {
  width: var(--page);
  min-height: 5.25rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
}
.store-brand {
  justify-self: start;
  font-size: 1.45rem;
  font-weight: var(--weight-display);
  letter-spacing: .34em;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.desktop-nav a, .mobile-menu a {
  font-size: .82rem;
  font-weight: var(--weight-medium);
  transition: color .2s ease;
}
.desktop-nav a:hover, .mobile-menu a:hover { color: var(--gold); }
.cart-link { display: inline-flex; align-items: center; gap: .5rem; }
.cart-count {
  min-width: 1.55rem;
  height: 1.55rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--gold);
  color: var(--onyx);
  font-size: .72rem;
}
.nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.nav-control {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  cursor: pointer;
  opacity: .9;
  transition: border-color .2s var(--ease-out-quart), color .2s var(--ease-out-quart), background .2s var(--ease-out-quart), transform .2s var(--ease-out-quart);
}
.home-hero .nav-control { background: rgba(0,0,0,.22); }
.nav-control:hover { color: var(--gold); border-color: var(--gold); opacity: 1; transform: translateY(-1px); }
.nav-control:active { transform: scale(.96); }
.theme-icon {
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}
.theme-icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .2s var(--ease-out-quart), transform .24s var(--ease-out-quint);
}
.theme-control[data-theme="dark"] .theme-icon-sun,
.theme-control[data-theme="light"] .theme-icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}
.theme-control[data-theme="dark"] .theme-icon-moon {
  opacity: 0;
  transform: rotate(-28deg) scale(.72);
}
.theme-control[data-theme="light"] .theme-icon-sun {
  opacity: 0;
  transform: rotate(28deg) scale(.72);
}
.language-control { padding-inline: .85rem; font-size: .78rem; font-weight: var(--weight-strong); }
.menu-control { display: none; }
.menu-icon, .menu-icon::before, .menu-icon::after {
  width: 1.15rem;
  height: 1px;
  display: block;
  background: currentColor;
  content: "";
  transition: transform .2s ease;
}
.menu-icon::before { transform: translateY(-.36rem); }
.menu-icon::after { transform: translateY(.3rem); }
.menu-control[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-control[aria-expanded="true"] .menu-icon::before { transform: translateY(0) rotate(45deg); }
.menu-control[aria-expanded="true"] .menu-icon::after { transform: translateY(-1px) rotate(-45deg); }
.mobile-menu {
  display: none;
  width: var(--page);
  margin-inline: auto;
  padding: .5rem 0 1.25rem;
}
.mobile-menu.open { display: grid; gap: .25rem; }
.mobile-menu a {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.home-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  isolation: isolate;
  overflow: hidden;
  background: var(--onyx);
  color: var(--champagne);
}
.home-hero video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.28) 58%, rgba(0,0,0,.1)),
    linear-gradient(0deg, rgba(0,0,0,.8), transparent 58%);
}
[dir="rtl"] .hero-shade {
  background:
    linear-gradient(270deg, rgba(0,0,0,.78), rgba(0,0,0,.28) 58%, rgba(0,0,0,.1)),
    linear-gradient(0deg, rgba(0,0,0,.8), transparent 58%);
}
.hero-content {
  width: var(--page);
  margin-inline: auto;
  padding-block: clamp(10rem, 24vh, 14rem) clamp(4rem, 10vh, 7rem);
}
.hero-kicker, .section-kicker {
  margin: 0 0 .8rem;
  color: var(--gold);
  font-size: .78rem;
  font-weight: var(--weight-strong);
  letter-spacing: .08em;
}
.hero-content h1 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.5rem, 5.5vw, 4.4rem);
  font-weight: var(--weight-display);
  line-height: 1.28;
  letter-spacing: 0;
}
.hero-description {
  max-width: 40rem;
  margin: 1.35rem 0 0;
  color: color-mix(in oklab, var(--champagne) 88%, transparent);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.8;
}
.hero-actions, .signature-actions, .panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
  margin-top: 1.75rem;
}

.button {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid transparent;
  border-radius: .35rem;
  padding: .78rem 1.25rem;
  cursor: pointer;
  font-weight: var(--weight-strong);
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.button-primary, .button.primary {
  border-color: var(--burgundy);
  background: var(--burgundy);
  color: var(--champagne);
}
.button-primary:hover, .button.primary:hover { background: var(--crimson); border-color: var(--crimson); }
.dark .button-primary, .dark .button.primary {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--onyx);
}
.button-secondary, .button.ghost {
  border-color: color-mix(in oklab, var(--fg) 34%, transparent);
  background: transparent;
  color: var(--fg);
}
.button-secondary:hover, .button.ghost:hover { border-color: var(--gold); color: var(--gold); }
.button-hero-secondary {
  border-color: rgba(255,255,255,.5);
  background: rgba(0,0,0,.18);
  color: var(--champagne);
}
.button-hero-secondary:hover { border-color: var(--gold); color: var(--gold); }
.button-gold { border-color: var(--gold); background: var(--gold); color: var(--onyx); }
.button.full, .full { width: 100%; }
.button.small { min-height: 2.35rem; padding: .45rem .75rem; font-size: .85rem; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--fg);
  font-weight: var(--weight-strong);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--gold) 55%, transparent);
  text-underline-offset: .35rem;
}
.text-link:hover { color: var(--gold); }

.promise-strip {
  overflow: hidden;
  border-block: 1px solid color-mix(in oklab, var(--gold) 36%, transparent);
  background: var(--burgundy);
  color: var(--champagne);
  padding-block: 1rem;
}
.dark .promise-strip { background: var(--onyx); }
.promise-track {
  width: max-content;
  display: flex;
  animation: marquee-ltr 30s linear infinite;
}
[dir="rtl"] .promise-track { animation-name: marquee-rtl; }
.promise-strip:hover .promise-track { animation-play-state: paused; }
.promise-group {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-inline: 1rem;
}
.promise-group span { min-width: max-content; font-size: 1.05rem; }
.promise-group i { color: var(--gold); font-style: normal; }

.signature-section, .craft-story, .delivery-section {
  width: var(--page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.signature-section { padding-block: clamp(4rem, 9vw, 8rem); }
.signature-media {
  overflow: hidden;
  background: var(--surface-alt);
}
.signature-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.signature-copy h2, .section-heading h2, .craft-copy h2, .delivery-copy h2, .final-cta h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1.22;
  letter-spacing: 0;
}
.section-intro, .delivery-copy > p:not(.section-kicker) {
  max-width: 42rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.85;
}
.signature-price {
  margin: .9rem 0;
  color: var(--gold);
  font-size: 1.7rem;
  font-weight: var(--weight-strong);
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-block: 1.15rem;
}
.swatches span {
  width: 1.65rem;
  height: 1.65rem;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 32%, transparent);
}

.collection-section, .craft-section, .reviews-section {
  padding: clamp(4rem, 9vw, 8rem) max(1.25rem, calc((100% - 78rem) / 2));
}
.collection-section { background: var(--surface-alt); }
.section-heading { margin-bottom: 2.25rem; }
.section-heading.split { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }
.section-heading.centered { max-width: 42rem; margin-inline: auto; text-align: center; }
.section-heading.compact { max-width: 44rem; }
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
}
/* Hover/lift behaviour lives in the scroll reveal system section above. */
.product-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
}
.product-card:hover { border-color: var(--gold); }
.product-image { display: block; overflow: hidden; background: var(--surface-alt); }
.product-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.product-card-body { flex: 1; display: flex; flex-direction: column; padding: 1rem; }
.product-card h2 { margin: 0; font-size: 1.3rem; line-height: 1.35; }
.product-card p {
  display: -webkit-box;
  min-height: 3.25rem;
  margin: .55rem 0 0;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.product-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin: auto 0 1rem;
  padding-top: 1rem;
}
.product-meta strong { color: var(--gold); }
.product-meta span { color: var(--muted); font-size: .82rem; }

.craft-section { background: var(--bg); }
.craft-story { padding-bottom: clamp(4rem, 8vw, 7rem); }
.craft-image-wrap { overflow: hidden; }
.craft-image-wrap img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.atelier-notes {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
.atelier-notes article { padding-block: .8rem; border-bottom: 1px solid var(--line); }
.atelier-notes strong { color: var(--gold); font-size: 1rem; }
.atelier-notes p { margin: .3rem 0 0; color: var(--muted); line-height: 1.65; }
.color-story { border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 5rem); }
.color-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.color-tiles article { position: relative; overflow: hidden; background: var(--surface); }
.color-tiles img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.color-tiles article > div { padding: 1rem; }
.color-tiles strong, .color-tiles span { display: block; }
.color-tiles strong { font-size: 1.2rem; }
.color-tiles span { margin-top: .25rem; color: var(--muted); }

.delivery-section {
  width: auto;
  max-width: none;
  padding: clamp(4rem, 9vw, 7rem) max(1.25rem, calc((100% - 78rem) / 2));
  background: var(--burgundy);
  color: var(--champagne);
}
.delivery-copy > p:not(.section-kicker) { color: color-mix(in oklab, var(--champagne) 80%, transparent); }
.delivery-section .button-secondary { border-color: rgba(255,255,255,.45); color: var(--champagne); }
.delivery-proof {
  border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.delivery-proof > strong { display: block; color: var(--gold); font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 1; }
.delivery-proof > span { display: block; margin-top: .75rem; line-height: 1.5; }
.delivery-proof > div { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.delivery-proof > div span { border: 1px solid rgba(255,255,255,.24); padding: .5rem .7rem; font-size: .82rem; }

.reviews-section { background: var(--surface-alt); }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.review-grid blockquote {
  margin: 0;
  border-top: 2px solid var(--gold);
  background: var(--surface);
  padding: 1.5rem;
}
.review-stars { color: var(--gold); letter-spacing: .15em; }
.review-grid blockquote p { color: var(--muted); line-height: 1.8; }
.review-grid footer { margin-top: 1.25rem; font-weight: var(--weight-strong); }

.final-cta {
  padding: clamp(5rem, 11vw, 9rem) 1.25rem;
  text-align: center;
  background: var(--onyx);
  color: var(--champagne);
}
.final-cta h2 { max-width: 14ch; margin-inline: auto; }
.final-cta .button { margin-top: 1.75rem; }
.store-footer {
  padding: clamp(2.5rem, 5vw, 4rem) max(1.25rem, calc((100% - 78rem) / 2)) 1.75rem;
  background: var(--burgundy);
  color: var(--champagne);
}
.dark .store-footer { background: var(--onyx); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.footer-brand strong { display: block; font-size: 1.35rem; letter-spacing: .25em; }
.footer-brand p {
  max-width: 30ch;
  margin: .85rem 0 0;
  color: color-mix(in oklab, var(--champagne) 74%, transparent);
  line-height: 1.75;
}
.footer-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.15rem; }
.footer-social a { font-size: .85rem; opacity: .85; }
.footer-col { display: grid; align-content: start; gap: .6rem; }
.footer-col strong {
  margin-bottom: .2rem;
  color: var(--gold);
  font-size: .78rem;
  font-weight: var(--weight-strong);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer-col a, .footer-social a { color: color-mix(in oklab, var(--champagne) 82%, transparent); transition: color .2s var(--ease-out-quart); }
.store-footer a:hover { color: var(--gold); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.35rem;
  border-top: 1px solid color-mix(in oklab, var(--champagne) 22%, transparent);
  color: color-mix(in oklab, var(--champagne) 62%, transparent);
  font-size: .8rem;
}

/* Static content pages: About, Contact, FAQ, Sitemap, Terms, Privacy */
.content-page {
  width: min(100% - 2.5rem, 52rem);
  margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.content-head { margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.content-head h1 { margin: 0; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.22; }
.content-lead {
  max-width: 46ch;
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.85;
}
.content-updated { margin: 1.25rem 0 0; color: var(--muted); font-size: .82rem; }
.content-body > h2 {
  margin: clamp(2.25rem, 5vw, 3rem) 0 .85rem;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.3;
}
.content-body > h2:first-child { margin-top: 0; }
.content-body h3 { margin: 0 0 .75rem; font-size: 1.05rem; line-height: 1.3; }
.content-body p { margin: 0 0 1rem; color: var(--muted); line-height: 1.9; }
.content-body ul { margin: 0 0 1.25rem; padding-inline-start: 1.15rem; display: grid; gap: .6rem; }
.content-body li { color: var(--muted); line-height: 1.8; }
.content-body li::marker { color: var(--gold); }
.content-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: clamp(2rem, 4vw, 3rem); }
.content-social { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.5rem; }
.content-social a { color: var(--gold); font-weight: var(--weight-strong); }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; margin-bottom: 2rem; }
.contact-card {
  display: grid;
  gap: .35rem;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  background: var(--surface);
  transition: transform .3s var(--ease-out-quint), border-color .25s var(--ease-out-quart);
}
.contact-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.contact-card strong { font-weight: var(--weight-strong); }
.contact-card span { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.contact-details { display: grid; gap: .85rem; margin-bottom: 2rem; }
.contact-details > div { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.contact-details strong { min-width: 9rem; font-weight: var(--weight-strong); }
.contact-details span { color: var(--muted); }

.faq-list { display: grid; gap: .6rem; margin-bottom: 2rem; }
.faq-item { border: 1px solid var(--line); background: var(--surface); }
.faq-item summary {
  padding: 1.05rem 1.15rem;
  cursor: pointer;
  font-weight: var(--weight-strong);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color .2s var(--ease-out-quart);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  color: var(--gold);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform .25s var(--ease-out-quart);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--gold); }
.faq-item > div { padding: 0 1.15rem .35rem; }
.faq-item > div p { margin-bottom: .9rem; }

.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem; }
.sitemap-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.sitemap-group h3 { color: var(--gold); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.sitemap-group a { color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--gold) 45%, transparent); text-underline-offset: .3rem; }
.sitemap-group a:hover { color: var(--gold); }

/* Product landing: assurance, steps, FAQ, mobile buy bar */
.product-assure {
  padding: clamp(2.5rem, 6vw, 4rem) max(1.25rem, calc((100vw - 78rem) / 2));
  border-block: 1px solid var(--line);
  background: var(--surface-alt);
}
.assure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem 2.5rem; }
.assure-grid article { display: grid; gap: .4rem; align-content: start; }
.assure-grid strong { font-weight: var(--weight-strong); }
.assure-grid strong::before { content: "✦"; margin-inline-end: .5rem; color: var(--gold); }
.assure-grid span { color: var(--muted); line-height: 1.8; }

.product-steps, .product-faq {
  width: var(--page);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.product-steps h2, .product-faq h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.25;
}
.product-steps ol {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-steps li { counter-increment: step; display: grid; gap: .4rem; align-content: start; padding-top: 2.6rem; position: relative; }
.product-steps li::before {
  content: counter(step);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: .85rem;
}
.product-steps strong { font-weight: var(--weight-strong); }
.product-steps span { color: var(--muted); line-height: 1.8; }
.product-faq { border-top: 1px solid var(--line); }

.mobile-buy-bar { display: none; }
@media (max-width: 760px) {
  .mobile-buy-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: color-mix(in oklab, var(--bg) 96%, transparent);
    backdrop-filter: blur(14px);
  }
  .mobile-buy-price { flex: none; color: var(--gold); font-size: 1.1rem; font-weight: var(--weight-strong); }
  .mobile-buy-bar .button { flex: 1; }
  /* Keep the sticky bar from covering the footer's last row. */
  .product-landing { padding-bottom: 4.5rem; }
  .assure-grid { gap: 1.25rem; }
}

.page-shell, .page, .product-detail, .checkout {
  width: var(--page);
  margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.page-heading, .section-head { max-width: 52rem; margin-bottom: 2.5rem; }
.page-heading h1, .section-head h1, .page > h1, .buy-panel h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.22;
}
.page-heading > p:not(.section-kicker), .section-head > p:not(.section-kicker) { color: var(--muted); line-height: 1.8; }
.narrow { max-width: 48rem; }
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(20rem, .8fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface-alt); }
.buy-panel {
  position: sticky;
  top: 7rem;
  border-top: 2px solid var(--gold);
  background: var(--surface);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.buy-panel > p:not(.section-kicker) { color: var(--muted); line-height: 1.8; }
.price-line { display: grid; gap: .3rem; margin: 1.25rem 0; color: var(--gold); font-size: 1.6rem; font-weight: var(--weight-strong); }
.price-line span { color: var(--muted); font-size: .9rem; font-weight: 500; }

.cart-list { display: grid; gap: .8rem; margin: 1.25rem 0; }
.cart-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
  gap: .8rem;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: .7rem;
}
.cart-row.compact { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
.cart-row img { width: 4.5rem; height: 4.5rem; object-fit: cover; }
.cart-row.compact img { width: 3.5rem; height: 3.5rem; }
.cart-item-copy { min-width: 0; display: grid; gap: .2rem; }
.cart-item-copy small { color: var(--muted); }
.cart-row input { width: 4.5rem; }
.remove-button {
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--crimson);
  cursor: pointer;
  font-weight: var(--weight-strong);
}
.cart-total, .summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cart-total { border-top: 1px solid var(--line); padding-block: 1.1rem; font-size: 1.2rem; }
.empty-state { padding: 2rem; border: 1px solid var(--line); background: var(--surface); text-align: center; }
.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  gap: 2rem;
  align-items: start;
}
.checkout h1 { font-size: clamp(2.7rem, 6vw, 4.5rem); }
.form-stack, .form-grid { display: grid; gap: .9rem; }
.form-stack label, .form-grid label { display: grid; gap: .4rem; color: var(--muted); font-weight: var(--weight-strong); }
input, select, textarea {
  width: 100%;
  min-height: 2.8rem;
  border: 1px solid var(--line);
  border-radius: .35rem;
  background: var(--surface);
  color: var(--fg);
  padding: .7rem .8rem;
  transition: border-color .18s var(--ease-out-quart), box-shadow .18s var(--ease-out-quart), background .18s var(--ease-out-quart);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 22%, transparent);
}
input[type="checkbox"],
input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  flex: 0 0 1.05rem;
  margin: 0;
  padding: 0;
  accent-color: var(--gold);
  box-shadow: none;
}
textarea { resize: vertical; }
fieldset { border: 1px solid var(--line); padding: 1rem; }
legend { color: var(--gold); font-weight: var(--weight-strong); padding-inline: .35rem; }
.inline { display: flex !important; align-items: center; gap: .55rem !important; font-weight: 600 !important; }
.inline input { width: auto; min-height: auto; }
.summary, .status-card {
  position: sticky;
  top: 7rem;
  border-top: 2px solid var(--gold);
  background: var(--surface);
  padding: 1.25rem;
}
.summary h2 { margin-top: 0; font-size: 1.65rem; }
.summary .grand { border-top: 1px solid var(--line); margin-top: .85rem; padding-top: .85rem; font-size: 1.2rem; }
.table-wrap { overflow: auto; border: 1px solid var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .85rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
th { color: var(--gold); font-size: .78rem; }
.muted, small { color: var(--muted); }
.error { color: oklch(70% .17 25); }

.admin-body {
  --bg: var(--onyx);
  --surface: oklch(17% .005 60);
  --surface-alt: oklch(21% .006 60);
  --fg: var(--champagne);
  --muted: oklch(78% .008 70);
  --line: oklch(74% .09 78 / .18);
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
}
.admin-light .admin-body {
  --bg: var(--ivory);
  --surface: white;
  --surface-alt: var(--cream);
  --fg: var(--ink);
  --muted: var(--muted-ink);
  --line: oklch(86% .018 75);
}
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; }
.login-card, .panel { border: 1px solid var(--line); background: var(--surface); }
.login-card { width: min(27rem, 100%); display: grid; gap: 1rem; padding: 1.5rem; }
.login-card h1 { margin: 0; color: var(--gold); }
.login-card label { display: grid; gap: .4rem; color: var(--muted); font-weight: 700; }
.admin-layout { min-height: 100vh; display: grid; grid-template-columns: 17rem minmax(0, 1fr); }
.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-inline-end: 1px solid var(--line);
  background: var(--surface);
  padding: 1.35rem;
}
.admin-sidebar .brand { color: var(--gold); font-size: 1.4rem; letter-spacing: .12em; }
.admin-sidebar nav { display: grid; gap: .25rem; }
.admin-sidebar nav a {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  padding: .6rem .75rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}
.admin-sidebar nav a.active, .admin-sidebar nav a:hover { border-color: var(--line); background: var(--surface-alt); color: var(--fg); }
.admin-main { min-width: 0; padding: 1.25rem; }
.admin-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin: -1.25rem -1.25rem 1.25rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
}
.admin-top h1 { margin: 0; font-size: 2rem; }
.admin-top p { margin: .2rem 0 0; color: var(--muted); }
.admin-actions { display: flex; gap: .6rem; align-items: center; }
.icon-button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  transition: color .2s var(--ease-out-quart), border-color .2s var(--ease-out-quart), transform .2s var(--ease-out-quart);
}
.icon-button:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-1px); }
.icon-button:active { transform: scale(.96); }
.panel { padding: 1rem; margin-bottom: 1rem; }
.panel h2 { margin: 0; font-size: 1.75rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.metrics div, .detail-grid div { border: 1px solid var(--line); background: var(--surface); padding: 1rem; }
.metrics span, .detail-grid span, .section-type { display: block; color: var(--gold); font-size: .76rem; font-weight: 800; }
.metrics strong { font-size: 1.45rem; }
.admin-table { min-width: 58rem; }
.admin-body .button.primary {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--onyx);
}
.admin-body .button.primary:hover {
  border-color: var(--gold-soft);
  background: var(--gold-soft);
  color: var(--onyx);
}
.admin-light .admin-body .button.primary {
  border-color: var(--burgundy);
  background: var(--burgundy);
  color: var(--champagne);
}
.admin-light .admin-body .button.primary:hover {
  border-color: var(--crimson);
  background: var(--crimson);
  color: var(--champagne);
}
.admin-body .button.primary:disabled {
  opacity: 1;
  border-color: color-mix(in oklab, var(--gold) 52%, var(--surface));
  background: color-mix(in oklab, var(--gold) 52%, var(--surface));
  color: var(--fg);
}
.admin-light .admin-body .button.primary:disabled {
  border-color: color-mix(in oklab, var(--burgundy) 62%, var(--surface));
  background: color-mix(in oklab, var(--burgundy) 62%, var(--surface));
  color: var(--champagne);
}
.order-save { min-width: 4.75rem; }
.thumb { width: 3.5rem; height: 3.5rem; object-fit: cover; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); gap: .8rem; margin-top: 1rem; }
.media-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); }
.home-sections-stack { display: grid; gap: 1rem; }
.home-section-card { margin: 0; }
.section-controls { display: flex; align-items: center; gap: 1rem; }
.section-controls label { min-width: 6rem; }
.locale-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.locale-grid fieldset, .admin-repeat-grid fieldset { display: grid; gap: .75rem; }
.locale-grid label, .admin-repeat-grid label { display: grid; gap: .35rem; color: var(--muted); font-weight: 700; }
.admin-repeat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.compact-grid { margin-top: 1rem; }
.product-locales { border: 1px solid var(--line); }
.product-locales > div { display: grid; gap: .8rem; }

[dir="rtl"] .store-brand { letter-spacing: .24em; }
[dir="rtl"] .hero-content h1,
[dir="rtl"] .signature-copy h2,
[dir="rtl"] .section-heading h2,
[dir="rtl"] .craft-copy h2,
[dir="rtl"] .delivery-copy h2,
[dir="rtl"] .final-cta h2 { letter-spacing: 0; }

@media (max-width: 980px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signature-section, .craft-story, .delivery-section, .product-detail, .checkout { grid-template-columns: 1fr; }
  .signature-copy { max-width: 44rem; }
  .buy-panel, .summary, .status-card { position: static; }
  .review-grid { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .admin-sidebar nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metrics, .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-repeat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --page: min(100% - 2rem, 78rem); }
  .nav-shell { grid-template-columns: 1fr auto; min-height: 4.75rem; }
  .desktop-nav { display: none; }
  .menu-control { display: inline-grid; }
  .mobile-menu,
  .mobile-menu.open {
    position: absolute;
    inset: calc(100% - .25rem) 1rem auto;
    width: auto;
    margin: 0;
    display: grid;
    gap: .25rem;
    z-index: 45;
    padding: .65rem 1rem 1rem;
    border: 1px solid var(--line);
    background: color-mix(in oklab, var(--surface) 96%, transparent);
    color: var(--fg);
    box-shadow: 0 .45rem .5rem rgba(0,0,0,.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-.65rem) scale(.985);
    transform-origin: top center;
    transition: opacity .2s var(--ease-out-quart), transform .24s var(--ease-out-quint), visibility 0s linear .24s;
  }
  .mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }
  .home-hero .mobile-menu {
    border-color: rgba(255,255,255,.18);
    background: rgba(16,12,12,.94);
    color: var(--champagne);
  }
  .hero-content { padding-block: 9rem 3.5rem; }
  .hero-content h1 { font-size: clamp(2.1rem, 8.5vw, 3rem); }
  [dir="rtl"] .buy-panel h1 { font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
  .hero-actions .button { flex: 1 1 100%; }
  .section-heading.split { align-items: start; flex-direction: column; }
  .color-tiles { grid-template-columns: 1fr; }
  .color-tiles article { display: grid; grid-template-columns: minmax(8rem, .8fr) 1.2fr; }
  .color-tiles img { height: 100%; aspect-ratio: 4 / 5; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .content-page { width: min(100% - 2.5rem, 52rem); }
  .contact-details strong { min-width: 100%; }
  .gallery { grid-template-columns: 1fr; }
  .admin-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-top { align-items: flex-start; flex-direction: column; }
  .metrics, .detail-grid, .form-grid, .locale-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; }
  .contact-grid { grid-template-columns: 1fr; }
  .sitemap-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .store-brand { font-size: 1.15rem; letter-spacing: .24em; }
  .nav-actions { gap: .35rem; }
  .nav-control { min-width: 2.75rem; min-height: 2.75rem; }
  .language-control { padding-inline: .6rem; }
  .product-grid { grid-template-columns: 1fr; }
  .signature-section { padding-block: 3.5rem; }
  .collection-section, .craft-section, .reviews-section { padding-block: 3.5rem; }
  .cart-row { grid-template-columns: 3.75rem minmax(0, 1fr); }
  .cart-row img { width: 3.75rem; height: 3.75rem; }
  .cart-row input, .cart-row .remove-button, .cart-row > strong { grid-column: 2; }
  .section-controls { align-items: flex-start; flex-direction: column; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .admin-main { padding: .8rem; }
  .admin-top { margin: -.8rem -.8rem 1rem; padding: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .promise-track { transform: none !important; }
  /* Content must never depend on motion to become visible. */
  [data-reveal],
  .motion-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .home-hero video { transform: none !important; }
  .product-card:hover { transform: none !important; }
  .product-image::after { display: none; }
  .scroll-progress { display: none; }
}

/* Commerce catalog and product landing */
.featured-section,
.related-products {
  padding: clamp(4rem, 8vw, 7rem) max(1.25rem, calc((100vw - 78rem) / 2));
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .75rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background: var(--surface-alt);
}
.shop-filters label { display: grid; gap: .35rem; min-width: min(100%, 13rem); font-weight: var(--weight-medium); }
.product-landing { background: var(--bg); }
.product-purchase {
  width: var(--page);
  margin-inline: auto;
  padding-block: clamp(2rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.product-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.product-gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--surface-alt);
}
.product-gallery img:first-child { grid-column: 1 / -1; }
.product-landing .buy-panel {
  position: sticky;
  inset-block-start: 7rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  background: var(--surface);
}
.product-breadcrumbs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.25rem; color: var(--muted); font-size: .85rem; }
.product-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .65rem; }
.product-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--gold) 16%, var(--surface));
  color: color-mix(in oklab, var(--gold) 72%, var(--fg));
  font-size: .72rem;
  font-weight: var(--weight-strong);
}
.buy-panel h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.22; letter-spacing: 0; }
.product-lead { max-width: 58ch; color: var(--muted); line-height: 1.8; }
.variant-picker { margin: 1.25rem 0; padding: 0; border: 0; }
.variant-picker legend { margin-bottom: .65rem; font-weight: var(--weight-strong); }
.variant-picker > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.variant-swatch {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}
.variant-swatch > span:first-child,
.inventory-swatch {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  display: inline-block;
  border: 1px solid color-mix(in oklab, var(--fg) 25%, transparent);
  border-radius: 999px;
  background: var(--swatch);
}
.variant-swatch.selected { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 12%, var(--surface)); }
.variant-swatch:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.variant-facts { min-height: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; color: var(--muted); font-size: .85rem; }
.purchase-assurance { display: grid; gap: .45rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.purchase-assurance a { color: var(--gold); font-weight: var(--weight-strong); }
.product-benefits {
  padding: 1.25rem max(1.25rem, calc((100vw - 78rem) / 2));
  border-block: 1px solid var(--line);
  background: var(--surface-alt);
}
.product-benefits ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 3rem;
  list-style: none;
  font-weight: var(--weight-medium);
}
.product-benefits li::before { content: "✦"; margin-inline-end: .5rem; color: var(--gold); }
.product-story {
  width: var(--page);
  margin-inline: auto;
  padding-block: clamp(4rem, 9vw, 8rem);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
}
.product-story h2 { margin: .5rem 0 1rem; font-size: clamp(2.5rem, 5vw, 4.75rem); letter-spacing: -.02em; }
.product-story p { max-width: 65ch; line-height: 1.9; color: var(--muted); }
.product-story img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.product-care {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.product-care > div { padding: clamp(2rem, 6vw, 5rem) max(1.25rem, calc((100vw - 78rem) / 4)); background: var(--surface-alt); }
.product-care h2 { margin-top: 0; font-size: 2rem; }
.product-care p { max-width: 65ch; line-height: 1.8; color: var(--muted); }

/* Operational admin additions */
.muted { color: var(--muted); }
.row-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.row-actions form { margin: 0; }
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}
.status-badge.success { background: oklch(38% .09 150 / .22); color: oklch(82% .1 150); }
.admin-light .status-badge.success { color: oklch(35% .11 150); }
.status-badge.warning { background: oklch(70% .11 80 / .2); color: var(--gold-soft); }
.admin-light .status-badge.warning { color: oklch(45% .12 70); }
.status-badge.danger { background: oklch(48% .16 25 / .2); color: oklch(78% .12 25); }
.admin-filters,
.admin-create-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .65rem;
  margin-bottom: 1rem;
}
.admin-filters label { display: grid; gap: .3rem; }
.admin-pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }
.admin-filters input,
.admin-filters select,
.admin-create-row input { min-width: 10rem; }
.inline-edit { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; min-width: 34rem; }
.inline-edit input { width: 8rem; }
.product-editor,
.admin-settings-stack { max-width: 84rem; margin-inline: auto; }
.product-editor .panel { padding: clamp(1rem, 2vw, 1.5rem); }
.variant-stack { display: grid; gap: 1rem; }
.variant-editor {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}
.variant-editor legend { padding-inline: .45rem; font-weight: 800; }
.choice-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
label.choice-chip {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font-weight: 700;
  transition: border-color .18s var(--ease-out-quart), background .18s var(--ease-out-quart), color .18s var(--ease-out-quart);
}
label.choice-chip:hover { border-color: var(--gold); }
label.choice-chip:has(input:checked) {
  border-color: var(--gold);
  background: color-mix(in oklab, var(--gold) 13%, var(--surface));
}
label.choice-chip input { width: 1.05rem; min-height: 0; }
.field-label { display: block; color: var(--muted); font-weight: 700; }
.admin-product-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}
.admin-image-item { padding: .75rem; border: 1px solid var(--line); background: var(--surface-alt); }
.admin-image-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: .7rem; }
.admin-image-item label { display: grid; gap: .3rem; margin-top: .55rem; }
.danger-choice { color: oklch(72% .13 25); }
.sticky-save-bar {
  position: sticky;
  inset-block-end: .75rem;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-block: 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  background: var(--surface);
}
.sticky-save-bar div { display: grid; }
.sticky-save-bar span { color: var(--muted); font-size: .8rem; }
.integration-grid,
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.integration-grid fieldset { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--line); }
.integration-grid label { display: grid; gap: .35rem; }
.integration-grid .inline { display: flex; }

@media (max-width: 980px) {
  .product-purchase,
  .product-story { grid-template-columns: 1fr; }
  .product-landing .buy-panel { position: static; }
  .product-story img { max-height: 44rem; }
}

@media (max-width: 760px) {
  .product-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .product-gallery img {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
  .product-gallery img:first-child { grid-column: auto; }
  .product-care,
  .integration-grid,
  .analytics-grid { grid-template-columns: 1fr; }
  .sticky-save-bar { align-items: stretch; flex-direction: column; inset-block-end: 0; }
  .sticky-save-bar .button { width: 100%; }
  .inline-edit { min-width: 30rem; }
}