*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Native <button> keeps appearance:auto unless told otherwise, and this
   engine suppresses author box-shadow on auto-appearance buttons — every
   button-based control on the site (nav icons, filter pills, add-to-cart,
   swatches, CTAs) was silently losing its shadow. One reset, not a dozen
   per-class patches. */
button { appearance: none; -webkit-appearance: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   Anchored on the logo mark: teal-green #517971 over slate #2D3E46.
   Before this, the sheet ran three palettes at once — terracotta/sage names
   holding navy values, plus ~30 hard-coded leftovers from the original warm
   scheme. Everything below resolves to the single brand palette.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ── */
  --brand:         #3F6A60;  /* logo teal, deepened to clear AA on paper (5.8:1) */
  --brand-deep:    #2C4B44;  /* pressed / hover */
  --brand-lift:    #8FBAAC;  /* brand on DARK surfaces (6.7:1 on --ink) */
  --brand-tint:    #EDF2F0;  /* pale wash for selected / hover fills */
  --brand-ring:    rgba(63, 106, 96, 0.32);

  /* ── Warm accent: prices, sale, anything that should feel like the product
        photography rather than the chrome. ── */
  --accent:        #9C6430;  /* AA on paper (4.7:1) — safe for text */
  --accent-bright: #B4763A;  /* fills and decoration only, not small text */
  --accent-tint:   #F7EFE6;

  /* ── Surfaces ── */
  --paper:         #FAF9F5;
  --paper-alt:     #F4F1EA;
  --paper-sunk:    #EFEBE2;
  --line:          #E5E1D8;
  --line-strong:   #D2CDC1;

  /* ── Ink ── */
  --ink:           #1E2B30;
  --ink-soft:      #2D3E46;
  --ink-muted:     #5C6B70;
  --ink-faint:     #8A9599;
  --ink-on-dark:   #CFD6D4;

  /* ── Feedback — muted to sit inside the palette, replacing the stock
        Flat-UI 2011 rainbow this sheet shipped with. ── */
  --ok:            #3E7D5A;
  --ok-tint:       #E9F2EC;
  --warn:          #9A6B1F;
  --warn-tint:     #F8F1DE;
  --danger:        #A8402F;
  --danger-tint:   #F9EBE8;
  --info:          #35606E;
  --info-tint:     #E9F0F2;
  /* on-dark steps — the admin panel sits on #141D21, where the light-surface
     feedback colours above go muddy. */
  --ok-lift:       #6FBF8F;
  --warn-lift:     #E3AC55;
  --danger-lift:   #E58573;
  --info-lift:     #6FB3C9;
  --neutral-lift:  #9FB0B6;

  /* ── Legacy aliases ──────────────────────────────────────────────────────
     Several hundred declarations still reference these names. They stay as
     aliases onto the palette above rather than being renamed across 2,000
     lines. Use the tokens above for new work.
     Note --terracotta-light and --warm-gray-light are both "on dark surface"
     colours (footer, .products-section, .auth-card-header), which is why they
     resolve light rather than to a deeper brand step. */
  --terracotta:       var(--brand);
  --terracotta-light: var(--brand-lift);
  --terracotta-pale:  var(--brand-tint);
  --sage:             var(--ok);
  --cream:            var(--paper);
  --cream-dark:       var(--paper-sunk);
  --charcoal:         var(--ink);
  --charcoal-mid:     var(--ink-soft);
  --warm-gray:        var(--ink-muted);
  --warm-gray-light:  var(--ink-on-dark);

  /* ── Type ──
     --font-display was 'Playpen Sans Arabic', a casual handwriting face, on
     every section title, product name and price. Vazirmatn at 700 carries the
     display role properly; the serif is kept for the Latin wordmark only. */
  --font-display:  'Vazirmatn', system-ui, sans-serif;
  --font-body:     'Vazirmatn', system-ui, sans-serif;
  --font-ui:       'Vazirmatn', system-ui, sans-serif;
  --font-wordmark: 'Playfair Display', Georgia, serif;

  /* ── Elevation — tinted with the ink hue, never neutral black ── */
  --shadow-sm: 0 1px 2px rgba(30, 43, 48, 0.05), 0 2px 6px rgba(30, 43, 48, 0.04);
  --shadow-md: 0 2px 4px rgba(30, 43, 48, 0.04), 0 10px 24px rgba(30, 43, 48, 0.07);
  --shadow-lg: 0 4px 10px rgba(30, 43, 48, 0.05), 0 20px 48px rgba(30, 43, 48, 0.11);

  /* ── Radii ── */
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-pill: 999px;

  --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);

  /* Nav is a floating island, not a flush top bar — every page that pads
     itself clear of the nav reads off this one number. Change the island's
     geometry, change this, everything downstream follows. */
  --nav-clear: 96px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Persian numerals and the Latin ones in prices sit on different default
     figure widths; tabular figures stop prices jittering as they update. */
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

/* ── FOCUS ───────────────────────────────────────────────────────────────────
   The sheet had no focus styling at all, and several controls set
   `outline: none` — keyboard users had nothing to follow. One ring, on
   :focus-visible only, so it never shows on mouse clicks. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* Dark surfaces need the light brand step to keep the ring visible. */
.products-section :focus-visible, footer :focus-visible,
.admin-page :focus-visible, .auth-card-header :focus-visible {
  outline-color: var(--brand-lift);
}

/* Text inputs previously killed their outline with no replacement; give the
   focused field a ring in the brand hue instead. */
input:focus, textarea:focus, select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

::selection { background: var(--brand-ring); color: var(--ink); }

/* A thin, brand-tinted scrollbar instead of the OS-default grey slab —
   shows up everywhere: the page itself, the search results list, any
   overflow-y panel. Firefox first (needs the properties on the scrolling
   element itself), then the webkit pseudo-elements. */
html { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 2px solid var(--paper); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: padding-box; }

/* Images should never letterbox into a stretched aspect. */
img { max-width: 100%; }

/* ── rules ── */

.modal1 {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
}

.modal1.show {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal1-content {
  background: var(--cream, #fff);
  padding: 20px;
  border-radius: 12px;
  max-width: 520px;
  width: 92%;
  position: relative;
}

.close1 {
  position: absolute;
  top: 0px;
  right: 10px;
  cursor: pointer;
  font-size: 22px;
}


/* ── PAGE SYSTEM ── */
.page { display: none; min-height: 100vh; }
.page.active { display: block; }

/* ── NAV ── */
/* ═══════ NAV ═══════
   Was 6 text links + two more spelled-out action buttons ("جستجو", "حساب
   کاربری") + a cart button carrying its OWN count twice over ("سبد خرید (۰)"
   as label text, plus a "۰" badge circle) — too much Persian text to fit one
   row, so it wrapped onto two lines anywhere under ~1050px. Actions are now
   icon buttons (a fraction of the width), and the collapse breakpoint moved
   up from 640px to 960px so the full bar never gets that crowded band where
   it used to wrap. */
/* Floating glass island, detached from the edge, instead of a bar flush to
   the top — the single biggest signature of "someone designed this" vs.
   "this is a template." Every page's top offset reads from --nav-clear so
   this is the only place the island's own geometry needs tuning. */
/* Solid glass state — the default and only state on every page except the
   home page's hero. A full stadium pill with a glossy top highlight read as
   trying too hard; this is a quieter rounded bar: restrained radius, a
   hairline border doing the definition work instead of a bright inset
   highlight, blur toned down so it reads as glass, not milk. */
/* The glass card (background/blur/border/shadow) lives on ::before, not on
   nav itself. filter/backdrop-filter on an element makes IT the containing
   block for any position:fixed descendant — which silently broke the mobile
   full-screen menu (a fixed, inset:0 child of nav): instead of covering the
   viewport, "fixed" was resolving against nav's own ~60px-tall pill. A
   pseudo-element has no descendants of its own to break, so it can carry the
   blur while nav stays a plain, non-containing positioning context. */
nav {
  position: fixed;
  top: 14px; left: 20px; right: 20px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.75rem;
  height: 64px;
  max-width: 1360px;
  margin: 0 auto;
  color: var(--charcoal-mid);
  transition: color 0.5s var(--ease-out), top 0.4s var(--ease-out);
}
nav::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 18px;
  background: rgba(250, 249, 245, 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(30, 43, 48, 0.06);
  box-shadow: 0 1px 1px rgba(30, 43, 48, 0.03), 0 10px 28px rgba(30, 43, 48, 0.09);
  transition: background 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  pointer-events: none;
}
/* Parked over the home hero, unscrolled: no card at all — just the mark and
   icons sitting directly on the photo in white, so the nav reads as part of
   the hero rather than a bar dropped on top of it. Solidifies the instant
   you scroll or land on any other page. */
nav.on-hero { top: 22px; color: rgba(255, 255, 255, 0.92); }
nav.on-hero::before {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}
.nav-logo {
  position: relative; z-index: 2;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.nav-logo-img { height: 46px; width: auto; display: block; }
/* Text fallback for a broken/missing logo image — see the onerror handler in
   termeh.html. Uses color:inherit so it automatically follows nav's own
   colour rules (dark on the solid nav, white on-hero) with no extra logic. */
.nav-logo-fallback-text {
  display: none; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
  color: inherit; letter-spacing: 0.01em;
}
.nav-logo-fallback-text em { font-style: normal; color: var(--brand-lift); }
.nav-logo.logo-fallback .nav-logo-fallback-text { display: inline-flex; }
.footer-brand .nav-logo-fallback-text { font-size: 1.6rem; }
.nav-links { display: flex; gap: clamp(1.25rem, 2.4vw, 2.5rem); list-style: none; white-space: nowrap; }
.nav-links a {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--charcoal-mid);
  text-decoration: none;
  position: relative;
  transition: color var(--transition);
  cursor: pointer;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1.5px;
  background: var(--terracotta);
  transition: width var(--transition);
}
.nav-links a:hover { color: var(--terracotta); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.nav-active { color: var(--terracotta); }
.nav-links a.nav-active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; }

/* Search + account: plain ghost icon buttons — a circle that tints on hover. */
.nav-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--charcoal-mid);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.nav-icon-btn:hover { background: var(--brand-tint); color: var(--brand); }
.nav-icon-btn svg { display: block; }
/* Small dot on the account icon once signed in — the name itself lives in
   the button's title/aria-label so the bar never has to reflow for it. */
.nav-icon-btn.is-logged-in::after {
  content: '';
  position: absolute; top: 6px; inset-inline-end: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  border: 1.5px solid var(--paper);
}

/* Cart: the one filled action, so it stays the visual anchor among ghost icons. */
.nav-cart {
  background: var(--brand);
  color: #fff;
}
.nav-cart:hover { background: var(--brand-deep); color: #fff; }
.cart-count-badge {
  position: absolute;
  top: -4px; inset-inline-end: -4px;
  min-width: 17px; height: 17px; padding: 0 3px;
  background: var(--ink);
  color: white;
  border: 1.5px solid var(--paper);
  border-radius: 50%;
  font-size: 0.62rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-weight: 700;
  display: none;
}

/* Hamburger: three bars that morph into an X, replacing the plain "☰"/"✕"
   glyph swap (no animation, and a different visual weight in each state). */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  border: none; background: transparent; border-radius: 50%;
  cursor: pointer;
}
.nav-toggle:hover { background: var(--brand-tint); }
.nav-toggle .bar {
  width: 18px; height: 1.6px; border-radius: 1px;
  background: var(--ink-soft);
  transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out), width 0.3s var(--ease-out);
}
.nav-toggle.open .bar:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-toggle.open .bar:nth-child(2) { opacity: 0; }
.nav-toggle.open .bar:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* Light-on-dark palette for the transparent state — everything above is
   authored for the solid glass pill; these are the only overrides needed
   to read correctly straight on the hero photo. */
