/* =========================================================
   LUXE MUSE — Styles
   Two identities, one site:
   DARK  · "Noir Lacquer"     jet black, ivory, emerald accents, platinum shimmer, Bodoni
   LIGHT · "Atelier Concrete" porcelain & concrete, ink black, oxblood, carved capitals
   ========================================================= */

/* ---------- DARK · Noir Lacquer (default) ---------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070707;
  --bg-2: #0c0c0d;
  --bg-3: #040404;
  --surface: #111112;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.17);
  --ink: #f5f4f2;
  --text: #dddbd7;
  --muted: #a09d98;
  --dim: #8a8783;
  --danger: #ff6b7d;
  --accent: #2f7d63;
  --accent-hi: #43a181;
  --accent-glow: rgba(67, 161, 129, 0.45);
  --eyebrow: #c3c6cd;
  --em: #e6e8ec;
  --price: #e2e4e8;
  --rule: #c3c6cd;
  --frame: rgba(195, 198, 205, 0.4);
  --shimmer: linear-gradient(100deg, #8a8d96 0%, #f7f8fa 18%, #b5b8c0 36%, #ffffff 52%, #8c8f98 70%, #dcdfe4 88%, #8a8d96 100%);
  --header-bg: rgba(7, 7, 7, 0.78);
  --glass: rgba(7, 7, 7, 0.6);
  --btn-bg: #f2efe9;
  --btn-fg: #0a0a0a;
  --btn-hover: #ffffff;
  --btn-hover-fg: #0a0a0a;
  --btn-shadow: 0 10px 40px -12px rgba(255, 255, 255, 0.35);
  --marquee-bg: var(--bg-3);
  --marquee-fg: var(--muted);
  --marquee-mark: var(--accent-hi);
  --tile-fade: rgba(4, 4, 4, 0.92);
  --tile-ink: var(--ink);
  --lightbox: rgba(4, 4, 4, 0.96);
  --page-hero-bg: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%);
  --hero-shade: linear-gradient(90deg, rgba(7, 7, 7, 0.9) 0%, rgba(7, 7, 7, 0.62) 38%, rgba(7, 7, 7, 0.12) 72%, rgba(7, 7, 7, 0.05) 100%);
  --hero-shade-bottom: linear-gradient(180deg, rgba(7, 7, 7, 0) 60%, #070707 100%);
  --page-shade: rgba(7, 7, 7, 0.7);
  --grain-op: 0.05;
  --grain-blend: normal;

  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --display-case: none;
  --display-track: -0.01em;
  --em-style: italic;
  --ds: 1;
  --card-name: 22px;
  --list-font: var(--display);
  --list-size: 20px;
  --list-case: none;
  --list-track: 0;
  --head-align: center;
  --radius: 999px;
  --eb-w: 34px;
  --eb-h: 1px;

  /* product illustration backdrop */
  --art-top: #201e1f;
  --art-top-lit: #2a201d;
  --art-top-rouge: #3f0910;
  --art-bottom: #080808;
  --floor-1: #151415;
  --floor-2: #080808;
  --art-line: rgba(255, 255, 255, 0.05);
  --art-shadow: 0.8;
  --rouge-veil: 0.07;
  --glass-edge: rgba(255, 255, 255, 0.3);
}

/* ---------- LIGHT · Atelier Concrete ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f0;
  --bg-2: #e9e8e5;
  --bg-3: #dfddd9;
  --surface: #e4e2de;
  --line: rgba(17, 17, 17, 0.12);
  --line-2: rgba(17, 17, 17, 0.3);
  --ink: #111111;
  --text: #2b2a29;
  --muted: #5e5b57;
  --dim: #625e59;
  --danger: #9b1429;
  --accent: #1f5240;
  --accent-hi: #286a53;
  --accent-glow: rgba(31, 82, 64, 0.35);
  --eyebrow: #1f5240;
  --em: #1f5240;
  --price: #111111;
  --rule: #111111;
  --frame: #111111;
  --shimmer: linear-gradient(100deg, #111 0%, #111 30%, #6b6b6b 42%, #1f5240 50%, #111 60%, #111 100%);
  --header-bg: rgba(242, 242, 240, 0.86);
  --glass: rgba(242, 242, 240, 0.72);
  --btn-bg: #111111;
  --btn-fg: #f2f2f0;
  --btn-hover: var(--accent);
  --btn-hover-fg: #ffffff;
  --btn-shadow: none;
  --marquee-bg: #111111;
  --marquee-fg: #d9d7d3;
  --marquee-mark: #6fbf9f;
  --tile-fade: rgba(242, 242, 240, 0.96);
  --tile-ink: #111111;
  --lightbox: rgba(242, 242, 240, 0.97);
  --page-hero-bg: linear-gradient(180deg, var(--bg-3), var(--bg));
  --hero-shade: linear-gradient(90deg, rgba(242, 242, 240, 0.94) 0%, rgba(242, 242, 240, 0.72) 38%, rgba(242, 242, 240, 0.15) 72%, rgba(242, 242, 240, 0.04) 100%);
  --hero-shade-bottom: linear-gradient(180deg, rgba(242, 242, 240, 0) 62%, #f2f2f0 100%);
  --page-shade: rgba(242, 242, 240, 0.78);
  --grain-op: 0.09;
  --grain-blend: multiply;

  --display: "Marcellus", "Trajan Pro", Georgia, serif;
  --display-case: uppercase;
  --display-track: 0.04em;
  --em-style: normal;
  --ds: 0.74;
  --card-name: 14.5px;
  --list-font: "Marcellus", Georgia, serif;
  --list-size: 14px;
  --list-case: uppercase;
  --list-track: 0.12em;
  --head-align: left;
  --radius: 0;
  --eb-w: 7px;
  --eb-h: 7px;

  --art-top: #f1f0ed;
  --art-top-lit: #f4eee7;
  --art-top-rouge: #ecd9d9;
  --art-bottom: #d6d4d0;
  --floor-1: #d1cfcb;
  --floor-2: #c3c1bc;
  --art-line: rgba(0, 0, 0, 0.1);
  --art-shadow: 0.35;
  --rouge-veil: 0.05;
  --glass-edge: rgba(17, 17, 17, 0.35);
}

:root {
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 80px);
  --pad-x: max(var(--gutter), calc((100% - 1320px) / 2));
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-h: 150px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: var(--grain-op);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* theme switch: circular reveal (browsers that support View Transitions) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 1px solid var(--rule); outline-offset: 3px; }

::-webkit-scrollbar { width: 10px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-3); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.muted { color: var(--dim); }
.center { text-align: center; margin-top: 64px; }

/* display type shared by all headlines */
.hero-title, .h2, .page-title, .pd-name, .card-name, .tile h3, .craft-item h3,
.logo-word, .drawer nav a, .marquee span, .signature, .pd-size {
  font-family: var(--display);
  text-transform: var(--display-case);
  letter-spacing: var(--display-track);
}
.hero-title em, .h2 em { font-style: var(--em-style); }

/* ---------- shimmer text ---------- */
.shimmer {
  background: var(--shimmer);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 9s linear infinite;
}
@keyframes shimmer { to { background-position: -250% 0; } }

/* ---------- labels ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.eyebrow::before { content: ""; width: var(--eb-w); height: var(--eb-h); background: currentColor; opacity: 0.8; }
.section-head .eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: 0.7; }
[data-theme="light"] .section-head .eyebrow::after { display: none; }

.h2 {
  font-weight: 400;
  font-size: calc(var(--ds) * clamp(38px, 5vw, 66px));
  line-height: 1.08;
  color: var(--ink);
  margin-top: 18px;
}
.h2 em { color: var(--em); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 32px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  cursor: pointer;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), color 0.5s var(--ease), box-shadow 0.6s var(--ease);
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); box-shadow: var(--btn-shadow); color: var(--btn-hover-fg); }
.btn.ghost { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn.ghost:hover { border-color: var(--rule); color: var(--ink); box-shadow: none; }
[data-theme="light"] .btn.ghost { border-color: var(--ink); color: var(--ink); }
[data-theme="light"] .btn.ghost:hover { background: var(--ink); color: var(--bg); }
.btn svg { width: 18px; height: 18px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { color: var(--ink); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .site-header { border-bottom-color: var(--ink); }
.announce {
  text-align: center;
  padding: 8px 16px;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .announce { background: var(--ink); color: #d9d7d3; border-bottom: 0; }
.bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px var(--pad-x) 14px;
  transition: padding 0.5s var(--ease);
}
.site-header.scrolled .bar { padding-top: 12px; padding-bottom: 8px; }
.bar-left { display: flex; align-items: center; gap: 8px; }
.bar-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.bar-link {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.4s;
}
.bar-link:hover { color: var(--ink); }

.back-btn {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 7px 18px 7px 10px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.back-btn svg { width: 18px; height: 18px; transition: transform 0.4s var(--ease); }
.back-btn:hover { border-color: var(--rule); }
.back-btn:hover svg { transform: translateX(-3px); }
.menu-btn { display: none; }

/* theme toggle */
.theme-btn {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 7px 14px 7px 10px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.theme-btn svg { width: 17px; height: 17px; transition: transform 0.8s var(--ease); }
.theme-btn:hover { border-color: var(--rule); }
.theme-btn:hover svg { transform: rotate(40deg); }
[data-theme="dark"] .theme-btn svg:last-of-type,
[data-theme="light"] .theme-btn svg:first-of-type { display: none; }

.logo { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 44px; }
.logo-word {
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  text-transform: uppercase;
  line-height: 1;
}
.logo-sub {
  margin-top: 8px;
  font-size: 9px;
  letter-spacing: 0.52em;
  padding-left: 0.52em;
  text-transform: uppercase;
  color: var(--muted);
}
.logo-img { max-height: 58px; width: auto; }

.main-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px clamp(14px, 1.9vw, 36px);
  padding: 4px var(--gutter) 16px;
}
.main-nav a {
  position: relative;
  padding: 4px 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.4s;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transition: transform 0.6s var(--ease);
}
.main-nav a:hover,
.main-nav a.active { color: var(--ink); }
.main-nav a:hover::after,
.main-nav a.active::after { transform: scaleX(1); }
[data-theme="dark"] .main-nav a.active::after { background: var(--accent-hi); box-shadow: 0 0 10px var(--accent-glow); }

