:root {
  --bg: #fbf5ea;
  --surface: #fffdf8;
  --ink: #2b1418;
  --muted: #7c6559;
  --border: #ead9bd;
  --maroon: #5a1020;
  --maroon-2: #7a1b2e;
  --gold: #b8913f;
  --gold-soft: #e8d3a0;
  --on-maroon: #fbf1de;
  --good: #2f7a4a;
  --shadow: 0 6px 20px rgba(90, 16, 32, 0.08);
  --radius: 16px;
  --serif: "Cormorant Garamond", "Tiro Devanagari Hindi", Georgia, serif;
  --deva: "Tiro Devanagari Hindi", "Cormorant Garamond", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #170a0e;
    --surface: #24131a;
    --ink: #f5e9dc;
    --muted: #bfa592;
    --border: #47282f;
    --maroon: #3d0a15;
    --maroon-2: #5e1424;
    --gold: #d9b45f;
    --gold-soft: #8a6d33;
    --on-maroon: #fbf1de;
    --good: #6fcf97;
    --shadow: none;
  }
}

/* the same palette again, for a reader who chose dark on a light machine */
:root[data-theme="dark"] {
    --bg: #170a0e;
    --surface: #24131a;
    --ink: #f5e9dc;
    --muted: #bfa592;
    --border: #47282f;
    --maroon: #3d0a15;
    --maroon-2: #5e1424;
    --gold: #d9b45f;
    --gold-soft: #8a6d33;
    --on-maroon: #fbf1de;
    --good: #6fcf97;
    --shadow: none;
}

* { box-sizing: border-box; }

/* ---------- Motion ---------- */
/* Tiles and cards fade up as they scroll into view, in small staggered groups */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.shown {
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
}
#view { animation: pageIn .35s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.site-header .ornament { animation: glow 3.4s ease-in-out infinite; }

/* Everything above is decoration — switch it off for anyone who asked for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}

a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ---------- Top bars ---------- */
.site-header {
  text-align: center;
  padding: 34px 0 26px;
  color: var(--on-maroon);
  background:
    radial-gradient(circle at 1px 1px, rgba(232, 211, 160, 0.16) 1px, transparent 1.5px) 0 0 / 18px 18px,
    linear-gradient(160deg, var(--maroon-2), var(--maroon));
  border-bottom: 4px double var(--gold);
}
.logo {
  font-family: var(--serif);
  font-size: clamp(38px, 9vw, 64px);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: var(--on-maroon);
  line-height: 1.1;
}
.ornament { margin: 6px 0; color: var(--gold); letter-spacing: 10px; font-size: 12px; }
.tagline { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(17px, 3.6vw, 21px); font-style: italic; color: var(--gold-soft); }

.socials { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.socials a {
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  color: var(--on-maroon);
  text-decoration: none;
  font-size: 14px;
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.toolbar-inner { display: grid; gap: 8px; padding: 10px 16px; }
@media (min-width: 760px) { .toolbar-inner { grid-template-columns: auto 1fr; align-items: center; gap: 20px; } }

.mainnav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  color: var(--muted);
}
.mainnav a.active { background: var(--maroon); color: var(--on-maroon); }

/* Dark mode follows the device until someone presses this, then it follows them. */
.theme-btn {
  flex: none; width: 34px; height: 34px; margin-left: 2px;
  border-radius: 50%; border: 1px solid var(--border);
  background: transparent; color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: transform .4s cubic-bezier(.3,1.4,.5,1), color .2s, border-color .2s;
}
.theme-btn:hover { color: var(--gold); border-color: var(--gold-soft); }
.theme-btn:active { transform: rotate(180deg) scale(.9); }

#search, select {
  width: 100%;
  font: inherit;
  font-size: 16px; /* stops iPhone zooming on focus */
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
}
#search:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ---------- Page pieces ---------- */
main { padding-bottom: 48px; }