nav.on-hero .nav-links a { color: rgba(255, 255, 255, 0.92); }
nav.on-hero .nav-links a::after { background: #fff; }
nav.on-hero .nav-links a:hover { color: #fff; }
nav.on-hero .nav-links a.nav-active { color: #fff; }
nav.on-hero .nav-icon-btn { color: rgba(255, 255, 255, 0.92); }
nav.on-hero .nav-icon-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
nav.on-hero .nav-icon-btn.is-logged-in::after { border-color: transparent; }
nav.on-hero .nav-cart { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
nav.on-hero .nav-toggle:hover { background: rgba(255, 255, 255, 0.16); }
nav.on-hero .nav-toggle .bar { background: #fff; }
/* The mobile dropdown is always an opaque paper card once open, regardless
   of what the collapsed bar is doing — its own links must stay dark. */
nav.on-hero .nav-links.open a { color: var(--charcoal-mid); }
nav.on-hero .nav-links.open a:hover, nav.on-hero .nav-links.open a.nav-active { color: var(--terracotta); }
nav.on-hero .nav-links.open a::after { background: var(--terracotta); }
/* While the full-screen menu is open, ground the bar's icons/logo back to
   dark too — otherwise the (still white, on-hero) toggle/search/account/cart
   icons sit unreadable against the menu's light paper backdrop right behind
   them. Driven by a plain class toggleMobileNav() sets on <nav> itself
   (see app.js), not :has(), so it doesn't depend on browser support. */
nav.on-hero.menu-open { color: var(--charcoal-mid); }
nav.on-hero.menu-open::before {
  background: rgba(250, 249, 245, 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-color: rgba(30, 43, 48, 0.06);
  box-shadow: 0 1px 1px rgba(30, 43, 48, 0.03), 0 10px 28px rgba(30, 43, 48, 0.09);
}
nav.on-hero.menu-open .nav-icon-btn { color: var(--charcoal-mid); }
nav.on-hero.menu-open .nav-icon-btn:hover { background: var(--brand-tint); color: var(--brand); }
nav.on-hero.menu-open .nav-toggle:hover { background: var(--brand-tint); }
nav.on-hero.menu-open .nav-toggle .bar { background: var(--ink-soft); }

/* ── SEARCH OVERLAY ──
   Was a plain dark scrim + a small square card with a text-glyph "⌕" icon;
   rebuilt as a command-palette-style panel — heavier blur, a real magnifier
   icon, and result rows that feel like the rest of the site's cards rather
   than plain list rows. */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 16, 12, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 300;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
}
.search-overlay.open { opacity: 1; pointer-events: all; }
.search-box {
  background: var(--paper);
  width: min(640px, 90vw);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(20, 16, 12, 0.32), 0 6px 20px rgba(20, 16, 12, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transform: translateY(-24px) scale(0.98);
  transition: transform 0.4s var(--ease-out);
}
.search-overlay.open .search-box { transform: translateY(0) scale(1); }
.search-input-wrap {
  display: flex; align-items: center;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--line);
  gap: 1rem;
  color: var(--ink-faint);
}
.search-input-wrap input {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 500;
  border: none; outline: none;
  background: transparent;
  color: var(--charcoal);
}
.search-input-wrap input::placeholder { color: var(--ink-faint); font-weight: 400; }
.search-close {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--paper-sunk);
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  color: var(--warm-gray);
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.search-close:hover { background: var(--brand); color: white; }
.search-results { padding: 0.75rem; max-height: 420px; overflow-y: auto; }
.search-result-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s var(--ease-out);
}
.search-result-item:hover { background: var(--brand-tint); }
.search-result-thumb {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.search-result-info { flex: 1; min-width: 0; }
.search-result-name {
  font-family: var(--font-display); font-size: 0.95rem;
  font-weight: 600; color: var(--charcoal);
}
.search-result-cat {
  font-family: var(--font-ui); font-size: 0.75rem;
  color: var(--warm-gray);
}
.search-result-price {
  font-family: var(--font-display); font-size: 1rem;
  font-weight: 600; color: var(--brand); flex-shrink: 0;
}
.search-empty {
  padding: 3rem 1.5rem;
  font-family: var(--font-ui); color: var(--ink-faint);
  font-size: 0.9rem;
  text-align: center;
}

/* ── HERO ── */
/* ═══════ HERO ═══════
   Was a rigid 1fr/1fr split: copy on the right, a decorative hand-drawn pot
   illustration sitting on a plain tint on the left. Replaced with a single
   centered column over the store's real signature product photo (the same
   79 KB derivative used everywhere else as og:image) — one composition, no
   second panel competing with the copy. */
.hero {
  position: relative;
  /* True full screen on every device, not capped at 780px — dvh first so
     mobile Safari doesn't count its own address bar as page height and leave
     the hero short/jumping as the bar shows and hides; vh is the fallback
     for browsers that don't support the unit. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 148px 6vw 4.5rem;
  overflow: hidden;
  background-color: #14100c;
  /* Admin-configurable (Homepage → hero background) — see applyHeroCustomization()
     in app.js. Defaults reproduce the original fixed look exactly. */
  --hero-blur: 0px;
  --hero-dim: 0.86;
}
/* Photo + dimming gradient are separate layers behind .hero-inner rather than
   properties of .hero itself, so blur() only ever touches the photo — applying
   filter:blur() to .hero directly would blur the headline and CTAs with it.
   inset:-24px overscans the blurred layer so its own edges (which blur()
   softens/reveals) never show inside the section's bounds. */
.hero-bg-layer {
  position: absolute; inset: -24px; z-index: 0;
  background-size: cover; background-position: center 38%;
  background-image:
    image-set(url('img/hero-texture.webp') type('image/webp'),
              url('img/hero-texture.jpg')  type('image/jpeg'));
  filter: blur(var(--hero-blur));
  transition: filter 0.25s ease;
}
.hero-dim-layer {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(195deg,
    rgba(18,14,10, var(--hero-dim)) 0%,
    rgba(18,14,10, calc(var(--hero-dim) * 0.7)) 45%,
    rgba(18,14,10, calc(var(--hero-dim) * 0.95)) 100%);
  transition: background 0.25s ease;
}
.hero-inner {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 700px;
}
.hero-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--brand-lift);
  margin-bottom: 1.75rem;
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.1s forwards;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 2rem; height: 1.5px;
  background: var(--brand-lift);
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  max-width: 16ch;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.25s forwards;
}
.hero-title em { font-style: normal; color: var(--brand-lift); font-weight: 700; }
.hero-desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.82);
  max-width: 460px;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.4s forwards;
}
.hero-ctas {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.55s forwards;
}
.btn-primary {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--brand);
  color: #fff;
  border: 1.5px solid var(--brand);
  padding: 0.95rem 2.2rem;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--shadow-sm);
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out), transform 0.18s var(--ease-out);
}
.btn-primary:hover {
  background: var(--brand-deep); border-color: var(--brand-deep);
  box-shadow: var(--shadow-md); transform: translateY(-1px);
}
/* Buttons had no pressed state at all — taps felt inert on mobile. */
.btn-primary:active { transform: translateY(0) scale(0.985); box-shadow: var(--shadow-sm); }
.btn-ghost {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--charcoal-mid);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  cursor: pointer;
  background: none; border: none;
  transition: color var(--transition), gap var(--transition);
}
.btn-ghost:hover { color: var(--terracotta); gap: 0.85rem; }
.btn-ghost .arrow { font-size: 1rem; }
/* .hero-ctas sits on the dark photo, where the ghost button's default ink
   color would be unreadable — lighten it just in that context. */
.hero-ctas .btn-ghost { color: rgba(255,255,255,0.88); }
.hero-ctas .btn-ghost:hover { color: var(--brand-lift); gap: 0.85rem; }
.hero-stats {
  display: flex; justify-content: center; gap: clamp(1.75rem, 5vw, 3rem);
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.16);
  opacity: 0;
  animation: fadeUp 0.8s 0.7s forwards;
}
.stat-number {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 600;
  color: #fff; line-height: 1; margin-bottom: 0.25rem;
}
.stat-label {
  font-family: var(--font-ui);
  font-size: 0.78rem; color: rgba(255,255,255,0.65);
}

/* Featured-product nudge — was an absolutely positioned card floating over
   the decorative illustration; now a small inline pill under the stats, so
   it reads as secondary to the primary CTA rather than a second focal point. */
.hero-spotlight {
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin-top: 2.25rem;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-pill);
  text-decoration: none; color: inherit; cursor: pointer;
  opacity: 0;
  animation: fadeUp 0.8s 0.85s forwards;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}
.hero-spotlight:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.36); transform: translateY(-1px); }
.hero-spotlight-thumb {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-lift);
  display: block; overflow: hidden;
}
/* Swapped in by renderHeroProduct() when the featured product has a photo. */
.hero-product-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-spotlight-text { text-align: start; }
.hero-tag-name { display: block; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: #fff; }
.hero-tag-price { display: block; font-family: var(--font-ui); font-size: 0.74rem; color: rgba(255,255,255,0.68); margin-top: 0.1rem; }
.hero-spotlight-arrow { color: rgba(255,255,255,0.55); font-size: 0.85rem; margin-inline-start: 0.15rem; }

/* ── ANNOUNCEMENT BAR ── (admin-editable single line; replaces the old marquee) */
.announce-bar {
  background: var(--ink);
  padding: 1.1rem 2rem; text-align: center;
}
.announce-text {
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600;
  color: var(--cream); opacity: 0.9;
  max-width: 900px; margin: 0 auto; line-height: 1.6;
}

/* ── SECTIONS ── */
.section { padding: 8.5rem 8vw; }
.section-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 4.5rem;
}
/* Was plain small text with a hairline before it; now a real pill/badge —
   the "eyebrow tag" treatment every section anchors on. */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600;
  color: var(--brand);
  background: var(--brand-tint);
  padding: 0.4rem 0.95rem 0.4rem 0.75rem;
  border-radius: var(--r-pill);
  margin-bottom: 1.5rem;
}
.section-eyebrow::before { content: '✦'; font-size: 0.85em; line-height: 1; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.4vw, 4rem); font-weight: 800;
  color: var(--charcoal); line-height: 1.08;
}
.section-title em { font-style: normal; color: var(--brand); }
.section-link {
  font-family: var(--font-ui); font-size: 0.82rem; color: var(--warm-gray);
  text-decoration: none;
  display: flex; align-items: center; gap: 0.4rem;
  transition: color var(--transition); white-space: nowrap;
  padding-bottom: 0.25rem; cursor: pointer; background: none; border: none;
}
.section-link:hover { color: var(--terracotta); }

