/* =========================================================================
   Hushroots storefront
   Breakpoints: phone < 600px · tablet 600-1023px · desktop >= 1024px
   ========================================================================= */
:root {
  --ink: #1f1410;
  --ink-2: #4f3d33;
  --muted: #7d6b60;
  --line: #e7dccf;
  --line-2: #f1e9df;
  --ivory: #fdfaf6;
  --cream: #f7f0e6;
  --paper: #ffffff;

  --kumkum: #b3141f;
  --maroon: #6a0f1a;
  --saffron: #d9731a;
  --marigold: #f2a900;
  --peacock: #0b5e5e;
  --royal: #3f1867;
  --mehendi: #3f6b1f;
  --gold: #b08d2a;

  --primary: var(--kumkum);
  --primary-dark: var(--maroon);
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 6px 20px -10px rgba(31, 20, 16, .25);
  --shadow-lg: 0 18px 40px -18px rgba(31, 20, 16, .35);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --header-h: 72px;
  --gutter: 16px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* faint jaali lattice used as texture on coloured panels */
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 0 32 16 16 32 0 16Z' fill='none' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
}
@media (min-width: 768px) { :root { --gutter: 28px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; font: 400 1rem/1.6 var(--sans); color: var(--ink); background: var(--ivory); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--radius-sm); }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; margin-top: 2rem; }
.eyebrow { font: 600 .75rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--saffron); margin: 0 0 .5rem; }

/* icons */
.i { width: 20px; height: 20px; flex-shrink: 0; vertical-align: -.2em; }
.i--sm { width: 16px; height: 16px; }
.i--xs { width: 12px; height: 12px; vertical-align: -.05em; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .65rem 1.25rem;
  border: 1.5px solid transparent; border-radius: var(--radius-sm); font: 600 .95rem/1.2 var(--sans); white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s; text-align: center; }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); color: #fff; }
.btn--outline { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--maroon); }
.btn--light:hover { background: var(--cream); color: var(--maroon); }
.btn--ghost-light { border-color: rgba(255, 255, 255, .75); color: #fff; }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn--wa { background: #1fa855; color: #fff; }
.btn--wa:hover { background: #178a45; color: #fff; }
.btn--sm { min-height: 38px; padding: .45rem .9rem; font-size: .875rem; }
.btn--lg { min-height: 52px; padding: .8rem 1.5rem; font-size: 1rem; }
.btn--block { width: 100%; }
.link-btn { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: .25rem 0; color: var(--primary); font-weight: 600; font-size: .9rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--primary); white-space: nowrap; }
.icon-btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 44px; min-height: 44px; padding: 4px; background: none; border: 0; border-radius: var(--radius-sm); }
.icon-btn .i { width: 22px; height: 22px; }
.icon-btn:hover { color: var(--primary); }
.icon-btn__label { font-size: .7rem; font-weight: 600; }
.badge-count { position: absolute; top: 2px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--kumkum); color: #fff;
  font-size: .65rem; font-weight: 700; display: grid; place-items: center; }

