/* ==========================================================================
   Glow Home — design tokens and components
   Every colour, radius and font lives here. Components never hardcode a hex.
   ========================================================================== */

/* ---- Fonts -------------------------------------------------------------
   Farhang 2 for headings, IRANSansX for body and UI. Both are commercial
   Fontiran faces, licensed by the studio; the licence files sit alongside
   them in this folder. Marcellus (SIL OFL) covers the Latin
   wordmark and product names. Everything is self-hosted, so nothing is fetched from a
   third party at runtime.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Farhang';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/farhang-500.woff2') format('woff2');
}

@font-face {
  font-family: 'IRANSansX';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/iransansx-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IRANSansX';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/iransansx-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IRANSansX';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/iransansx-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IRANSansX';
  font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/iransansx-900.woff2') format('woff2');
}

@font-face {
  font-family: 'Marcellus';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/marcellus-400.woff2') format('woff2');
}

/* ---- Tokens ------------------------------------------------------------- */

:root {
  /* Type roles */
  --font-display: 'Farhang', Georgia, serif;              /* headings */
  --font-body: 'IRANSansX', system-ui, sans-serif;        /* body + UI */
  --font-latin: 'Marcellus', Georgia, serif;              /* wordmark, Latin names */

  /* Surfaces */
  --color-bg: #f5f0e6;
  --color-surface: #f9f6f0;
  --color-text: #161514;
  --color-divider: rgba(22, 21, 20, 0.14);

  /* Warm neutral ramp */
  --color-neutral-100: #f9f6f0;
  --color-neutral-200: #ece5d8;
  --color-neutral-300: #d9d1c2;
  --color-neutral-400: #b3aa9a;
  --color-neutral-500: #8a8175;
  --color-neutral-600: #6b6459;
  --color-neutral-700: #4d4842;
  --color-neutral-800: #2b2926;
  --color-neutral-900: #362820;

  /* Mocha accent — sampled from the studio's own logo-mark badge (#B49578) */
  --color-accent-100: #f6f2ef;
  --color-accent-200: #e9e0d8;
  --color-accent-300: #d7c6b7;
  --color-accent-400: #c5ad96;
  --color-accent-500: #b49578;
  --color-accent-600: #a47e5b;
  --color-accent-700: #8a6a4c;
  --color-accent-800: #6f563e;
  --color-accent-900: #55422f;

  /* Sage second accent */
  --color-sage-100: #e6eeeb;
  --color-sage-300: #a9c3bb;
  --color-sage-500: #679084;
  --color-sage-700: #4a6a60;

  /* True red — used only for inline field-validation text (.field-error),
     which needs to read as an unambiguous "wrong" signal distinct from the
     warm accent tone .alert-error uses elsewhere. Picked warm/muted rather
     than a pure #ff0000 so it doesn't clash with the rest of the palette. */
  --color-red-700: #c0392b;

  /* True blue — used only for the installment/WhatsApp banner in
     checkout's روش پرداخت, which needs to visually stand apart from every
     other alert/status color on the site (all warm: mocha accent, sage,
     the red above). */
  --color-blue-100: #e8f1fb;
  --color-blue-300: #a9cdf0;
  --color-blue-700: #1c5b9e;
  /* Snapp Pay's own brand blue, sampled directly from
     images/snapp-pay-logo.png's background (#008efa) — deliberately its
     own variable rather than reusing --color-blue-700 above, since the two
     don't match and blue-700 is already used elsewhere in this same banner
     (the step pills, "بیشتر" text) for a purpose unrelated to brand-matching
     the logo art. */
  --color-snapp-blue: #008efa;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --page-max: 1360px;
  --shell-pad: 28px;
  --tabbar-h: 0px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 2px;
  border-radius: 4px;
}

.ltr { direction: ltr; unicode-bidi: isolate; }

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

.icon { width: 20px; height: 20px; flex: none; stroke-width: 2.75; }
.icon-sm { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Layout ------------------------------------------------------------- */

.shell { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--shell-pad); }
.shell-narrow { max-width: 780px; margin: 0 auto; padding-inline: var(--shell-pad); }

/* overflow-x:hidden here contains .page-motif and any other deliberately
   off-canvas decorative bleed at each screen's own edge. body already has
   overflow-x:hidden, but that alone wasn't containing this — position:absolute
   descendants with negative insets were still inflating document scrollWidth
   measurably (confirmed directly, not assumed), which is what let mobile
   browsers compute an oversized layout viewport and made the page appear
   zoomed with a pannable horizontal scroll. */
.screen { position: relative; z-index: 0; padding-block: 34px 70px; overflow-x: hidden; }