/* ── CATEGORIES ── */
.categories-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.5rem;
}
.cat-card {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  cursor: pointer; background: var(--cream-dark);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
/* Was image-only zoom on hover; the card itself never moved, so it read flat
   against the page. Now the whole tile lifts, matching product/testimonial
   cards elsewhere on the same page. */
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cat-card:first-child { grid-row: 1 / 3; }
.cat-inner { position: relative; height: 100%; }
/* The tall first card spans both rows and so sets the grid's height; each of
   the other rows ends up ~396px. Those cards used to lock .cat-inner to a 1.4
   aspect (~207px at that column width), leaving a slab of empty card colour
   under every image. They now fill the row they are given. */
.cat-card:first-child .cat-inner { aspect-ratio: 0.72; height: auto; }
.cat-card:not(:first-child) .cat-inner { min-height: 190px; }
.cat-bg {
  position: absolute; inset: 0;
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
.cat-card:hover .cat-bg { transform: scale(1.08); filter: brightness(0.92); }
.cat-bg-1 {
  background: radial-gradient(ellipse at 50% 80%, rgba(63, 106, 96, 0.45) 0%, transparent 58%),
    linear-gradient(160deg, #33444B 0%, #2C4B44 55%, #3F6A60 100%);
}
.cat-bg-2 { background: linear-gradient(135deg, #4A5D64 0%, #223137 100%); }
.cat-bg-3 { background: linear-gradient(135deg, #567F74 0%, #29443E 100%); }
.cat-bg-4 { background: linear-gradient(135deg, #B4763A 0%, #6E4622 100%); }
.cat-decor {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; opacity: 0.12;
}
.cat-decor svg { width: 55%; height: 55%; }
/* A soft top vignette in addition to the bottom one — a bare gradient card
   with only a bottom scrim read a little flat; this frames the photo top to
   bottom like a real editorial tile. */
.cat-inner::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,16,12,0.28) 0%, transparent 22%);
}
.cat-info {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 2.25rem 2rem 2rem;
  background: linear-gradient(to top, rgba(15,12,9,0.88) 0%, rgba(15,12,9,0.35) 60%, transparent 100%);
  color: white;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.cat-info-text { flex: 1; min-width: 0; }
.cat-name {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 700; line-height: 1.2; margin-bottom: 0.35rem;
}
.cat-card:first-child .cat-name { font-size: 2.3rem; }
.cat-count {
  font-family: var(--font-ui); font-size: 0.78rem;
  color: rgba(255,255,255,0.68);
}
/* Arrow chip: static and understated at rest, steps out and brightens on
   hover — the one bit of "this tile wants to be clicked" motion the cards
   didn't have before. */
.cat-arrow {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  transform: translateY(2px) rotate(45deg);
  transition: background 0.35s var(--ease-out), transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.cat-card:hover .cat-arrow { background: var(--brand); border-color: var(--brand); transform: translateY(0) rotate(0deg); }
.cat-arrow svg { width: 16px; height: 16px; display: block; }
/* Uploaded category image fills the card (same hover-zoom as the gradients). */
.cat-bg-img { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Short category description on the home cards (clamped to keep cards even). */
.cat-desc {
  font-family: var(--font-body); font-size: 0.9rem; line-height: 1.55;
  color: rgba(255,255,255,0.82); margin-bottom: 0.5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-card:first-child .cat-desc { font-size: 0.95rem; -webkit-line-clamp: 3; }

/* ── PRODUCTS ── */
.products-section { background: var(--charcoal); }
.products-section .section-title { color: var(--cream); }
.products-section .section-eyebrow { color: var(--brand-lift); background: rgba(143, 186, 172, 0.14); }
.products-section .section-link { color: var(--warm-gray-light); }
.products-section .section-link:hover { color: var(--terracotta-light); }
.products-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
}
.product-card {
  background: var(--charcoal-mid); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(143, 186, 172, 0.28); }
.product-img {
  aspect-ratio: 1; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #3A4D55 0%, #233137 100%);
  display: flex; align-items: center; justify-content: center;
}
.product-img img { transition: transform 0.6s var(--ease-out); }
.product-card:hover .product-img img { transform: scale(1.06); }
.product-icon-wrap {
  width: 120px; height: 120px;
  transition: transform 0.5s var(--ease-out);
}
.product-card:hover .product-icon-wrap { transform: scale(1.08) translateY(-4px); }
.product-badge {
  position: absolute; top: 1rem; left: 1rem;
  font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600;
  padding: 0.35rem 0.85rem; border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.badge-new { background: var(--terracotta); color: white; }
.badge-sale { background: var(--accent); color: white; }
.badge-hot { background: var(--ink); color: var(--paper); border: 1px solid rgba(255,255,255,0.18); }
.badge-out { background: var(--ink-muted); color: white; }
/* Add-to-cart button when a product is sold out (cards + product detail). */
.btn-add:disabled, .pd-add-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.stock-note { font-family: var(--font-ui); font-size: 0.8rem; margin: 0.5rem 0 0; }
.stock-note.low { color: var(--terracotta); }
.stock-note.out { color: var(--warm-gray); }
.product-wish {
  position: absolute; top: 0.85rem; left: 0.85rem;
  width: 34px; height: 34px;
  background: rgba(30, 43, 48, 0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--warm-gray-light); font-size: 0.9rem;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}
.product-wish:hover { background: var(--terracotta); color: white; transform: scale(1.08); }
.product-wish.wished { background: var(--terracotta); color: white; }
.product-body { padding: 1.5rem 1.6rem 1.6rem; }
.product-cat {
  font-family: var(--font-ui); font-size: 0.7rem;
  color: var(--warm-gray); margin-bottom: 0.5rem;
}
.product-name {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  color: var(--cream); margin-bottom: 0.4rem; line-height: 1.3;
}
.product-desc {
  font-family: var(--font-ui); font-size: 0.8rem;
  color: var(--warm-gray); line-height: 1.6; margin-bottom: 1.25rem;
}
/* Same fix as .shop-product-footer: side-by-side left "افزودن به سبد" with no
   room, wrapping onto two lines at this card width. */
.product-footer { display: flex; flex-direction: column; align-items: stretch; gap: 0.85rem; }
.product-footer .btn-add { width: 100%; text-align: center; white-space: nowrap; }
.product-price {
  font-family: var(--font-display); font-size: 1.35rem;
  font-weight: 600; color: var(--cream);
}
.product-price-old {
  font-size: 0.85rem; color: var(--warm-gray); text-decoration: line-through;
  margin-left: 0.4rem; font-family: var(--font-ui); font-weight: 400;
}
.btn-add {
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 500;

  background: transparent; border: 1px solid var(--warm-gray);
  color: var(--warm-gray-light); padding: 0.55rem 1.1rem;
  border-radius: 10px; cursor: pointer;
  transition: all var(--transition);
}
.btn-add:hover { background: var(--terracotta); border-color: var(--terracotta); color: white; }
.btn-add.added { background: var(--sage); border-color: var(--sage); color: white; }

/* ── STORY ── */
.story-section {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 600px;
}
.story-visual {
  background: var(--terracotta-pale); position: relative;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.story-circles { position: absolute; inset: 0; overflow: hidden; }
.story-circle { position: absolute; border-radius: 50%; border: 1px solid rgba(63, 106, 96, 0.2); }
.story-circle:nth-child(1) { width: 500px; height: 500px; top: -100px; left: -100px; }
.story-circle:nth-child(2) { width: 350px; height: 350px; top: 50px; left: 50px; }
.story-circle:nth-child(3) { width: 200px; height: 200px; top: 150px; left: 150px; background: rgba(63, 106, 96, 0.06); }
/* The pull-quote used to be raw text floating over the ring pattern — no
   surface of its own, so it read as unfinished rather than a designed
   moment. Giving it an actual card (paper + shadow) makes it the clear focal
   point the concentric rings are meant to frame. */
.story-card-wrap {
  position: relative; z-index: 1;
  margin: 3rem;
  padding: 3rem 3.25rem;
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.story-pull {
  font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-style: normal; font-weight: 600; color: var(--brand);
  line-height: 1.15;
}
.story-pull-attr {
  margin-top: 1.25rem; font-family: var(--font-ui);
  font-size: 0.8rem; color: var(--warm-gray);
}
.story-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 6vw 5rem 5vw;
}
.story-content .section-eyebrow { margin-bottom: 0.75rem; }
.story-content .section-title { margin-bottom: 1.5rem; }
.story-text { font-size: 1rem; color: var(--warm-gray); line-height: 1.85; margin-bottom: 1rem; }
.story-features { display: flex; flex-direction: column; gap: 0.9rem; margin: 2rem 0 2.5rem; }
.story-feature {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--charcoal-mid);
}
.story-feature-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); flex-shrink: 0; }

/* ── TESTIMONIALS ── */
.testimonials-section { background: var(--cream-dark); padding: 9rem 8vw 10rem; text-align: center; overflow: visible; }
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem; margin-top: 5rem; text-align: start;
  align-items: center;
}
/* A gentle depth cascade instead of three identical boxes in a row: the
   middle card sits forward, larger and square to the grid; the outer two
   tuck back and tilt in a couple of degrees, like cards fanned on a table. */
.testi-card {
  background: var(--cream); padding: 2.25rem; border-radius: var(--r-lg);
  border: 1px solid rgba(63, 106, 96, 0.1);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.testimonials-grid .testi-card:nth-child(1) { transform: rotate(-2deg) translateY(14px); }
.testimonials-grid .testi-card:nth-child(2) { transform: scale(1.07); box-shadow: var(--shadow-lg); position: relative; z-index: 1; }
.testimonials-grid .testi-card:nth-child(3) { transform: rotate(2deg) translateY(14px); }
.testi-card:hover { border-color: rgba(63, 106, 96, 0.4); box-shadow: var(--shadow-lg); }
.testimonials-grid .testi-card:nth-child(1):hover { transform: rotate(-2deg) translateY(4px); }
.testimonials-grid .testi-card:nth-child(3):hover { transform: rotate(2deg) translateY(4px); }
.testimonials-grid .testi-card:nth-child(2):hover { transform: scale(1.07) translateY(-6px); }
.testi-stars { color: var(--accent-bright); font-size: 0.95rem; margin-bottom: 1.1rem; letter-spacing: 0.1em; }
.testi-text {
  font-family: var(--font-body); font-style: normal;
  font-size: 0.98rem; color: var(--charcoal-mid); line-height: 1.8; margin-bottom: 1.75rem;
}
.testi-author { display: flex; align-items: center; gap: 0.85rem; }
.testi-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
  color: white; background: var(--terracotta); flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--paper);
}
.testi-name { font-family: var(--font-ui); font-size: 0.88rem; font-weight: 600; color: var(--charcoal); }
.testi-loc { font-family: var(--font-ui); font-size: 0.76rem; color: var(--warm-gray); }

/* ── FOOTER ── */
footer { position: relative; background: var(--charcoal); padding: 8rem 8vw 3rem; color: var(--cream); overflow: hidden; }
/* A faint brand glow overhead instead of a flat block of charcoal — the
   footer is still "the brand," not just a place the page runs out. */
footer::before {
  content: ''; position: absolute; z-index: 0;
  top: -260px; left: 50%; width: 900px; height: 500px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(143, 186, 172, 0.12) 0%, transparent 68%);
  pointer-events: none;
}
footer > * { position: relative; z-index: 1; }
.footer-top {
  /* Every footer on the site has exactly 3 columns (brand + 2 link groups) —
     the old 4-track template left a permanently empty quarter of the row. */
  display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 3rem;
  padding-bottom: 4rem; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand .nav-logo { display: inline-block; margin-bottom: 1.25rem; }
.footer-brand .nav-logo-img { height: 58px; width: auto; display: block; }
.footer-desc { font-size: 0.92rem; color: var(--warm-gray-light); line-height: 1.85; max-width: 300px; }
.footer-col-title {
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600;
  color: var(--cream); margin-bottom: 1.5rem;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }
.footer-links a {
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--warm-gray-light);
  text-decoration: none; cursor: pointer; background: none; border: none;
  display: inline-block;
  transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.footer-links a:hover { color: var(--brand-lift); transform: translateX(-4px); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; padding-top: 3rem;
  flex-wrap: wrap; gap: 1.25rem;
}
.footer-copy { font-family: var(--font-ui); font-size: 0.8rem; color: var(--warm-gray-light); }
.footer-socials { display: flex; gap: 0.85rem; }
.social-link {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--warm-gray); text-decoration: none; font-family: var(--font-ui); font-size: 0.75rem;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.social-link:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-3px); }

/* ── SHOP PAGE ── */
.shop-header {
  background: var(--cream);
  padding: 7rem 8vw 3rem;
  border-bottom: 1px solid var(--cream-dark);
}
.shop-header-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
}
.shop-filters {
  display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
}
.filter-btn {
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500;

  padding: 0.55rem 1.25rem; border-radius: 999px;
  border: 1.5px solid var(--cream-dark); background: transparent;
  color: var(--charcoal-mid); cursor: pointer;
  transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.filter-btn.active { background: var(--terracotta); border-color: var(--terracotta); color: white; }
.sort-select {
  font-family: var(--font-ui); font-size: 0.8rem; color: var(--charcoal-mid);
  border: 1.5px solid var(--cream-dark); background: transparent;
  padding: 0.55rem 2rem 0.55rem 0.9rem; border-radius: 8px;
  cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235C6B70'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center;
}
.shop-grid-wrap { padding: 3rem 8vw 6rem; background: var(--cream); }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.shop-product-card {
  background: white; border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  border: 1px solid var(--cream-dark);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.shop-product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(63, 106, 96, 0.2);
}
.shop-product-img {
  aspect-ratio: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.shop-product-body { padding: 1.25rem 1.35rem 1.35rem; }
.shop-product-name {
  font-family: var(--font-display); font-size: 1rem; font-weight: 500;
  color: var(--charcoal); margin-bottom: 0.3rem; line-height: 1.3;
}
.shop-product-cat {
  font-family: var(--font-ui); font-size: 0.7rem;

  color: var(--warm-gray); margin-bottom: 0.7rem;
}
/* Was a side-by-side flex row — at the shop grid's card width, "افزودن به
   سبد" had no room left after the price and wrapped onto two lines. Price on
   its own row, a full-width button underneath, so neither ever fights the
   other for space regardless of product name/price length. */
.shop-product-footer { display: flex; flex-direction: column; align-items: stretch; gap: 0.85rem; margin-top: 0.85rem; }
.shop-product-footer .btn-add { width: 100%; text-align: center; white-space: nowrap; }
.shop-product-price {
  font-family: var(--font-display); font-size: 1.25rem;
  font-weight: 600; color: var(--charcoal);
}
.shop-product-price-old {
  font-size: 0.82rem; color: var(--warm-gray);
  text-decoration: line-through; margin-left: 0.35rem;
  font-family: var(--font-ui);
}
.no-results {
  text-align: center; padding: 5rem 2rem;
  font-family: var(--font-display); font-size: 1.3rem; color: var(--warm-gray);
}

/* ── PRODUCT DETAIL PAGE ── */
.product-detail {
  padding-top: var(--nav-clear); min-height: 100vh; background: var(--cream);
}
.product-detail-breadcrumb {
  padding: 1.5rem 8vw;
  font-family: var(--font-ui); font-size: 0.8rem; color: var(--warm-gray);
  border-bottom: 1px solid var(--cream-dark);
  display: flex; gap: 0.5rem; align-items: center;
}
.breadcrumb-link {
  color: var(--warm-gray); cursor: pointer; background: none; border: none;
  font-family: var(--font-ui); font-size: 0.8rem; text-decoration: none;
  transition: color var(--transition);
}
.breadcrumb-link:hover { color: var(--terracotta); }

/* ── Card links ──
   Navigation cards are real <a href> links now (so any product/article/category
   can be opened in a new tab, bookmarked or crawled). Strip the default browser
   link look; each card class already provides its own layout/colors. */
a.product-card, a.shop-product-card, a.cat-card, a.blog-card,
a.latest-news-card, a.search-result-item {
  color: inherit;
  text-decoration: none;
}
.product-detail-main {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; padding: 4rem 8vw;
  align-items: start;
}
.pd-image-wrap {
  position: sticky; top: calc(var(--nav-clear) + 24px);
  background: var(--terracotta-pale); border-radius: var(--r-lg);
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pd-image-wrap svg { width: 55%; height: 55%; }
.pd-image-wrap:hover #pd-main-image { transform: scale(1.035); }
.pd-eyebrow {
  font-family: var(--font-ui); font-size: 0.72rem;

  color: var(--terracotta); margin-bottom: 0.75rem;
}
.pd-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700;
  color: var(--charcoal); line-height: 1.15; margin-bottom: 0.85rem;

}
.pd-rating {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-ui); font-size: 0.85rem;
  color: var(--warm-gray); margin-bottom: 1.5rem;
}
.pd-stars { color: var(--accent-bright); }
.pd-price-wrap { margin-bottom: 2rem; }
.pd-price {
  font-family: var(--font-display); font-size: 2.2rem;
  font-weight: 600; color: var(--terracotta);
}
.pd-price-old {
  font-family: var(--font-ui); font-size: 1rem;
  color: var(--warm-gray); text-decoration: line-through; margin-left: 0.5rem;
}
.pd-desc { font-size: 1rem; color: var(--warm-gray); line-height: 1.85; margin-bottom: 2rem; }
.pd-features { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 2.5rem; }
.pd-feature {
  display: flex; align-items: center; gap: 0.85rem;
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--charcoal-mid);
}
.pd-feature-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); flex-shrink: 0; }
/* ── Rating distribution (product page) + "not yet rated" state ──
   Ratings come from real reviews; a product with none says so rather than
   showing a default score. */
.rating-none { font-family: var(--font-ui); font-size: 0.88rem; color: var(--warm-gray); }
.rating-summary { display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; margin: 0 0 1.5rem; }
.rating-average { text-align: center; min-width: 92px; }
.rating-average-num { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--charcoal); }
.rating-average-count { font-family: var(--font-ui); font-size: 0.75rem; color: var(--warm-gray); margin-top: 0.2rem; }
.rating-bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 0.3rem; }
.rating-bar-row { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-ui); font-size: 0.78rem; color: var(--charcoal-mid); }
.rating-bar-label { width: 3.2rem; white-space: nowrap; }
.rating-bar-track { flex: 1; height: 7px; border-radius: 12px; background: rgba(0,0,0,0.07); overflow: hidden; }
.rating-bar-fill { display: block; height: 100%; border-radius: 12px; background: var(--terracotta); }
.rating-bar-count { width: 2.2rem; text-align: end; color: var(--warm-gray); }
/* A hidden review stays legible in the admin list but is clearly set apart. */
.adminrev-hidden { opacity: 0.55; border-inline-start: 3px solid var(--warm-gray); }