/* ---------- drawer (mobile menu) ---------- */
.drawer { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.5s; }
.drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(380px, 86vw);
  padding: 28px 30px 40px;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease);
  overflow-y: auto;
}
.drawer-open .drawer:not(.minicart) { pointer-events: auto; }
.drawer-open .drawer:not(.minicart) .drawer-scrim { opacity: 1; }
.drawer-open .drawer:not(.minicart) .drawer-panel { transform: none; }
.drawer-close { margin-left: -8px; }
.drawer-logo { margin: 26px 0 36px; }
.drawer-logo .logo { align-items: flex-start; }
.drawer-logo .logo-word, .drawer-logo .logo-sub { display: block; text-align: left; padding-left: 0; }
.drawer nav a {
  display: block;
  padding: 14px 0;
  font-size: calc(var(--ds) * 25px);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: color 0.4s, padding 0.4s var(--ease);
}
.drawer nav a:hover { color: var(--ink); padding-left: 8px; }
.drawer-theme { margin-top: 32px; display: inline-flex; align-items: center; gap: 10px; background: none; cursor: pointer; color: var(--text); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  min-height: min(calc(100vh - var(--header-h)), 860px);
  padding: clamp(48px, 6vw, 90px) var(--pad-x) clamp(80px, 8vw, 120px);
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  inset: -20% -10% -20% 30%;
  background: var(--hero-glow);
  filter: blur(10px);
  animation: breathe 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe { 50% { opacity: 0.65; transform: scale(1.05); } }
.hero-text { position: relative; z-index: 1; }
.hero-title {
  font-weight: 400;
  font-size: calc(var(--ds) * clamp(60px, 9vw, 136px));
  line-height: 0.98;
  color: var(--ink);
  margin: 26px 0 28px;
}
.hero-sub { max-width: 460px; color: var(--muted); font-size: 16.5px; line-height: 1.85; margin-bottom: 40px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-visual { position: relative; justify-self: center; width: min(440px, 100%); z-index: 1; }
.hero-frame { position: relative; aspect-ratio: 4 / 5; padding: 14px; border: 1px solid var(--frame); }
.hero-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(22px, 22px);
  border: 1px solid var(--line);
  z-index: -1;
}
[data-theme="light"] .hero-frame { background: var(--bg); }
[data-theme="light"] .hero-frame::before { background: var(--bg-3); border-color: var(--ink); }
.hero-art { width: 100%; height: 100%; overflow: hidden; }
.hero-art { position: relative; }
.hero-art svg, .hero-art img { width: 100%; height: 100%; object-fit: cover; }
@keyframes slowzoom { to { transform: scale(1.06); } }
.hero-caption {
  position: absolute;
  right: 0;
  bottom: -44px;
  font-family: var(--display);
  font-style: var(--em-style);
  text-transform: var(--display-case);
  letter-spacing: var(--display-track);
  font-size: calc(var(--ds) * 18px);
  color: var(--muted);
}
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 1px;
  height: 56px;
  background: var(--line-2);
  overflow: hidden;
}
.scroll-cue span {
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: var(--rule);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { to { top: 100%; } }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--marquee-bg); padding: 20px 0; }
.marquee-track { display: flex; align-items: center; width: max-content; animation: marquee 48s linear infinite; }
.marquee span { font-style: var(--em-style); font-size: calc(var(--ds) * 24px); color: var(--marquee-fg); padding: 0 30px; white-space: nowrap; }
.marquee i { font-style: normal; font-size: 10px; color: var(--marquee-mark); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding: clamp(80px, 10vw, 150px) var(--pad-x); }
.section-tight { padding-top: clamp(40px, 5vw, 64px); }
.section-dark { background: linear-gradient(180deg, var(--bg-2), var(--bg) 70%); border-top: 1px solid var(--line); }
.section-head { text-align: var(--head-align); margin-bottom: clamp(44px, 6vw, 80px); }
[data-theme="light"] .section-head { border-bottom: 1px solid var(--ink); padding-bottom: 28px; }

/* ---------- collection tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(var(--tiles, 4), 1fr); gap: 18px; }
.tile-soon .tile-img { opacity: 0.85; }

/* ---------- "Coming soon" (collections with no products yet) ---------- */
.soon-pill, .soon-ribbon {
  display: inline-block;
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--accent-hi);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: var(--radius);
}
[data-theme="light"] .soon-pill, [data-theme="light"] .soon-ribbon { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-hero-inner .soon-pill { margin-top: 26px; }
.soon-ribbon { position: absolute; top: 16px; left: 16px; z-index: 2; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.soon-banner {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  padding: clamp(18px, 2.5vw, 30px);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
[data-theme="light"] .soon-banner { background: var(--bg); border-color: var(--ink); }
.soon-art { aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--line); }
.soon-art svg { width: 100%; height: 100%; }
.soon-body { padding: 10px clamp(0px, 2vw, 20px) 10px 0; }
.soon-body .h2 { margin: 22px 0 18px; font-size: calc(var(--ds) * clamp(30px, 3.6vw, 46px)); }
.soon-body p { color: var(--muted); font-size: 15.5px; line-height: 1.85; max-width: 460px; margin-bottom: 30px; }
.soon-cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) {
  .soon-banner { grid-template-columns: 1fr; }
  .soon-art { max-width: 360px; }
  .soon-body { padding: 0 6px 6px; }
}
@media (max-width: 560px) {
  .soon-cta .btn { width: 100%; }
}
.tile-soon .tile-link i { display: none; }
.tile { position: relative; display: block; aspect-ratio: 3 / 4.4; overflow: hidden; border: 1px solid var(--line); transition: border-color 0.6s; }
.tile:hover { border-color: var(--frame); }
[data-theme="light"] .tile { border-color: var(--ink); }
.tile-img { position: absolute; inset: 0; }
.tile-img svg, .tile-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.6s var(--ease); }
.tile:hover .tile-img svg, .tile:hover .tile-img img { transform: scale(1.09); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, var(--tile-fade)); }
.tile-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px 26px; }
.tile-num { font-family: var(--display); font-style: var(--em-style); color: var(--eyebrow); font-size: 15px; }
.tile h3 { font-size: calc(var(--ds) * clamp(24px, 2.2vw, 32px)); color: var(--tile-ink); line-height: 1.12; margin: 8px 0 16px; }
.tile-link { display: inline-flex; align-items: center; gap: 12px; font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); transition: color 0.4s; }
.tile-link i { display: block; width: 28px; height: 1px; background: currentColor; transition: width 0.6s var(--ease); }
.tile:hover .tile-link { color: var(--tile-ink); }
.tile:hover .tile-link i { width: 56px; }

/* ---------- shop layout + sidebar ---------- */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: clamp(36px, 4.5vw, 72px); align-items: start; }
.shop-layout > * { min-width: 0; }
.sidebar { position: sticky; top: calc(var(--header-h) - 8px); }
.sb-block + .sb-block { margin-top: 40px; }
.sb-title { font-family: var(--sans); font-size: 10.5px; font-weight: 400; letter-spacing: 0.34em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 14px; }
.sb-list { list-style: none; margin: 0; padding: 0; }
.sb-list a {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--list-font);
  font-size: var(--list-size);
  text-transform: var(--list-case);
  letter-spacing: var(--list-track);
  color: var(--muted);
  transition: color 0.4s, padding 0.5s var(--ease), background 0.4s;
}
.sb-list em { font-style: normal; font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; color: var(--dim); }
.sb-list a:hover { color: var(--ink); padding-left: 10px; }
.sb-list a.active { color: var(--ink); padding-left: 18px; }
.sb-list a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--accent-hi);
  transform: rotate(45deg);
  box-shadow: 0 0 12px var(--accent-glow);
}
[data-theme="light"] .sb-list { border-top: 1px solid var(--ink); }
[data-theme="light"] .sb-list a.active { background: var(--ink); color: var(--bg); padding-left: 14px; padding-right: 12px; }
[data-theme="light"] .sb-list a.active em { color: rgba(242, 242, 240, 0.65); }
[data-theme="light"] .sb-list a.active::before { display: none; }