/* Decorative botanical line-art, used sparingly on whitespace-heavy pages
   (About, FAQ, Contact, Track) — never on dense grids like the shop, so it
   reads as a quiet brand touch rather than clutter. Sits behind all real
   content via z-index, so it never interferes with reading or tapping. */
.page-motif {
  position: absolute;
  top: -22px;
  inset-inline-end: -30px;
  width: clamp(170px, 22vw, 320px);
  height: auto;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
.motif-anchor { position: relative; z-index: 0; }
.page-motif--start {
  inset-inline-end: auto;
  inset-inline-start: -22px;
  top: -16px;
  width: clamp(130px, 18vw, 220px);
}
.page-motif--mirror {
  inset-inline-end: auto;
  inset-inline-start: -30px;
}

main { min-height: 60vh; }

/* ---- Notice bar --------------------------------------------------------- */

.notice {
  position: relative;
  overflow: hidden;
  background: var(--color-neutral-900);
  color: var(--color-neutral-300);
  font-size: 13.5px;
  text-align: center;
  padding: 9px 16px;
}
.notice strong { color: var(--color-accent-400); font-weight: 500; }
.notice-motif {
  position: absolute;
  top: -150px;
  inset-inline-end: 24px;
  width: 190px;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ---- Header ------------------------------------------------------------- */

.header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* While the menu is open the header (which holds it) goes above the
   bottom tab bar and the sticky action bar. */
html.menu-open .header { z-index: 60; }

.header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.header-start { justify-self: start; position: relative; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }

/* Persistent search bar — a second row under the icon/logo row, always
   visible (not tucked in the hamburger menu, not an icon-only toggle). Full
   width on phones where every pixel is scarce; capped and centered on wider
   screens so it doesn't stretch into an oddly long single-line input, while
   still echoing the centered wordmark above it. */
.header-search { display: flex; justify-content: center; padding-bottom: 14px; }
.search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  max-width: 640px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  transition: border-color 0.15s ease;
}
.search-box:focus-within { border-color: var(--color-accent-500); }
.search-box input { flex: 1; background: none; border: 0; outline: none; font-size: 14.5px; min-width: 0; }
.search-box svg { color: var(--color-neutral-500); flex: none; }

/* Header logo: the flame+G mark (transparent background, solid tan) with
   the "GLOW HOME DECOR" caption set live in CSS rather than baked into the
   raster — the studio's own baked-in caption is only a few pixels tall at
   any size that fits a header, so it reads as a smudge; live text stays
   crisp and legible at any size. */
.wordmark {
  justify-self: center;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.wordmark-badge { height: 64px; width: auto; display: block; }
.wordmark-caption {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-500);
  direction: ltr;
}

.footer-logo { height: 46px; width: auto; }

.icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}
.icon-btn:hover { background: var(--color-surface); }

.badge {
  position: absolute;
  top: 1px;
  inset-inline-end: 1px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-500);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

/* ---- Navigation menu ------------------------------------------------------
   The hamburger (every screen size) opens one panel: every category as a
   heading with all its subcategories under it, then the quick links and
   the cart. Below 900px it is a full-height drawer from the start (right)
   side; from 900px up the same nodes become a wide panel under the header,
   one column per category. Open state and the current page are set by
   applyMenu()/syncNav() in app.js, never by re-rendering the header.
   html.menu-open locks the page's scroll behind it. */

.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded='true'] .icon-open { display: none; }
.menu-btn[aria-expanded='true'] .icon-close { display: block; }

html.menu-open,
html.menu-open body { overflow: hidden; }

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(22, 21, 20, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* while it fades out, a tap goes to the page (e.g. the hamburger again) */
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
html.menu-open .menu-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s ease, visibility 0s;
}

.menu-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 2;
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  box-shadow: 0 0 40px rgba(22, 21, 20, 0.22);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.26s ease, visibility 0s linear 0.26s;
}
.menu-panel.is-open {
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.26s ease, visibility 0s;
}

.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  padding-top: calc(14px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--color-divider);
}
.menu-title { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: #A0806A; }

/* One scrolling column: categories, then quick links, then the cart. */
.menu-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 18px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.menu-cats { display: flex; flex-direction: column; }
.menu-cat { padding-block: 6px 16px; border-bottom: 1px solid var(--color-divider); }
.menu-cat-title {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 4px;
  text-align: start;
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-neutral-800);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.menu-cat-title:hover,
.menu-cat-title:focus-visible { background: var(--color-accent-100); }
.menu-cat-title[aria-current='page'],
.menu-cat-title.in-section { color: var(--color-accent-700); }

.menu-subs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* Chips with 48px tap targets on phones (the usual .chip is 40px). */
.chip.menu-sub { min-height: 48px; padding-inline: 18px; font-size: 14.5px; }
.chip.menu-sub:hover { background: var(--color-accent-100); }
.chip.menu-sub[aria-current='page'] {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: #fff;
}

.menu-quick { display: flex; flex-direction: column; }
.menu-quick-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 4px;
  text-align: start;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-neutral-800);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.menu-quick-link svg { color: var(--color-accent-600); }