.pill { display: inline-block; padding: .2rem .5rem; border-radius: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.pill--deal { background: #fff; color: var(--kumkum); border: 1px solid #f0c9cb; }
.pill--hot { background: var(--kumkum); color: #fff; }
.pill--dark { background: var(--ink); color: #fff; }
.pill--fest { margin-bottom: .8rem; padding: .3rem .7rem; border: 1px solid color-mix(in srgb, var(--fest) 35%, #fff); background: color-mix(in srgb, var(--fest) 8%, #fff); color: var(--fest); }

/* ---------- announcement ---------- */
.announce { overflow: hidden; background: linear-gradient(90deg, var(--maroon), var(--kumkum) 45%, var(--saffron)); color: #fff; font-size: .8rem; font-weight: 500; }
.announce__track { display: flex; width: max-content; animation: marquee 50s linear infinite; }
.announce:hover .announce__track, .announce:focus-within .announce__track { animation-play-state: paused; }
.announce__list { list-style: none; margin: 0; padding: .45rem 0; display: flex; flex-shrink: 0; }
.announce__list li { position: relative; padding-inline: 1.6rem; white-space: nowrap; }
.announce__list li::after { content: ""; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--marigold); }
.announce__greet { font-weight: 600; color: #ffe8b3; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .announce__track { width: auto; animation: none; justify-content: center; }
  .announce__list[aria-hidden="true"], .announce__list li:not(:first-child) { display: none; }
}

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 40; background: rgba(253, 250, 246, .97); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(8px)) { .header { background: rgba(253, 250, 246, .9); backdrop-filter: blur(8px); } }
.header__inner { display: flex; align-items: center; gap: 1.25rem; height: var(--header-h); }
.header__menu { display: none; }
.logo { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; color: var(--maroon); }
.logo__img { width: auto; height: 50px; }
.logo__img--drawer { height: 38px; }
.footer__logo { width: auto; height: 54px; margin-bottom: 1rem; }
.logo__text { display: flex; flex-direction: column; font: 700 1.6rem/1 var(--serif); color: var(--maroon); }
.logo__text small { margin-top: 3px; font: 600 .62rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.logo__text--light { color: #fff; }

.nav { flex: 1; min-width: 0; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.nav__link { display: block; padding: 0 .7rem; line-height: var(--header-h); font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav__item:hover .nav__link, .nav__item:focus-within .nav__link { border-color: var(--primary); color: var(--ink); }
.nav__link--accent { color: var(--kumkum); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; }
.nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega__inner { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; padding-block: 1.75rem; }
.mega--small .mega__inner { grid-template-columns: 1fr; }
.mega__head { margin-bottom: .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mega__col ul { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 2rem; }
.mega__col li { padding: .3rem 0; break-inside: avoid; }
.mega__col a { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-2); }
.mega__col a:hover { color: var(--primary); }
.mega__all { font-weight: 600; color: var(--primary) !important; }
.mega__promo { padding: 1.4rem; border-radius: var(--radius); background: var(--lattice), var(--maroon); color: #fff; }
.mega__promo-eyebrow { margin-bottom: .3rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.mega__promo-title { font: 600 1.5rem/1.15 var(--serif); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.search { position: relative; display: flex; align-items: center; width: clamp(200px, 20vw, 280px); }
.search__icon { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.search input, .drawer__search input { width: 100%; min-height: 42px; padding: .55rem .9rem .55rem 2.4rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.search input:focus, .drawer__search input:focus { outline: none; border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(217, 115, 26, .15); }
.header__actions { display: flex; gap: .15rem; }
.search-toggle { display: none; }

@media (max-width: 1180px) { .nav__link { padding: 0 .45rem; font-size: .8rem; letter-spacing: .03em; } .logo__img { height: 44px; } }
@media (max-width: 379px) { .logo__img { height: 34px; } }
@media (max-width: 1023px) {
  :root { --header-h: 60px; }
  .nav { display: none; }
  .header__menu { display: inline-flex; margin-left: -8px; }
  .header__inner { gap: .5rem; }
  .logo { margin-right: auto; }
  .logo__img { height: 40px; }
  .search { display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 8px); width: auto; z-index: 2; box-shadow: var(--shadow); }
  .search.is-open { display: flex; }
  .search-toggle { display: inline-flex; }
  .icon-btn__label { display: none; }
}
@media (max-width: 599px) { .icon-btn--contact { display: none; } }

/* ---------- drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(31, 20, 16, .45); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__panel { width: min(340px, 88vw); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--ivory); transform: translateX(-100%); transition: transform .2s; padding-bottom: calc(2rem + var(--safe-bottom)); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: .6rem .6rem .6rem 1.2rem; border-bottom: 1px solid var(--line); background: #fff; }
.drawer__search { position: relative; display: flex; align-items: center; padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); }
.drawer__search .search__icon { left: 1.95rem; }
.drawer__group { border-bottom: 1px solid var(--line); }
.drawer__group summary { padding: 1rem 1.2rem; font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.drawer__group summary::-webkit-details-marker { display: none; }
.drawer__group summary::after { content: ""; width: 8px; height: 8px; margin-top: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.drawer__group[open] summary::after { transform: rotate(-135deg); margin-top: 8px; }
.drawer__group a { display: block; padding: .7rem 1.2rem .7rem 2rem; color: var(--ink-2); }
.drawer__link { display: block; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); font-weight: 600; }

/* ---------- flashes ---------- */
.flashes { padding-top: 1rem; }
.flash { margin-bottom: .6rem; padding: .85rem 1rem; border-radius: var(--radius-sm); font-weight: 500; }
.flash p { margin: 0; }
.flash--success { background: #eaf4e4; color: #2e5418; border: 1px solid #cfe5c2; }
.flash--error { background: #fbeaea; color: #8e1520; border: 1px solid #f2c7c7; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; color: #fff; background: var(--maroon); }
.hero__slide { display: none; }
.hero__slide.is-active { display: block; animation: fade .5s ease; }
.theme-saffron { background: var(--lattice), #9a3d0c; }
.theme-kumkum { background: var(--lattice), var(--maroon); }
.theme-peacock { background: var(--lattice), #08484b; }
.theme-marigold { background: var(--lattice), #8a5a00; }
.theme-royal { background: var(--lattice), var(--royal); }
.theme-mehendi { background: var(--lattice), #2f4f17; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 2.5rem; min-height: clamp(420px, 60vh, 580px); padding-block: 3rem 4rem; }
.hero__slide--text .hero__inner { grid-template-columns: minmax(0, 820px); justify-content: center; text-align: center; min-height: clamp(360px, 48vh, 480px); }
.hero__slide--text .hero__sub { margin-inline: auto; }
.hero__slide--text .hero__ctas { justify-content: center; }
.hero__slide--text ~ .hero__controls .hero__dots, .hero:has(.hero__slide--text.is-active) .hero__dots { justify-content: center; }
.hero__eyebrow { margin-bottom: .8rem; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #f3d9a4; }
.hero__title { font-size: clamp(2.3rem, 5.2vw, 4.4rem); font-weight: 600; margin-bottom: 1rem; }
.hero__sub { max-width: 560px; margin-bottom: 1.8rem; font-size: clamp(1rem, 1.5vw, 1.15rem); color: rgba(255, 255, 255, .88); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__art { display: flex; justify-content: center; }
.hero__art img { width: 100%; max-width: 440px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.hero__controls { position: absolute; left: 0; right: 0; bottom: 1.4rem; }
.hero__dots { display: flex; gap: .4rem; }
.hero__dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; position: relative; }
.hero__dot::before { content: ""; position: absolute; left: 2px; right: 2px; top: 12px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .4); }
.hero__dot.is-active::before { background: #fff; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 767px) {
  .hero__inner { grid-template-columns: 1fr; min-height: 0; padding-block: 2.25rem 3.5rem; gap: 1.5rem; }
  .hero__art { order: -1; }
  .hero__art img { max-width: 100%; aspect-ratio: 16 / 10; }
  .hero__ctas .btn { flex: 1 1 auto; }
}

/* ---------- category shortcuts ---------- */
.chips { padding-block: 1.5rem .5rem; }
.chips__scroll { display: flex; gap: 1rem; overflow-x: auto; padding: .25rem 0 .75rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.chip { flex: 0 0 auto; width: 96px; text-align: center; scroll-snap-align: start; }
.chip__img { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto .5rem; overflow: hidden; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); color: var(--muted); }
.chip__img img { width: 100%; height: 100%; object-fit: cover; }
.chip:hover .chip__img { border-color: var(--primary); }
.chip__label { display: block; font-size: .82rem; font-weight: 600; line-height: 1.25; }
.chip__label small { display: block; font-size: .72rem; font-weight: 500; color: var(--muted); }
@media (max-width: 599px) { .chip { width: 80px; } .chip__img { width: 68px; height: 68px; } }

/* ---------- sections ---------- */
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--cream { background: var(--cream); }
.section--festive { background: var(--lattice), var(--royal); color: #fff; }
.section--steps { background: var(--cream); }
.section__head { margin-bottom: 1.6rem; }
.section__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.section__title { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.section__title--light { color: #fff; }
.section__sub { max-width: 640px; margin: .5rem 0 0; color: var(--ink-2); }

/* ---------- product grid & cards ---------- */
.grid { display: grid; gap: 1.5rem 1.1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 1023px) { .grid, .grid--listing { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .grid, .grid--listing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .75rem; } }
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s; }
.card__media { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--cream); overflow: hidden; }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.card__img--alt { opacity: 0; }
@media (hover: hover) {
  .card:hover { box-shadow: var(--shadow); }
  .card:hover .card__img--alt { opacity: 1; }
}
.card__noimg { display: grid; place-items: center; height: 100%; color: var(--muted); }
.card__noimg .i { width: 40px; height: 40px; }
.card__badges { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.card__rating { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 3px; padding: .12rem .45rem; border-radius: 4px; background: rgba(255, 255, 255, .94); font-size: .75rem; font-weight: 700; }
.card__rating .i { color: var(--mehendi); }
.card__rating small { font-weight: 500; color: var(--muted); }
.card__save { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); }
.card__save .i { width: 20px; height: 20px; }
.card__save[aria-pressed="true"] { color: var(--kumkum); }
.card__save[aria-pressed="true"] .i { fill: currentColor; }
.card__body { padding: .75rem .85rem 1rem; }
.card__cat { margin: 0 0 .15rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card__title { margin: 0 0 .35rem; font: 600 .95rem/1.35 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.card__save, .card__badges, .card__rating { z-index: 1; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; margin: 0; font-size: .95rem; }
.price s { font-size: .82rem; color: var(--muted); }
.price__off { font-size: .8rem; font-weight: 700; color: var(--kumkum); }
.card--soldout .card__img { opacity: .6; filter: grayscale(.5); }
@media (max-width: 599px) { .card__body { padding: .6rem .65rem .8rem; } .card__title { font-size: .88rem; } }

/* horizontal rails */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 240px); gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: .25rem 2px 1rem; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
@media (max-width: 1023px) { .rail { grid-auto-columns: 30%; } }
@media (max-width: 599px) { .rail { grid-auto-columns: 44%; gap: .75rem; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); } }

/* ---------- festival spotlight ---------- */
.spotlight { background: var(--lattice), color-mix(in srgb, var(--fest) 82%, #000); color: #fff; }
.spotlight__inner { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 2.5rem; align-items: center; padding-block: 3rem; }
.spotlight__title { margin: 0; font-size: clamp(2.2rem, 4.5vw, 3.4rem); color: #fff; }
.spotlight__tag { font: italic 500 1.3rem/1.3 var(--serif); color: #f3d9a4; }
.spotlight__desc, .spotlight__hint { color: rgba(255, 255, 255, .88); }
.spotlight__hint { font-size: .9rem; }
.spotlight .card { color: var(--ink); }
.spotlight__rail { grid-auto-columns: minmax(190px, 220px); }
.countdown { display: flex; gap: .5rem; margin: 1.2rem 0 .8rem; }
.countdown div { min-width: 64px; padding: .55rem .3rem; text-align: center; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .08); }
.countdown b { display: block; font: 600 1.8rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.countdown small { font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
@media (max-width: 1023px) {
  .spotlight__inner { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2.5rem; }
  .spotlight__rail { grid-auto-columns: 30%; }
}
@media (max-width: 599px) { .spotlight__rail { grid-auto-columns: 44%; } .countdown div { min-width: 0; flex: 1; } }

/* ---------- Canada band ---------- */
.ca-band { background: #fff; border-block: 1px solid var(--line); }
.ca-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.5rem; align-items: center; padding-block: 2.5rem; }
.ca-band__title { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.ca-band__copy p:not(.eyebrow) { color: var(--ink-2); }
.ca-band__cities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ca-band__cities li { padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--ivory); font-size: .85rem; font-weight: 600; }
.ca-band__cities small { margin-left: .15rem; font-weight: 700; color: var(--kumkum); }
@media (max-width: 1023px) { .ca-band__inner { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ---------- departments ---------- */
.worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.world { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 420px; overflow: hidden; border-radius: var(--radius); color: #fff; background: var(--maroon); }
.world:hover { color: #fff; }
.world img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
@media (hover: hover) { .world:hover img { transform: scale(1.03); } }
.world--1 { background: var(--peacock); }
.world--3 { background: #8a5a00; }
.world__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 10, 6, 0) 25%, rgba(20, 10, 6, .55) 55%, rgba(20, 10, 6, .88)); }
.world__copy { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.5rem; }
.world__name { font: 600 2.4rem/1 var(--serif); }
.world__subs { display: flex; flex-wrap: wrap; gap: .35rem; }
.world__subs span { padding: .15rem .55rem; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; font-size: .75rem; }
.world__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; font-weight: 600; border-bottom: 1px solid currentColor; }
@media (max-width: 1023px) { .world { min-height: 340px; } .world__name { font-size: 2rem; } }
@media (max-width: 767px) { .worlds { grid-template-columns: 1fr; } .world { min-height: 240px; } }

/* ---------- regions ---------- */
.cultures { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.culture { display: flex; flex-direction: column; justify-content: flex-end; min-height: 128px; padding: 1.1rem 1.2rem; border-radius: var(--radius); border-bottom: 4px solid var(--a);
  background: var(--lattice), color-mix(in srgb, var(--b) 85%, #000); color: #fff; transition: box-shadow .2s; }
.culture:hover { color: #fff; box-shadow: var(--shadow-lg); }
.culture__name { font: 600 1.6rem/1.05 var(--serif); }
.culture__craft { font-size: .85rem; opacity: .9; }
@media (max-width: 1023px) { .cultures { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .culture { min-height: 104px; padding: .9rem; } .culture__name { font-size: 1.35rem; } }

/* ---------- tabs ---------- */
.tabs__list { display: flex; gap: .5rem; margin-bottom: 1.25rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { flex: 0 0 auto; min-height: 40px; padding: .45rem 1rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: transparent; color: #fff; font-weight: 600; font-size: .9rem; }
.tabs__tab.is-active { background: #fff; border-color: #fff; color: var(--maroon); }
.tabs__list--dark .tabs__tab { border-color: var(--line); color: var(--ink); }
.tabs__list--dark .tabs__tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }
.tabs__tagline { font: italic 500 1.25rem var(--serif); color: #f3d9a4; }
.section--festive .card { color: var(--ink); }
.muted-light { color: rgba(255, 255, 255, .85); }
.muted-light a { text-decoration: underline; }

/* ---------- steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.step { padding: 1.5rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.step__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .9rem; border-radius: 50%; background: #fbeaea; color: var(--kumkum); }
.step__num { display: block; margin-bottom: .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.step h3 { font-size: 1.3rem; }
.step p { margin: 0; font-size: .93rem; color: var(--ink-2); }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .steps { grid-template-columns: 1fr; } .step { display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; padding: 1.1rem; } .step__icon { grid-row: span 3; margin: 0; } }

/* ---------- reviews strip ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.quote { margin: 0; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.quote blockquote { margin: .6rem 0 1rem; font: 500 1.15rem/1.45 var(--serif); }
.quote figcaption { font-size: .85rem; color: var(--muted); }
.quote figcaption a { color: var(--primary); }
.stars { display: inline-flex; gap: 2px; color: var(--marigold); }
.star-off { color: var(--line); }
@media (max-width: 1023px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- SEO copy ---------- */
.seo-intro { border-top: 1px solid var(--line); }
.seo-intro__cols { columns: 2 320px; column-gap: 2.5rem; margin-top: 1rem; color: var(--ink-2); }
.seo-intro a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.seo-intro--listing { max-width: 880px; margin-top: 3rem; padding-top: 2rem; color: var(--ink-2); }
.seo-intro--listing h2 { font-size: 1.55rem; color: var(--ink); }

/* ---------- trust + footer ---------- */
.trust { background: #fff; border-top: 1px solid var(--line); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; padding-block: 1.75rem; }
.trust__item { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: start; font-size: .92rem; }
.trust__icon { grid-row: span 2; width: 28px; height: 28px; color: var(--kumkum); }
.trust__item small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
@media (max-width: 1023px) { .trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .trust__grid { grid-template-columns: 1fr; gap: 1rem; } }

.footer { background: #1b110d; color: #d6c7b9; border-top: 4px solid var(--kumkum); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 2rem; padding-block: 3rem 2rem; }
.footer__grid ul { list-style: none; margin: 0; padding: 0; }
.footer__grid li { padding: .3rem 0; font-size: .9rem; }
.footer__grid a:hover { color: #fff; text-decoration: underline; }
.footer__head { color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.footer__brand p { font-size: .9rem; }
.footer__note { padding-left: .8rem; border-left: 2px solid var(--marigold); color: #efe2d5; }
.footer__contact li { display: flex; gap: .55rem; align-items: flex-start; }
.footer__contact .i { margin-top: .2rem; color: #a99686; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; padding-block: 1.2rem calc(1.2rem + var(--safe-bottom)); border-top: 1px solid #33241c; font-size: .82rem; }
.footer__base a { display: inline-flex; align-items: center; gap: .3rem; }
@media (max-width: 1023px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 599px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; } .footer__col:last-child { grid-column: 1 / -1; } }

.wa-float { position: fixed; right: 16px; bottom: calc(16px + var(--safe-bottom)); z-index: 30; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: #1fa855; color: #fff; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35); }
.wa-float:hover { color: #fff; background: #178a45; }
.wa-float .i { width: 28px; height: 28px; }

/* ---------- page hero & listing ---------- */
.page-hero { padding-block: 1.5rem 1.75rem; border-bottom: 1px solid var(--line); background: var(--cream); }
.page-hero--festive { border: 0; background: var(--lattice), color-mix(in srgb, var(--fest) 82%, #000); color: #fff; }
.page-hero--festive .crumbs, .page-hero--festive .crumbs a { color: rgba(255, 255, 255, .8); }
.page-hero__title { margin: .3rem 0; font-size: clamp(1.9rem, 4vw, 3rem); }
.page-hero__ca { font-style: italic; color: var(--kumkum); }
.page-hero--festive .page-hero__ca { color: #f3d9a4; }
.page-hero__sub { margin: 0; font: italic 500 1.15rem/1.4 var(--serif); color: var(--ink-2); }
.page-hero--festive .page-hero__sub { color: #f3d9a4; }
.page-hero__desc { max-width: 720px; margin-top: .6rem; opacity: .9; }
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; color: var(--muted); }
.crumbs > *:not(:last-child)::after { content: "/"; margin-left: .4rem; opacity: .5; }
.crumbs > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.subcats { display: flex; gap: .5rem; margin-top: 1rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.subcats::-webkit-scrollbar { display: none; }
.subcat { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 38px; padding: .35rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .85rem; font-weight: 600; }
.subcat:hover, .subcat.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }

.listing { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2rem; padding-block: 2rem 3rem; }
.filters__form { position: sticky; top: calc(var(--header-h) + 16px); }
.filters__head { display: flex; align-items: center; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.filters__head b { margin-right: auto; }
.filters__head a { font-size: .85rem; font-weight: 600; color: var(--primary); }
.filters__close, .filters__apply { display: none !important; }
.filters__group { margin: 0; padding: 1rem 0; border: 0; border-bottom: 1px solid var(--line); }
.filters__group legend { float: left; width: 100%; margin-bottom: .6rem; padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.radio { clear: both; display: flex; align-items: center; gap: .55rem; min-height: 36px; font-size: .92rem; cursor: pointer; }
.radio input { width: 18px; height: 18px; accent-color: var(--kumkum); }
.size-pills { clear: both; display: flex; flex-wrap: wrap; gap: .4rem; }
.size-pill input { position: absolute; opacity: 0; }
.size-pill span { display: inline-flex; align-items: center; min-height: 36px; min-width: 44px; justify-content: center; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-size: .82rem; cursor: pointer; }
.size-pill input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.size-pill input:focus-visible + span { outline: 2px solid var(--saffron); }
.toolbar { display: flex; align-items: center; gap: .75rem 1rem; margin-bottom: 1.2rem; }
.toolbar__count { margin: 0 auto 0 0; color: var(--ink-2); font-size: .92rem; }
.toolbar__sort { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); }
.toolbar__sort select { min-height: 40px; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.toolbar__filter { display: none; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 2.5rem; }
.pager__n { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-weight: 600; }
.pager__n.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
@media (max-width: 1023px) {
  .listing { grid-template-columns: 1fr; padding-top: 1.25rem; }
  .filters { position: fixed; inset: 0; z-index: 55; display: none; background: rgba(31, 20, 16, .45); }
  .filters.is-open { display: block; }
  .filters__form { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 90vw); overflow-y: auto; overscroll-behavior: contain;
    padding: .75rem 1.25rem calc(1.25rem + var(--safe-bottom)); background: var(--ivory); }
  .filters__close { display: inline-flex !important; }
  .filters__apply { display: flex !important; margin-top: 1.25rem; position: sticky; bottom: 0; }
  .toolbar { flex-wrap: wrap; }
  .toolbar__filter { display: inline-flex; }
}
@media (max-width: 599px) { .toolbar__count { width: 100%; } .toolbar__sort { margin-left: auto; } }
.empty { padding: 4rem 1rem; text-align: center; }
.empty__icon { margin: 0 auto 1rem; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--cream); color: var(--muted); }
.empty__icon .i { width: 28px; height: 28px; }
.empty--page { padding-block: 6rem; }

/* ---------- product page ---------- */
.pdp { padding-block: 1.2rem 3rem; }
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: start; margin-top: 1rem; }
.gallery { position: sticky; top: calc(var(--header-h) + 16px); display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .75rem; }
.gallery__main { grid-column: 2; grid-row: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 3 / 4; border-radius: var(--radius); background: var(--cream); }
.gallery__main::-webkit-scrollbar { display: none; }
.gallery__slide { position: relative; flex: 0 0 100%; margin: 0; overflow: hidden; scroll-snap-align: center; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .2s; }
.gallery__slide.is-zoomed img { transform: scale(2); cursor: zoom-out; }
.gallery__thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: .6rem; max-height: 100%; overflow-y: auto; scrollbar-width: none; }
.gallery__thumb { flex-shrink: 0; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius-sm); background: none; opacity: .7; }
.gallery__thumb.is-active { border-color: var(--ink); opacity: 1; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__save { top: 12px; right: 12px; width: 44px; height: 44px; }
.pdp__title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.pdp__lede { font-size: 1.05rem; color: var(--ink-2); }
.pdp__rating { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .3rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .9rem; color: var(--ink-2); }
.rating-chip { display: inline-flex; align-items: center; gap: 3px; padding: .12rem .45rem; border-radius: 4px; background: var(--mehendi); color: #fff; font-size: .85rem; font-weight: 700; }
.rating-chip--sm { font-size: .75rem; }
.pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: 1.25rem 0; padding-block: 1.2rem; border-block: 1px solid var(--line); }
.pdp__now { font: 700 2rem var(--sans); }
.pdp__cur { font-size: .9rem; font-weight: 600; color: var(--muted); }
.pdp__mrp { color: var(--muted); }
.pdp__off { font-weight: 700; color: var(--kumkum); }
.pdp__tax { display: flex; gap: .4rem; align-items: flex-start; width: 100%; font-size: .82rem; color: var(--ink-2); }
.pdp__tax .i { margin-top: .15rem; color: var(--kumkum); }
.sizes__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; }
.sizes__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.size { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 72px; min-height: 52px; padding: .45rem .7rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; transition: border-color .15s; }
.size:hover:not(:disabled) { border-color: var(--ink); }
.size[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.size__name { font-weight: 700; }
.size__qty { font-size: .72rem; font-weight: 600; color: var(--mehendi); white-space: nowrap; }
.size.is-out { cursor: not-allowed; opacity: .5; text-decoration: line-through; }
.size.is-out .size__qty { color: var(--muted); }
.size:not(.is-out)[data-qty="1"] .size__qty, .size:not(.is-out)[data-qty="2"] .size__qty, .size:not(.is-out)[data-qty="3"] .size__qty { color: var(--kumkum); }
.sizes__total { margin: .8rem 0 0; font-size: .87rem; color: var(--ink-2); }
.pdp__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1.5rem 0 1rem; }
.pdp__ctas .btn--primary { grid-column: 1 / -1; }
.howto-mini { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream); font-size: .9rem; }
.howto-mini p { flex: 1 1 260px; margin: 0; }
.howto-mini a { font-weight: 600; color: var(--primary); }
.accordions { margin-top: 1.5rem; }
.accordions details, .faq details { border-bottom: 1px solid var(--line); }
.accordions summary, .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 52px; padding: .9rem 0; font-weight: 700; cursor: pointer; list-style: none; }
.accordions summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.accordions summary::after, .faq summary::after { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s; }
.accordions details[open] > summary::after, .faq details[open] > summary::after { transform: rotate(-135deg); }
.accordions details > *:not(summary), .faq details > *:not(summary) { color: var(--ink-2); }
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; margin-bottom: .4rem; padding-left: 1.4rem; }
.ticks li::before { content: ""; position: absolute; left: .2rem; top: .45em; width: 6px; height: 10px; border-right: 2px solid var(--mehendi); border-bottom: 2px solid var(--mehendi); transform: rotate(45deg); }
.specs { display: grid; grid-template-columns: 130px 1fr; gap: .4rem 1rem; font-size: .9rem; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.tags a { padding: .25rem .65rem; border-radius: 999px; background: var(--cream); font-size: .8rem; color: var(--ink-2); }
.ship-mini { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .82rem; }
.ship-mini li { padding: .2rem .55rem; border-radius: 4px; background: var(--cream); }
.ship-mini a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--primary); }
@media (max-width: 1023px) { .pdp__grid { gap: 2rem; } .gallery { grid-template-columns: 64px minmax(0, 1fr); } }
@media (max-width: 767px) {
  .pdp { padding-top: .75rem; }
  .pdp__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .gallery { position: relative; top: 0; grid-template-columns: 1fr; margin-inline: calc(var(--gutter) * -1); }
  .gallery__main { grid-column: 1; border-radius: 0; }
  .gallery__thumbs { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; padding-inline: var(--gutter); }
  .gallery__thumb { width: 56px; }
  .pdp__now { font-size: 1.7rem; }
  .specs { grid-template-columns: 110px 1fr; }
}

.reviews { margin-top: 3rem; padding-block: 3rem 1rem; border-top: 1px solid var(--line); }
.reviews__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2.5rem; }
.reviews__score { margin: 0; font: 600 3.6rem/1 var(--serif); }
.reviews__of { margin-left: .3rem; font-size: 1.4rem; color: var(--muted); }
.reviews__score--empty { font-size: 2.4rem; color: var(--muted); }
.bars { list-style: none; margin: 1rem 0 0; padding: 0; }
.bars li { display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: .6rem; padding: .15rem 0; font-size: .85rem; }
.bars .i { color: var(--marigold); }
.bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--line); }
.bar span { display: block; height: 100%; background: var(--mehendi); }
.review { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.review__head { margin-bottom: .4rem; }
@media (max-width: 767px) { .reviews__grid { grid-template-columns: 1fr; gap: 1rem; } .reviews .section__head--row { flex-wrap: wrap; align-items: flex-start; } }

.buybar { display: none; }
@media (max-width: 767px) {
  .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem var(--gutter) calc(.6rem + var(--safe-bottom)); border-top: 1px solid var(--line); background: #fff; box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, .2); }
  .buybar s { font-size: .85rem; color: var(--muted); }
  .buybar .btn { flex: 0 1 60%; }
  body:has(.buybar) { padding-bottom: calc(72px + var(--safe-bottom)); }
  body:has(.buybar) .wa-float { bottom: calc(84px + var(--safe-bottom)); }
}

/* ---------- dialogs & forms ---------- */
.dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius); background: var(--ivory); color: var(--ink); box-shadow: var(--shadow-lg); }
.dialog--wide { width: min(880px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(31, 20, 16, .55); }
.dialog[open] { animation: fade .2s ease; }
.dialog__body { padding: 1.5rem; }
.dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.dialog__head h2 { margin: 0; font-size: 1.5rem; }
.dialog__head .icon-btn { margin: -8px -8px 0 0; }
.dialog__note { margin: 1rem 0; padding: .8rem 1rem; border-radius: var(--radius-sm); background: #eef5ea; font-size: .88rem; color: #2e5418; }
.dialog__note p { margin: 0; }
@media (max-width: 599px) {
  .dialog, .dialog--wide { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 14px 14px 0 0; }
  .dialog__body { padding: 1.1rem var(--gutter) calc(1.25rem + var(--safe-bottom)); }
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.field { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.field--full { grid-column: 1 / -1; }
.field i { font-style: normal; color: var(--kumkum); }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: .65rem .8rem; border: 1px solid #d9ccbd; border-radius: var(--radius-sm); background: #fff; font: 400 16px/1.4 var(--sans); color: var(--ink); }
.field textarea { min-height: 0; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(217, 115, 26, .15); }
@media (max-width: 599px) { .form-grid { grid-template-columns: 1fr; } }
.quick-qs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip-btn { min-height: 36px; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .82rem; }
.chip-btn:hover { border-color: var(--ink); }
.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; margin: 0 0 1rem; padding: 0; border: 0; }
.star-input legend { margin-bottom: .3rem; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.star-input input { position: absolute; opacity: 0; }
.star-input label { display: grid; place-items: center; width: 44px; height: 44px; color: var(--line); cursor: pointer; }
.star-input label .i { width: 30px; height: 30px; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--marigold); }
.star-input input:focus-visible + label { outline: 2px solid var(--saffron); border-radius: 4px; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.size-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.size-table th { padding: .7rem .9rem; background: var(--maroon); color: #fff; font-weight: 600; text-align: left; white-space: nowrap; }
.size-table td { padding: .6rem .9rem; border-top: 1px solid var(--line); white-space: nowrap; }
.size-table tbody tr:nth-child(even) { background: var(--ivory); }
.size-table td:first-child { font-weight: 700; }

/* ---------- content pages ---------- */
.prose-page { display: grid; gap: 2.5rem; padding-block: 2.5rem 3rem; }
.measure { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.measure__item { padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.measure__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: .7rem; border-radius: 50%; background: #fbeaea; color: var(--kumkum); }
.measure__item p { margin: .4rem 0 0; font-size: .9rem; color: var(--ink-2); }
@media (max-width: 1023px) { .measure { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .measure { grid-template-columns: 1fr; } }
.callout { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.callout p { flex: 1 1 300px; margin: 0; }
@media (max-width: 599px) { .callout .btn { flex: 1 1 100%; } }
.faq { max-width: 820px; }
.faq h2 { margin-bottom: 1rem; }
.contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: start; padding-block: 2.5rem 3rem; }
.panel { display: grid; gap: 1.2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.panel--warm { background: var(--cream); }
.contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.contact__list li { display: flex; gap: .6rem; align-items: flex-start; }
.contact__list .i { margin-top: .2rem; color: var(--kumkum); }
@media (max-width: 767px) { .contact { grid-template-columns: 1fr; } .panel { padding: 1.1rem; } }

.thanks { display: grid; place-items: center; padding-block: 3rem 4rem; }
.thanks__card { width: 100%; max-width: 620px; padding: 2.5rem 2rem; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.thanks__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1.2rem; border-radius: 50%; background: #eaf4e4; color: var(--mehendi); }
.thanks__icon .i { width: 30px; height: 30px; }
.thanks__card h1 { font-size: 2.2rem; }
.thanks__ref { font-size: 1.05rem; }
.thanks__ref b { padding: .15rem .55rem; border-radius: 4px; background: var(--cream); letter-spacing: .04em; }
.thanks__item { font-weight: 600; color: var(--ink-2); }
.thanks__next { max-width: 420px; margin: 1.5rem auto; padding: 0; list-style: none; text-align: left; counter-reset: n; }
.thanks__next li { position: relative; padding: .5rem 0 .5rem 2.4rem; counter-increment: n; }
.thanks__next li::before { content: counter(n); position: absolute; left: 0; top: .45rem; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--line); border-radius: 50%; font-size: .8rem; font-weight: 700; color: var(--muted); }
.thanks__next li.done::before { content: ""; border-color: var(--mehendi); background: var(--mehendi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.thanks__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.5rem; }
@media (max-width: 599px) { .thanks__card { padding: 2rem 1.1rem; } .thanks__ctas .btn { flex: 1 1 100%; } }

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
@media print { .header, .announce, .footer, .trust, .wa-float, .buybar, .drawer { display: none !important; } }