/* Optional per-product guarantee line (also fed to Torob as <meta name="guarantee">). */
.pd-guarantee {
  font-family: var(--font-ui); font-size: 0.86rem; color: var(--charcoal-mid);
  background: rgba(63, 106, 96, 0.07); border: 1px solid rgba(63, 106, 96, 0.18);
  border-radius: 8px; padding: 0.6rem 0.9rem; margin: -1.5rem 0 2rem;
}
.pd-options-label {
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600;
  color: var(--charcoal-mid);
  margin-bottom: 0.85rem;
}
.pd-size-grid { display: flex; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 2rem; }
.pd-size-btn {
  font-family: var(--font-ui); font-size: 0.84rem; font-weight: 500; padding: 0.6rem 1.3rem;
  border: 1.5px solid var(--line); background: transparent;
  color: var(--charcoal-mid); border-radius: var(--r-pill); cursor: pointer;
  transition: all var(--transition);
}
.pd-size-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.pd-size-btn.selected { background: var(--charcoal); border-color: var(--charcoal); color: white; }
.pd-color-grid { display: flex; gap: 0.75rem; margin-bottom: 2rem; }
/* Selected swatch reads as a target/bullseye — a white gap ring then a dark
   outer ring — instead of the fill colour just growing its own border,
   which washed out on light swatches. */
.pd-color-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--paper); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(30, 43, 48, 0.14);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  position: relative;
}
.pd-color-btn:hover { transform: scale(1.1); }
.pd-color-btn.selected { box-shadow: 0 0 0 2px var(--ink); transform: scale(1.06); }
.pd-qty-wrap { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.pd-qty-label {
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500;
 color: var(--charcoal-mid);
}
.pd-qty-control {
  display: flex; align-items: center; gap: 0;
  border: 1.5px solid var(--line); border-radius: var(--r-pill); overflow: hidden;
}
.pd-qty-btn {
  width: 42px; height: 42px; background: transparent; border: none;
  font-family: var(--font-ui); font-size: 1.2rem; cursor: pointer;
  color: var(--charcoal-mid); transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.pd-qty-btn:hover { background: var(--brand-tint); color: var(--brand); }
.pd-qty-num {
  width: 48px; text-align: center;
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500;
  color: var(--charcoal);
}
.pd-ctas { display: flex; gap: 1rem; margin-bottom: 2.5rem; }
.pd-add-btn {
  flex: 1; font-family: var(--font-ui); font-size: 0.88rem; font-weight: 500;
  background: var(--charcoal); color: white; border: 1.5px solid var(--charcoal);
  padding: 1rem 2rem; border-radius: 10px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out), transform 0.18s var(--ease-out);
}
.pd-add-btn:hover { background: var(--terracotta); border-color: var(--terracotta); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.pd-add-btn:active { transform: translateY(0) scale(0.985); box-shadow: var(--shadow-sm); }
.pd-wish-btn {
  /* Was a fixed 52px square — the add-to-cart button beside it wraps its
     price onto a second line on narrower screens and grows taller, leaving
     this looking short and stranded. align-self:stretch keeps them matched
     at whatever height the row actually needs. */
  width: 54px; min-height: 52px; align-self: stretch; flex-shrink: 0;
  background: transparent; border: 1.5px solid var(--line);
  border-radius: 12px; cursor: pointer; font-size: 1.15rem;
  color: var(--warm-gray);
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), background 0.25s var(--ease-out), transform 0.18s var(--ease-out);
}
.pd-wish-btn:hover { border-color: var(--brand); color: var(--brand); }
.pd-wish-btn:active { transform: scale(0.94); }
.pd-wish-btn.wished { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
.pd-assurances {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.5rem; background: var(--cream-dark); border-radius: 12px;
}
.pd-assurance {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-ui); font-size: 0.83rem; color: var(--charcoal-mid);
}
.pd-assurance-icon { font-size: 1rem; }

/* ── CART PAGE ── */
.cart-page { padding-top: var(--nav-clear); min-height: 100vh; background: var(--cream); }
.cart-inner { display: grid; grid-template-columns: 1fr 380px; gap: 4rem; padding: 4rem 8vw; align-items: start; }
.cart-title {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 400;
  color: var(--charcoal); margin-bottom: 2rem; padding-top: 0.5rem;
}
.cart-items { display: flex; flex-direction: column; gap: 1px; }
.cart-item {
  display: flex; align-items: center; gap: 1.5rem;
  background: white; padding: 1.5rem;
  border: 1px solid var(--cream-dark);
  transition: border-color var(--transition);
}
.cart-item:first-child { border-radius: 12px 12px 0 0; }
.cart-item:last-child { border-radius: 0 0 12px 12px; }
.cart-item:only-child { border-radius: 12px; }
.cart-item:hover { border-color: rgba(63, 106, 96, 0.2); }
.cart-item-img {
  width: 88px; height: 88px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-price-wrap { flex-shrink: 0; }
.cart-item-name {
  font-family: var(--font-display); font-size: 1rem; font-weight: 500;
  color: var(--charcoal); margin-bottom: 0.25rem; overflow-wrap: anywhere;
}
.cart-item-meta {
  font-family: var(--font-ui); font-size: 0.78rem;
  color: var(--warm-gray); margin-bottom: 0.85rem;
}
.cart-item-qty {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--cream-dark); border-radius: 8px;
  overflow: hidden; display: inline-flex;
}
.cart-qty-btn {
  width: 32px; height: 32px; background: transparent; border: none;
  cursor: pointer; color: var(--charcoal-mid); font-size: 1rem;
  transition: background var(--transition);
}
.cart-qty-btn:hover { background: var(--cream-dark); }
.cart-qty-num {
  width: 40px; text-align: center;
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500;
}
.cart-item-price {
  font-family: var(--font-display); font-size: 1.15rem;
  font-weight: 600; color: var(--charcoal);
}
.cart-item-remove {
  background: none; border: none; cursor: pointer;
  color: var(--warm-gray); font-size: 1.1rem;
  padding: 0.35rem; border-radius: 8px;
  transition: color var(--transition), background var(--transition);
}
.cart-item-remove:hover { color: var(--terracotta); background: var(--terracotta-pale); }
.cart-empty {
  text-align: center; padding: 5rem 2rem; grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
}
.cart-empty-icon {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--paper-sunk); color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
}
.cart-empty h2 {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
  color: var(--charcoal); margin-bottom: 0.75rem;
}
.cart-empty p { font-family: var(--font-ui); color: var(--warm-gray); margin-bottom: 2rem; max-width: 340px; line-height: 1.7; }
.cart-summary {
  background: white; border: 1px solid var(--cream-dark); border-radius: 12px;
  padding: 2rem; position: sticky; top: 96px;
}
.cart-summary-title {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 500;
  color: var(--charcoal); margin-bottom: 1.5rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--cream-dark);
}
.summary-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-ui); font-size: 0.88rem; color: var(--warm-gray);
  margin-bottom: 0.75rem;
}
.summary-row.total {
  font-size: 1.05rem; font-weight: 500; color: var(--charcoal);
  padding-top: 1rem; border-top: 1px solid var(--cream-dark); margin-top: 0.5rem;
}
.summary-row.total .summary-val {
  font-family: var(--font-display); font-size: 1.35rem;
  font-weight: 600; color: var(--terracotta);
}
.checkout-btn {
  width: 100%; margin-top: 1.5rem;
  font-family: var(--font-ui); font-size: 0.88rem; font-weight: 500;
  background: var(--charcoal); color: white; border: none;
  padding: 1.05rem; border-radius: 10px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), transform 0.18s var(--ease-out);
}
.checkout-btn:hover { background: var(--terracotta); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.checkout-btn:active { transform: translateY(0) scale(0.99); box-shadow: var(--shadow-sm); }
.promo-wrap { margin-top: 1rem; display: flex; gap: 0.5rem; }
.promo-input {
  flex: 1; font-family: var(--font-ui); font-size: 0.82rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--cream-dark); border-radius: 8px;
  outline: none; background: transparent; color: var(--charcoal);
  transition: border-color var(--transition);
}
.promo-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.promo-input::placeholder { color: var(--ink-faint); }
.promo-btn {
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500;

  background: transparent; border: 1px solid var(--cream-dark);
  color: var(--charcoal-mid); padding: 0.65rem 0.9rem;
  border-radius: 8px; cursor: pointer; transition: all var(--transition);
}
.promo-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.cart-assurances {
  display: flex; flex-direction: column; gap: 0.6rem;
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cream-dark);
}
.cart-assurance {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 0.78rem; color: var(--warm-gray);
}

/* ── CART — RESPONSIVE (tablet / phone) ──
   Goal: no horizontal scroll, no clipped controls, easy-to-tap buttons.
   On phones each line becomes a 2-row grid (image spans both rows) so the
   name/options, quantity and price each get room instead of being squeezed. */
@media (max-width: 1024px) {
  .cart-inner { gap: 2.5rem; padding: 3rem 6vw; }
}
@media (max-width: 600px) {
  .cart-inner { padding: 2rem 5vw 3rem; gap: 2rem; }
  .cart-title { font-size: 1.7rem; margin-bottom: 1.25rem; }
  .cart-item {
    display: grid; align-items: start;
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "img info remove"
      "img price price";
    column-gap: 1rem; row-gap: 0.65rem; padding: 1.1rem;
  }
  .cart-item-img    { grid-area: img;    width: 64px; height: 64px; }
  .cart-item-info   { grid-area: info; }
  /* Was a 29×33px hit area (padding:0.2rem 0.4rem around a 1.25rem glyph) —
     under the ~44px minimum comfortable mobile tap target. min-width/height
     with flex centering grows the hit area without the glyph itself looking
     any bigger. */
  .cart-item-remove {
    grid-area: remove; align-self: start; font-size: 1.15rem;
    min-width: 40px; min-height: 40px; padding: 0.4rem;
    display: flex; align-items: center; justify-content: center;
  }
  .cart-item-price-wrap { grid-area: price; text-align: start !important; }
  .cart-item-price  { font-size: 1.05rem; }
  .cart-item-meta   { margin-bottom: 0.55rem; }
  .cart-qty-btn     { width: 38px; height: 38px; }
  .cart-summary     { padding: 1.5rem; }
  .summary-row.total .summary-val { font-size: 1.2rem; }
  .checkout-btn     { padding: 1rem; font-size: 0.82rem; }
}
@media (max-width: 360px) {
  .cart-item { grid-template-columns: 52px 1fr auto; column-gap: 0.75rem; padding: 0.9rem; }
  .cart-item-img { width: 52px; height: 52px; }
}

/* ── ACCOUNT PAGE ── */
.account-page { padding-top: var(--nav-clear); min-height: 100vh; background: var(--cream); }
.account-inner { max-width: 1100px; margin: 0 auto; padding: 4rem 8vw; }
.account-header {
  display: flex; align-items: center; gap: 2rem;
  margin-bottom: 3rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--cream-dark);
}
.account-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: white;
  flex-shrink: 0;
  box-shadow: 0 0 0 5px var(--brand-tint);
}
.account-name { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--charcoal); }
.account-email { font-family: var(--font-ui); font-size: 0.9rem; color: var(--warm-gray); margin-top: 0.25rem; }
/* Pill tabs instead of an underline strip — matches the shop page's filter
   pills, so "pick one of several views" reads the same everywhere on the
   site instead of two different tab languages. */