.menu-quick-link:hover,
.menu-quick-link:focus-visible { background: var(--color-accent-100); }
.menu-quick-link[aria-current='page'] { color: var(--color-accent-700); font-weight: 700; }

.menu-cart {
  margin-top: 14px;
  padding-inline: 16px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.menu-count {
  margin-inline-start: auto;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-500);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

@media (min-width: 900px) {
  /* Dims the page below the header only; the header stays readable. */
  .menu-backdrop {
    position: absolute;
    top: 100%;
    bottom: auto;
    height: 100vh;
  }

  .menu-panel {
    position: absolute;
    top: 100%;
    bottom: auto;
    inset-inline: 0;
    width: auto;
    max-height: min(72vh, 640px);
    border-top: 1px solid var(--color-divider);
    box-shadow: 0 24px 40px rgba(22, 21, 20, 0.16);
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .menu-panel.is-open {
    transform: none;
    opacity: 1;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s;
  }

  /* The hamburger above turns into the X here, so no second one. */
  .menu-head { display: none; }

  /* One column per category, quick links in a column at the end. */
  .menu-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 36px;
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding: 26px var(--shell-pad) 30px;
  }
  .menu-cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }
  .menu-cat { padding: 0; border: 0; }
  .menu-cat-title {
    min-height: 44px;
    padding-inline: 0;
    border-bottom: 1px solid var(--color-divider);
    border-radius: 0;
    font-size: 17px;
  }
  .menu-cat-title:hover,
  .menu-cat-title:focus-visible { background: none; color: var(--color-accent-700); }

  /* Plain links listed under the heading on desktop. */
  .menu-subs { flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: 6px; }
  .chip.menu-sub {
    min-height: 40px;
    padding: 6px 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    text-align: start;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-neutral-700);
  }
  .chip.menu-sub:hover,
  .chip.menu-sub:focus-visible { background: none; color: var(--color-accent-700); }
  .chip.menu-sub[aria-current='page'] { background: none; color: var(--color-accent-700); font-weight: 700; }

  .menu-quick { padding-inline-start: 28px; border-inline-start: 1px solid var(--color-divider); }
  .menu-quick-link { min-height: 44px; font-size: 15px; border-bottom: 0; border-radius: var(--radius-md); padding-inline: 8px; }
  .menu-cart { margin-top: 10px; padding-inline: 12px; }
}

/* ---- Typography --------------------------------------------------------- */

.page-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.4vw, 34px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #A0806A;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 3.2vw, 26px);
  font-weight: 500;
  line-height: 1.45;
  color: #A0806A;
}

.lead {
  font-size: 16.5px;
  line-height: 2;
  color: var(--color-neutral-700);
  max-width: 68ch;
}

.muted { color: var(--color-neutral-600); font-size: 14.5px; }

.latin-name {
  font-family: var(--font-latin);
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--color-neutral-500);
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--color-accent-500); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-accent { background: var(--color-accent-500); color: #fff; }
.btn-accent:hover { background: var(--color-accent-600); }
.btn-ghost { background: transparent; color: var(--color-neutral-800); border-color: var(--color-divider); }
.btn-ghost:hover { background: var(--color-surface); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.chip {
  min-height: 40px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-neutral-700);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.chip[aria-pressed='true'] {
  background: var(--color-neutral-900);
  border-color: var(--color-neutral-900);
  color: #fff;
}
.chip-sm { min-height: 34px; padding: 6px 14px; font-size: 13.5px; }
.subchips { margin-top: 10px; }
.subchips .chip-sm[aria-pressed='true'] {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
}

/* ---- Product media + placeholder ---------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  background: var(--color-neutral-200);
  border-radius: var(--radius-lg);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88);
}

/* Shown when images/<id>.jpg is missing. Tinted by collection so the grid
   still reads as three families rather than a wall of grey. */
/* Separately: a few installed photos carry a small orange "?" badge baked
   into the image itself, for matches made by sight rather than confirmed by
   the studio — see images/README.txt. Not a CSS concern, noted here so it
   isn't mistaken for a rendering bug later. */
.media-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px;
  text-align: center;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 11px,
      rgba(22, 21, 20, 0.028) 11px 22px
    ),
    var(--fallback-bg, var(--color-neutral-200));
}
.media.no-photo .media-fallback { display: flex; }
.media.no-photo img { display: none; }