.select { position: relative; }
.select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.select select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 13px 40px 13px 16px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 0;
  font: 300 13.5px var(--sans);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.select select:hover { border-color: var(--rule); }
.select option { background: var(--surface); color: var(--text); }
.sb-note .rule { display: block; width: 40px; height: 1px; background: var(--rule); margin-bottom: 16px; }
.sb-note p { font-size: 13px; line-height: 1.8; color: var(--dim); }

/* ---------- product grid + cards ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
#count { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px clamp(18px, 2.4vw, 34px); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.empty { grid-column: 1 / -1; text-align: center; padding: 80px 0; color: var(--muted); }

.card { display: block; }
.card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: border-color 0.6s; }
.card:hover .card-media { border-color: var(--frame); }
[data-theme="light"] .card-media { border-color: transparent; }
[data-theme="light"] .card:hover .card-media { border-color: var(--ink); }
.card-img { position: absolute; inset: 0; transition: opacity 0.9s var(--ease), transform 1.6s var(--ease); }
.card-img svg, .card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img.b { opacity: 0; }
.card:hover .card-img.b { opacity: 1; }
.card:hover .card-img { transform: scale(1.05); }
.tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 11px;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--frame);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
[data-theme="light"] .tag { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.card-view {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 40px 0 18px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, transparent, var(--tile-fade));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.card:hover .card-view { opacity: 1; transform: none; }
.card-body { padding-top: 20px; text-align: center; }
.card-cat { display: block; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); }
.card-name { font-weight: 400; font-size: var(--card-name); line-height: 1.25; color: var(--ink); margin: 8px 0 6px; transition: color 0.4s; }
.card:hover .card-name { color: var(--em); }
.card-price { font-size: 13.5px; letter-spacing: 0.1em; color: var(--price); }
/* light: editorial caption — name left, price right */
[data-theme="light"] .card-body { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 14px; text-align: left; padding-top: 14px; border-top: 1px solid var(--ink); margin-top: 12px; }
[data-theme="light"] .card-cat { grid-column: 1 / -1; order: -1; margin-bottom: 4px; }
[data-theme="light"] .card-name { margin: 0; }
[data-theme="light"] .card-price { font-weight: 400; }

/* ---------- story + craft ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.story-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); }
[data-theme="light"] .story-frame { border-color: var(--ink); }
.story-frame svg, .story-frame img { width: 100%; height: 100%; object-fit: cover; }
.story-text .h2 { margin-bottom: 32px; }
.story-text p { color: var(--muted); font-size: 16px; line-height: 1.95; max-width: 520px; }
.signature { display: block; margin-top: 30px; font-style: var(--em-style); font-size: calc(var(--ds) * 36px); color: var(--em); }

.craft { display: grid; grid-template-columns: repeat(var(--craft-cols, 3), 1fr); border-top: 1px solid var(--line); padding-top: clamp(64px, 8vw, 110px); }
[data-theme="light"] .craft { border-top-color: var(--ink); }
.craft-item { text-align: center; padding: 0 clamp(16px, 3vw, 48px); }
[data-theme="light"] .craft-item { text-align: left; }
.craft-item + .craft-item { border-left: 1px solid var(--line); }
.craft-num { font-family: var(--display); font-style: var(--em-style); font-size: 20px; color: var(--eyebrow); }
.craft-item h3 { font-size: calc(var(--ds) * 30px); color: var(--ink); margin: 14px 0 14px; }
.craft-item p { color: var(--muted); font-size: 14.5px; line-height: 1.85; max-width: 320px; margin: 0 auto; }
[data-theme="light"] .craft-item p { margin: 0; }

/* ---------- page hero (collections) ---------- */
.page-hero {
  position: relative;
  text-align: center;
  padding: clamp(56px, 8vw, 110px) var(--pad-x) clamp(48px, 6vw, 80px);
  background: var(--page-hero-bg);
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .page-hero { text-align: left; border-bottom-color: var(--ink); }
[data-theme="light"] .page-blurb { margin-left: 0; }
.crumbs { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.crumbs span { margin: 0 10px; }
.crumbs span:last-child { margin-right: 0; color: var(--muted); }
.crumbs a { transition: color 0.4s; }
.crumbs a:hover { color: var(--ink); }
.page-title { font-weight: 400; font-size: calc(var(--ds) * clamp(46px, 7vw, 96px)); line-height: 1.02; color: var(--ink); margin: 24px 0 18px; }
.page-blurb { max-width: 580px; margin: 0 auto; color: var(--muted); font-size: 16px; line-height: 1.85; }

/* ---------- product page ---------- */
.product-wrap { padding: 32px var(--pad-x) clamp(80px, 9vw, 130px); }
.pd-crumbs { margin-bottom: 32px; }
.pd { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 5vw, 90px); align-items: start; }
.pd-gallery { display: grid; grid-template-columns: 86px 1fr; gap: 16px; }
.pd-thumbs { display: flex; flex-direction: column; gap: 12px; }
.thumb { padding: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); border: 1px solid var(--line); cursor: pointer; opacity: 0.5; transition: opacity 0.4s, border-color 0.4s; }
.thumb svg, .thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: 0.85; }
.thumb.on { opacity: 1; border-color: var(--rule); }
.pd-main { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
[data-theme="light"] .pd-main { border-color: var(--ink); }
.pd-main-btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pd-main-btn svg, .pd-main-btn img { width: 100%; height: 100%; object-fit: cover; }
.pd-main-btn.fade > * { animation: fadein 0.8s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: scale(1.02); } }
.pd-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s, border-color 0.4s, background 0.4s;
}
.pd-nav svg { width: 18px; height: 18px; }
.pd-nav:hover { border-color: var(--rule); }
.pd-nav.prev { left: 16px; }
.pd-nav.next { right: 16px; }
.pd-main:hover .pd-nav { opacity: 1; }
@media (hover: none) { .pd-main .pd-nav { opacity: 1; } }
.pd-counter { position: absolute; right: 16px; bottom: 16px; z-index: 2; padding: 5px 11px; font-size: 10.5px; letter-spacing: 0.2em; color: var(--muted); background: var(--glass); }

.pd-info { position: sticky; top: calc(var(--header-h) + 8px); }
.pd-name { font-weight: 400; font-size: calc(var(--ds) * clamp(40px, 4.4vw, 62px)); line-height: 1.08; color: var(--ink); margin: 16px 0 20px; }
.pd-price { font-size: 21px; letter-spacing: 0.06em; color: var(--price); }
.pd-price small { display: block; margin-top: 6px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.pd-short { color: var(--muted); font-size: 16px; line-height: 1.85; margin: 24px 0 30px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.pd-row { margin-bottom: 28px; }
.pd-label { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.pd-label strong { font-weight: 400; color: var(--ink); }
.pd-size { font-size: calc(var(--ds) * 21px); color: var(--ink); }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { width: 38px; height: 38px; padding: 4px; border-radius: 50%; border: 1px solid var(--line-2); background: none; cursor: pointer; transition: border-color 0.4s, transform 0.4s var(--ease); }
.swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.25); }
.swatch:hover { border-color: var(--rule); transform: scale(1.06); }
.swatch.on { border-color: var(--rule); box-shadow: 0 0 0 1px var(--rule); }
.pd-actions { margin: 36px 0 36px; }
.pd-actions .btn { width: 100%; }
.pd-note { margin: 14px 0 0; text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--dim); }

.accordion { border-top: 1px solid var(--line); }
[data-theme="light"] .accordion { border-top-color: var(--ink); }
.acc { border-bottom: 1px solid var(--line); }
.acc summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 21px 0;
  list-style: none;
  cursor: pointer;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { position: relative; width: 12px; height: 12px; }
.acc summary i::before, .acc summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); transition: transform 0.5s var(--ease); }
.acc summary i::after { transform: rotate(90deg); }
.acc[open] summary i::after { transform: rotate(0); }
.acc-body { padding: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.specs { display: grid; grid-template-columns: 110px 1fr; gap: 14px 20px; margin: 0; }
.specs dt { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); padding-top: 3px; }
.specs dd { margin: 0; color: var(--text); }

.notfound { text-align: center; padding: 80px 0; }
.notfound .btn { margin-top: 24px; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lightbox);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lb-stage { width: min(88vw, calc(86vh * 0.8)); aspect-ratio: 4 / 5; }
.lb-stage svg, .lb-stage img { width: 100%; height: 100%; object-fit: cover; }
.lb-close { position: absolute; top: 18px; right: 18px; width: 52px; height: 52px; justify-content: center; }
.lightbox .pd-nav { position: fixed; opacity: 1; }
.lightbox .pd-nav.prev { left: 3vw; }
.lightbox .pd-nav.next { right: 3vw; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-3); border-top: 1px solid var(--line); padding: clamp(64px, 8vw, 100px) var(--pad-x) 32px; }
[data-theme="light"] .site-footer { border-top-color: var(--ink); }
.footer-top { display: grid; grid-template-columns: 1.5fr 0.9fr 0.9fr 1.5fr; gap: 48px; }
.f-brand .logo { align-items: flex-start; text-align: left; }
.f-brand .logo-word, .f-brand .logo-sub { padding-left: 0; }
.f-brand p { max-width: 340px; margin-top: 24px; color: var(--dim); font-size: 14px; line-height: 1.85; }
.f-col h4 { font-family: var(--sans); font-size: 10.5px; font-weight: 400; letter-spacing: 0.34em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 22px; }
.f-col a, .f-col span { display: block; margin-bottom: 12px; font-size: 14px; color: var(--muted); transition: color 0.4s; }
.f-col a:hover { color: var(--ink); }