.account-tabs {
  display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2.5rem;
}
.account-tab {
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500;
  padding: 0.65rem 1.25rem; border: 1.5px solid var(--line); background: transparent;
  color: var(--warm-gray); cursor: pointer; border-radius: var(--r-pill);
  transition: all 0.25s var(--ease-out);
}
.account-tab:hover { border-color: var(--brand); color: var(--brand); }
.account-tab.active { background: var(--ink); border-color: var(--ink); color: white; }
.account-panel { display: none; }
.account-panel.active { display: block; }
.order-card {
  background: white; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: 1.1rem;
  box-shadow: var(--shadow-sm);
}
.order-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; background: var(--paper-sunk);
}
.order-num { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--charcoal); }
.order-date { font-family: var(--font-ui); font-size: 0.78rem; color: var(--warm-gray); }
.order-status {
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600;
  padding: 0.3rem 0.85rem; border-radius: var(--r-pill);
}
.status-delivered { background: var(--ok-tint); color: var(--ok); }
.status-shipped { background: var(--info-tint); color: var(--info); }
.status-processing { background: var(--warn-tint); color: var(--warn); }
.status-cancelled { background: var(--danger-tint); color: var(--danger); }
.order-items-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.5rem; border-top: 1px solid var(--cream-dark);
  font-family: var(--font-ui); font-size: 0.85rem; color: var(--charcoal-mid);
}
.order-total {
  font-family: var(--font-display); font-size: 1rem;
  font-weight: 600; color: var(--charcoal); margin-left: auto;
}
.profile-form { max-width: 500px; }
.form-group { margin-bottom: 1.5rem; }
.form-label {
  display: block; font-family: var(--font-ui); font-size: 0.78rem;
  font-weight: 500;
  color: var(--charcoal-mid); margin-bottom: 0.5rem;
}
.form-input {
  width: 100%; font-family: var(--font-ui); font-size: 0.9rem;
  padding: 0.85rem 1rem; border: 1.5px solid var(--cream-dark);
  background: white; border-radius: 8px; color: var(--charcoal); outline: none;
  transition: border-color var(--transition);
}
.form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.wishlist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

/* ── STORY PAGE ── */
.story-page { padding-top: var(--nav-clear); background: var(--cream); }
.story-hero {
  min-height: 72vh; display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at center, var(--terracotta-pale) 0%, var(--cream) 70%);
  padding: 8rem 8vw;
}
.story-hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 700;
  color: var(--charcoal); line-height: 1.05;
  margin-bottom: 1.5rem;
}
.story-hero-title em { font-style: normal; color: var(--brand); }
.story-hero-sub {
  font-size: 1.15rem; color: var(--warm-gray); line-height: 1.8;
  max-width: 560px; margin: 0 auto;
}
.story-timeline { padding: 6rem 8vw; }
.timeline { position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--line);
}
.timeline-item {
  padding-left: 3.5rem; padding-bottom: 4.5rem; position: relative;
}
.timeline-dot {
  position: absolute; left: -9px; top: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); border: 4px solid var(--paper);
  box-shadow: 0 0 0 1.5px var(--brand), var(--shadow-sm);
}
.timeline-year {
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500;

  color: var(--terracotta); margin-bottom: 0.5rem;
}
.timeline-title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 400;
  color: var(--charcoal); margin-bottom: 0.75rem;
}
.timeline-text { font-size: 0.95rem; color: var(--warm-gray); line-height: 1.85; max-width: 520px; }
.story-values { background: var(--charcoal); padding: 7rem 8vw; }
.story-values .section-title { color: var(--cream); }
.story-values .section-title em { color: var(--brand-lift); }
.story-values .section-eyebrow { color: var(--brand-lift); background: rgba(143, 186, 172, 0.14); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 4rem; }
.value-card {
  background: var(--charcoal-mid); padding: 2.75rem 2.25rem;
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.value-card:hover { transform: translateY(-6px); border-color: rgba(143, 186, 172, 0.3); box-shadow: var(--shadow-lg); }
.value-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(143, 186, 172, 0.12); color: var(--brand-lift);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
}
.value-title {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  color: var(--cream); margin-bottom: 0.75rem;
}
.value-text { font-family: var(--font-ui); font-size: 0.9rem; color: var(--warm-gray-light); line-height: 1.75; }
.team-section { padding: 8.5rem 8vw; }
.team-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 2rem; margin-top: 3.5rem; }
.team-card { text-align: center; }
.team-avatar {
  width: 120px; height: 120px; border-radius: 50%;
  margin: 0 auto 1.5rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; color: white;
  box-shadow: 0 0 0 6px var(--paper-sunk);
}
.team-name {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 500;
  color: var(--charcoal); margin-bottom: 0.25rem;
}
.team-role {
  font-family: var(--font-ui); font-size: 0.8rem;
  color: var(--terracotta);
  margin-bottom: 0.75rem;
}
.team-bio { font-family: var(--font-ui); font-size: 0.88rem; color: var(--warm-gray); line-height: 1.75; }

/* ── CHECKOUT MODAL ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(30, 43, 48, 0.7); z-index: 400;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  padding: 1rem;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--cream); border-radius: var(--r-lg);
  width: min(540px, 95vw); max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: scale(0.95); transition: transform 0.3s ease;
}
.modal-overlay.open .modal-box { transform: scale(1); }
.modal-header {
  padding: 2rem 2rem 0;
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--charcoal);
}
.modal-close {
  background: none; border: none; cursor: pointer; font-size: 1.5rem;
  color: var(--warm-gray); transition: color var(--transition);
}
.modal-close:hover { color: var(--terracotta); }
.modal-body { padding: 1.5rem 2rem 2rem; }
.modal-success {
  text-align: center; padding: 2.5rem 1rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.success-icon {
  width: 76px; height: 76px; background: var(--ok); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: white;
  box-shadow: 0 0 0 8px var(--ok-tint);
  animation: successPop 0.55s var(--ease-out);
}
@keyframes successPop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .success-icon { animation: none; } }
.success-title {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--charcoal);
}
.success-text { font-family: var(--font-ui); color: var(--warm-gray); line-height: 1.7; }
.success-order {
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600;
  background: var(--paper-sunk); padding: 0.85rem 1.5rem; border-radius: var(--r-pill);
  color: var(--charcoal-mid); letter-spacing: 0.02em;
}

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(16px) scale(0.96);
  background: var(--ink); color: white;
  font-family: var(--font-ui); font-size: 0.88rem; font-weight: 500;
  padding: 0.85rem 1.5rem 0.85rem 1.15rem; border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  z-index: 500; opacity: 0; transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  white-space: nowrap; pointer-events: none;
  display: flex; align-items: center; gap: 0.65rem;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.toast-icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--ok-lift); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── LOGIN / REGISTER ── */
.auth-page {
  padding-top: var(--nav-clear); min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 60% 40%, var(--terracotta-pale) 0%, var(--cream) 60%);
  padding-bottom: 4rem;
}
.auth-card {
  background: white; border-radius: var(--r-lg);
  border: 1px solid var(--cream-dark);
  width: min(480px, 92vw);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.auth-card-header {
  background: var(--charcoal);
  padding: 2.5rem 2.5rem 2rem;
  text-align: center;
}
.auth-logo {
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 700;
  color: white; margin-bottom: 0.5rem;
}
.auth-logo span { color: var(--brand-lift); font-style: normal; }
.auth-subtitle { font-family: var(--font-ui); font-size: 0.85rem; color: var(--warm-gray-light); }
.auth-tabs {
  display: flex; border-bottom: 1px solid var(--cream-dark);
}
.auth-tab {
  flex: 1; padding: 1rem;
  font-family: var(--font-ui); font-size: 0.82rem; font-weight: 500;

  background: none; border: none; cursor: pointer;
  color: var(--warm-gray); border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.auth-tab:hover { color: var(--terracotta); }
.auth-tab.active { color: var(--terracotta); border-bottom-color: var(--terracotta); }
.auth-panel { display: none; padding: 2rem 2.5rem 2.5rem; }
.auth-panel.active { display: block; }
.auth-form-group { margin-bottom: 1.25rem; }
.auth-label {
  display: block; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 500;
 color: var(--charcoal-mid);
  margin-bottom: 0.45rem;
}
.auth-input {
  width: 100%; font-family: var(--font-ui); font-size: 0.92rem;
  padding: 0.85rem 1rem; border: 1.5px solid var(--cream-dark);
  background: var(--cream); border-radius: 8px; color: var(--charcoal); outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.auth-input:focus { border-color: var(--brand); background: white; box-shadow: 0 0 0 3px var(--brand-ring); }
.auth-input.error { border-color: var(--danger); }
.auth-input-wrap { position: relative; }
.auth-pw-toggle {
  position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--warm-gray);
  font-size: 0.8rem; font-family: var(--font-ui);
  transition: color var(--transition);
}
.auth-pw-toggle:hover { color: var(--terracotta); }
.auth-error {
  font-family: var(--font-ui); font-size: 0.78rem; color: var(--danger);
  margin-top: 0.35rem; display: none;
}
.auth-error.visible { display: block; }
.auth-row { display: flex; gap: 0.75rem; }
.auth-row .auth-form-group { flex: 1; }
.auth-forgot {
  font-family: var(--font-ui); font-size: 0.78rem; color: var(--warm-gray);
  text-align: right; margin-top: -0.75rem; margin-bottom: 1.25rem;
  cursor: pointer; background: none; border: none; display: block; width: 100%;
  transition: color var(--transition);
}
.auth-forgot:hover { color: var(--terracotta); }
.otp-resend-btn {
  font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600; color: var(--brand);
  background: none; border: none; cursor: pointer; padding: 0.25rem;
  transition: color var(--transition);
}
.otp-resend-btn:hover { color: var(--brand-deep); text-decoration: underline; }
.otp-resend-btn:disabled { color: var(--ink-faint); cursor: not-allowed; text-decoration: none; }
.auth-submit {
  width: 100%; font-family: var(--font-ui); font-size: 0.88rem; font-weight: 500;
  background: var(--terracotta); color: white; border: none;
  padding: 1rem; border-radius: 8px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), transform 0.18s var(--ease-out);
  margin-top: 0.5rem;
}
.auth-submit:hover { background: var(--charcoal); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.auth-submit:active { transform: translateY(0) scale(0.99); box-shadow: var(--shadow-sm); }
.auth-submit:disabled { background: var(--warm-gray-light); cursor: not-allowed; box-shadow: none; transform: none; }
.auth-submit:disabled:hover { transform: none; box-shadow: none; }
.auth-divider {
  display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0;
  font-family: var(--font-ui); font-size: 0.75rem; color: var(--warm-gray-light);
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--cream-dark);
}
.auth-social-btn {
  width: 100%; font-family: var(--font-ui); font-size: 0.85rem;
  padding: 0.85rem; border: 1.5px solid var(--cream-dark); background: white;
  border-radius: 8px; cursor: pointer; color: var(--charcoal-mid);
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  margin-bottom: 0.75rem;
  transition: border-color var(--transition), background var(--transition);
}
.auth-social-btn:hover { border-color: var(--terracotta); background: var(--cream); }
.auth-terms {
  font-family: var(--font-ui); font-size: 0.75rem; color: var(--warm-gray);
  text-align: center; margin-top: 1.25rem; line-height: 1.6;
}
.auth-terms span { color: var(--terracotta); cursor: pointer; }
.auth-check-wrap {
  display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem;
}
.auth-check {
  width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--terracotta); cursor: pointer;
}
.auth-check-label { font-family: var(--font-ui); font-size: 0.82rem; color: var(--charcoal-mid); line-height: 1.5; }
.auth-strength { margin-top: 0.4rem; }
.auth-strength-bar {
  height: 4px; background: var(--paper-sunk); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 0.3rem;
}
.auth-strength-fill { height: 100%; border-radius: var(--r-pill); transition: width 0.3s, background 0.3s; width: 0; }
.auth-strength-label { font-family: var(--font-ui); font-size: 0.72rem; color: var(--warm-gray); }