/* ---- Product page photo gallery + lightbox popup ------------------------- */

button.media.gallery-cover {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: zoom-in;
  aspect-ratio: 4 / 5;
}
.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-divider);
  padding: 0;
  cursor: pointer;
  background: var(--color-neutral-200);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(17, 14, 11, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 900px;
  flex: 1;
  min-height: 0;
}
.lightbox-img {
  max-width: 100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--color-neutral-900);
}
.lightbox-close {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-nav {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.lightbox-thumbs::-webkit-scrollbar { display: none; }
.lightbox-thumb {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
}
.lightbox-thumb.is-active { border-color: #fff; opacity: 1; }
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-count {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.media-fallback .fb-fa { font-size: 14px; font-weight: 500; color: var(--color-neutral-700); }
.media-fallback .fb-note {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--color-neutral-600);
  background: rgba(249, 246, 240, 0.72);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
}

/* Tints are deliberately quiet: a grid of 22 placeholders should read as
   "photography pending", not as the design itself. */
.col-lamps { --fallback-bg: #f6ece2; --fallback-ink: var(--color-neutral-700); }
.col-candles { --fallback-bg: #edf1ee; --fallback-ink: var(--color-neutral-700); }
.col-decor { --fallback-bg: var(--color-neutral-200); --fallback-ink: var(--color-neutral-700); }

/* ---- Product card ------------------------------------------------------- */

.grid-products {
  display: grid;
  /* minmax(0, …) stops a long price or button label from widening its own
     track and leaving the columns visibly unequal. */
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 26px 22px;
}

.card { display: flex; flex-direction: column; min-width: 0; }

.card-media { position: relative; }
.card-media .media { aspect-ratio: 4 / 5; cursor: pointer; }

.fav {
  position: absolute;
  inset-inline-end: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(249, 246, 240, 0.92);
  color: var(--color-neutral-600);
  cursor: pointer;
  z-index: 2;
}
.fav[aria-pressed='true'] { background: var(--color-accent-500); color: #fff; }
.fav[aria-pressed='true'] svg { fill: currentColor; }

.tag {
  position: absolute;
  inset-inline-start: 10px;
  top: 10px;
  z-index: 2;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 500;
}
.tag-out { background: var(--color-neutral-900); color: #fff; }

.card-body { padding-top: 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.card-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}
/* Long names wrap inside the card instead of running into the next one;
   the English line stops at two lines. */
.card-title-row .latin-name {
  font-size: 14.5px;
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.card-name { font-size: 16.5px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.card-meta { font-size: 13.5px; color: var(--color-neutral-600); overflow-wrap: anywhere; }
.card-price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; margin-bottom: 12px; }
.card-price b { font-size: 16px; font-weight: 700; }

.temp-flag {
  font-size: 11.5px;
  color: var(--color-accent-700);
  background: var(--color-accent-100);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
}

.card .btn { margin-top: auto; }

/* ---- Home / hero --------------------------------------------------------
   The photo in a rounded box shaped exactly like the photo (aspect-ratio
   from --w / --h, the <img>'s own width/height), so it fills the box with
   nothing cropped and no strips. The box is at most min(640px, 72vh) tall
   and its width follows from the ratio. Above 1000 px the text is a column
   beside the photo (on the right in RTL), so it never covers the lamp; at
   1000 px and below it goes under the photo. */

.hero {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding-top: 32px;
}
.hero-photo {
  flex: 0 1 auto;
  min-width: 0;
  width: calc(min(640px, 72vh) * var(--w) / var(--h));
  aspect-ratio: var(--w) / var(--h);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-neutral-200);
}
.hero-bg {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.92);
}
.hero-copy { flex: 0 0 360px; }
.hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.hero-copy .lead { margin-top: 16px; max-width: 42ch; color: var(--color-neutral-700); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.assurances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.assurance {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.assurance svg { color: var(--color-accent-600); margin-top: 3px; }
.assurance b { display: block; font-size: 15px; font-weight: 700; }
.assurance span { font-size: 13.5px; color: var(--color-neutral-600); line-height: 1.7; }

.collections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.collection-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  text-align: start;
  width: 100%;
}
.collection-card:hover { background: var(--color-accent-100); }
.collection-card .media { width: 88px; height: 88px; border-radius: var(--radius-pill); flex: none; }
/* Too small for any label — the tinted hatch alone signals "photo pending". */
.collection-card .media-fallback > * { display: none; }
.collection-card b { font-size: 17px; font-weight: 700; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.block { margin-top: 56px; }

.studio-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.studio-strip .media { aspect-ratio: 3 / 2; }
.studio-note {
  background: var(--color-neutral-900);
  color: var(--color-neutral-300);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.studio-note h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: #fff; }
.studio-note p { font-size: 15px; line-height: 2; }

/* ---- Shop toolbar ------------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-block: 20px 8px;
}
.toolbar .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.toolbar .chips::-webkit-scrollbar { display: none; }
.toolbar .sort { margin-inline-start: auto; }

.result-line { font-size: 14px; color: var(--color-neutral-600); margin-bottom: 22px; }

.empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}
.empty p { margin-top: 8px; color: var(--color-neutral-600); }
.empty .btn { margin-top: 18px; }

/* ---- Collection banner -------------------------------------------------- */

.banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 1;
  min-height: 260px;
  max-height: 420px;
  /* Without this, aspect-ratio + min-height fight each other on narrow
     viewports: when the width-derived height (container width ÷ 3) falls
     below min-height, the browser widens the box to min-height × 3 to keep
     the ratio — well past the container, since overflow:hidden above only
     clips this box's own content, not its outer size against its parent.
     That's what was causing the page-wide horizontal scroll/zoom-looking
     bug on category pages (the only routes using this component). */
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  margin-bottom: 30px;
}
.banner .media { position: absolute; inset: 0; border-radius: 0; }
.banner-photo-fill { position: absolute; inset: 0; overflow: hidden; }
.banner-photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(28px) brightness(0.55) saturate(1.15);
  transform: scale(1.15);
}
.banner-photo-fg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(0.88);
}
.banner-copy {
  position: relative;
  z-index: 2;
  padding: 28px;
  width: 100%;
  background: linear-gradient(to top, rgba(22, 21, 20, 0.82), rgba(22, 21, 20, 0));
  color: #fff;
}
.banner-copy .banner-title { color: #fff; }
.banner-copy p { color: var(--color-neutral-300); max-width: 56ch; margin-top: 6px; }

/* bannerFit: 'whole' (data.js) — a landscape banner photo shown whole: the
   box is shaped exactly like the photo (--w / --h, its width/height), at most
   min(560px, 65vh) tall, centred; no blur layer, no cropping, no strips. The
   title stays on the photo at the bottom over the gradient. */
.banner.banner--whole {
  display: block;
  aspect-ratio: var(--w) / var(--h);
  width: min(100%, calc(min(560px, 65vh) * var(--w) / var(--h)));
  min-height: 0;
  max-height: none;
  margin-inline: auto;
}
.banner--whole .banner-photo {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.88);
}
.banner--whole .banner-copy { position: absolute; inset-inline: 0; bottom: 0; }

/* ---- Product detail ----------------------------------------------------- */

.product {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: start;
}
.product .media { aspect-ratio: 4 / 5; }
.product > * { min-width: 0; }
.product .page-title, .product .latin-name { overflow-wrap: anywhere; }

.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-neutral-600); margin-bottom: 18px; flex-wrap: wrap; }
.crumbs button { background: none; border: 0; cursor: pointer; color: inherit; font-size: inherit; padding: 0; }
.crumbs button:hover { color: var(--color-accent-600); }

.price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.price-row b { font-size: 26px; font-weight: 900; }

.spec-list { margin-top: 24px; border-top: 1px solid var(--color-divider); }
.spec-list div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--color-divider);
  font-size: 15px;
}
.spec-list dt { color: var(--color-neutral-600); }
.spec-list dd { font-weight: 500; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.qty button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
}
.qty button:hover { background: var(--color-surface); }
.qty span { min-width: 44px; text-align: center; font-weight: 700; }

.buy-row { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; align-items: center; }
.buy-row .btn { flex: 1; min-width: 150px; }

/* ---- Cart --------------------------------------------------------------- */

.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 34px; align-items: start; }

.cart-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-divider);
}
.cart-row .media { width: 84px; height: 84px; border-radius: var(--radius-md); cursor: pointer; }
.cart-row .media-fallback { padding: 4px; }
.cart-row .media-fallback .fb-note { display: none; }
.cart-row .media-fallback .fb-fa { font-size: 12px; }
.cart-row b { font-size: 16px; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.cart-row .cart-meta { font-size: 13px; color: var(--color-neutral-600); overflow-wrap: anywhere; }
.cart-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.link-danger {
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--color-neutral-600);
  cursor: pointer;
  padding: 4px;
}
.link-danger:hover { color: var(--color-accent-700); }

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.panel h3 { font-family: var(--font-display); font-size: 19px; font-weight: 500; margin-bottom: 16px; }

.sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 15px; }
.sum-row.total {
  border-top: 1px solid var(--color-divider);
  margin-top: 10px;
  padding-top: 14px;
  font-size: 18px;
  font-weight: 900;
}
.sum-row .sage { color: var(--color-sage-700); }

.code-row { display: flex; gap: 8px; margin-top: 14px; }
.code-row .input { flex: 1; }
.code-msg { font-size: 13.5px; margin-top: 8px; color: var(--color-sage-700); }
.code-msg.bad { color: var(--color-accent-700); }

.ship-hint {
  font-size: 13.5px;
  color: var(--color-neutral-600);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-top: 14px;
}

/* ---- Forms -------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 14px; font-weight: 500; }
.field .hint { font-size: 12.5px; color: var(--color-neutral-600); }
/* Deliberately red, not the muted --color-accent-800 tone .alert-error
   uses elsewhere — inline per-field validation needs to read at a glance
   as "this is wrong," which the site's warm/brown "error" tone doesn't
   signal clearly enough on its own next to a plain label. */
.field-error { display: block; font-size: 12.5px; color: var(--color-red-700); }

.input, textarea.input, select.input {
  width: 100%;
  min-height: 46px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 11px 15px;
  font-size: 15px;
  outline: none;
}
.input:focus { border-color: var(--color-neutral-900); }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.9; }