/* Client Services */
.cs-intro { margin: -6px 0 22px; font-size: 13.5px; line-height: 1.75; color: var(--muted); max-width: 300px; }
.f-col .cs-item {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  color: var(--text);
}
.f-col .cs-item:last-child { border-bottom: 1px solid var(--line); }
.f-col .cs-icon {
  margin: 0;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--muted);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease);
}
.cs-icon svg { width: 17px; height: 17px; }
.f-col .cs-label {
  display: block;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.4s var(--ease), letter-spacing 0.6s var(--ease);
}
.f-col .cs-item:hover .cs-icon { border-color: var(--rule); color: var(--ink); }
.f-col .cs-item:hover .cs-label { color: var(--ink); letter-spacing: 0.36em; }
[data-theme="dark"] .f-col .cs-item:hover .cs-icon { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="light"] .f-col .cs-item:hover .cs-icon { background: var(--ink); color: var(--bg); }
[data-theme="light"] .f-col .cs-item { border-color: var(--line-2); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 72px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- back to top ---------- */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--frame);
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background 0.4s, border-color 0.4s, color 0.4s;
}
[data-theme="light"] .to-top { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.to-top svg { width: 20px; height: 20px; transition: transform 0.4s var(--ease); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.to-top:hover svg { transform: translateY(-2px); }

/* ---------- bag: header button ---------- */
.cart-btn { position: relative; }
.cart-count {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  line-height: 17px;
  text-align: center;
  letter-spacing: 0;
}
.cart-count[hidden] { display: none; }

/* ---------- bag: slide-in panel ---------- */
.minicart .drawer-panel {
  left: auto;
  right: 0;
  width: min(440px, 92vw);
  padding: 0;
  display: flex;
  flex-direction: column;
  border-right: 0;
  border-left: 1px solid var(--line);
  transform: translateX(100%);
}
[data-theme="light"] .minicart .drawer-panel { border-left-color: var(--ink); background: var(--bg); }
.minicart-open .minicart { pointer-events: auto; }
.minicart-open .minicart .drawer-scrim { opacity: 1; }
.minicart-open .minicart .drawer-panel { transform: none; }
.mc-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 20px 28px; border-bottom: 1px solid var(--line); }
.mc-head h3 { font-family: var(--display); text-transform: var(--display-case); letter-spacing: var(--display-track); font-size: calc(var(--ds) * 28px); color: var(--ink); }
.mc-count { font-family: var(--sans); font-size: 13px; color: var(--muted); letter-spacing: 0.05em; }
.mc-body { flex: 1; overflow-y: auto; padding: 4px 28px; }
.mc-foot { display: grid; gap: 10px; padding: 20px 28px 28px; border-top: 1px solid var(--line); background: var(--bg-2); }
.mc-foot .sum-row:last-of-type { margin-bottom: 8px; }
.mc-empty { text-align: center; padding: 70px 0; }
.mc-empty p { color: var(--muted); margin-bottom: 24px; }

/* ---------- bag: line items ---------- */
.line { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.line-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.line-img svg, .line-img img { width: 100%; height: 100%; object-fit: cover; }
.line-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.line-name { font-family: var(--display); text-transform: var(--display-case); letter-spacing: var(--display-track); font-size: calc(var(--ds) * 19px); line-height: 1.25; color: var(--ink); transition: color 0.4s; }
.line-name:hover { color: var(--em); }
.line-meta { font-size: 12.5px; color: var(--muted); }
.line-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.line-total { font-size: 14px; letter-spacing: 0.05em; color: var(--price); white-space: nowrap; }
.line-remove { padding: 0; background: none; border: 0; cursor: pointer; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); text-decoration: underline; text-underline-offset: 4px; transition: color 0.3s; }
.line-remove:hover { color: var(--danger); }
.line-big { grid-template-columns: 116px 1fr auto; gap: 26px; padding: 28px 0; }
.line-big .line-name { font-size: calc(var(--ds) * 25px); margin-bottom: 4px; }
.line-big .line-total { font-size: 16px; }

.qty { display: inline-flex; align-items: center; width: fit-content; margin-top: 10px; border: 1px solid var(--line-2); border-radius: var(--radius); }
.qty-btn { width: 34px; height: 34px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 16px; line-height: 1; color: var(--text); transition: color 0.3s; }
.qty-btn:hover { color: var(--em); }
.qty-val { min-width: 26px; text-align: center; font-size: 13px; color: var(--ink); }

.sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14px; color: var(--text); }
.muted-row { color: var(--muted); }
.sum-total { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 400; color: var(--ink); }
.sum-total span:last-child { color: var(--price); letter-spacing: 0.04em; }

/* ---------- product page: quantity + add ---------- */
.pd-buy { display: flex; gap: 12px; }
.pd-buy .qty { margin: 0; }
.pd-buy .qty-btn { width: 42px; height: 52px; }
.pd-buy .btn { flex: 1; width: auto; }
.pd-actions .enquire { margin-top: 12px; }
.add-btn.added { background: var(--btn-hover); border-color: var(--btn-hover); }

/* ---------- cart page ---------- */
.page-hero-sm { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(32px, 4vw, 56px); }
.cart-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.cart-head { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); }
[data-theme="light"] .cart-head { border-bottom-color: var(--ink); }
.cart-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); transition: color 0.3s; }
.cart-more svg { width: 16px; height: 16px; }
.cart-more:hover { color: var(--ink); }
.cart-summary { position: sticky; top: calc(var(--header-h) + 16px); padding: clamp(24px, 3vw, 36px); background: var(--bg-2); border: 1px solid var(--line); }
[data-theme="light"] .cart-summary { background: var(--bg); border-color: var(--ink); }
.sum-title { font-family: var(--sans); font-size: 10.5px; font-weight: 400; letter-spacing: 0.34em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 14px; }

.checkout-form { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.field { flex: 1 1 100%; margin-bottom: 18px; }
.field.half { flex: 1 1 calc(50% - 8px); min-width: 120px; }
.field label, .pay legend { display: block; margin-bottom: 6px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.field label i { font-style: normal; color: var(--danger); }
.field input, .field textarea {
  width: 100%;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--ink);
  font: 300 15px var(--sans);
  outline: none;
  transition: border-color 0.3s;
}
.field textarea { padding: 10px 12px; border: 1px solid var(--line-2); resize: vertical; min-height: 76px; }
.field input:focus, .field textarea:focus { border-color: var(--rule); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }
.field ::placeholder { color: var(--dim); }
.field-err { display: block; margin-top: 6px; font-size: 12px; color: var(--danger); }
.field-err:empty { display: none; }
.pay { flex: 1 1 100%; margin: 4px 0 18px; padding: 0; border: 0; }
.radio { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 14px; color: var(--text); cursor: pointer; }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio span { flex: none; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line-2); transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; }
.radio input:checked + span { border-color: var(--rule); background: var(--accent); box-shadow: inset 0 0 0 3px var(--bg-2); }
[data-theme="light"] .radio input:checked + span { background: var(--ink); box-shadow: inset 0 0 0 3px var(--bg); }
.radio input:focus-visible + span { outline: 1px solid var(--rule); outline-offset: 3px; }
.radio small { color: var(--dim); font-size: 12px; }
.wa-btn { width: 100%; margin-top: 6px; }
.fine { flex: 1 1 100%; margin: 14px 0 0; text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--dim); }
.fine a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.cart-empty, .cart-success { max-width: 580px; margin: 0 auto; padding: 24px 0 60px; text-align: center; }
.cart-empty p, .cart-success p { color: var(--muted); font-size: 16px; line-height: 1.85; margin: 18px 0 32px; }
.cart-empty .fine { margin-top: 28px; }
.cart-success .h2 { margin-bottom: 4px; }
.cart-success strong { color: var(--ink); font-weight: 400; }
.success-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.success-btns .wa-btn { width: auto; margin: 0; }
.success-mark { position: relative; display: block; width: 68px; height: 68px; margin: 0 auto 30px; border: 1px solid var(--rule); border-radius: 50%; }
.success-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 13px;
  height: 25px;
  border-right: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
  transform: translate(-50%, -50%) rotate(45deg);
  animation: tick 0.9s var(--ease) both 0.2s;
}
@keyframes tick { from { opacity: 0; transform: translate(-50%, -30%) rotate(45deg) scale(0.6); } }

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}
@media (max-width: 560px) {
  .line-big { grid-template-columns: 88px 1fr; gap: 16px; padding: 22px 0; }
  .line-big .line-side { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; }
  .line-big .line-name { font-size: calc(var(--ds) * 20px); }
  .pd-buy .qty-btn { width: 36px; }
}