/* ── ADMIN PANEL ── */
.admin-page { padding-top: var(--nav-clear); min-height: 100vh; background: #141D21; color: var(--cream); }
.admin-topbar {
  background: #1B262B; border-bottom: 1px solid rgba(143, 186, 172, 0.2);
  padding: 0 3vw; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: var(--nav-clear); z-index: 50;
}
.admin-topbar-title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--cream);
  display: flex; align-items: center; gap: 0.75rem;
}
.admin-badge {
  font-family: var(--font-ui); font-size: 0.65rem; font-weight: 500;

  background: var(--terracotta); color: white;
  padding: 0.2rem 0.6rem; border-radius: 8px;
}
.admin-topbar-actions { display: flex; gap: 0.75rem; }
.admin-action-btn {
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 500;

  padding: 0.45rem 1rem; border-radius: 8px; cursor: pointer;
  transition: all var(--transition);
}
.admin-action-btn.outline {
  background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--warm-gray-light);
}
.admin-action-btn.outline:hover { border-color: var(--terracotta); color: var(--terracotta-light); }
.admin-action-btn.danger { background: rgba(168,64,47,0.15); border: 1px solid rgba(168,64,47,0.3); color: var(--danger-lift); }
.admin-action-btn.danger:hover { background: rgba(168,64,47,0.3); }
.admin-layout { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 132px); }
.admin-sidebar {
  background: #161F23; border-right: 1px solid rgba(255,255,255,0.06);
  padding: 1.5rem 0;
}
.admin-nav-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-ui); font-size: 0.82rem; color: var(--warm-gray);
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  border-left: 2.5px solid transparent;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.admin-nav-item:hover { background: rgba(255,255,255,0.04); color: var(--cream); }
.admin-nav-item.active { color: var(--terracotta-light); border-left-color: var(--terracotta); background: rgba(143, 186, 172, 0.08); }
.admin-nav-icon { display: flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; }
.admin-nav-icon svg { display: block; }
.admin-nav-section {
  font-family: var(--font-ui); font-size: 0.65rem; font-weight: 500;
 color: rgba(255,255,255,0.25);
  padding: 1.25rem 1.5rem 0.5rem; margin-top: 0.75rem;
}
.admin-content { padding: 2rem 2.5rem; overflow-x: auto; }
.admin-section { display: none; }
.admin-section.active { display: block; }
.admin-section-title {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 400;
  color: var(--cream); margin-bottom: 0.35rem;
}
.admin-section-sub { font-family: var(--font-ui); font-size: 0.85rem; color: var(--warm-gray); margin-bottom: 2rem; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 3rem; }
.admin-stat-card {
  background: #1B262B; border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-lg); padding: 1.75rem 1.5rem;
  transition: border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.admin-stat-card:hover { border-color: rgba(143, 186, 172, 0.28); transform: translateY(-3px); }
.admin-stat-label { font-family: var(--font-ui); font-size: 0.74rem; color: var(--warm-gray); margin-bottom: 0.6rem; }
.admin-stat-val { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; color: var(--cream); line-height: 1; }
.admin-stat-sub { font-family: var(--font-ui); font-size: 0.75rem; color: var(--sage); margin-top: 0.5rem; }
.admin-card {
  background: #1B262B; border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.5rem;
}
.admin-card-header {
  padding: 1.1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: space-between;
}
.admin-card-title { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; color: var(--warm-gray-light); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  font-family: var(--font-ui); font-size: 0.68rem; font-weight: 500;
 color: var(--warm-gray);
  padding: 0.75rem 1.25rem; text-align: right;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.admin-table td {
  font-family: var(--font-ui); font-size: 0.84rem; color: var(--warm-gray-light);
  padding: 1rem 1.25rem; border: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255,255,255,0.02); }
.admin-table td strong { color: var(--cream); font-weight: 500; }
.status-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500;

  padding: 0.28rem 0.75rem; border-radius: 999px;
}
.status-pill::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.pill-processing { background:rgba(227,172,85,0.16); color:var(--warn-lift); }
.pill-processing::before { background:var(--warn-lift); }
.pill-shipped { background:rgba(111,179,201,0.16); color:var(--info-lift); }
.pill-shipped::before { background:var(--info-lift); }
.pill-delivered { background:rgba(111,191,143,0.16); color:var(--ok-lift); }
.pill-delivered::before { background:var(--ok-lift); }
.pill-cancelled { background:rgba(229,133,115,0.16); color:var(--danger-lift); }
.pill-cancelled::before { background:var(--danger-lift); }
.pill-pending-pay { background:rgba(159,176,182,0.16); color:var(--neutral-lift); }
.pill-pending-pay::before { background:var(--neutral-lift); }
.pill-uploaded { background:rgba(111,179,201,0.16); color:var(--info-lift); }
.pill-uploaded::before { background:var(--info-lift); }
.pill-verified { background:rgba(111,191,143,0.16); color:var(--ok-lift); }
.pill-verified::before { background:var(--ok-lift); }
.pill-rejected { background:rgba(229,133,115,0.16); color:var(--danger-lift); }
.pill-rejected::before { background:var(--danger-lift); }
/* The status pills above are calibrated for the dark admin table (#1B262B) —
   the "-lift" colours go low-contrast on the light .modal-box the shared order-
   detail modal actually renders into. Re-tint to the base feedback colours
   whenever a pill ends up nested in that light surface. */
.modal-box .pill-processing { background: var(--warn-tint); color: var(--warn); }
.modal-box .pill-processing::before { background: var(--warn); }
.modal-box .pill-shipped, .modal-box .pill-uploaded { background: var(--info-tint); color: var(--info); }
.modal-box .pill-shipped::before, .modal-box .pill-uploaded::before { background: var(--info); }
.modal-box .pill-delivered, .modal-box .pill-verified { background: var(--ok-tint); color: var(--ok); }
.modal-box .pill-delivered::before, .modal-box .pill-verified::before { background: var(--ok); }
.modal-box .pill-cancelled, .modal-box .pill-rejected { background: var(--danger-tint); color: var(--danger); }
.modal-box .pill-cancelled::before, .modal-box .pill-rejected::before { background: var(--danger); }
.modal-box .pill-pending-pay { background: var(--paper-sunk); color: var(--ink-muted); }
.modal-box .pill-pending-pay::before { background: var(--ink-muted); }
.status-select {
  font-family: var(--font-ui); font-size: 0.78rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: var(--cream); padding: 0.38rem 0.7rem; border-radius: 8px; cursor: pointer; outline: none;
  transition: border-color var(--transition);
}
.status-select:hover { border-color: var(--terracotta); }

/* ── ADMIN CUSTOM DROPDOWNS ──
   Wraps a real (visually hidden) <select> — see enhanceSelect() in app.js.
   Dark by default since almost every admin select lives on a dark surface;
   the coupon-creation card is the one light exception, overridden below. */
.csel-wrap { position: relative; display: block; width: 100%; }
.csel-wrap.csel-inline { display: inline-flex; width: auto; min-width: 130px; }
select.csel-native-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.csel-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 0.82rem; text-align: start;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: var(--cream); padding: 0.55rem 0.9rem; border-radius: 8px; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.csel-inline .csel-trigger { font-size: 0.78rem; padding: 0.38rem 0.7rem; }
.csel-trigger:hover { border-color: var(--terracotta); }
.csel-wrap.open .csel-trigger { border-color: var(--brand-lift); box-shadow: 0 0 0 3px rgba(143, 186, 172, 0.2); }
.csel-trigger:disabled { opacity: 0.45; cursor: not-allowed; }
.csel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-arrow { flex-shrink: 0; color: var(--warm-gray); transition: transform 0.25s var(--ease-out); }
.csel-wrap.open .csel-arrow { transform: rotate(180deg); }
.csel-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #1B262B; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 0.4rem; max-height: 280px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0s linear 0.2s;
}
.csel-inline .csel-list { left: auto; right: 0; width: max-content; min-width: 100%; }
.csel-wrap.open .csel-list {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0s linear 0s;
}
.csel-option {
  padding: 0.55rem 0.8rem; border-radius: 7px; font-family: var(--font-ui); font-size: 0.82rem;
  color: var(--warm-gray-light); cursor: pointer; transition: background 0.15s ease;
  white-space: nowrap;
}
.csel-option:hover { background: rgba(255,255,255,0.07); color: var(--cream); }
.csel-option.selected { background: rgba(143,186,172,0.16); color: var(--terracotta-light); font-weight: 600; }
/* Coupon-creation card (openCouponForm) deliberately overrides .admin-card to
   a light background — the one light surface a select lives on in admin. */
#coupon-form-wrap .csel-trigger { background: white; border-color: var(--cream-dark); color: var(--charcoal); }
#coupon-form-wrap .csel-trigger:hover { border-color: var(--brand); }
#coupon-form-wrap .csel-arrow { color: var(--warm-gray); }
#coupon-form-wrap .csel-list { background: white; border-color: var(--line); }
#coupon-form-wrap .csel-option { color: var(--charcoal-mid); }
#coupon-form-wrap .csel-option:hover { background: var(--brand-tint); color: var(--charcoal); }
#coupon-form-wrap .csel-option.selected { background: var(--brand-tint); color: var(--brand); }

.admin-btn-sm {
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500;

  padding: 0.38rem 0.85rem; border-radius: 8px; cursor: pointer;
  transition: all var(--transition);
}
.admin-btn-sm.primary { background: var(--terracotta); border: 1px solid var(--terracotta); color: white; }
.admin-btn-sm.primary:hover { background: var(--terracotta-light); }
.admin-btn-sm.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--warm-gray-light); }
.admin-btn-sm.ghost:hover { border-color: var(--warm-gray); color: var(--cream); }
.admin-btn-sm.red { background: transparent; border: 1px solid rgba(229,133,115,0.3); color: var(--danger-lift); }
.admin-btn-sm.red:hover { background: rgba(229,133,115,0.15); }
.admin-search {
  font-family: var(--font-ui); font-size: 0.82rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--cream); padding: 0.55rem 1rem; border-radius: 8px; outline: none; width: 240px;
  transition: border-color var(--transition);
}
.admin-search::placeholder { color: rgba(255,255,255,0.42); }
.admin-search:focus { border-color: var(--brand-lift); box-shadow: 0 0 0 3px rgba(143, 186, 172, 0.25); }
.admin-empty { padding: 3rem; text-align: center; font-family: var(--font-ui); color: var(--warm-gray); }
.admin-tag {
  display: inline-block; font-family: var(--font-ui); font-size: 0.68rem;
  padding: 0.15rem 0.55rem; border-radius: 8px; margin-right: 0.3rem;
}
.admin-tag-admin { background:rgba(143, 186, 172, 0.2); color:var(--terracotta-light); }
/* ── Admin categories manager ── */
.admin-cat-row {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.admin-cat-row:last-child { border-bottom: none; }
.admin-cat-thumb {
  width: 84px; height: 84px; flex-shrink: 0; border-radius: 12px; cursor: pointer;
  background: #25333A; border: 1.5px dashed rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.admin-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-cat-thumb span { font-family: var(--font-ui); font-size: 0.7rem; color: rgba(255,255,255,0.35); text-align: center; }
.admin-cat-fields { flex: 1; min-width: 0; }
.admin-cat-meta { font-family: var(--font-ui); font-size: 0.72rem; color: var(--warm-gray); }
.admin-cat-meta .ltr { color: var(--warm-gray-light); }
.admin-cat-actions {
  display: flex; flex-direction: column; gap: 0.4rem; flex-shrink: 0; align-items: stretch;
}
.admin-btn-sm:disabled { opacity: 0.35; cursor: not-allowed; }
.admin-login-wrap {
  padding-top: var(--nav-clear); min-height: 100vh; background: #141D21;
  display: flex; align-items: center; justify-content: center;
}
.admin-login-card {
  background: #1B262B; border: 1px solid rgba(143, 186, 172, 0.2);
  border-radius: 8px; width: min(420px, 92vw); overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.admin-login-header {
  background: rgba(143, 186, 172, 0.1); padding: 2rem;
  border-bottom: 1px solid rgba(143, 186, 172, 0.15); text-align: center;
}
.admin-login-icon { display: flex; justify-content: center; color: var(--brand-lift); margin-bottom: 0.75rem; }
.admin-login-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--cream); margin-bottom: 0.25rem; }
.admin-login-sub { font-family: var(--font-ui); font-size: 0.82rem; color: var(--warm-gray); }
.admin-login-body { padding: 2rem; }
.admin-login-label {
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500;
 color: var(--warm-gray-light);
  display: block; margin-bottom: 0.45rem;
}
.admin-login-input {
  width: 100%; font-family: var(--font-ui); font-size: 0.9rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--cream); padding: 0.85rem 1rem; border-radius: 8px; outline: none;
  transition: border-color var(--transition); margin-bottom: 1rem;
}
.admin-login-input:focus { border-color: var(--brand-lift); box-shadow: 0 0 0 3px rgba(143, 186, 172, 0.25); }
.admin-login-input.error { border-color: var(--danger-lift); }
.admin-login-submit {
  width: 100%; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500;

  background: var(--terracotta); color: white; border: none;
  padding: 1rem; border-radius: 8px; cursor: pointer; margin-top: 0.5rem;
  transition: background var(--transition);
}
.admin-login-submit:hover { background: var(--terracotta-light); }
.admin-login-err { font-family: var(--font-ui); font-size: 0.78rem; color: var(--danger-lift); margin-bottom: 1rem; display: none; }
.admin-login-err.show { display: block; }
@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.75rem; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .admin-nav-item { border-left: none; border-bottom: 2.5px solid transparent; padding: 0.6rem 1rem; border-radius: 8px; }
  .admin-nav-item.active { border-bottom-color: var(--terracotta); }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-nav-section { display: none; }
}
@media (max-width: 640px) {
  .admin-stats-grid { grid-template-columns: 1fr; }
  /* Category manager rows stack so nothing overflows on a phone. */
  .admin-cat-row { flex-wrap: wrap; }
  .admin-cat-fields { flex: 1 1 100%; order: 3; }
  .admin-cat-actions { flex-direction: row; flex-wrap: wrap; width: 100%; order: 4; }
  .admin-cat-actions .admin-btn-sm { flex: 1 1 auto; }
  .admin-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

/* ── RESPONSIVE ── */
/* Nav collapses to the hamburger panel here — well above the point where the
   6 links + icon actions would ever get tight, so the bar never wraps. */
@media (max-width: 960px) {
  nav { padding: 0 4vw; }
  .nav-toggle { display: flex; }
  /* The icon/hamburger row must stay above the drawer once it's open — it sits
     earlier in the DOM than the drawer, so without an explicit stacking order
     the drawer would paint over it. (.nav-logo has its own always-on
     position/z-index above, for the unrelated nav::before stacking issue.) */
  .nav-actions { position: relative; z-index: 2; }
  /* The inline desktop link row has nowhere to go on a phone width and is
     fully replaced by the .mnav-drawer below. */
  .nav-links { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE NAV DRAWER — a right-anchored panel over a dimmed scrim (the rest of
   the page stays visible, darkened, at the left edge) rather than a full-
   screen takeover. Content is rebuilt fresh on every open by
   renderMobileNavDrawer() (auth state, cart/wishlist counts, categories all
   change between opens), so this file only owns layout/motion.
   ═══════════════════════════════════════════════════════════════════════════ */
.mnav-scrim {
  position: fixed; inset: 0; z-index: 249;
  background: rgba(20, 29, 33, 0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.mnav-scrim.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.4s var(--ease-out), visibility 0s linear 0s;
}
.mnav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 250;
  width: min(380px, 86vw);
  background: var(--paper);
  box-shadow: -16px 0 48px rgba(20, 29, 33, 0.18);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mnav-drawer.open { transform: translateX(0); }
.mnav-drawer-inner { padding: calc(var(--nav-clear) + 0.5rem) 6vw 3rem; }

.mnav-logo-header { text-align: center; margin-bottom: 1.75rem; }
.mnav-logo-img { height: 44px; width: auto; margin: 0 auto 0.6rem; display: block; }
.mnav-greeting { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--charcoal); }

.mnav-auth-card {
  background: white; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem; box-shadow: var(--shadow-sm); margin-bottom: 1.5rem;
}
.mnav-auth-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.4rem; }
.mnav-auth-sub { font-family: var(--font-ui); font-size: 0.82rem; color: var(--warm-gray); line-height: 1.6; margin-bottom: 1.1rem; }
.mnav-auth-btns { display: flex; gap: 0.7rem; }
.mnav-auth-btn {
  flex: 1; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600;
  padding: 0.75rem; border-radius: 10px; cursor: pointer; text-align: center;
  transition: all var(--transition);
}
.mnav-auth-btn.outline { background: transparent; border: 1.5px solid var(--line-strong); color: var(--charcoal); }
.mnav-auth-btn.outline:hover { border-color: var(--brand); color: var(--brand); }
.mnav-auth-btn.filled { background: var(--charcoal); border: 1.5px solid var(--charcoal); color: white; }
.mnav-auth-btn.filled:hover { background: var(--terracotta); border-color: var(--terracotta); }

.mnav-account-card { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.5rem; }
.mnav-account-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: white;
}
.mnav-account-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--charcoal); }
.mnav-account-link { font-family: var(--font-ui); font-size: 0.8rem; color: var(--brand); }