/* Reusable "fixed prefix badge merged into an input" shell — checkout's
   +98 phone field, /track's GH- code field, and /track's +98 phone field
   all share this exact same markup/CSS rather than each inventing their
   own. The border/background/focus ring live on the wrapper; the input
   inside is stripped of its own so the two read as one field, not a
   label next to a box. */
.input-prefixed {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding-inline-start: 13px;
}
.input-prefixed:focus-within { border-color: var(--color-neutral-900); }
.input-prefix-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  color: var(--color-neutral-700);
  white-space: nowrap;
  padding-inline-end: 10px;
  margin-inline-end: 6px;
  border-inline-end: 1px solid var(--color-divider);
  user-select: none;
}
.input-prefixed-field {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  min-height: 46px;
  padding: 11px 15px 11px 0;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }

.option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: start;
  padding: 15px 18px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
}
.option[aria-checked='true'] { border: 2px solid var(--color-neutral-900); background: var(--color-bg); padding: 14px 17px; }
.option:disabled { opacity: 0.45; cursor: not-allowed; }
.option b { display: block; font-size: 15.5px; font-weight: 700; }
.option span { font-size: 13.5px; color: var(--color-neutral-600); }
.option .opt-end { margin-inline-start: auto; font-size: 14.5px; font-weight: 500; white-space: nowrap; }

.option-stack { display: grid; gap: 10px; }

.alert {
  border-radius: var(--radius-md);
  padding: 13px 17px;
  font-size: 14.5px;
  margin-top: 16px;
}
.alert-error { background: var(--color-accent-100); color: var(--color-accent-800); border: 1px solid var(--color-accent-200); }
.alert-info { background: var(--color-sage-100); color: var(--color-sage-700); }

/* Checkout with «کارت به کارت»: no order button, a calm "contact us" box
   (payByContactHtml() in app.js). Same sage tone as .alert-info. */