/* ---------- motion ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease) var(--d, 0ms), transform 1.3s var(--ease) var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .hero .reveal { opacity: 1; transform: none; transition: none; animation: rise 1.2s var(--ease) var(--d, 0ms) both; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }

.lm-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 3.2s ease-in-out infinite; }
@keyframes flicker {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  25% { transform: scale(0.96, 1.05) skewX(1.5deg); }
  50% { transform: scale(1.03, 0.97) skewX(-1deg); }
  75% { transform: scale(0.98, 1.03) skewX(1deg); }
}

/* ---------- moving photos (slideshow with slow cinematic zoom & pan) ---------- */
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; overflow: hidden; }
.slide.on { opacity: 1; z-index: 1; }
.slide.off { opacity: 0; z-index: 0; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.slide.on img, .slide.off img { animation: 9s ease-out forwards; }
.slide[data-kb="0"] img { animation-name: kb-in; }
.slide[data-kb="1"] img { animation-name: kb-left; transform-origin: 30% 50%; }
.slide[data-kb="2"] img { animation-name: kb-out; }
.slide[data-kb="3"] img { animation-name: kb-right; transform-origin: 70% 50%; }
/* gentle movement: stronger zoom would soften the photos */
@keyframes kb-in { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes kb-out { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes kb-left { from { transform: scale(1.05) translateX(1.5%); } to { transform: scale(1.05) translateX(-1.5%); } }
@keyframes kb-right { from { transform: scale(1.05) translateX(-1.5%); } to { transform: scale(1.05) translateX(1.5%); } }

/* homepage hero: full-screen moving photos or video */
.hero-cinema { grid-template-columns: minmax(0, 660px); min-height: min(calc(100vh - var(--header-h)), 900px); align-content: center; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; background: var(--bg-2); }
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: var(--hero-shade-bottom), var(--hero-shade); pointer-events: none; }
.hero-cinema .hero-sub { color: var(--text); }
.hero-now { position: absolute; right: var(--pad-x); bottom: 34px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
a.hero-caption { position: static; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; max-width: 320px; font-size: calc(var(--ds) * 17px); color: var(--ink); }
a.hero-caption small { font-family: var(--sans); font-style: normal; font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.hero-dots { display: flex; gap: 8px; }
.hero-dot { width: 36px; height: 34px; padding: 16px 0; background: none; border: 0; cursor: pointer; }
.hero-dot i { position: relative; display: block; height: 2px; background: var(--line-2); overflow: hidden; }
.hero-dot i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.hero-dot.on i::after { animation: dotfill 6.5s linear forwards; }
@keyframes dotfill { to { transform: scaleX(1); } }

/* framed hero: used while photos are too small to fill the screen sharply */
.hero-cinema.hero-framed { grid-template-columns: 1.05fr 0.95fr; }
.hero-framed .hero-media, .hero-framed .hero-shade { display: none; }
.hero-framed .hero-visual { width: min(440px, 100%); } /* kept close to the photos' real size so they stay crisp */
.hero-framed .hero-frame { aspect-ratio: 1 / 1; }
.hero-framed .hero-art { overflow: hidden; }
.hero-framed .hero-now { position: static; margin-top: 48px; align-items: flex-end; }
.hero-framed::before { /* soft studio light behind the frame, no colour cast */
  content: ""; position: absolute; z-index: -1; right: 4%; top: 8%; width: 55%; height: 84%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.07), transparent 70%); pointer-events: none;
}
[data-theme="light"] .hero-framed::before { background: radial-gradient(closest-side, rgba(17, 17, 17, 0.06), transparent 70%); }
.hero-visual[hidden] { display: none; }

/* collection pages: crisp gliding mosaic under the title (until high-res photos are added) */
.page-hero.has-mosaic { padding-bottom: clamp(36px, 5vw, 60px); overflow: hidden; }
.strip-mini { margin: clamp(30px, 4vw, 48px) calc(var(--pad-x) * -1) 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.strip-mini .strip-track { gap: 14px; animation-duration: 55s; }
.strip-mini .strip-item { width: clamp(120px, 13vw, 170px); }

/* moving gallery strip */
.atelier { padding: clamp(70px, 9vw, 130px) 0; overflow: hidden; border-top: 1px solid var(--line); }
.atelier .section-head { padding: 0 var(--pad-x); }
.strip { overflow: hidden; margin-top: 18px; }
.strip-track { display: flex; gap: 18px; width: max-content; animation: strip 70s linear infinite; }
.strip-rev .strip-track { animation-direction: reverse; animation-duration: 80s; }
.strip:hover .strip-track { animation-play-state: paused; }
@keyframes strip { to { transform: translateX(calc(-50% - 9px)); } }
.strip-item { position: relative; flex: none; width: clamp(180px, 20vw, 280px); aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--line); }
[data-theme="light"] .strip-item { border-color: var(--ink); }
.strip-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.strip-item:hover img { transform: scale(1.07); }
.strip-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 38px 14px 12px;
  font-family: var(--display); text-transform: var(--display-case); letter-spacing: var(--display-track);
  font-size: calc(var(--ds) * 15px); line-height: 1.25; color: var(--tile-ink);
  background: linear-gradient(180deg, transparent, var(--tile-fade));
  opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.strip-item:hover .strip-name, .strip-item:focus-visible .strip-name { opacity: 1; transform: none; }
@media (hover: none) { .strip-name { opacity: 1; transform: none; } }

/* collection pages: moving photos behind the title */
.page-hero.has-media { min-height: clamp(300px, 42vw, 460px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; }
.page-hero-media { position: absolute; inset: 0; z-index: -2; }
.page-hero-shade { position: absolute; inset: 0; z-index: -1; background: var(--page-shade); }
.page-hero:not(.has-media) .page-hero-media, .page-hero:not(.has-media) .page-hero-shade { display: none; }
.page-hero-inner { position: relative; }
.page-hero.has-media .page-blurb { color: var(--text); }

/* gifting: gift sets + packaging together */
.grid-gifts { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
[data-theme="light"] .grid-gifts { justify-content: start; }
.sub-head { margin: clamp(60px, 7vw, 96px) 0 clamp(26px, 3vw, 40px); text-align: var(--head-align); font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0.34em; text-transform: uppercase; color: var(--eyebrow); }
.pack-section { margin-top: clamp(70px, 9vw, 120px); padding-top: clamp(50px, 6vw, 80px); border-top: 1px solid var(--line); }
[data-theme="light"] .pack-section { border-top-color: var(--ink); }
.pack-section .gift-hint { display: block; margin-top: 36px; }

@media (max-width: 900px) {
  .hero-cinema { grid-template-columns: 1fr; min-height: min(calc(100svh - var(--header-h)), 760px); padding-bottom: 130px; }
  :root[data-theme="dark"] .hero-shade { background: var(--hero-shade-bottom), linear-gradient(180deg, rgba(7, 7, 7, 0.55), rgba(7, 7, 7, 0.75)); }
  :root[data-theme="light"] .hero-shade { background: var(--hero-shade-bottom), linear-gradient(180deg, rgba(242, 242, 240, 0.7), rgba(242, 242, 240, 0.86)); }
  .hero-now { left: var(--gutter); right: var(--gutter); bottom: 24px; align-items: center; }
  .hero-cinema.hero-framed { grid-template-columns: 1fr; padding-bottom: 60px; }
  .hero-framed::before { display: none; }
  .hero-framed .hero-visual { width: min(360px, 86%); margin: 10px auto 0; }
  .hero-framed .hero-now { margin-top: 40px; align-items: center; }
  [data-theme="light"] .hero-framed .hero-now { align-items: flex-start; }
  a.hero-caption { align-items: center; text-align: center; }
  [data-theme="light"] .hero-now, [data-theme="light"] a.hero-caption { align-items: flex-start; text-align: left; }
}
@media (max-width: 560px) {
  .hero-dots { gap: 5px; }
  .hero-dot { width: 22px; }
  .grid-gifts { grid-template-columns: repeat(2, 1fr); }
  .strip-item { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .strip-track { flex-wrap: nowrap; }
  .strip { overflow-x: auto; }
}

/* ---------- real product photos ---------- */
/* all product photos are square, so every frame is square and the photo fills it */
.card-media, .pd-main, .thumb, .story-frame, .line-img, .lb-stage { aspect-ratio: 1 / 1; }
.pd-photo-note { grid-column: 2; margin: 2px 0 0; font-size: 12px; letter-spacing: 0.04em; color: var(--dim); font-style: italic; }
.pd-nav[hidden] { display: none; }
.pd-gallery.single { grid-template-columns: 1fr; }
.pd-gallery.single .pd-thumbs, .pd-gallery.single .pd-counter { display: none; }
.pd-gallery.single .pd-photo-note { grid-column: 1; }
.care-list { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.care-list li::marker { color: var(--eyebrow); font-size: 12px; }

/* ---------- fragrance selector (candles) ---------- */
.pd-label i { font-style: normal; color: var(--danger); }
.frags { display: flex; flex-wrap: wrap; gap: 8px; }
.frag {
  padding: 9px 15px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font: 300 13px var(--sans);
  letter-spacing: 0.04em;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.frag:hover { border-color: var(--rule); color: var(--ink); }
.frag.on { border-color: var(--rule); color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--rule); }
[data-theme="dark"] .frag.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
[data-theme="light"] .frag.on { background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: none; }
.frag-err { display: block; margin-top: 10px; font-size: 12.5px; color: var(--danger); }
.frag-err:empty { display: none; }
.pd-frag.invalid .frag { border-color: var(--danger); }
.pd-frag.invalid .frags { animation: nudge 0.45s var(--ease); }
@keyframes nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- gifting (homepage) ---------- */
.gifting { border-top: 1px solid var(--line); }
[data-theme="light"] .gifting { border-top-color: var(--ink); }
.section-sub { max-width: 560px; margin: 22px auto 0; color: var(--muted); font-size: 16px; line-height: 1.85; }
[data-theme="light"] .section-sub { margin-left: 0; }
.gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); }
.gift-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--bg-2); transition: border-color 0.6s var(--ease); }
.gift-card:hover { border-color: var(--frame); }
[data-theme="light"] .gift-card { background: var(--bg); border-color: var(--ink); }
.gift-media { aspect-ratio: 4 / 4.2; overflow: hidden; border-bottom: 1px solid var(--line); }
[data-theme="light"] .gift-media { border-bottom-color: var(--ink); }
.gift-media svg, .gift-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.gift-card:hover .gift-media svg, .gift-card:hover .gift-media img { transform: scale(1.05); }
.gift-body { padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; flex: 1; }
.gift-num { font-family: var(--display); font-style: var(--em-style); color: var(--eyebrow); font-size: 15px; }
.gift-name { font-family: var(--display); text-transform: var(--display-case); letter-spacing: var(--display-track); font-size: calc(var(--ds) * 30px); color: var(--ink); line-height: 1.1; margin: 8px 0 10px; }
.gift-price { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--price); }
.gift-desc { color: var(--muted); font-size: 14.5px; line-height: 1.8; margin: 18px 0 20px; }
.gift-incl { list-style: none; margin: auto 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.gift-incl li { position: relative; padding-left: 20px; font-size: 13px; color: var(--text); }
.gift-incl li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 5px; height: 5px; margin-top: -3px; background: var(--accent-hi); transform: rotate(45deg); }
[data-theme="light"] .gift-incl li::before { background: var(--ink); }
.gifting .center { display: flex; flex-direction: column; align-items: center; gap: 18px; }
[data-theme="light"] .gifting .center { align-items: flex-start; }
.gift-hint { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); }