.mnav-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 2rem; }
.mnav-quick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1rem 0.5rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: white; color: var(--charcoal); text-align: center;
  transition: border-color var(--transition), transform 0.25s var(--ease-out);
}
.mnav-quick-btn:hover { border-color: var(--brand); transform: translateY(-2px); }
.mnav-quick-btn svg { color: var(--brand); }
.mnav-quick-label { font-family: var(--font-ui); font-size: 0.74rem; font-weight: 500; }

.mnav-section-label {
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink-faint); display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.mnav-section-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.mnav-cat-list, .mnav-more-list { list-style: none; margin-bottom: 2rem; }
.mnav-cat-row, .mnav-more-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line);
  color: var(--charcoal); text-decoration: none;
}
.mnav-cat-thumb {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; color: white;
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
}
.mnav-cat-name, .mnav-more-row { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 500; }
.mnav-cat-name { flex: 1; }
.mnav-cat-arrow { color: var(--ink-faint); flex-shrink: 0; }
.mnav-more-row { display: block; }
.mnav-cta {
  display: block; text-align: center; font-family: var(--font-ui);
  font-size: 0.92rem; font-weight: 600; color: white;
  background: var(--charcoal); border-radius: var(--r-md);
  padding: 1rem; text-decoration: none;
  transition: background var(--transition);
}
.mnav-cta:hover { background: var(--terracotta); }
@media (max-width: 1024px) {
  .categories-grid { grid-template-columns: 1fr 1fr; }
  .cat-card:first-child { grid-column: 1 / -1; grid-row: auto; }
  .cat-card:first-child .cat-inner { aspect-ratio: 2.2; }
  .products-grid, .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .story-section { grid-template-columns: 1fr; }
  .story-visual { min-height: 320px; }
  /* 3 items in a 2-column grid leaves an empty cell under whichever column
     runs out first. Span the brand block full-width so the two link groups
     pair up cleanly on their own row instead. */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-desc { max-width: 420px; }
  /* The fanned-card tilt/scale only reads as intentional side-by-side; in a
     single stacked column it just looks crooked, so it's reset here. */
  .testimonials-grid { grid-template-columns: 1fr; max-width: 500px; margin: 3.5rem auto 0; gap: 1.5rem; }
  .testimonials-grid .testi-card, .testimonials-grid .testi-card:nth-child(1),
  .testimonials-grid .testi-card:nth-child(2), .testimonials-grid .testi-card:nth-child(3) { transform: none; box-shadow: var(--shadow-sm); }
  .testimonials-grid .testi-card:hover, .testimonials-grid .testi-card:nth-child(1):hover,
  .testimonials-grid .testi-card:nth-child(2):hover, .testimonials-grid .testi-card:nth-child(3):hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .product-detail-main { grid-template-columns: 1fr; gap: 2.5rem; }
  .pd-image-wrap { position: relative; top: 0; }
  .cart-inner { grid-template-columns: 1fr; }
  .cart-summary { position: relative; top: 0; }
  .values-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .wishlist-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .section { padding: 4.5rem 5vw; }
  .hero { padding: 6.5rem 6vw 3rem; min-height: 100vh; min-height: 100dvh; }
  .hero-stats { flex-wrap: wrap; row-gap: 1.5rem; column-gap: 2rem; }
  .shop-grid { grid-template-columns: 1fr; }
  /* Categories and the homepage "تازه‌ها" teaser become horizontal snap-
     scroll rails on phones instead of a tall stack — each card takes most
     of the viewport with the next one peeking in, like a native app
     carousel. The shop page's full catalog grid stays a stacked column;
     that's a browsing page, not a teaser, and side-scrolling would hide
     most of the inventory. Bleeds to the true edge (negative margin
     matching .section's own 5vw) while the first/last card still lines up
     with the rest of the page's text. */
  .categories-grid, .products-grid {
    display: flex;
    grid-template-columns: unset;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    margin: 0 -5vw;
    padding: 0 5vw 0.75rem;
    scrollbar-width: none;
  }
  .categories-grid::-webkit-scrollbar, .products-grid::-webkit-scrollbar { display: none; }
  .cat-card {
    flex: 0 0 auto; width: 78vw;
    scroll-snap-align: start;
    grid-row: unset;
  }
  .cat-card .cat-inner, .cat-card:first-child .cat-inner {
    aspect-ratio: 1; height: auto; min-height: unset;
  }
  .cat-card:first-child .cat-name { font-size: 1.5rem; }
  .product-card { flex: 0 0 auto; width: 72vw; scroll-snap-align: start; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .values-grid, .team-grid, .wishlist-grid { grid-template-columns: 1fr; }
  /* Was flex-direction:column — the add-to-cart button (flex:1) stretched
     full-width while the fixed-width wish button ended up alone on its own
     row underneath, small and stranded. Side-by-side is the standard mobile
     PDP pattern and reads far more intentional. */
  .pd-ctas { gap: 0.75rem; }
  .shop-header-inner { flex-direction: column; align-items: flex-start; }
  .contact-grid { grid-template-columns: 1fr; }
  .reviews-summary { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNT & AUTH PAGES — RESPONSIVE (phones / small screens / tablets)
   Fixes: tab overflow, oversized header, two-column form grids, order rows,
   address cards and the auth card — no horizontal scroll on any width.
   ═══════════════════════════════════════════════════════════════════════════ */
.acct-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.account-signout { margin-inline-start: auto; }
/* Address grid never demands more width than its container (prevents overflow). */
.addr-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

@media (max-width: 900px) {
  .account-inner { padding: 3rem 6vw; }
}
@media (max-width: 760px) {
  .account-inner { padding: 2.25rem 5vw 3rem; }
  .account-header { gap: 1.1rem; margin-bottom: 2rem; padding-bottom: 1.75rem; flex-wrap: wrap; }
  .account-avatar { width: 62px; height: 62px; font-size: 1.5rem; }
  .account-name { font-size: 1.4rem; }
  .account-email { font-size: 0.82rem; word-break: break-word; }
  /* Tab bar becomes a horizontal swipe strip rather than overflowing the page. */
  .account-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin-inline: -5vw; padding-inline: 5vw;
  }
  .account-tabs::-webkit-scrollbar { display: none; }
  .account-tab { flex: 0 0 auto; white-space: nowrap; padding: 0.7rem 1rem; font-size: 0.78rem; }
  .acct-grid-2 { grid-template-columns: 1fr; gap: 0; }
  .order-header { flex-wrap: wrap; gap: 0.5rem 1rem; padding: 1rem 1.1rem; }
  .order-items-row { flex-wrap: wrap; padding: 0.85rem 1.1rem; }
  .order-items-row > span:first-child { flex: 1 1 100%; }
  .order-total { margin-inline-start: auto; }
  .addr-grid { grid-template-columns: 1fr; }
  .profile-form { max-width: none; }
}
@media (max-width: 480px) {
  .account-header { gap: 0.85rem; }
  .account-signout { margin-inline-start: 0; flex: 1 1 100%; text-align: start; }
  .auth-panel { padding: 1.75rem 1.4rem 2rem; }
  .auth-row { flex-direction: column; gap: 0; }
}

/* ═══════ PHONE VALIDATION UX (real-time) ═══════ */
.auth-input.valid { border-color: var(--sage); }
.auth-hint {
  font-family: var(--font-ui); font-size: 0.78rem; color: var(--sage);
  margin-top: 0.35rem; display: none; align-items: center; gap: 0.3rem;
}
.auth-hint.visible { display: flex; }

/* ═══════ PRODUCT REVIEWS ═══════ */
.reviews-section { padding: 0 8vw 2rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.reviews-head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.4rem; }
.reviews-title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--charcoal); }
.reviews-summary {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--warm-gray);
}
.reviews-summary .rs-stars { color: var(--accent-bright); font-size: 1.05rem; }
.review-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; }
.review-card {
  background: white; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
}
.review-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; gap: 1rem; }
.review-author { display: flex; align-items: center; gap: 0.75rem; }
.review-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--terracotta);
  color: white; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.85rem; flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--paper);
}
.review-name { font-family: var(--font-ui); font-weight: 600; color: var(--charcoal); font-size: 0.9rem; }
.review-date { font-family: var(--font-ui); font-size: 0.74rem; color: var(--warm-gray-light); }
.review-stars { color: var(--accent-bright); font-size: 0.95rem; }
.review-text { font-family: var(--font-body); color: var(--charcoal-mid); line-height: 1.7; font-size: 0.95rem; white-space: pre-wrap; }
.review-empty { font-family: var(--font-ui); color: var(--warm-gray); padding: 1.5rem 0; }
.review-edited { font-family: var(--font-ui); font-size: 0.7rem; color: var(--ink-faint); font-style: normal; margin-left: 0.4rem; }

/* Admin reply box — visually distinct, indented beneath the customer review */
.admin-reply {
  margin: 0.9rem 0 0 1.75rem; position: relative;
  background: var(--terracotta-pale); border: 1px solid rgba(143, 186, 172, 0.35);
  border-left: 3px solid var(--terracotta); border-radius: 12px;
  padding: 0.85rem 1.1rem;
}
.admin-reply::before {
  content: '↳'; position: absolute; left: -1.4rem; top: 0.6rem;
  color: var(--terracotta); font-size: 1.1rem;
}
.admin-reply-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.admin-reply-badge {
  font-family: var(--font-ui); font-size: 0.68rem; font-weight: 700;
 color: white; background: var(--terracotta);
  padding: 0.12rem 0.5rem; border-radius: 8px;
}
.admin-reply-date { font-family: var(--font-ui); font-size: 0.72rem; color: var(--warm-gray); }
.admin-reply-text { font-family: var(--font-body); color: var(--charcoal); line-height: 1.6; font-size: 0.9rem; white-space: pre-wrap; }