.pay-contact {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--color-sage-100);
  color: var(--color-sage-700);
  font-size: 14.5px;
  line-height: 1.9;
}
.pay-contact p { margin-bottom: 12px; }
.pay-contact-links { display: flex; flex-direction: column; gap: 8px; }
.pay-contact-links .btn { width: 100%; gap: 8px; }
.pay-contact-links .btn-ghost { background: var(--color-bg); }
.pay-contact-call { margin-top: 10px; font-size: 13.5px; color: var(--color-neutral-600); text-align: center; }
.pay-contact-call a { color: var(--color-accent-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.alert-whatsapp {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
  border: 1px solid var(--color-blue-300);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
/* Logo header — its own full-width row above the banner's text (width:100%
   on a flex item forces a wrap in the parent's flex-wrap row, same trick
   .snapp-pay-steps uses below). Background matches the English logo's own
   art exactly (--color-snapp-blue) so that logo's square canvas blends into
   the header with no visible edge, rather than sitting in a box of a
   different blue. */
.snapp-pay-logo-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  background: var(--color-snapp-blue);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 2px;
}
/* Width is intentionally unset so each logo's own aspect ratio scales
   naturally from height alone, no distortion. */
.snapp-pay-logo { height: 48px; width: auto; }
/* The fa logo's own art is solid Snapp-brand blue (#3d8cf1-ish) on
   transparent, which would vanish against the header's identically-blue
   background above — brightness(0) crushes it to solid black regardless of
   its original hue, invert(1) then flips that to white; alpha (so the
   anti-aliased edges) is untouched by either filter. */
.snapp-pay-logo-fa { filter: brightness(0) invert(1); }

/* "بیشتر" toggle — plain text-link styling (no existing storefront class
   for this), matching the banner's own blue rather than the site's usual
   warm accent, since it lives inside a blue box. */
.snapp-pay-more {
  background: none;
  border: 0;
  padding: 0;
  margin-inline-start: auto;
  font: inherit;
  font-weight: 700;
  color: var(--color-blue-700);
  text-decoration: underline;
  cursor: pointer;
}

/* Expanded accordion — hidden by default, shown inline (pushes the rest of
   the page down, not an overlay) when .snapp-pay-banner has .open. Same
   show/hide-via-parent-class pattern as .faq-item.open .faq-a elsewhere in
   this file. */
.snapp-pay-steps { display: none; width: 100%; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-blue-300); }
.snapp-pay-banner.open .snapp-pay-steps { display: block; }
.snapp-pay-steps h4 { margin: 0 0 10px; font-size: 15px; font-weight: 700; }

.snapp-pay-step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.snapp-pay-step-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-blue-700);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 13.5px;
  line-height: 1.7;
}
.snapp-pay-step-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
/* CTA row — flex-end lands at the visual left on this RTL site (main-axis
   end = left when dir="rtl"), same convention as .snapp-pay-more's
   margin-inline-start:auto above. */