/* ---------- gifting (checkout picker) ---------- */
.gift-pick { flex: 1 1 100%; margin: 4px 0 18px; padding: 0; border: 0; display: grid; gap: 10px; }
.gift-pick legend { display: block; margin-bottom: 10px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.gift-opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid var(--line-2); cursor: pointer; transition: border-color 0.3s, background 0.3s; }
.gift-opt:hover { border-color: var(--rule); }
.gift-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gift-opt:has(input:checked) { border-color: var(--rule); background: var(--surface); }
[data-theme="light"] .gift-opt:has(input:checked) { background: var(--bg-2); }
.gift-opt input:focus-visible ~ .gift-check { outline: 1px solid var(--rule); outline-offset: 3px; }
.gift-thumb { flex: none; width: 52px; height: 56px; overflow: hidden; border: 1px solid var(--line); }
.gift-thumb svg, .gift-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gift-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gift-info strong { font-weight: 400; font-size: 14px; color: var(--ink); }
.gift-info small { font-size: 12px; color: var(--muted); }
.gift-check { flex: none; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line-2); transition: background 0.3s, box-shadow 0.3s, border-color 0.3s; }
.gift-opt input:checked ~ .gift-check { border-color: var(--rule); background: var(--accent); box-shadow: inset 0 0 0 3px var(--bg-2); }
[data-theme="light"] .gift-opt input:checked ~ .gift-check { background: var(--ink); box-shadow: inset 0 0 0 3px var(--bg); }

/* ---------- gifting (product page accordion) ---------- */
.acc-gifts { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--line); }
.acc-gifts li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text); }
.acc-gifts li span:last-child { color: var(--muted); }
.acc-link { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 1000px) {
  .gift-grid { grid-template-columns: 1fr 1fr; }
  .gift-grid .gift-card:last-child { grid-column: 1 / -1; flex-direction: row; }
  .gift-grid .gift-card:last-child .gift-media { flex: 0 0 45%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .gift-grid { grid-template-columns: 1fr; }
  .gift-grid .gift-card:last-child { flex-direction: column; }
  .gift-grid .gift-card:last-child .gift-media { aspect-ratio: 4 / 4.2; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* printing a page shows everything (no scroll animations) */
@media print {
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .site-header, .to-top, .drawer, body::after { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
a.hero-caption { transition: color 0.4s; }
a.hero-caption:hover { color: var(--ink); }
@media (max-width: 1180px) {
  .tiles { grid-template-columns: repeat(min(var(--tiles, 4), 3), 1fr); }
}
@media (max-width: 1000px) {
  .main-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 2 / 1.25; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --header-h: 108px; }
  .main-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .bar { padding-top: 14px; padding-bottom: 14px; }
  .bar-link { display: none; }
  .bar .icon-btn { min-width: 40px; min-height: 40px; justify-content: center; }
  .bar-right { gap: 6px; }
  .bar-right .ig-btn { display: none; }
  .bar-right > * { flex: none; }
  .bar-right .theme-btn { padding: 7px; }
  .bar-right .theme-label { display: none; }

  .hero { grid-template-columns: 1fr; text-align: center; min-height: 0; padding-top: 48px; }
  [data-theme="dark"] .hero .eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: 0.7; }
  [data-theme="light"] .hero { text-align: left; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  [data-theme="light"] .hero-sub { margin-left: 0; }
  .hero-cta { justify-content: center; }
  [data-theme="light"] .hero-cta { justify-content: flex-start; }
  .hero-visual { width: min(360px, 84%); margin-bottom: 30px; }
  .hero-glow { inset: 20% -30% -10% -30%; }
  .scroll-cue { display: none; }

  .shop-layout { grid-template-columns: 1fr; gap: 28px; }
  .sidebar { position: static; display: flex; flex-direction: column; gap: 18px; }
  .sb-block + .sb-block { margin-top: 0; }
  .sb-title { margin-bottom: 10px; }
  .sb-list,
  [data-theme="light"] .sb-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); border-top: 0; }
  .sb-list::-webkit-scrollbar { display: none; }
  .sb-list a, .sb-list a:hover, .sb-list a.active,
  [data-theme="light"] .sb-list a.active {
    padding: 10px 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .sb-list a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  [data-theme="light"] .sb-list a.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .sb-list a.active em { color: rgba(255, 255, 255, 0.7); }
  .sb-list a.active::before { display: none; }
  .sb-sort { max-width: 280px; }
  .sb-note { display: none; }

  .story { grid-template-columns: 1fr; }
  .story-visual { max-width: 460px; }
  .craft { grid-template-columns: 1fr; gap: 52px; }
  .craft-item + .craft-item { border-left: 0; border-top: 1px solid var(--line); padding-top: 52px; }

  .pd { grid-template-columns: 1fr; }
  .pd-gallery { grid-template-columns: 1fr; }
  .pd-thumbs { order: 2; flex-direction: row; overflow-x: auto; }
  .pd-photo-note { grid-column: 1; order: 3; }
  .thumb { flex: 0 0 72px; }
  .pd-info { position: static; }
}
@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .announce { font-size: 9px; letter-spacing: 0.22em; }
  .back-btn span { display: none; }
  .back-btn { padding: 7px; }
  .bar { padding-left: 12px; padding-right: 12px; }
  .bar-left { gap: 2px; }
  .bar-right { gap: 2px; }
  .logo-word { font-size: 18px; letter-spacing: 0.2em; padding-left: 0.2em; white-space: nowrap; }
  .logo-sub { font-size: 7.5px; letter-spacing: 0.3em; padding-left: 0.3em; white-space: nowrap; }
  .grid { gap: 40px 14px; }
  :root[data-theme="dark"] { --card-name: 17px; }
  :root[data-theme="light"] { --card-name: 12px; }
  [data-theme="light"] .card-body { grid-template-columns: 1fr; }
  .card-cat { font-size: 9px; letter-spacing: 0.22em; }
  .card-price { font-size: 12.5px; }
  .tag { top: 10px; left: 10px; padding: 5px 8px; font-size: 8.5px; }
  .tiles { gap: 10px; }
  .tile-body { padding: 18px 16px; }
  .tile h3 { font-size: calc(var(--ds) * 20px); }
  .tile-link { font-size: 9px; }
  .hero-cta .btn { width: 100%; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; }
  .to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
  .specs { grid-template-columns: 1fr; gap: 4px; }
  .specs dd { margin-bottom: 12px; }
}

/* anything switched off (admin switches, empty sections) stays hidden, whatever its display style */
[hidden] { display: none !important; }

/* ---------- discounts ---------- */
.price-was { margin-left: 0.45em; font-size: 0.86em; color: var(--dim); text-decoration: line-through; text-decoration-thickness: 1px; }
.price-off { margin-left: 0.45em; font-size: 0.8em; letter-spacing: 0.08em; color: var(--sale); white-space: nowrap; }
.badge-off {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  padding: 6px 10px; font-size: 10px; letter-spacing: 0.14em;
  color: #fff; background: var(--sale-bg);
}
.pd-save { display: block; margin-top: 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sale); }
.save-row { font-size: 13px; color: var(--sale); }
.line-meta .price-was { margin-left: 0.3em; }

/* ---------- stock ---------- */
.card-stock { display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--low); }
.card-stock.out { color: var(--dim); }
[data-theme="light"] .card-stock { grid-column: 1 / -1; }
.card.is-soldout .card-img { filter: grayscale(0.7); opacity: 0.7; }
.pd-stock { margin: 12px 0 0; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--low); }
.pd-stock.out { color: var(--dim); }
.add-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.add-msg { display: block; margin-top: 10px; font-size: 12.5px; color: var(--low); }
.add-msg:empty { display: none; }