/* My Reviews (account page) */
.myrev-card { background: white; border: 1px solid var(--cream-dark); border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.myrev-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.myrev-product { font-family: var(--font-ui); font-weight: 600; color: var(--charcoal); font-size: 0.92rem; }
.myrev-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.myrev-btn {
  font-family: var(--font-ui); font-size: 0.76rem; padding: 0.35rem 0.8rem; border-radius: 12px;
  cursor: pointer; border: 1px solid var(--cream-dark); background: var(--cream); color: var(--charcoal-mid);
  transition: all var(--transition);
}
.myrev-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.myrev-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

/* Admin reviews table / cards */
.adminrev-card { background: #1F2C31; border: 1px solid rgba(143, 186, 172, 0.2); border-radius: 8px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.adminrev-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.adminrev-meta { font-family: var(--font-ui); font-size: 0.76rem; color: var(--ink-faint); }
.adminrev-meta strong { color: #DDE4E3; }
.adminrev-stars { color: var(--warn-lift); }
.adminrev-text { font-family: var(--font-body); color: #C9D3D2; line-height: 1.6; font-size: 0.9rem; white-space: pre-wrap; margin: 0.4rem 0 0.75rem; }
.adminrev-reply-box { background: rgba(143, 186, 172, 0.12); border: 1px solid rgba(143, 186, 172, 0.3); border-radius: 12px; padding: 0.75rem 0.9rem; margin-top: 0.5rem; }
.adminrev-reply-label { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 700; color: var(--terracotta-light); margin-bottom: 0.3rem; }
.adminrev-reply-text { font-family: var(--font-body); color: #C9D3D2; line-height: 1.5; font-size: 0.86rem; white-space: pre-wrap; }
.adminrev-reply-input {
  width: 100%; font-family: var(--font-body); font-size: 0.88rem; padding: 0.6rem 0.8rem; resize: vertical; min-height: 64px;
  background: #1B262B; color: #DDE4E3; border: 1px solid rgba(143, 186, 172, 0.35); border-radius: 8px; outline: none;
}
.adminrev-reply-input:focus { border-color: var(--brand-lift); box-shadow: 0 0 0 3px rgba(143, 186, 172, 0.25); }
.review-form {
  background: var(--cream); border: 1px solid var(--cream-dark);
  border-radius: 12px; padding: 1.5rem;
}
.review-form-title { font-family: var(--font-display); font-size: 1.25rem; color: var(--charcoal); margin-bottom: 1rem; }
.review-stars-pick { display: flex; gap: 0.25rem; margin-bottom: 1rem; }
.review-star-btn {
  background: none; border: none; cursor: pointer; font-size: 1.6rem;
  color: var(--warm-gray-light); transition: color var(--transition); line-height: 1;
}
.review-star-btn.on, .review-star-btn:hover { color: var(--terracotta); }
.review-textarea {
  width: 100%; font-family: var(--font-body); font-size: 0.95rem; padding: 0.85rem 1rem;
  border: 1.5px solid var(--cream-dark); background: white; border-radius: 12px;
  color: var(--charcoal); outline: none; resize: vertical; min-height: 90px;
  transition: border-color var(--transition);
}
.review-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.review-gate {
  background: var(--terracotta-pale); border: 1px dashed var(--terracotta);
  border-radius: 12px; padding: 1.25rem 1.5rem; font-family: var(--font-ui);
  font-size: 0.9rem; color: var(--charcoal-mid); line-height: 1.6;
}
.review-gate strong { color: var(--terracotta); }

/* ═══════ CONTACT PAGE ═══════ */
.contact-page { padding: 7rem 8vw 4rem; max-width: 1200px; margin: 0 auto; }
.contact-hero { margin-bottom: 3rem; }
.contact-hero h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--charcoal); line-height: 1.1; }
.contact-hero p { font-family: var(--font-ui); color: var(--warm-gray); margin-top: 1rem; max-width: 560px; font-size: 1rem; }
.contact-grid { display: grid; grid-template-columns: 1.1fr; gap: 2.5rem; align-items: start; }
/* Contact form sits beside the social buttons on desktop, stacks on mobile.
   The single-column rule above stays the mobile default. */
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.1fr 1fr; }
}
.contact-form-card { gap: 1.25rem; }
.contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .contact-form-grid { grid-template-columns: 1fr; } }
.contact-form-card textarea.form-input { font-family: var(--font-ui); }
.contact-info-card {
  background: white; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2.25rem; display: flex; flex-direction: column; gap: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.contact-row { display: flex; gap: 1rem; align-items: flex-start; }
.contact-row-icon {
  width: 46px; height: 46px; border-radius: 14px; background: var(--brand-tint);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0;
}
.contact-row-label { font-family: var(--font-ui); font-size: 0.72rem; color: var(--warm-gray); margin-bottom: 0.2rem; }
.contact-row-val { font-family: var(--font-body); color: var(--charcoal); font-size: 0.98rem; line-height: 1.6; white-space: pre-wrap; }
.contact-row-val a { color: var(--brand); text-decoration: none; }
.contact-row-val a:hover { text-decoration: underline; }
.contact-socials-wrap {
  background: var(--charcoal); border-radius: var(--r-lg); padding: 2.25rem; color: white;
}
.contact-socials-wrap h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-bottom: 0.5rem; }
.contact-socials-wrap p { font-family: var(--font-ui); font-size: 0.88rem; color: var(--warm-gray-light); margin-bottom: 1.5rem; }
.social-btns { display: flex; flex-direction: column; gap: 0.85rem; }
.social-btn {
  display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.2rem;
  border-radius: 14px; font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600;
  color: white; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease-out), filter 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.social-btn:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: var(--shadow-md); }
.social-btn .sb-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.social-btn.sb-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.social-btn.sb-telegram { background: #2AABEE; }
.social-btn.sb-whatsapp { background: #25D366; }
.social-btn.sb-phone { background: var(--terracotta); }
.social-btn.sb-email { background: var(--sage); }

/* ═══════ LATEST NEWS (homepage) ═══════ */
.latest-news-section { padding-top: 1rem; }
.latest-news-card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; cursor: pointer;
  background: white; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.latest-news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.latest-news-body { padding: 2.75rem; display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.latest-news-title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--charcoal); line-height: 1.15; }
.latest-news-excerpt { font-family: var(--font-body); color: var(--charcoal-mid); line-height: 1.7; }
.article-meta { font-family: var(--font-ui); font-size: 0.76rem; color: var(--warm-gray); }

/* ═══════ ARTICLE COVERS / CARDS ═══════ */
.article-cover { background-size: cover; background-position: center; width: 100%; }
.article-cover-ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--charcoal-mid) 100%);
}
.article-cover-ph span { font-family: var(--font-display); font-size: 4rem; color: rgba(255,255,255,0.85); }

/* ═══════ BLOG LIST ═══════ */
.blog-page { padding: 7rem 8vw 4rem; max-width: 1200px; margin: 0 auto; }
.blog-hero { margin-bottom: 2.5rem; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 2rem; }
.blog-card {
  background: white; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  display: flex; flex-direction: column;
}
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.blog-card-body { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; }
.blog-card-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--charcoal); line-height: 1.25; }
.blog-card-excerpt { font-family: var(--font-body); font-size: 0.92rem; color: var(--charcoal-mid); line-height: 1.65; flex: 1; }
.blog-card-more { font-family: var(--font-ui); font-size: 0.82rem; color: var(--brand); font-weight: 600; }

/* ═══════ ARTICLE PAGE ═══════ */
.article-page { padding: 7rem 8vw 5rem; max-width: 820px; margin: 0 auto; }
.article-breadcrumb { font-family: var(--font-ui); font-size: 0.8rem; color: var(--warm-gray); margin-bottom: 1.5rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.article-title { font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3.2rem); font-weight: 800; color: var(--charcoal); line-height: 1.1; margin: 0.5rem 0 1.5rem; }
.article-hero-cover { width: 100%; min-height: 380px; border-radius: var(--r-xl); background-size: cover; background-position: center; margin-bottom: 2.5rem; box-shadow: var(--shadow-md); }
.article-content { font-family: var(--font-body); font-size: 1.08rem; color: var(--charcoal-mid); line-height: 1.9; }
.article-comments { margin-top: 3.5rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.blog-badge-pub { font-family: var(--font-ui); font-size: 0.66rem; font-weight: 700; background: rgba(107,123,94,0.25); color: var(--sage); padding: 0.15rem 0.6rem; border-radius: var(--r-pill); margin-left: 0.5rem; }
.blog-badge-draft { font-family: var(--font-ui); font-size: 0.66rem; font-weight: 700; background: rgba(227,172,85,0.2); color: var(--warn-lift); padding: 0.15rem 0.6rem; border-radius: var(--r-pill); margin-left: 0.5rem; }

/* ═══════ ADDRESS BOOK ═══════ */
.addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.addr-card {
  background: white; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.4rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.addr-card:hover { box-shadow: var(--shadow-md); }
.addr-card.addr-default { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-sm); }
.addr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.addr-label { font-family: var(--font-ui); font-weight: 700; color: var(--charcoal); font-size: 0.95rem; }
.addr-badge { font-family: var(--font-ui); font-size: 0.64rem; font-weight: 700; background: var(--brand); color: white; padding: 0.15rem 0.6rem; border-radius: var(--r-pill); }
.addr-body { font-family: var(--font-body); font-size: 0.9rem; color: var(--charcoal-mid); line-height: 1.7; flex: 1; }
.addr-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ═══════ CHECKOUT ADDRESS SELECTOR ═══════ */
.co-addr-list { display: flex; flex-direction: column; gap: 0.7rem; }
.co-addr-option {
  display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.1rem;
  border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.co-addr-option:hover { border-color: rgba(63, 106, 96, 0.4); }
.co-addr-option.selected { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 1px var(--brand); }
.co-addr-option input { margin-top: 0.25rem; accent-color: var(--brand); }
.co-addr-label { font-family: var(--font-ui); font-weight: 600; color: var(--charcoal); font-size: 0.9rem; display: flex; gap: 0.4rem; align-items: center; }
.co-addr-text { font-family: var(--font-ui); font-size: 0.8rem; color: var(--warm-gray); margin-top: 0.2rem; }

/* ═══════ RECEIPT UPLOAD TRIGGER ═══════
   The real <input type="file"> is visually hidden (still focusable/keyboard-
   operable via its <label for>) — native file inputs render as a raw
   browser-chrome "Choose File" button that looked completely out of place
   against the rest of the design. */
.receipt-upload-trigger {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; padding: 0.9rem 1rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper-alt);
  color: var(--charcoal-mid);
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.receipt-upload-trigger:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.receipt-upload-trigger-compact {
  width: auto; padding: 0.55rem 0.9rem; font-size: 0.78rem; gap: 0.4rem;
}

@media (max-width: 760px) {
  .latest-news-card { grid-template-columns: 1fr; }
  .article-page, .blog-page { padding-left: 6vw; padding-right: 6vw; }
}

/* ═══════ DYNAMIC PRODUCT OPTIONS (product page) ═══════
   The component real, admin-configured products actually use for size/color
   pickers — was still on the pre-redesign radius/colour/weight scale. */
.pd-opt-grid { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1.5rem; }
.pd-opt-btn {
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500; padding: 0.6rem 1.3rem;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--charcoal);
  border-radius: var(--r-pill); cursor: pointer;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.18s var(--ease-out);
}
.pd-opt-btn:hover { border-color: var(--brand); color: var(--brand); }
.pd-opt-btn.selected { border-color: var(--ink); background: var(--ink); color: white; box-shadow: var(--shadow-sm); }
.pd-opt-btn:active { transform: scale(0.96); }
.pd-opt-mod { font-size: 0.74rem; color: var(--accent); font-weight: 600; }
.pd-opt-mod.neg { color: var(--ok); }

/* ── Built-in COLOR option swatches (product page) ── */
.pd-swatch-grid { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.5rem; }
.pd-swatch {
  width: 42px; height: 42px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid var(--paper); background: none; position: relative;
  box-shadow: 0 0 0 1px rgba(30, 43, 48, 0.16);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.pd-swatch-dot {
  position: absolute; inset: 3px; border-radius: 50%;
  background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14);
}
.pd-swatch:hover { transform: scale(1.1); }
.pd-swatch.selected { box-shadow: 0 0 0 2px var(--ink); }
.pd-swatch.selected::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: var(--swc, #fff); pointer-events: none;
}
.pd-color-selected { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--brand); margin-inline-start: 0.5rem; }

/* ═══════ CART — options + price breakdown + thumbnail ═══════ */
.cart-item-img img { display: block; }
.cart-item-opts { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0.35rem 0 0.15rem; }
.cart-opt { font-family: var(--font-ui); font-size: 0.78rem; color: var(--charcoal-mid); }
.cart-opt strong { color: var(--warm-gray); font-weight: 600; }
.cart-item-breakdown { font-family: var(--font-ui); font-size: 0.74rem; color: var(--warm-gray); margin-bottom: 0.35rem; }
.cart-item-breakdown strong { color: var(--terracotta); }

/* ═══════════════════════════════════════════════════════════════════════════
   RTL FIXES — the site is always dir="rtl"; flexbox/grid auto-flip, but these
   absolutely-positioned / physical-direction rules need flipping by hand.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Nav link underline grows from the start (right) edge */
.nav-links a::after { left: auto; right: 0; }
/* Product badge on the leading (right) side */
.product-badge { left: auto; right: 1rem; }
/* Strikethrough old prices: space goes on the inline-start side */
.product-price-old, .shop-product-price-old, .pd-price-old { margin-left: 0; margin-inline-start: 0.4rem; }
/* Password show/hide button sits at the inline-end (left) edge; inputs reserve
   space there via padding-inline-end. */
.auth-pw-toggle { right: auto; left: 0.85rem; }
/* Story timeline runs down the right side in RTL */
.timeline::before { left: auto; right: 0; }
.timeline-item { padding-left: 0; padding-right: 3.5rem; }
.timeline-dot { left: auto; right: -7px; }
/* Admin sidebar divider + active accent on the inline-start (right) edge.
   Scoped to desktop so the mobile admin nav (≤900px, bottom-border accent) is untouched. */
@media (min-width: 901px) {
  .admin-sidebar { border-right: none; border-left: 1px solid rgba(255,255,255,0.06); }
  .admin-nav-item { border-left: none; border-right: 2.5px solid transparent; }
  .admin-nav-item.active { border-left-color: transparent; border-right-color: var(--terracotta); }
}
/* Admin reply box: indent + quote arrow on the right */
.admin-reply { margin: 0.9rem 1.75rem 0 0; border-left: 1px solid rgba(143, 186, 172, 0.35); border-right: 3px solid var(--terracotta); }
.admin-reply::before { content: '↲'; left: auto; right: -1.4rem; }
/* Keep slug/URL inputs and order numbers left-to-right for readability */
input[dir="ltr"], .ltr { direction: ltr; text-align: left; }

/* ═══════ REDUCED MOTION ═══════
   Only the marquee honoured this before, leaving every scroll reveal and hero
   entry animation running for users who asked the OS for less movement.
   Reveals must land at their final state, not stay at opacity 0. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}