.snapp-pay-cta-row { display: flex; justify-content: flex-end; margin-top: 16px; }
.snapp-pay-cta { background: var(--color-blue-700); color: #fff; }
.snapp-pay-cta:hover { background: #17497f; } /* ~12% darker than --color-blue-700; no darker blue token exists yet */

.checkout-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px; align-items: start; }
.checkout-step { margin-bottom: 34px; }
.checkout-step h3 { font-family: var(--font-display); font-size: 19px; font-weight: 500; margin-bottom: 14px; }

/* ---- Confirmation ------------------------------------------------------- */

.done { text-align: center; padding-block: 20px 10px; }
.done-mark {
  width: 74px; height: 74px; margin: 0 auto 22px;
  border-radius: var(--radius-pill);
  background: var(--color-sage-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.done-mark svg { width: 34px; height: 34px; }
.order-code {
  display: inline-block;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 12px 28px;
  margin-top: 18px;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* ---- FAQ ---------------------------------------------------------------- */

.faq-item { border-bottom: 1px solid var(--color-divider); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: 0;
  text-align: start;
  padding: 19px 2px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.faq-q svg { color: var(--color-accent-600); transition: transform 0.18s ease; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 2px 20px; color: var(--color-neutral-700); line-height: 2; }
.faq-item.open .faq-a { display: block; }

/* ---- About -------------------------------------------------------------- */

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.about-grid .media { aspect-ratio: 4 / 5; }
.about-body p + p { margin-top: 16px; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.stat {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.stat b { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--color-accent-600); }
.stat span { font-size: 14px; color: var(--color-neutral-700); }

/* ---- Track -------------------------------------------------------------- */

.track-steps { display: grid; gap: 12px; margin-top: 28px; }
.track-step {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 15px 18px;
}
.track-step svg { color: var(--color-accent-600); }
.track-step b { font-size: 15px; }
.track-step span { display: block; font-size: 13.5px; color: var(--color-neutral-600); }

/* Once a real order is looked up, dim steps the order hasn't reached yet
   and highlight the ones it has (see TRACK_STEP in app.js). */
.track-steps.has-status .track-step { opacity: 0.4; }
.track-steps.has-status .track-step.is-active {
  opacity: 1;
  border-color: var(--color-accent-600);
  background: var(--color-accent-100);
}
.track-items { margin-top: 22px; }
.track-items ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.track-items li { display: flex; justify-content: space-between; font-size: 14px; }
.track-items .track-total { margin-top: 10px; font-weight: 600; display: flex; justify-content: space-between; }

/* ---- Footer ------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin-top: 70px;
  background: var(--color-neutral-900);
  color: var(--color-neutral-300);
  padding: 50px 0 40px;
}
.footer-motif {
  position: absolute;
  bottom: -60px;
  inset-inline-end: 4%;
  width: clamp(200px, 20vw, 320px);
  height: auto;
  opacity: 0.8;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.footer h4 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.footer-links { display: grid; gap: 9px; font-size: 14.5px; }
.footer-links button { background: none; border: 0; text-align: start; color: inherit; font-size: inherit; cursor: pointer; padding: 0; }
.footer-links button:hover, .footer a:hover { color: var(--color-accent-400); }
.footer-blurb { font-size: 14.5px; line-height: 1.9; max-width: 34ch; margin-top: 12px; white-space: pre-line; }
.footer-trust { margin-top: 18px; }
.footer-trust a {
  display: inline-block;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 6px;
  line-height: 0;
}
.footer-trust img { display: block; width: 88px; max-width: 100%; height: auto; }
.static-trust { margin: 0; padding: 24px 16px; text-align: center; }
.footer-divider {
  border-top: 1px solid var(--color-neutral-700);
  margin-top: 30px;
}

/* ---- Bottom action bar (phone) ------------------------------------------ */

.action-bar { display: none; }
.tabbar { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  /* No room for a text column beside the photo: the photo takes the full
     content width (ratio kept) and the text goes under it. */
  .hero { flex-direction: column; align-items: stretch; gap: 22px; padding-top: 22px; }
  .hero-photo { width: 100%; }
  .hero-copy { flex: none; }
  .product { grid-template-columns: 1fr; gap: 26px; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; gap: 26px; }
  .studio-strip { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .collections { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .lightbox-overlay { padding: 14px; }
  .lightbox-stage { gap: 8px; }
  .lightbox-nav { width: 38px; height: 38px; }
  .lightbox-img { max-height: 62vh; }
  .lightbox-close { top: 10px; inset-inline-end: 10px; width: 38px; height: 38px; }

  :root { --shell-pad: 18px; --tabbar-h: 68px; }

  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

  .header-top { padding-block: 12px; gap: 8px; }
  .wordmark-badge { height: 46px; }
  .wordmark-caption { font-size: 8.5px; letter-spacing: 0.16em; }
  .header-search { padding-bottom: 12px; }
  .search-box { padding: 8px 14px; }

  .screen { padding-block: 22px 40px; }
  .block { margin-top: 40px; }

  .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .card-name { font-size: 15px; }
  .card-meta { font-size: 12.5px; }
  .card-price { flex-wrap: wrap; gap: 4px 8px; }
  .card-price b { font-size: 15px; }
  .card .btn { white-space: normal; padding-inline: 12px; }
  .card-title-row { flex-wrap: wrap; gap: 2px 8px; }

  .form-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer { margin-bottom: 0; }

  .cart-row { grid-template-columns: 68px minmax(0, 1fr); }
  .cart-row .media { width: 68px; height: 68px; }
  .cart-row-end { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }

  .banner { min-height: 180px; }
  /* The whole-photo banner is only ~236 px tall here: a compact caption on
     the photo (smaller type, subtitle at most two lines, small padding) over
     a gradient that only covers the bottom and fades out above the title,
     so it covers as little of the photo as possible. */
  .banner--whole .banner-copy {
    padding: 18px 12px 12px;
    /* dark behind the text (the right side can be the bright curtain),
       fading out only in the top padding */
    background: linear-gradient(to top, rgba(22, 21, 20, 0.85) 0%, rgba(22, 21, 20, 0.72) 75%, rgba(22, 21, 20, 0) 100%);
  }
  .banner--whole .banner-copy .banner-title { font-size: 22px; line-height: 1.25; }
  .banner--whole .banner-copy p {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.9);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  /* Sticky action bar for product / cart / checkout */
  .action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    inset-inline: 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    z-index: 45;
    background: var(--color-surface);
    border-top: 1px solid var(--color-divider);
    padding: 10px var(--shell-pad);
  }
  .action-bar .ab-info { font-size: 13px; color: var(--color-neutral-600); line-height: 1.4; }
  .action-bar .ab-info b { display: block; font-size: 16px; font-weight: 900; color: var(--color-text); }
  .action-bar .btn { flex: 1; }
  body.has-action-bar { padding-bottom: calc(var(--tabbar-h) + 66px + env(safe-area-inset-bottom)); }

  /* Bottom tab bar */
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    background: var(--color-surface);
    border-top: 1px solid var(--color-divider);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 60px;
    background: none;
    border: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-neutral-600);
    cursor: pointer;
  }
  .tabbar button[aria-current='true'] { color: var(--color-accent-600); font-weight: 700; }
  .tabbar .badge { top: 6px; inset-inline-end: 50%; margin-inline-end: -22px; }
}

@media (max-width: 380px) {
  .grid-products { grid-template-columns: 1fr; }
}