/* ---------- card photo slideshow ---------- */
.card-media.multi .card-img.slide { opacity: 0; transition: opacity 0.6s var(--ease), transform 1.6s var(--ease); }
.card-media.multi .card-img.slide.on { opacity: 1; }
.card-nav {
  position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -17px;
  display: grid; place-items: center; padding: 0;
  border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--glass); color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer; opacity: 0; transition: opacity 0.4s, border-color 0.4s;
}
.card-nav svg { width: 14px; height: 14px; }
.card-nav.prev { left: 10px; }
.card-nav.next { right: 10px; }
.card:hover .card-nav, .card-nav:focus-visible { opacity: 1; }
@media (hover: none) { .card-nav { opacity: 1; } }
.card-dots { position: absolute; left: 50%; bottom: 12px; z-index: 3; display: flex; gap: 5px; transform: translateX(-50%); }
.card-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: 0.35; transition: opacity 0.3s; }
.card-dots i.on { opacity: 1; }

/* ---------- product photo zoom ---------- */
.pd-main-btn img { transition: transform 0.45s var(--ease); }
.pd-main-btn.zooming img { transform: scale(2.2); }
.pd-zoom-hint {
  position: absolute; left: 16px; bottom: 16px; z-index: 2; width: 34px; height: 34px;
  display: grid; place-items: center; color: var(--muted); background: var(--glass); pointer-events: none;
}
.pd-zoom-hint svg { width: 17px; height: 17px; }
.pd-main:not(:has(img)) .pd-zoom-hint { display: none; }
.lb-stage { position: relative; overflow: hidden; touch-action: none; }
.lb-stage > * { transform-origin: center; transition: transform 0.25s var(--ease); cursor: zoom-in; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.lightbox.zoomed .lb-stage > * { cursor: grab; }
.lightbox.dragging .lb-stage > * { transition: none; }
.lightbox.zoomed.dragging .lb-stage > * { cursor: grabbing; }
.lb-tools {
  position: fixed; left: 50%; bottom: 22px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 4px;
  transform: translateX(-50%); border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--glass);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lb-tools button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.lb-tools svg { width: 18px; height: 18px; }
.lb-count { min-width: 54px; text-align: center; font-size: 11px; letter-spacing: 0.2em; color: var(--muted); }
.lb-help { position: fixed; top: 34px; left: 50%; max-width: calc(100% - 170px); margin: 0; transform: translateX(-50%); text-align: center; font-size: 11px; letter-spacing: 0.12em; color: var(--dim); }
@media (max-width: 640px) { .lb-help { top: 28px; font-size: 10px; } }

/* sale & low-stock colours, per theme */
:root, :root[data-theme="dark"] { --sale: #6cc3a0; --sale-bg: #2f7d63; --low: #e0a487; }
:root[data-theme="light"] { --sale: #1f5240; --sale-bg: #1f5240; --low: #8c2a1c; }

/* ---------- shared ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:root, :root[data-theme="dark"] { --heart: #e48a9b; }
:root[data-theme="light"] { --heart: #9b2335; }

/* ---------- sale banner ---------- */
.promo {
  position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 18px;
  padding: 9px 48px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; text-align: center;
  color: #fff; background: var(--sale-bg);
}
.promo-timer { font-variant-numeric: tabular-nums; opacity: 0.9; }
.promo-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.promo-close { position: absolute; top: 50%; right: 10px; width: 30px; height: 30px; margin-top: -15px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; opacity: 0.85; }
.promo-close svg { width: 16px; height: 16px; }
.promo-close:hover { opacity: 1; }

/* ---------- header: search + wishlist ---------- */
.wish-link { position: relative; }
.wish-count {
  position: absolute; top: 0; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--heart); color: #fff; font-size: 10px; line-height: 17px; text-align: center; letter-spacing: 0;
}
.drawer .wish-count { position: static; display: inline-block; vertical-align: middle; margin-left: 8px; font-family: var(--sans); }
@media (max-width: 900px) { .bar-right .wish-link { display: none; } }

/* ---------- search panel ---------- */
.search-panel { position: fixed; inset: 0; z-index: 120; visibility: hidden; opacity: 0; transition: opacity 0.35s var(--ease), visibility 0.35s; }
.search-open .search-panel { visibility: visible; opacity: 1; transition: opacity 0.35s var(--ease), visibility 0s; }
.search-scrim { position: absolute; inset: 0; background: var(--lightbox); }
.search-box {
  position: relative; max-width: 760px; margin: 0 auto; padding: 22px 20px 26px;
  background: var(--bg-2); border: 1px solid var(--line); border-top: 0; transform: translateY(-14px); transition: transform 0.4s var(--ease);
  max-height: 100vh; overflow-y: auto;
}
.search-open .search-box { transform: none; }
.search-form { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-2); padding-bottom: 12px; }
.search-form > svg { width: 22px; height: 22px; flex: none; color: var(--muted); }
.search-form input {
  flex: 1; min-width: 0; padding: 8px 0; border: 0; background: none; color: var(--ink); outline: none;
  font-family: var(--display); font-size: clamp(20px, 3vw, 26px);
}
.search-form input::-webkit-search-cancel-button { display: none; }
.search-results { margin-top: 12px; }
.search-item { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.search-item:hover { color: var(--ink); }
.search-img { width: 56px; height: 56px; overflow: hidden; background: var(--surface); }
.search-img img, .search-img svg { width: 100%; height: 100%; object-fit: cover; }
.search-name { font-size: 15px; line-height: 1.35; }
.search-price { font-size: 13px; color: var(--price); white-space: nowrap; }
.search-price .price-off { display: none; }
.search-all { display: inline-block; margin-top: 16px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.search-hint { margin: 8px 0 0; font-size: 14px; line-height: 1.9; color: var(--muted); }
.search-hint a { display: inline-block; margin: 0 6px 4px 0; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
@media (max-width: 640px) {
  .search-item { grid-template-columns: 48px 1fr; }
  .search-img { width: 48px; height: 48px; grid-row: span 2; }
  .search-price { grid-column: 2; }
}

/* ---------- wishlist hearts ---------- */
.wish-btn {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--glass); color: var(--ink); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: color 0.3s, border-color 0.3s;
}
.wish-btn svg { width: 18px; height: 18px; }
.wish-btn:hover { border-color: var(--heart); color: var(--heart); }
.wish-btn.on { color: var(--heart); border-color: var(--heart); }
.wish-btn.on svg path { fill: currentColor; }
.wish-btn.pop svg { animation: heartpop 0.45s var(--ease); }
@keyframes heartpop { 40% { transform: scale(1.35); } }
.card-media:has(.wish-btn) .badge-off { right: 60px; }
.wish-pd { position: static; flex: none; width: 54px; height: auto; align-self: stretch; border-radius: var(--radius); background: none; }
.wish-note { margin: 0 0 28px; font-size: 13px; letter-spacing: 0.06em; color: var(--muted); }

/* ---------- filters ---------- */
.filters > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::after { content: "+"; margin-left: auto; font-size: 15px; letter-spacing: 0; }
.filters[open] > summary::after { content: "\2212"; }
.f-active { color: var(--ink); letter-spacing: 0.1em; }
.f-group { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.f-group legend { padding: 0; margin-bottom: 8px; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); }
.f-opt { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.f-opt input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.f-opt:hover { color: var(--ink); }
.f-colours { display: flex; flex-wrap: wrap; gap: 8px; }
.f-colour { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 8px; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 12px; color: var(--muted); cursor: pointer; transition: border-color 0.3s, color 0.3s; }
.f-colour input { position: absolute; opacity: 0; pointer-events: none; }
.f-colour:has(input:checked) { border-color: var(--ink); color: var(--ink); }
.f-colour:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.f-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.4); }
.f-clear { padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.no-match { grid-column: 1 / -1; padding: 50px 0; text-align: center; }
.no-match p { margin: 0 0 22px; color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
  .sb-filters .filters > summary { padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--radius); margin-bottom: 0; }
  .sb-filters .filters[open] > summary { margin-bottom: 18px; }
}

/* ---------- policy pages ---------- */
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 56px; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; }
.footer-legal a { color: var(--muted); transition: color 0.3s; }
.footer-legal a:hover { color: var(--ink); }
.footer-legal + .footer-bottom { margin-top: 26px; }
.policy { max-width: 760px; margin: 0 auto; color: var(--text); font-size: 16px; line-height: 1.85; }
.policy h2 { margin: 42px 0 12px; font-size: 28px; font-weight: 400; color: var(--ink); }
.policy h3, .policy h4 { margin: 30px 0 10px; font-size: 19px; font-weight: 400; color: var(--ink); }
.policy h2:first-child { margin-top: 0; }
.policy p, .policy ul, .policy ol { margin: 0 0 16px; color: var(--muted); }
.policy li { margin-bottom: 6px; }
.policy a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 420px) {
  .bar .icon-btn { min-width: 36px; padding: 6px; }
  .bar-right { gap: 0; }
  .bar-left { gap: 2px; }
}

/* =========================================================
   ALL SCREENS — phones, foldables, tablets, iPads, laptops, large monitors
   ========================================================= */

/* page appears in one piece: hidden for the few milliseconds until the header is added,
   so nothing jumps down as the page opens (shows anyway after 2.5 s if a script ever fails) */
body:not(.lm-ready) > main { opacity: 0; animation: lm-reveal 0s 2.5s forwards; }   /* opacity, not visibility: Safari kept some elements hidden */
@keyframes lm-reveal { to { opacity: 1; } }

/* product grid: desktop look on every screen
   ≥1100 px: 3 across · 901–1099 px (sidebar beside): 2 · 601–900 px (tablets, sidebar above): 3 · phones: 2 · folded phones: 1 */
@media (min-width: 1100px) { .grid:not(.grid-4) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 601px) and (max-width: 900px) { .grid:not(.grid-4) { grid-template-columns: repeat(3, 1fr); gap: 44px 16px; } }
@media (max-width: 600px) { .grid:not(.grid-4) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 330px) {
  .grid:not(.grid-4), .grid-4 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .tiles > .tile:last-child:nth-child(odd) { aspect-ratio: auto; }
}

/* very narrow phones (folded Galaxy Fold, old iPhone SE): header fits without zooming the page out */
@media (max-width: 340px) {
  .bar { padding-left: 6px; padding-right: 6px; }
  .bar .icon-btn { min-width: 34px; padding: 5px; }
  .bar-right .theme-btn { display: none; }          /* still in the menu */
  .logo-word { font-size: 14px; letter-spacing: 0.12em; padding-left: 0.12em; }
  .logo-sub { font-size: 6px; letter-spacing: 0.2em; }
  .promo { padding-left: 14px; padding-right: 40px; letter-spacing: 0.1em; }
}

/* touch screens (phones, tablets, iPads) */
@media (pointer: coarse) {
  /* iPhone/iPad zoom into any form field with text under 16px — keep them at 16px so nothing jumps */
  input:not([type="radio"]):not([type="checkbox"]), select, textarea { font-size: 16px !important; }
  /* comfortable finger-sized targets (Apple and Google recommend about 44px) */
  .f-opt { min-height: 42px; }
  .hero-dot { width: 36px; min-width: 36px; height: 44px; padding: 21px 0; flex: none; }
  .line-remove { padding: 12px 0; }
  .lb-tools button { width: 46px; height: 46px; }
}
@media (pointer: coarse) and (min-width: 421px) {
  .bar .icon-btn { min-width: 44px; min-height: 44px; justify-content: center; }
}

/* landscape phones: keep the zoomed photo clear of the controls */
@media (max-height: 520px) {
  .lb-stage { width: min(88vw, calc(100vh - 180px)); }
  .lb-help { display: none; }
}

@media (pointer: coarse) and (max-width: 420px) {
  .hero-dots { gap: 4px; flex-wrap: wrap; }
  .hero-dot { width: 30px; min-width: 30px; }
}

/* theme switch label never wraps onto two lines */
.theme-label { white-space: nowrap; }

/* phones held sideways (short, wide screens): desktop-style layout instead of one tall column */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  .hero-title { font-size: calc(var(--ds) * clamp(40px, 7vh, 64px)); margin: 14px 0 16px; }
  .hero-cinema { min-height: 0; }
  .hero-cinema.hero-framed { grid-template-columns: 1.1fr 0.9fr; text-align: left; }
  .hero-framed .hero-visual { width: min(300px, 100%); margin-bottom: 0; }
  .hero-cta { justify-content: flex-start; }
  .hero-cta .btn { width: auto; }
  .page-title { font-size: calc(var(--ds) * clamp(34px, 9vh, 56px)); margin: 14px 0 12px; }
  .page-hero { padding-top: 28px; padding-bottom: 28px; }
  .pd { grid-template-columns: 1fr 1fr; gap: 28px; }
  .pd-gallery { grid-template-columns: 1fr; }
  .pd-thumbs { order: 2; flex-direction: row; overflow-x: auto; }
  .pd-thumbs .thumb { flex: 0 0 64px; }
  .pd-photo-note { grid-column: 1; }
  .pd-info { position: static; }
}

/* very large monitors: use a little more of the width, same proportions as desktop */
@media (min-width: 2000px) {
  :root { --pad-x: max(var(--gutter), calc((100% - 1560px) / 2)); }
}

/* ---------- smooth scrolling on every device ----------
   Decorative loops (text shimmer, glow) pause only while the page is being scrolled, and
   any animation that is off screen pauses — nothing looks different, but scrolling stays fluid. */
.is-scrolling .shimmer, .is-scrolling .hero-glow { animation-play-state: paused; }
.offscreen, .offscreen * { animation-play-state: paused !important; }
.marquee-track, .strip-track { will-change: transform; }
/* touch screens: the paper grain is drawn without a full-page blend (same look, far less work for the phone) */
@media (pointer: coarse) {
  :root[data-theme="light"] { --grain-blend: normal; --grain-op: 0.06; }
}

/* ---------- UPI pay screen ---------- */
.pay-card { max-width: 520px; margin: 0 auto; padding: 8px 0 40px; text-align: center; }
.pay-card .h2 { margin: 14px 0 26px; }
.pay-app { width: 100%; }
.pay-hint { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.pay-qr { margin: 26px auto 0; }
.pay-qr-img { width: 220px; height: 220px; margin: 0 auto; padding: 10px; background: #fff; border: 1px solid var(--line-2); }
.pay-qr-img svg { display: block; width: 100%; height: 100%; }
.pay-qr-small .pay-qr-img { width: 160px; height: 160px; }
.pay-id { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin: 26px 0 0; padding: 14px 16px; border: 1px solid var(--line-2); }
.pay-id span { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); }
.pay-id strong { font-weight: 400; font-size: 16px; color: var(--ink); word-break: break-all; }
.pay-copy { padding: 8px 14px; border: 1px solid var(--line-2); background: none; color: var(--ink); cursor: pointer; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.pay-copy:hover { border-color: var(--rule); }
.pay-to { margin: 14px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.pay-to strong { font-weight: 400; color: var(--text); }
.pay-done { margin-top: 30px; text-align: left; }
.pay-done .field label small { text-transform: none; letter-spacing: 0.02em; color: var(--dim); }
.pay-done .wa-btn { width: 100%; margin-top: 6px; }
.pay-card .fine { margin-top: 16px; }
.pay-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 0; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.pay-back svg { width: 14px; height: 14px; }
.pay-back:hover { color: var(--ink); }
.wa-btn.is-upi svg, .pay-app svg { width: 18px; height: 18px; }

/* ---------- delivery form: state list + pincode check ---------- */
.field .select select { padding: 10px 34px 10px 0; border: 0; border-bottom: 1px solid var(--line-2); font: 300 15px var(--sans); letter-spacing: 0; color: var(--ink); }
.field .select::after { right: 4px; }
.field .select select:focus { border-color: var(--rule); outline: none; }
.field select[aria-invalid="true"] { border-color: var(--danger); }
.field select option { background: var(--surface); color: var(--text); }
.pin-status { flex: 1 1 100%; margin: -8px 0 16px; min-height: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pin-status:empty { display: none; }
.pin-status.good { color: var(--sale); }
.pin-status.bad { color: var(--danger); }

/* ---------- discount codes ---------- */
.discount-row { color: var(--sale); }
.coupon { margin: 4px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.coupon-pick > summary { display: inline-block; cursor: pointer; list-style: none; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.coupon-pick > summary::-webkit-details-marker { display: none; }
.coupon-form { display: flex; gap: 10px; margin-top: 14px; }
.coupon-form input {
  flex: 1; min-width: 0; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line-2); background: none; outline: none;
  color: var(--ink); font: 300 15px var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
}
.coupon-form input:focus { border-color: var(--rule); }
.coupon-form input::placeholder { text-transform: none; letter-spacing: 0; color: var(--dim); }
.coupon-form .btn { padding: 12px 18px; }
.coupon-msg { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.coupon-msg:empty { display: none; }
.coupon-msg.bad { color: var(--danger); }
.coupon-on { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--sale); }
.coupon-on strong { font-weight: 500; letter-spacing: 0.08em; }
.coupon-on.warn { color: var(--muted); }
.coupon-remove { padding: 8px 0; border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.coupon-remove:hover { color: var(--danger); }