.hero { text-align: center; padding: 34px 0 6px; }
.hero h1 { font-family: var(--serif); font-size: clamp(30px, 6vw, 44px); margin: 0; line-height: 1.15; }
.hero p { color: var(--muted); margin: 8px auto 0; max-width: 560px; }
.season {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  color: var(--on-maroon);
  background: linear-gradient(120deg, var(--maroon-2), var(--maroon));
  border: 1px solid var(--gold);
  transition: transform .2s, box-shadow .2s;
}
.season:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(90,16,32,.22); }
.season span { font-family: var(--deva); color: var(--gold-soft); }
.season b { color: var(--gold); }

.crumbs { font-size: 14px; color: var(--muted); margin: 22px 0 0; }
.crumbs a { color: var(--muted); }

.page-head { padding: 10px 0 4px; }
.page-head h1 { font-family: var(--serif); font-size: clamp(30px, 6vw, 42px); margin: 0; line-height: 1.15; }
.page-head .hindi { font-family: var(--deva); color: var(--gold); font-size: 22px; }
.page-head p { color: var(--muted); margin: 4px 0 0; }

.section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-size: clamp(24px, 4.6vw, 30px);
  font-weight: 700;
  margin: 40px 0 16px;
}
.section-title::before, .section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.section-title a { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--gold); }

.subhead { font-family: var(--serif); font-size: 24px; margin: 28px 0 10px; display: flex; align-items: baseline; gap: 10px; }
.subhead .hindi { font-family: var(--deva); color: var(--gold); font-size: 17px; }

/* Store tiles */
.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.store-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s, border-color 0.15s;
}
.store-tile:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 10px 24px rgba(90,16,32,.14); }
.store-tile:active { transform: translateY(-1px); }
.monogram {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--gold-soft);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--maroon-2);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .monogram { color: var(--gold); } }
:root[data-theme="dark"] .monogram { color: var(--gold); }
.store-tile strong { font-size: 16px; font-weight: 600; }
.store-tile span:not(.monogram) { font-size: 13px; color: var(--muted); }

/* Section tiles — auto-fit (not auto-fill) so a short last row stretches instead of
   leaving dead space on the right */
.section-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 14px; }
.section-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 132px;
  padding: 16px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--on-maroon);
  background:
    radial-gradient(circle at 1px 1px, rgba(232, 211, 160, 0.14) 1px, transparent 1.5px) 0 0 / 14px 14px,
    linear-gradient(150deg, var(--maroon-2), var(--maroon));
  border: 1px solid var(--gold);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.section-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(232,211,160,.18) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
.section-tile:hover::after { transform: translateX(120%); }
.section-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(40,6,14,.3); }
.section-tile > * { position: relative; z-index: 1; }
.section-tile .hindi { font-family: var(--deva); font-size: 30px; color: var(--gold-soft); line-height: 1.2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .section-tile .hindi { color: var(--gold); } }
:root[data-theme="dark"] .section-tile .hindi { color: var(--gold); }
.section-tile strong { font-size: 16px; font-weight: 600; }
.section-tile span { font-size: 12px; opacity: 0.75; }

/* Category pills */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: var(--surface);
  text-decoration: none;
  font-size: 15px;
  transition: background 0.15s, color 0.15s;
}
.pill:hover { background: var(--maroon); color: var(--on-maroon); border-color: var(--maroon); }
.pill small { color: var(--muted); font-size: 12px; }
.pill:hover small { color: var(--gold-soft); }
.pill.shop::after { content: "↗"; font-size: 12px; color: var(--gold); }

/* Category tiles (on section pages) */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.cat-tile {
  padding: 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  display: grid;
  gap: 2px;
}
.cat-tile:hover { border-color: var(--gold); }
.cat-tile strong { font-family: var(--serif); font-size: 21px; line-height: 1.2; }
.cat-tile span { font-size: 13px; color: var(--muted); }

/* Store rows (on category pages) */
.store-list { display: grid; gap: 10px; max-width: 640px; }
.store-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.store-row .monogram { width: 46px; height: 46px; font-size: 21px; flex: none; }
.store-row div { flex: 1; min-width: 0; }
.store-row strong { display: block; font-size: 16px; }
.store-row div span { font-size: 13px; color: var(--muted); }

.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--maroon);
  color: var(--on-maroon);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--maroon);
}
/* Jump strip on long pages */
.jump {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 18px 0 4px;
  padding-bottom: 4px;
}
.jump::-webkit-scrollbar { display: none; }
.jump a {
  flex: none;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  font-size: 13.5px;
  color: var(--muted);
}
.jump a:hover { border-color: var(--gold); color: var(--ink); }
.subhead { scroll-margin-top: 120px; }

.totop {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--maroon);
  color: var(--on-maroon);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(40, 6, 14, .28);
}
.totop[hidden] { display: none; }
.totop:hover { background: var(--maroon-2); }

/* Guide articles (the static SEO pages) */
.article { max-width: 760px; }
.article h2 { font-family: var(--serif); font-size: clamp(24px, 4.4vw, 30px); margin: 34px 0 10px; }
.article h3 { font-family: var(--serif); font-size: 20px; margin: 24px 0 6px; }
.article p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.7; }
.article .lede { font-size: 18px; color: var(--muted); }
.article .grid { margin: 18px 0 8px; }
.article .pills { margin-bottom: 10px; }

/* ---------- Product detail ---------- */
.detail { display: grid; gap: 18px; margin-top: 18px; }
@media (min-width: 760px) { .detail { grid-template-columns: 1fr 1fr; align-items: start; } }
.d-img {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 2px solid var(--gold-soft); aspect-ratio: 4/5; background: var(--border);
}
.d-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-img.pad { background: #fff; }
.d-img.pad img { object-fit: contain; padding: 18px; }
.d-info { display: grid; gap: 8px; align-content: start; }
.d-info h1 { font-family: var(--serif); font-size: clamp(28px, 6vw, 40px); line-height: 1.14; margin: 2px 0 6px; }
.d-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.d-price strong { font-size: 34px; }
.d-price .save {
  font-size: 13px; padding: 5px 12px; border-radius: 999px;
  border: 1px dashed var(--gold); color: var(--muted);
}
.d-note { font-size: 15px; color: var(--muted); margin: 4px 0; }
.d-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.d-actions .btn { padding: 12px 20px; }
.d-actions button.save { position: static; width: 46px; height: 46px; font-size: 19px; }
.d-links { font-size: 14px; color: var(--muted); margin-top: 10px; }
.d-links a { color: var(--muted); }
.d-links a:hover { color: var(--gold); }

.name a { text-decoration: none; color: inherit; }
.name a:hover { color: var(--maroon-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .name a:hover { color: var(--gold); } }
:root[data-theme="dark"] .name a:hover { color: var(--gold); }

/* ---------- Occasions ---------- */
.occ-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 20px; }
.occ {
  display: grid; gap: 5px; align-content: start;
  padding: 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  text-decoration: none; box-shadow: var(--shadow);
  transition: transform .2s, border-color .2s;
}
.occ:hover { transform: translateY(-3px); border-color: var(--gold); }
.occ.soon { border-color: var(--gold); background: linear-gradient(150deg, var(--maroon-2), var(--maroon)); color: var(--on-maroon); }
.occ-when { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.occ.soon .occ-when { color: var(--gold-soft); }
.occ strong { font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.occ-hi { font-family: var(--deva); font-size: 15px; color: var(--muted); }
.occ.soon .occ-hi { color: var(--gold-soft); }
.occ-blurb { font-size: 13.5px; color: var(--muted); line-height: 1.4; margin-top: 4px; }
.occ.soon .occ-blurb { color: var(--gold-soft); }

.occ-badge {
  display: inline-block; margin-top: 10px; padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--gold-soft); font-size: 14px; color: var(--muted);
}
.occ-badge.soon { background: var(--maroon); color: var(--on-maroon); border-color: var(--gold); }

/* ---------- Compare ---------- */
.hero-ctas { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.trustline {
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: .5px;
  color: var(--muted);
}
.compare-cta { display: inline-block; }

.rangebar {
  margin: 18px 0 0;
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--gold-soft);
  font-family: var(--serif);
  font-size: 26px;
}
.rangebar span { font-family: var(--sans); font-size: 14px; color: var(--muted); margin-left: 10px; }

.table-wrap { margin-top: 16px; }
.cmp { width: 100%; border-collapse: collapse; }
/* on a phone the "what opens" column is just noise — store and button are what matter */
@media (max-width: 560px) {
  .cmp .ct, .cmp th:nth-child(2) { display: none; }
  .cmp td { padding: 12px 4px; }
}
.cmp th {
  text-align: left; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 0 12px 10px;
}
.cmp td { padding: 12px; border-top: 1px solid var(--border); vertical-align: middle; }
.cmp tr:hover td { background: var(--surface); }
.cmp .st { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.cmp .st .monogram { width: 42px; height: 42px; font-size: 19px; }
.cmp .ct { color: var(--muted); font-size: 14px; }
.cmp .go { text-align: right; white-space: nowrap; }

.cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.cmp-card {
  display: grid; gap: 4px; padding: 16px;
  border-radius: 14px; background: var(--surface);
  border: 1px solid var(--gold-soft); text-decoration: none;
}
.cmp-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.cmp-card strong { font-family: var(--serif); font-size: 20px; }
.cmp-card span { font-size: 13px; color: var(--muted); }

/* ---------- Look builder ---------- */
.who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 20px; }
.who {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 34px 20px; border-radius: var(--radius);
  background: linear-gradient(150deg, var(--maroon-2), var(--maroon));
  border: 1px solid var(--gold); color: var(--on-maroon); text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.who:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(40,6,14,.3); }
.who span { font-size: 48px; }
.who strong { font-family: var(--serif); font-size: 28px; }
.who small { font-size: 13px; color: var(--gold-soft); }

.steps-dots { display: flex; gap: 8px; margin: 16px 0 4px; }
.steps-dots i { flex: 1; height: 6px; border-radius: 99px; background: var(--border); }
.steps-dots i.done { background: var(--gold); }
.steps-dots i.now { background: var(--maroon); }

.sofar { display: flex; gap: 10px; overflow-x: auto; padding: 14px 0 4px; scrollbar-width: none; }
.sofar::-webkit-scrollbar { display: none; }
.sf {
  flex: none; width: 92px; display: grid; gap: 4px; justify-items: center;
  font-size: 12px; color: var(--muted);
}
.sf img { width: 92px; height: 112px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.sf.skip { height: 112px; display: grid; place-content: center; border: 1px dashed var(--border); border-radius: 10px; }
.sf.tot { display: grid; place-content: center; }
.sf.tot strong { font-family: var(--serif); font-size: 22px; color: var(--ink); }

a.card.pickable { text-decoration: none; color: inherit; }
a.card.pickable .thumb { display: block; position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--border); }
a.card.pickable .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.card.pickable .thumb.pad { background: #fff; }
a.card.pickable .thumb.pad img { object-fit: contain; padding: 10px; }
a.card.pickable .body { display: grid; gap: 6px; padding: 12px; }
a.card.pickable .name { font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.25; }
a.card.pickable .btn { text-align: center; margin-top: 4px; }

/* the finished board */
.board { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 700px) { .board { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.board-hero {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  border: 2px solid var(--gold); aspect-ratio: 4/5; background: var(--border);
}
.board-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-hero .tag {
  position: absolute; left: 12px; bottom: 12px; padding: 8px 16px; border-radius: 999px;
  background: var(--maroon); color: var(--on-maroon); font-size: 14px;
}
.board-side { display: grid; gap: 10px; align-content: start; }
.board-item {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.board-item:hover { border-color: var(--gold); }
.bi-img { width: 76px; height: 92px; border-radius: 10px; overflow: hidden; flex: none; background: var(--border); }
.bi-img.pad { background: #fff; }
.bi-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bi-img.pad img { object-fit: contain; padding: 6px; }
.bi-tx { display: grid; gap: 2px; }
.bi-tx b { font-size: 14px; }
.bi-tx i { font-style: normal; font-size: 13px; color: var(--muted); }
.bi-tx u { text-decoration: none; font-family: var(--serif); font-size: 20px; font-weight: 700; }

.note-box {
  margin: 18px 0 0; padding: 14px 18px; border-radius: 12px;
  background: var(--surface); border: 1px dashed var(--gold-soft);
  font-size: 14px; color: var(--muted);
}
.total-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 14px; padding: 16px 20px; border-radius: 14px;
  background: linear-gradient(120deg, var(--maroon-2), var(--maroon)); color: var(--on-maroon);
}
.total-bar span { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-soft); }
.total-bar strong { font-family: var(--serif); font-size: 34px; }

/* Gift finder */
.gift-step { margin-bottom: 6px; }
.gift-step .subhead { font-size: 21px; margin: 22px 0 10px; }
.gift-step.done .subhead { opacity: .65; font-size: 18px; }
.pill.on { background: var(--maroon); color: var(--on-maroon); border-color: var(--maroon); }

.btn { transition: transform .12s, background .2s, border-color .2s; }
.btn:hover { background: var(--maroon-2); }
.btn:active { transform: scale(.97); }
.pill { transition: background .18s, color .18s, border-color .18s, transform .18s; }
.pill:hover { transform: translateY(-2px); }
button.save { transition: transform .15s, color .2s, border-color .2s; }
button.save:active { transform: scale(1.25); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--gold); }
.btn.ghost:hover { background: var(--surface); }
.btn.disabled { background: var(--border); border-color: var(--border); color: var(--muted); pointer-events: none; }

.share-row { margin: 18px 0 0; }

/* Picks */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; max-width: 720px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  font: inherit;
  font-size: 14px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.chip[aria-selected="true"] { background: var(--maroon); border-color: var(--maroon); color: var(--on-maroon); }

.count { color: var(--muted); font-size: 14px; margin: 12px 0 10px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } }

/* Budget shortcuts on the home page */
.budget-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.budget-tile {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 14px 8px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--gold-soft);
  text-decoration: none;
  box-shadow: var(--shadow);
}
.budget-tile:hover { border-color: var(--gold); }
.budget-tile span { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.budget-tile strong { font-family: var(--serif); font-size: 22px; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.card:hover { transform: translateY(-4px); border-color: var(--gold-soft); box-shadow: 0 14px 30px rgba(90,16,32,.15); }
.card.highlight { outline: 3px solid var(--gold); }
.thumb { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--border); border-bottom: 1px solid var(--border); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.card:hover .thumb img { transform: scale(1.04); }
/* Beauty product shots are padded squares — show them whole on white */
.thumb.pad { background: #fff; }
.thumb.pad img { object-fit: contain; padding: 10px; }
.card:hover .thumb.pad img { transform: none; }
.badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface);
  color: var(--maroon-2);
  border: 1px solid var(--gold-soft);
}
/* bottom-left so it never sits under the save heart (top-right) */
.badge.off { top: auto; bottom: 8px; background: var(--good); color: #fff; border: 0; }
.badge.new { background: var(--maroon); color: var(--on-maroon); border-color: var(--gold); }
.body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.store { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gold); font-weight: 600; }
.brand { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: -2px; text-decoration: none; }
a.brand:hover { color: var(--gold); }
.d-info a.brand { font-size: 15px; }
.name {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.note { margin: 0; font-size: 13px; color: var(--muted); }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price strong { font-size: 16px; }
.price s { color: var(--muted); font-size: 13px; }
.see-price { font-size: 14px; color: var(--muted); }
.checked { font-size: 11px; color: var(--muted); opacity: .8; }
/* Stacked so the long "Shop on <store>" label never pushes Share off the card */
.actions { margin-top: auto; display: grid; gap: 6px; }
.actions .btn { text-align: center; padding: 9px 10px; font-size: 13px; white-space: normal; }
@media (min-width: 700px) {
  .actions { grid-template-columns: 1fr auto; }
}

/* button.save, not .save — the detail page has a <span class="save"> price chip */
button.save {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--maroon-2);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
button.save[aria-pressed="true"] { color: #c0392b; border-color: #c0392b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) button.save { color: var(--gold); }
  :root:not([data-theme="light"]) button.save[aria-pressed="true"] { color: #ff7a7a; border-color: #ff7a7a; }
}
:root[data-theme="dark"] button.save { color: var(--gold); }
:root[data-theme="dark"] button.save[aria-pressed="true"] { color: #ff7a7a; border-color: #ff7a7a; }

.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 0; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 30px;
  padding: 26px 0 40px;
  background: var(--maroon);
  color: var(--gold-soft);
  border-top: 4px double var(--gold);
  font-size: 14px;
  text-align: center;
}
.site-footer h2 { font-family: var(--serif); font-size: 22px; color: var(--on-maroon); margin: 0 0 8px; }
.site-footer p { max-width: 640px; margin: 8px auto; }
.small { font-size: 12px; }

/* =====================================================================
   SIGNATURE MOTION
   Everything here is decoration. The reduced-motion block near the top of
   this file kills all of it with one !important rule, so nothing below
   needs its own guard except where the still version needs other values.
   ===================================================================== */

/* ---------- Header mandala ---------- */
.site-header { position: relative; overflow: hidden; }
.site-header .wrap { position: relative; z-index: 1; }
.mandala {
  position: absolute;
  top: 50%; left: 50%;
  width: min(520px, 118vw);
  height: auto;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 0.9;
  opacity: .22;
  pointer-events: none;
}
.mandala .m-dot { fill: var(--gold-soft); stroke: none; }
.mandala .m-spin { transform-origin: 100px 100px; animation: mandalaSpin 160s linear infinite; }
/* trace the rings on first paint, then leave them alone */
.mandala .m-draw { stroke-dasharray: 600; stroke-dashoffset: 600; animation: mandalaDraw 2.6s ease-out .15s forwards; }
.mandala circle.m-draw:nth-of-type(2) { animation-delay: .35s; }
.mandala circle.m-draw:nth-of-type(3) { animation-delay: .55s; }
.mandala .m-petals use,
.mandala .m-leaves use { opacity: 0; animation: mandalaBloom 1.1s ease-out forwards; animation-delay: calc(.5s + 60ms * var(--i, 0)); }
.mandala .m-petals use:nth-child(1)  { --i: 1 }
.mandala .m-petals use:nth-child(2)  { --i: 2 }
.mandala .m-petals use:nth-child(3)  { --i: 3 }
.mandala .m-petals use:nth-child(4)  { --i: 4 }
.mandala .m-petals use:nth-child(5)  { --i: 5 }
.mandala .m-petals use:nth-child(6)  { --i: 6 }
.mandala .m-petals use:nth-child(7)  { --i: 7 }
.mandala .m-petals use:nth-child(8)  { --i: 8 }
.mandala .m-petals use:nth-child(9)  { --i: 9 }
.mandala .m-petals use:nth-child(10) { --i: 10 }
.mandala .m-petals use:nth-child(11) { --i: 11 }
.mandala .m-petals use:nth-child(12) { --i: 12 }
.mandala .m-leaves use { --i: 13; }
@keyframes mandalaSpin { to { transform: rotate(360deg); } }
@keyframes mandalaDraw { to { stroke-dashoffset: 0; } }
@keyframes mandalaBloom { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mandala .m-draw { stroke-dashoffset: 0; }
  .mandala .m-petals use, .mandala .m-leaves use { opacity: 1; }
}

/* ---------- Reading progress ---------- */
#progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--maroon-2), var(--gold));
  transition: transform .1s linear;
  pointer-events: none;
}

/* ---------- Deal ticker ---------- */
.ticker {
  position: relative;
  margin: 0 0 18px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: tickerRun var(--dur, 48s) linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 0 18px; white-space: nowrap; text-decoration: none; font-size: 13px;
  border-right: 1px solid var(--border);
}
.ticker a:hover .t-name { color: var(--gold); }
.ticker .t-off { color: var(--good); font-weight: 700; }
.ticker .t-name { color: var(--ink); }
.ticker .t-price { font-weight: 700; }
.ticker .t-was { color: var(--muted); text-decoration: line-through; font-size: 12px; }
@keyframes tickerRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker-track { width: auto; }
}

/* ---------- Aaj ka pick ---------- */
.spotlight {
  position: relative;
  display: grid;
  margin: 18px 0 6px;
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
@media (min-width: 720px) { .spotlight { grid-template-columns: 300px 1fr; } }
.spotlight .s-img { position: relative; aspect-ratio: 4/5; background: var(--border); overflow: hidden; }
@media (min-width: 720px) { .spotlight .s-img { aspect-ratio: auto; min-height: 320px; } }
.spotlight .s-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s ease-out; }
.spotlight .s-img.pad { background: #fff; }
.spotlight .s-img.pad img { object-fit: contain; padding: 14px; }
.spotlight:hover .s-img img { transform: scale(1.06); }
.spotlight .s-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.spotlight .s-kicker {
  display: inline-flex; align-items: center; gap: 8px; align-self: start;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700;
  color: var(--maroon-2); background: var(--gold-soft); border-radius: 999px; padding: 4px 12px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .spotlight .s-kicker { color: var(--on-maroon); } }
:root[data-theme="dark"] .spotlight .s-kicker { color: var(--on-maroon); }
.spotlight h2 { margin: 0; font-family: var(--serif); font-size: clamp(22px, 3.4vw, 30px); line-height: 1.15; }
.spotlight h2 a { text-decoration: none; }
.spotlight h2 a:hover { color: var(--maroon-2); }
.spotlight .s-note { margin: 0; color: var(--muted); font-size: 14px; max-width: 52ch; }
.spotlight .s-price { display: flex; align-items: baseline; gap: 8px; font-size: 20px; font-weight: 700; }
.spotlight .s-price s { font-size: 14px; font-weight: 400; color: var(--muted); }
.spotlight .s-price .s-off { font-size: 13px; color: #fff; background: var(--good); border-radius: 999px; padding: 2px 10px; }
.spotlight .s-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }

/* a gold sheen crosses the panel every few seconds */
.spotlight::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(232, 211, 160, .34) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: sheen 7s ease-in-out 1.6s infinite;
}
@keyframes sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }

/* ---------- Cards ---------- */
/* Images arrive one at a time on a slow connection; the shimmer stops the
   grid from looking broken while they do. Scoped to .js because the guide
   and section pages render the same cards with no script at all — there,
   nothing would ever clear it and every product photo would stay hidden. */
.js .thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent 80%);
  background-size: 220% 100%;
  /* eight passes, not infinite: a Picks page holds 237 cards and most of
     them are far below the fold, where a forever-looping gradient is just
     heat on a cheap phone. */
  animation: shimmer 1.4s linear 8;
  transition: opacity .3s;
}
.js .thumb.ready::before { opacity: 0; animation: none; }
@keyframes shimmer { to { background-position: -220% 0; } }
.js .thumb img { opacity: 0; transition: opacity .45s ease, transform .35s ease; }
.js .thumb.ready img { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .thumb img { opacity: 1; } .js .thumb::before { display: none; } }

/* the discount badge catches the light every few seconds */
.badge.off { overflow: hidden; }
.badge.off::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: badgeShine 5s ease-in-out 1s infinite;
}
@keyframes badgeShine { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }

/* saving something should feel like something */
button.save.pop { animation: heartPop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes heartPop {
  0% { transform: scale(1); } 35% { transform: scale(1.45); }
  60% { transform: scale(.92); } 100% { transform: scale(1); }
}
button.save.pop::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--gold); animation: heartRing .55s ease-out forwards;
}
@keyframes heartRing { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

/* ---------- Counters ---------- */
.trustline b { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- Page transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vtOut .18s ease both; }
  ::view-transition-new(root) { animation: vtIn .28s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }