/* SCENTELLE — premium attar storefront */
:root {
  /* logo-derived brand palette */
  --brand-magenta: #d81b74;
  --brand-magenta-soft: #ef5fa0;
  --brand-plum: #6d2f5e;
  --brand-gold: #e2bd62;
  --brand-aqua: #a9d6d1;
  --brand-blush: #e9aeba;
  --bg: #090909;
  --bg-soft: #0e0e0f;
  --surface: #141313;
  --surface-2: #191716;
  --ink: #faf7f2;
  --muted: #cdc7bc;
  --muted-2: #a8a19a;
  --gold: #c9a45f;
  --gold-light: var(--brand-gold);
  --rose: #641722;
  --line: rgba(243, 238, 229, 0.1);
  --gold-line: rgba(226, 189, 98, 0.32);
  --accent-line: rgba(216, 27, 116, 0.34);
  /* component knobs */
  --carousel-h: clamp(300px, 46svh, 540px);
  --marquee-duration: 34s;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --shell: 1440px;
  --pad: clamp(20px, 4.5vw, 72px);
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-loading, body.is-locked { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
button, input { font: inherit; }
button { border: 0; color: inherit; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { color: #0a0a0a; background: var(--gold-light); }
:focus-visible { outline: 1px solid var(--gold-light); outline-offset: 4px; }
[hidden] { display: none !important; }

.shell { width: min(100%, var(--shell)); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(84px, 10vw, 150px); }
.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;
}
.skip-link {
  position: fixed; z-index: 3000; top: 12px; left: 12px;
  padding: 10px 16px; color: #090909; background: var(--ink);
  transform: translateY(-150%); transition: transform 0.25s;
}
.skip-link:focus { transform: none; }

/* loader */
.loader {
  position: fixed; inset: 0; z-index: 2500;
  display: grid; place-items: center;
  background: #080808;
  transition: transform 1s var(--ease) 0.15s, visibility 1s;
}
.loader.is-done { transform: translateY(-101%); visibility: hidden; }
.loader__content { display: flex; align-items: center; gap: 18px; }
.loader__brand {
  font-family: var(--serif); font-size: 1.45rem; line-height: 1;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.loader__track { position: relative; width: clamp(90px, 17vw, 210px); height: 1px; background: var(--line); }
.loader__track i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold); transition: width 0.18s linear; }
.loader__number { min-width: 25px; color: var(--muted); font-size: 0.61rem; letter-spacing: 0.14em; }

/* announcement + navigation */
.announcement {
  position: fixed; z-index: 1002; top: 0; left: 0; right: 0; height: 30px;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  border-bottom: 1px solid rgba(243, 238, 229, 0.06);
  color: rgba(243, 238, 229, 0.68); background: rgba(7, 7, 7, 0.96);
  font-size: 0.54rem; font-weight: 500; letter-spacing: 0.19em; text-transform: uppercase;
}
.announcement i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }
.page-progress {
  position: fixed; z-index: 1005; top: 0; left: 0; width: 100%; height: 1px;
  background: var(--brand-magenta); transform: scaleX(0); transform-origin: left;
}
.nav {
  position: fixed; z-index: 1000; top: 1px; left: 0; right: 0;
  min-height: 78px; padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid transparent;
  transition: min-height 0.5s var(--ease), background 0.5s, border-color 0.5s;
}
.nav.is-scrolled {
  min-height: 64px; border-color: var(--line);
  background: rgba(9, 9, 9, 0.82); backdrop-filter: blur(18px) saturate(130%);
}
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
/* min-width/min-height reserve the box so a failed load leaves a gap, not a collapsed row */
.brand__mark {
  flex: none; width: 34px; height: 46px; min-width: 34px; min-height: 46px;
  object-fit: contain;
}
.brand__name {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.1vw, 1.95rem); font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-aqua);
}
.nav__links { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); }
.nav__links a {
  position: relative; color: rgba(243, 238, 229, 0.65);
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  transition: color 0.35s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px;
  background: var(--brand-magenta); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__actions { display: flex; align-items: center; gap: 14px; }
.bag-button {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 17px;
  border: 1px solid var(--gold-line); color: var(--ink);
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  transition: color 0.35s, background 0.35s, border-color 0.35s;
}
.bag-button:hover { color: #0a0a0a; background: var(--gold-light); border-color: var(--gold-light); }
.bag-button span {
  display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 20px; color: #090909; background: var(--gold-light); font-size: 0.5rem;
}
.menu-button { display: none; width: 38px; height: 38px; position: relative; }
.menu-button span { position: absolute; left: 9px; width: 20px; height: 1px; background: var(--ink); transition: transform 0.4s var(--ease), top 0.4s var(--ease); }
.menu-button span:first-child { top: 15px; }
.menu-button span:last-child { top: 22px; }
.menu-button.is-open span:first-child { top: 19px; transform: rotate(45deg); }
.menu-button.is-open span:last-child { top: 19px; transform: rotate(-45deg); }

/* shared type + motion */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--gold-light); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
}
.kicker i { width: 32px; height: 1px; background: currentColor; opacity: 0.6; }
.kicker--center { justify-content: center; }
.section-index { display: block; color: var(--brand-aqua); opacity: 0.62; font-size: 0.56rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
em { color: var(--brand-blush); font-weight: inherit; }
.text-link {
  display: inline-flex; align-items: center; gap: 13px; padding-bottom: 5px;
  border-bottom: 1px solid var(--gold-line); color: var(--ink);
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}
.text-link span { color: var(--gold); transition: transform 0.35s var(--ease); }
.text-link:hover span { transform: translate(3px, -3px); }
.button {
  min-height: 48px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.59rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 0.4s, color 0.4s, border-color 0.4s, transform 0.4s var(--ease);
}
.button:hover { transform: translateY(-2px); }
.button--outline { border: 1px solid var(--gold-line); }
.button--outline:hover { color: #090909; background: var(--gold-light); border-color: var(--gold-light); }
.button--solid { color: #090909; background: var(--gold-light); }
.button--solid:hover { background: var(--ink); }
.button--full { width: 100%; }

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* hero — one video, directly scrubbed by scroll */
.hero { position: relative; height: 330svh; background: #050505; }
.hero__sticky { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; isolation: isolate; }
.hero__video {
  position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  /* Fixed scale: never animate the video itself, or seeking resamples and jitters. */
  transform: translateZ(0) scale(1.03);
  transform-origin: center;
  backface-visibility: hidden;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.hero__video.is-ready { opacity: 1; }
/* Frame-sequence hero. Sits exactly where the video sat. */
.hero__canvas {
  position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%;
  transform: translateZ(0) scale(1.03);
  transform-origin: center;
  backface-visibility: hidden;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.hero__canvas.is-ready { opacity: 1; }
.hero__video.is-hidden, .hero__canvas.is-hidden { display: none; }
.hero__shade {
  position: absolute; z-index: 1; inset: 0;
  background:
    radial-gradient(80% 82% at 50% 44%, transparent 32%, rgba(5, 5, 5, 0.42) 80%, rgba(5, 5, 5, 0.82) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.75) 0%, rgba(5, 5, 5, 0.14) 38%, rgba(5, 5, 5, 0.08) 62%, rgba(5, 5, 5, 0.55) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.45) 0%, transparent 28%, transparent 62%, rgba(5, 5, 5, 0.88) 100%);
  pointer-events: none;
}
.hero__intro {
  position: absolute; z-index: 3; left: var(--pad); bottom: clamp(80px, 11vh, 132px);
  width: min(530px, calc(100% - 40px)); will-change: transform, opacity;
}
.hero__intro h1 { margin: 22px 0 24px; font-size: clamp(4rem, 7.3vw, 8rem); line-height: 0.81; letter-spacing: -0.045em; }
.hero__intro h1 em { display: inline-block; font-size: 0.72em; }
.hero__intro p { max-width: 44ch; margin-bottom: 30px; color: rgba(243, 238, 229, 0.67); font-size: 0.86rem; }
.hero__wordmark {
  position: absolute; z-index: 2; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(243, 238, 229, 0.055); -webkit-text-stroke: 1px rgba(243, 238, 229, 0.2);
  font-family: var(--serif); font-size: clamp(5rem, 15vw, 15rem); font-weight: 300;
  line-height: 0.8; letter-spacing: 0.07em; text-align: center; text-transform: uppercase;
  opacity: 0; white-space: nowrap; user-select: none; pointer-events: none; will-change: opacity, transform;
}
.hero__end {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(62px, 9vh, 105px); width: min(630px, calc(100% - 40px));
  text-align: center; transform: translate3d(-50%, 30px, 0); opacity: 0; will-change: transform, opacity;
}
.hero__end h2 { margin: 16px 0 14px; font-size: clamp(3rem, 5.8vw, 6.2rem); line-height: 0.84; letter-spacing: -0.04em; }
.hero__end p { color: rgba(243, 238, 229, 0.62); font-size: 0.78rem; }
.hero__timeline {
  position: absolute; z-index: 4; right: var(--pad); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(243, 238, 229, 0.48); font-size: 0.49rem; letter-spacing: 0.12em;
}
.hero__timeline b { position: relative; width: 1px; height: 120px; background: rgba(243, 238, 229, 0.16); overflow: hidden; }
.hero__timeline b i { position: absolute; inset: 0; background: var(--brand-magenta); transform: scaleY(0); transform-origin: top; }
.hero__scroll {
  position: absolute; z-index: 4; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(243, 238, 229, 0.44); font-size: 0.48rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
}
.hero__scroll i { position: relative; width: 1px; height: 30px; background: rgba(243, 238, 229, 0.14); overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; top: -50%; left: 0; width: 1px; height: 50%; background: var(--gold); animation: scrollLine 2.1s ease-in-out infinite; }
@keyframes scrollLine { to { transform: translateY(90px); } }

/* benefit rail */
.benefits {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft);
}
.benefit { min-height: 132px; padding: 28px clamp(18px, 3vw, 44px); display: flex; align-items: center; gap: 17px; border-right: 1px solid var(--line); }
.benefit:last-child { border-right: 0; }
.benefit > span { color: var(--brand-magenta-soft); font-family: var(--serif); font-size: 1rem; }
.benefit strong { display: block; margin-bottom: 3px; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; }
.benefit p { color: var(--muted-2); font-size: 0.72rem; }

/* manifesto */
.manifesto {
  padding-block: clamp(90px, 12vw, 180px);
  display: grid; grid-template-columns: 120px minmax(0, 1.2fr) minmax(260px, 0.7fr); gap: clamp(28px, 5vw, 82px); align-items: start;
}
.manifesto__title h2 { max-width: 820px; margin-top: 22px; font-size: clamp(3rem, 5.6vw, 6.6rem); line-height: 0.92; letter-spacing: -0.045em; }
.manifesto__copy { padding-top: 46px; }
.manifesto__copy p { color: var(--muted); font-size: clamp(0.9rem, 1.2vw, 1.05rem); }
.manifesto__copy p + p { margin-top: 20px; }

/* section heading */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 45px; }
.section-head h2 { margin-top: 16px; font-size: clamp(3rem, 5vw, 5.6rem); line-height: 0.9; letter-spacing: -0.04em; }
.section-head__aside { max-width: 390px; text-align: right; }
.section-head__aside p, .section-head__copy { color: var(--muted); font-size: 0.82rem; }
.section-head__aside span { display: block; margin-top: 14px; color: var(--gold); font-size: 0.54rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.section-head__copy { max-width: 390px; }
.section-head--center { display: block; text-align: center; }

/* collection */
.collection { border-top: 1px solid var(--line); background: linear-gradient(180deg, #0c0c0d, #090909 65%); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter {
  display: inline-flex; align-items: center; gap: 9px; min-height: 39px; padding: 0 17px;
  border: 1px solid var(--line); border-radius: 50px; color: var(--muted);
  font-size: 0.54rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.35s, background 0.35s, border-color 0.35s;
}
.filter b { color: var(--muted-2); font-size: 0.48rem; font-weight: 500; }
.filter:hover { color: var(--ink); border-color: var(--gold-line); }
.filter.is-active { color: #0a0a0a; background: var(--brand-magenta); border-color: var(--brand-magenta); }
.filter.is-active b { color: rgba(9, 9, 9, 0.58); }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.7vw, 25px); align-items: start; }
.product-shell { min-width: 0; perspective: 1100px; }
.product-shell[hidden] { display: none; }
.product-card {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 35%;
  position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--surface);
  transform: perspective(1050px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform 0.55s var(--ease), border-color 0.45s, box-shadow 0.55s var(--ease);
}
.product-card::after {
  content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none;
  background: radial-gradient(330px circle at var(--mx) var(--my), rgba(215, 188, 133, 0.13), transparent 42%);
  opacity: 0; transition: opacity 0.35s;
}
.product-card.is-moving { transition-duration: 0.08s, 0.35s, 0.35s; transition-timing-function: linear, ease, ease; }
.product-card:hover, .product-card:focus-within { border-color: var(--gold-line); box-shadow: 0 30px 70px -35px #000; }
.product-card:hover::after, .product-card.is-moving::after { opacity: 1; }
.product-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #101010; cursor: pointer; }
.product-card__media:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: -2px; }
.product-card__media::after { content: ""; position: absolute; z-index: 1; inset: 45% 0 0; background: linear-gradient(transparent, rgba(9, 9, 9, 0.56)); pointer-events: none; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.025); transition: transform 0.9s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.075); }
.product-card__index { position: absolute; z-index: 3; top: 13px; left: 13px; color: rgba(243, 238, 229, 0.56); font-family: var(--serif); font-size: 0.8rem; letter-spacing: 0.08em; }
.product-card__badge { position: absolute; z-index: 3; top: 12px; right: 12px; padding: 5px 9px; color: #0a0a0a; background: var(--brand-magenta); font-size: 0.45rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.product-card__badge--dark { color: var(--ink); background: rgba(9, 9, 9, 0.76); backdrop-filter: blur(8px); }
.product-card__view {
  position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; min-height: 39px;
  border: 1px solid rgba(243, 238, 229, 0.25); color: var(--ink); background: rgba(9, 9, 9, 0.72); backdrop-filter: blur(10px);
  font-size: 0.52rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase;
  transform: translateY(calc(100% + 14px)); transition: transform 0.48s var(--ease), background 0.35s;
}
.product-card:hover .product-card__view, .product-card:focus-within .product-card__view { transform: none; }
.product-card__view:hover { background: rgba(226, 189, 98, 0.88); }
.product-card__body { padding: 18px 17px 17px; }
.product-card__meta { display: flex; justify-content: space-between; gap: 10px; color: var(--gold); font-size: 0.48rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.product-card h3 { margin: 8px 0 7px; font-size: clamp(1.35rem, 1.8vw, 1.7rem); line-height: 1; }
.product-card__rating { display: flex; align-items: center; gap: 7px; color: var(--gold-light); font-size: 0.62rem; }
.product-card__rating span { color: var(--muted-2); font-size: 0.54rem; }
.product-card__footer { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-card__price { font-family: var(--serif); font-size: 1.08rem; white-space: nowrap; }
.product-card__price s { margin-right: 6px; color: var(--muted-2); font-family: var(--sans); font-size: 0.66rem; }
.product-card__add { min-height: 34px; padding: 0 12px; border: 1px solid var(--gold-line); color: var(--gold-light); font-size: 0.49rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.3s, background 0.3s; }
.product-card__add:hover { color: #090909; background: var(--gold-light); }
.product-card__add:disabled { opacity: 0.35; cursor: not-allowed; }

/* craft — bounded two-column composition, no sticky void */
.craft { padding-block: clamp(90px, 11vw, 160px); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.82fr); gap: clamp(45px, 7vw, 110px); align-items: center; }
.craft__visual { position: relative; min-width: 0; aspect-ratio: 1.08 / 1; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.craft__visual > video { width: 100%; height: 100%; object-fit: cover; }
.craft__visual-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(8, 8, 8, 0.72)); pointer-events: none; }
.craft__caption { position: absolute; left: 20px; bottom: 18px; color: rgba(243, 238, 229, 0.62); font-size: 0.5rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.craft__inset { position: absolute; right: 20px; bottom: 20px; width: clamp(120px, 25%, 190px); border: 1px solid rgba(243, 238, 229, 0.16); background: #0a0a0a; }
.craft__inset img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.craft__inset figcaption { padding: 8px 10px; color: var(--muted); font-size: 0.47rem; letter-spacing: 0.14em; text-transform: uppercase; }
.craft__copy h2 { margin: 22px 0; font-size: clamp(3rem, 5vw, 5.8rem); line-height: 0.9; letter-spacing: -0.04em; }
.craft__copy > p { color: var(--muted); max-width: 55ch; font-size: 0.86rem; }
.craft__copy > .kicker { margin-top: 26px; }
.process { margin-top: 34px; border-top: 1px solid var(--line); }
.process li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.process li > span { color: var(--brand-magenta-soft); font-family: var(--serif); }
.process strong { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; }
.process p { color: var(--muted-2); font-size: 0.7rem; }
.craft__stats { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.craft__stats div { padding-right: 10px; border-right: 1px solid var(--line); }
.craft__stats div:last-child { border-right: 0; }
.craft__stats strong { display: block; color: var(--gold-light); font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1; }
.craft__stats span { color: var(--muted-2); font-size: 0.46rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }

/* notes */
.notes { border-top: 1px solid var(--line); background: var(--bg-soft); }
.note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
.note-card { position: relative; min-height: 610px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.note-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.15s var(--ease); }
.note-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 8, 0.08), rgba(8, 8, 8, 0.08) 38%, rgba(8, 8, 8, 0.88) 100%); }
.note-card__number { position: absolute; top: 17px; left: 18px; color: var(--brand-magenta-soft); font-family: var(--serif); }
.note-card > div { position: absolute; left: 24px; right: 24px; bottom: 24px; }
.note-card small { color: var(--gold-light); font-size: 0.5rem; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; }
.note-card h3 { margin: 8px 0 10px; font-size: clamp(2.7rem, 4vw, 4.2rem); line-height: 0.85; }
.note-card > div > span { color: rgba(243, 238, 229, 0.62); font-size: 0.54rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; }
.note-card:hover img { transform: scale(1.06); }

/* ritual + gifting */
.ritual { padding-block: clamp(90px, 11vw, 160px); display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(45px, 8vw, 130px); align-items: end; }
.ritual__head h2 { margin-top: 18px; font-size: clamp(3.3rem, 5vw, 5.8rem); line-height: 0.88; letter-spacing: -0.04em; }
.ritual__steps { border-top: 1px solid var(--line); }
.ritual__steps article { display: grid; grid-template-columns: 50px 110px 1fr; gap: 18px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ritual__steps article > span { color: var(--gold); font-family: var(--serif); }
.ritual__steps h3 { font-size: 1.5rem; }
.ritual__steps p { color: var(--muted); font-size: 0.78rem; }
.gift { padding-bottom: clamp(90px, 12vw, 180px); display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
.gift__media { min-height: 560px; overflow: hidden; }
.gift__media img { width: 100%; height: 100%; object-fit: cover; }
.gift__copy { padding: clamp(38px, 6vw, 85px); display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); background: var(--surface); }
.gift__copy .kicker { margin-top: 24px; }
.gift__copy h2 { margin: 20px 0; font-size: clamp(3rem, 4.5vw, 5.2rem); line-height: 0.9; letter-spacing: -0.04em; }
.gift__copy p { margin-bottom: 30px; color: var(--muted); font-size: 0.82rem; }
.gift__copy .button { align-self: flex-start; }

/* reviews */
.reviews { border-top: 1px solid var(--line); background: linear-gradient(180deg, #0c0b0b, #090909); }
.reviews__note { max-width: 580px; margin-top: 12px; color: var(--muted); font-size: 0.75rem; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.review-grid figure { min-height: 330px; padding: clamp(28px, 4vw, 55px); display: flex; flex-direction: column; background: var(--bg-soft); }
.stars { color: var(--gold); font-size: 0.67rem; letter-spacing: 0.15em; }
.review-grid blockquote { flex: 1; margin: 30px 0; color: var(--brand-blush); font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 400; line-height: 1.28; }
.review-grid figcaption { color: var(--ink); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; }
.review-grid figcaption span { margin-left: 7px; color: var(--muted-2); }
.feedback-comments { margin-top: clamp(58px, 7vw, 96px); }
.feedback-comments__head { margin-bottom: 24px; }
.feedback-comments__head h3 { margin-top: 12px; color: var(--ink); font-size: clamp(2rem, 3vw, 3.2rem); line-height: 0.95; }
.feedback-comments__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.feedback-comments article { min-height: 150px; padding: 22px 24px; background: var(--surface); }
.feedback-comments article strong { color: var(--ink); font-size: 0.72rem; font-weight: 600; }
.feedback-comments article span { display: block; margin-top: 3px; color: var(--muted-2); font-size: 0.58rem; letter-spacing: 0.06em; }
.feedback-comments article p { margin-top: 15px; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }

/* newsletter + footer */
.newsletter { padding-block: clamp(70px, 8vw, 110px); display: grid; grid-template-columns: 1fr 0.85fr; gap: 50px; align-items: end; border-top: 1px solid var(--line); }
.newsletter h2 { margin-top: 12px; font-size: clamp(2.8rem, 4.6vw, 5rem); line-height: 0.9; }
.newsletter__form > div { display: flex; border-bottom: 1px solid var(--gold-line); }
.newsletter__form input { min-width: 0; flex: 1; padding: 15px 2px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 0.8rem; }
.newsletter__form input::placeholder { color: var(--muted-2); }
.newsletter__form button { padding: 0 5px 0 22px; color: var(--gold-light); font-size: 0.59rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; }
.newsletter__form p { min-height: 23px; margin-top: 8px; color: var(--muted); font-size: 0.67rem; }
.newsletter__form p.is-success { color: #8fa884; }
.newsletter__form p.is-error { color: #c98080; }
.footer { padding-top: clamp(65px, 8vw, 110px); border-top: 1px solid var(--line); background: #070707; overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 1.6fr repeat(4, 0.7fr); gap: clamp(26px, 3.4vw, 56px); }
.footer__brand p { max-width: 370px; margin-top: 22px; color: var(--muted); font-size: 0.76rem; }
.footer__column { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer__column strong { margin-bottom: 8px; color: var(--gold-light); font-size: 0.52rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.footer__column a, .footer__column span { color: var(--muted); font-size: 0.7rem; transition: color 0.3s; }
.footer__column a:hover { color: var(--ink); }
.footer__word { margin: 90px 0 20px; font-family: var(--serif); font-size: clamp(7rem, 22vw, 21rem); font-weight: 300; line-height: 0.5; letter-spacing: -0.04em; text-align: center; color: rgba(243, 238, 229, 0.035); user-select: none; }
.footer__bottom { min-height: 70px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 0.5rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; }

/* cart */
.overlay { position: fixed; z-index: 1190; inset: 0; background: rgba(0, 0, 0, 0.7); opacity: 0; backdrop-filter: blur(5px); transition: opacity 0.35s; }
.overlay.is-visible { opacity: 1; }
.cart {
  position: fixed; z-index: 1200; top: 0; right: 0; width: min(460px, 100%); height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto; background: #0d0d0e; border-left: 1px solid var(--line);
  transform: translateX(101%); transition: transform 0.55s var(--ease);
}
.cart.is-open { transform: none; }
.cart__head { min-height: 108px; padding: 24px 25px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.cart__head span { color: var(--gold); font-size: 0.49rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.cart__head h2 { margin-top: 4px; font-size: 1.8rem; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; transition: color 0.3s, border-color 0.3s; }
.icon-button:hover { color: var(--ink); border-color: var(--gold-line); }
.cart__body { overflow-y: auto; padding: 8px 24px; }
.cart__empty { height: 100%; min-height: 260px; display: grid; place-items: center; align-content: center; gap: 16px; color: var(--muted-2); text-align: center; }
.cart__empty span { font-family: var(--serif); font-size: 3rem; color: var(--gold-line); }
.cart-item { display: grid; grid-template-columns: 82px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-item__image { width: 82px; height: 104px; overflow: hidden; background: var(--surface); }
.cart-item__image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__name { font-family: var(--serif); font-size: 1.15rem; }
.cart-item__meta { color: var(--muted-2); font-size: 0.57rem; letter-spacing: 0.12em; text-transform: uppercase; }
.cart-item__price { margin: 7px 0; color: var(--gold-light); font-size: 0.75rem; }
.cart-item__qty { width: fit-content; display: flex; align-items: center; border: 1px solid var(--line); }
.cart-item__qty button, .cart-item__qty span { display: grid; place-items: center; width: 28px; height: 27px; font-size: 0.7rem; }
.cart-item__remove { align-self: start; color: var(--muted-2); font-size: 0.49rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cart-item__remove:hover { color: var(--ink); }
.cart__footer { padding: 22px 25px 24px; border-top: 1px solid var(--line); background: #0b0b0c; }
.cart__footer > div { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 8px; color: var(--muted); font-size: 0.7rem; }
.cart__footer .cart__shipping { color: var(--muted-2); }
.cart__footer .cart__combo { color: var(--brand-aqua); }
.cart__footer .cart__combo strong { color: var(--brand-aqua); font-weight: 500; }
.cart__footer .cart__combo-hint { color: var(--gold-light); }

/* Box upsell — cart drawer mein 1-2 bottle hone par dikhta hai.
   .cart__footer > div flex row hai, isliye upsell row ko block banana
   padta hai warna button ki teen lines ek line mein squeeze ho jaati hain. */
.cart__footer .cart__combo--upsell { display: block; margin: 12px 0 14px; }
.cart-upsell {
  display: block; width: 100%; padding: 13px 15px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--gold-line, rgba(198, 164, 92, 0.32));
  border-radius: 10px; color: var(--ink);
  font: inherit; transition: background 0.25s ease, border-color 0.25s ease;
}
.cart-upsell:hover, .cart-upsell:focus-visible { background: rgba(255, 255, 255, 0.06); border-color: var(--gold-light); }
.cart-upsell:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.cart-upsell__title { display: block; color: var(--ink); font-size: 0.76rem; font-weight: 500; line-height: 1.35; }
.cart-upsell__line { display: block; margin-top: 5px; color: var(--muted); font-size: 0.68rem; line-height: 1.5; }
.cart-upsell__cta { display: block; margin-top: 8px; color: var(--gold-light); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cart-upsell__cta span { margin-left: 4px; }

/* Quick view ka box notice — Add to bag button ke theek neeche. */
.modal-box-note {
  display: block; width: 100%; margin-top: 11px; padding: 11px 13px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--gold-line); border-radius: 9px;
  color: var(--muted); font: inherit; font-size: 0.68rem; line-height: 1.55;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.modal-box-note:hover, .modal-box-note:focus-visible { background: rgba(255, 255, 255, 0.06); border-color: var(--gold-light); }
.modal-box-note:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.modal-box-note strong { color: var(--ink); font-weight: 500; }
.modal-box-note__cta { display: block; margin-top: 5px; color: var(--gold-light); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   Build your own box — quick view ke andar attar chunne ka picker.
   Sirf pick-waale box products pe dikhta hai, baaki sab pe hidden.
   --------------------------------------------------------------------------- */
.box-picker { margin: 4px 0 16px; }
.box-picker__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.box-picker__label { color: var(--ink); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.box-picker__count { color: var(--gold-light); font-size: 0.72rem; font-variant-numeric: tabular-nums; }

/* List apne aap scroll hoti hai: 19 attar poori lambai mein rakhne se
   Add to bag button screen se neeche chala jaata hai. */
.box-picker__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px;
  max-height: 232px; overflow-y: auto; padding-right: 4px;
}
.box-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; position: relative;
  padding: 9px 26px 9px 11px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  border-radius: 8px; color: var(--ink); font: inherit;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.box-pick:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); border-color: var(--gold-line); }
.box-pick:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.box-pick.is-picked { background: rgba(226, 189, 98, 0.12); border-color: var(--gold-light); }
.box-pick:disabled { opacity: 0.38; cursor: not-allowed; }
.box-pick__name { font-size: 0.72rem; line-height: 1.25; }
.box-pick__family { color: var(--muted-2); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.box-pick__tick { position: absolute; top: 9px; right: 9px; color: var(--gold-light); font-size: 0.72rem; line-height: 1; }
.box-picker__hint { margin-top: 9px; color: var(--muted); font-size: 0.64rem; }

@media (max-width: 520px) {
  .box-picker__list { grid-template-columns: 1fr; max-height: 190px; }
}

/* Cart line mein custom box ke chune hue attar. */
.cart-item__picks { margin-top: 3px; color: var(--gold-light); font-size: 0.6rem; line-height: 1.45; }
.cart__footer .cart__total { margin: 15px 0 19px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--ink); font-family: var(--serif); font-size: 1.25rem; }
.cart__footer > p { margin-top: 9px; color: var(--muted-2); font-size: 0.5rem; text-align: center; }

/* Bottle availability note in the quick view. Sits under the add button
   because that is the moment the customer has decided on a bottle. */
.modal__disclaimer { margin-top: 13px; color: var(--muted-2); font-size: 0.6rem; line-height: 1.55; text-align: center; }

/* delivery address step, injected into the cart drawer by main.js.

   While it is open the bag list is hidden and the form takes the whole
   drawer, because this is a checkout step and not a side panel. The
   drawer grid is `auto 1fr auto`, so hiding .cart__body hands the 1fr
   row straight to .ship - no separate height maths needed. */
.ship { overflow-y: auto; padding: 26px 25px 28px; border-top: 1px solid var(--line); background: #0b0b0c; }
.cart.is-shipping .cart__body { display: none; }

.ship__head { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.ship__head button {
  display: block; margin-bottom: 11px; color: var(--muted-2);
  font-size: 0.49rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.3s;
}
.ship__head button:hover { color: var(--ink); }
.ship__head span { display: block; color: var(--gold); font-size: 0.49rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.ship__head strong { display: block; margin-top: 5px; color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }

.ship__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 14px; }
.ship__field { display: grid; gap: 7px; min-width: 0; }
.ship__field--wide { grid-column: 1 / -1; }
.ship__field label { color: var(--muted-2); font-size: 0.53rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.ship__field input, .ship__field select {
  width: 100%; min-height: 47px; padding: 0 14px; border: 1px solid var(--line); outline: 0; border-radius: 0;
  color: var(--ink); background: rgba(9, 9, 9, 0.6); font-family: inherit; font-size: 0.9rem;
  transition: border-color 0.3s;
}
.ship__field select { padding-right: 8px; }
.ship__field input:focus, .ship__field select:focus { border-color: var(--gold-line); }
.ship__field input::placeholder { color: var(--muted-2); font-size: 0.82rem; }
.ship__field.is-bad input, .ship__field.is-bad select { border-color: #c98080; }
.ship__msg { min-height: 20px; margin-top: 15px; color: #c98080; font-size: 0.7rem; }
.ship__note { margin-top: 2px; color: var(--muted-2); font-size: 0.6rem; line-height: 1.5; }

@media (max-width: 430px) {
  .ship { padding: 22px 20px 24px; }
  .ship__grid { grid-template-columns: 1fr; gap: 15px; }
  .ship__head strong { font-size: 1.4rem; }
}

/* quick view */
.modal { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 22px; overflow-x: hidden; background: rgba(0, 0, 0, 0.76); opacity: 0; backdrop-filter: blur(8px); transition: opacity 0.35s; }
.modal.is-open { opacity: 1; }
.modal__dialog { position: relative; width: min(950px, 100%); max-width: 100%; min-width: 0; max-height: 92dvh; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); background: #101011; transform: translateY(24px) scale(0.985); transition: transform 0.5s var(--ease); }
.modal.is-open .modal__dialog { transform: none; }
.modal__close { position: absolute; z-index: 4; top: 15px; right: 15px; background: rgba(9, 9, 9, 0.72); }
.modal__media { min-height: 610px; background: var(--surface); }
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__content { padding: clamp(32px, 5vw, 70px); display: flex; flex-direction: column; justify-content: center; }
.modal__family { color: var(--gold); font-size: 0.54rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.modal__content h2 { margin: 10px 0 4px; font-size: clamp(3rem, 5vw, 5rem); line-height: 0.9; }
.modal__price { color: var(--gold-light); font-family: var(--serif); font-size: 1.45rem; }
.modal__description { margin: 18px 0 24px; color: var(--muted); font-size: 0.79rem; }
.modal__notes { border-top: 1px solid var(--line); }
.modal__notes div { display: grid; grid-template-columns: minmax(0, 74px) minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.modal__notes dt { color: var(--muted-2); font-size: 0.5rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }
.modal__notes dd { min-width: 0; color: var(--muted); font-size: 0.7rem; overflow-wrap: anywhere; }
.modal__sizes { display: flex; gap: 8px; margin: 24px 0 15px; }
.size-button { min-width: 80px; min-height: 39px; border: 1px solid var(--line); color: var(--muted); font-size: 0.57rem; letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.3s; }
.size-button.is-active { color: #090909; background: var(--gold-light); border-color: var(--gold-light); }
.toast { position: fixed; z-index: 1600; left: 50%; bottom: 24px; padding: 11px 18px; border: 1px solid var(--gold-line); color: var(--ink); background: rgba(14, 14, 15, 0.94); font-size: 0.64rem; transform: translate(-50%, 25px); opacity: 0; transition: opacity 0.35s, transform 0.35s var(--ease); pointer-events: none; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* responsive */
@media (max-width: 1180px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .manifesto { grid-template-columns: 80px 1fr 0.7fr; }
  .note-card { min-height: 520px; }
}

@media (max-width: 900px) {
  .announcement span:last-child, .announcement i { display: none; }
  .nav { min-height: 68px; }
  .nav__links {
    position: fixed; z-index: -1; top: 1px; left: 0; right: 0;
    padding: 100px 24px 40px; display: flex; flex-direction: column; gap: 4px;
    border-bottom: 1px solid var(--line); background: rgba(9, 9, 9, 0.98); backdrop-filter: blur(20px);
    transform: translateY(-105%); transition: transform 0.55s var(--ease);
  }
  .nav__links.is-open { transform: none; }
  .nav__links a { width: 100%; padding: 13px 0; font-family: var(--serif); font-size: 1.65rem; font-weight: 300; letter-spacing: 0; text-align: center; text-transform: none; }
  .nav__links a::after { display: none; }
  .menu-button { display: block; }
  /* touch devices loop the clip instead of scrubbing, so less scroll is needed */
  .hero { height: 200svh; }
  .hero__timeline { display: none; }
  .hero__intro { left: 24px; bottom: 78px; }
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .benefit:nth-child(2) { border-right: 0; }
  .benefit:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .manifesto { grid-template-columns: 1fr 0.7fr; }
  .manifesto > .section-index { grid-column: 1 / -1; }
  .manifesto__copy { padding-top: 42px; }
  .section-head { align-items: flex-start; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .craft { grid-template-columns: 1fr; }
  .craft__visual { max-height: 680px; }
  .craft__copy { max-width: 740px; }
  .note-card { min-height: 440px; }
  .ritual { grid-template-columns: 1fr; }
  .gift { grid-template-columns: 1fr; }
  .gift__media { min-height: 460px; }
  .review-grid { grid-template-columns: 1fr; }
  .review-grid figure { min-height: 260px; }
  .feedback-comments__grid { grid-template-columns: repeat(2, 1fr); }
  .newsletter { grid-template-columns: 1fr; align-items: start; }
  .footer__top { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
  :root { --pad: 18px; }
  .announcement { font-size: 0.48rem; letter-spacing: 0.13em; }
  .nav { top: 1px; }
  .brand__name { font-size: 1.25rem; letter-spacing: 0.12em; }
  .brand__mark { width: 25px; height: 34px; min-width: 25px; min-height: 34px; }
  .bag-button { padding: 9px 11px; }
  .hero { height: 185svh; }
  .hero__sticky { min-height: 0; }
  .hero__video { object-position: 50% 50%; }
  .hero__shade { background: linear-gradient(180deg, rgba(5,5,5,0.45), transparent 25%, transparent 48%, rgba(5,5,5,0.94) 92%); }
  .hero__intro { left: 18px; right: 18px; bottom: 68px; width: auto; text-align: center; }
  .hero__intro .kicker { justify-content: center; }
  .hero__intro h1 { margin: 16px 0; font-size: clamp(3.5rem, 17vw, 5.2rem); }
  .hero__intro p { margin-inline: auto; margin-bottom: 22px; font-size: 0.76rem; }
  .hero__intro { bottom: 42px; }
  .hero__wordmark { top: 55%; transform: translate3d(-50%, -50%, 0) scale(0.97); font-size: 20vw; }
  .hero__end { bottom: 70px; }
  .hero__end h2 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .hero__scroll span { display: none; }
  .benefit { min-height: 112px; padding: 20px 16px; align-items: flex-start; }
  .benefit > span { font-size: 0.8rem; }
  .benefit strong { font-size: 0.95rem; }
  .benefit p { font-size: 0.62rem; }
  .manifesto { grid-template-columns: 1fr; gap: 24px; }
  .manifesto__title h2 { font-size: clamp(3.1rem, 14vw, 4.5rem); }
  .manifesto__copy { padding-top: 0; }
  .section-head { flex-direction: column; margin-bottom: 30px; }
  .section-head h2 { font-size: clamp(3.2rem, 14vw, 4.6rem); }
  .section-head__aside { text-align: left; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter { flex: none; }
  .product-grid { gap: 10px; }
  .product-card__body { padding: 12px 10px; }
  .product-card h3 { font-size: 1.18rem; }
  .product-card__meta { font-size: 0.42rem; }
  .product-card__meta span:last-child { display: none; }
  .product-card__rating { font-size: 0.54rem; }
  .product-card__rating span { display: none; }
  .product-card__footer { margin-top: 10px; padding-top: 10px; flex-direction: column; align-items: stretch; }
  .product-card__price { font-size: 0.98rem; }
  .product-card__add { width: 100%; }
  .product-card__view { left: 8px; right: 8px; bottom: 8px; transform: none; }
  .product-card__badge { top: 8px; right: 8px; font-size: 0.4rem; }
  .product-card__index { top: 9px; left: 9px; }
  .craft { padding-block: 88px; gap: 42px; }
  .craft__visual { aspect-ratio: 4 / 5; }
  .craft__inset { width: 112px; right: 12px; bottom: 12px; }
  .craft__caption { left: 13px; bottom: 14px; max-width: 80px; }
  .craft__copy h2 { font-size: clamp(3.1rem, 14vw, 4.5rem); }
  .note-grid { grid-template-columns: 1fr; }
  .note-card { min-height: 500px; }
  .ritual__head h2, .gift__copy h2 { font-size: clamp(3.1rem, 14vw, 4.5rem); }
  .ritual__steps article { grid-template-columns: 35px 80px 1fr; gap: 8px; }
  .ritual__steps p { font-size: 0.67rem; }
  .gift { padding-inline: 0; }
  .gift__media { min-height: 420px; }
  .gift__copy { margin-inline: 18px; padding: 34px 24px; }
  .newsletter { gap: 30px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__word { margin-top: 65px; font-size: 28vw; }
  .footer__bottom { flex-direction: column; justify-content: center; text-align: center; }
  .modal { padding: 10px; }
  .modal__dialog { grid-template-columns: 1fr; }
  .modal__media { min-height: 0; aspect-ratio: 16 / 10; }
  .modal__content { padding: 28px 20px 24px; }
  .modal__content h2 { font-size: 3.2rem; }
  .loader__content { gap: 12px; }
  .loader__brand { font-size: 1.1rem; }
}

@media (hover: none) {
  .product-card__view { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero { height: 100svh; }
  .hero__intro { opacity: 1 !important; transform: none !important; }
  .hero__wordmark, .hero__end, .hero__scroll { display: none; }
  .product-card, .product-card__media img { transform: none !important; }
}


/* Final interaction hardening */
.hero__sticky { min-height: 0; }
.cart[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.55s var(--ease), visibility 0s linear 0.55s;
}
.cart.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.modal { pointer-events: none; }
.modal.is-open { pointer-events: auto; }

@media (max-width: 900px) {
  .nav__links {
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.55s var(--ease), visibility 0s linear 0.55s;
  }
  .nav__links.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
}

@media (max-width: 650px) {
  .hero__sticky { min-height: 0; }
}

/* wide touch screens also loop instead of scrubbing, so match the shorter range */
@media (pointer: coarse) and (min-width: 901px) {
  .hero { height: 200svh; }
}

@media (max-height: 650px) and (min-width: 651px) {
  .hero__intro { bottom: 42px; }
  .hero__intro h1 { margin-block: 12px 16px; font-size: clamp(3.2rem, 9vh, 5.2rem); }
  .hero__intro p { margin-bottom: 17px; }
  .hero__end { bottom: 38px; }
  .hero__end h2 { margin-block: 10px; font-size: clamp(2.7rem, 9vh, 4.5rem); }
  .hero__scroll { display: none; }
}


/* Animation polish — transform/opacity only, staggered per group */
[data-reveal] { transition-duration: 1s; }

.benefit[data-reveal] { transform: translateY(22px); }
.benefit:nth-child(2)[data-reveal] { transition-delay: 90ms; }
.benefit:nth-child(3)[data-reveal] { transition-delay: 180ms; }
.benefit:nth-child(4)[data-reveal] { transition-delay: 270ms; }

.product-shell[data-reveal] { transform: translateY(34px); }
.product-shell:nth-child(4n + 2)[data-reveal] { transition-delay: 80ms; }
.product-shell:nth-child(4n + 3)[data-reveal] { transition-delay: 160ms; }
.product-shell:nth-child(4n + 4)[data-reveal] { transition-delay: 240ms; }

.note-card[data-reveal] { transform: translateY(38px); }
.note-card:nth-child(2)[data-reveal] { transition-delay: 110ms; }
.note-card:nth-child(3)[data-reveal] { transition-delay: 220ms; }

.process li[data-reveal],
.ritual__steps article[data-reveal] { transform: translateX(-20px); }
.process li:nth-child(2)[data-reveal],
.ritual__steps article:nth-child(2)[data-reveal] { transition-delay: 110ms; }
.process li:nth-child(3)[data-reveal],
.ritual__steps article:nth-child(3)[data-reveal] { transition-delay: 220ms; }

.review-grid figure:nth-child(2)[data-reveal] { transition-delay: 110ms; }
.review-grid figure:nth-child(3)[data-reveal] { transition-delay: 220ms; }
.review-grid figure:nth-child(4)[data-reveal] { transition-delay: 330ms; }
.review-grid figure:nth-child(5)[data-reveal] { transition-delay: 440ms; }
.review-grid figure:nth-child(6)[data-reveal] { transition-delay: 550ms; }

/* gold rule draws itself in */
.kicker i { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) 0.15s; }
[data-reveal].is-visible .kicker i,
.is-visible.kicker i { transform: scaleX(1); }
.hero__intro .kicker i,
.hero__end .kicker i { transform: scaleX(1); }

/* gentle scroll parallax on editorial media */
[data-parallax] {
  --parallax-scale: 1.06;
  transform: scale(var(--parallax-scale));
  will-change: transform;
}

/* card media settles instead of snapping */
.product-card__media img { transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .kicker i { transform: scaleX(1) !important; transition: none !important; }
  [data-parallax] { transform: none !important; }
  .hero__video, .hero__canvas { opacity: 1 !important; }
}


/* ===========================================================================
   Brand pages — marquee, two-stage loader, carousel, hero wordmark,
   about.html and fragrances.html blocks.
   Every animation here moves opacity and transform only. No scale on images,
   no filter, no box-shadow transitions: the target machine has no GPU.
   =========================================================================== */

/* announcement marquee — replaces .announcement, same 30px strip height so the
   fixed nav (top: 31px) and .page-progress (top: 30px) still line up */
.marquee {
  position: fixed; z-index: 1002; top: 0; left: 0; right: 0; height: 30px;
  display: flex; align-items: center; overflow: hidden;
  border-bottom: 1px solid rgba(243, 238, 229, 0.06);
  color: rgba(243, 238, 229, 0.68); background: rgba(7, 7, 7, 0.96);
  font-size: 0.54rem; font-weight: 500; letter-spacing: 0.19em; text-transform: uppercase;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* No `gap` on purpose: the separators carry the spacing as margins, so the
   cloned half is byte-identical to the original and translateX(-50%) loops
   without a visible seam. */
.marquee__track {
  display: flex; align-items: center; flex: none; width: max-content;
  animation: marqueeSlide var(--marquee-duration) linear infinite;
  will-change: transform;
}
.marquee__track > span { flex: none; white-space: nowrap; }
.marquee__track > i {
  flex: none; width: 3px; height: 3px; margin: 0 clamp(14px, 3vw, 30px);
  border-radius: 50%; background: var(--gold);
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeSlide { to { transform: translateX(-50%); } }

/* two-stage loader — stage 1 is the mark alone, stage 2 adds the wordmark,
   the rule and the tagline */
.loader { grid-template-rows: 1fr auto; padding: clamp(26px, 6vh, 62px) var(--pad); }
.loader__stage {
  display: grid; justify-items: center; align-content: center; gap: clamp(14px, 2.4vh, 22px);
  max-width: 640px; text-align: center;
}
.loader__mark {
  width: clamp(56px, 9vw, 72px); height: auto;
  min-width: 56px; min-height: 76px; object-fit: contain;
  animation: loaderMarkIn 0.9s var(--ease) both;
}
@keyframes loaderMarkIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: none; }
}
@keyframes loaderMarkLift {
  from { opacity: 1; transform: none; }
  to { opacity: 1; transform: translate3d(0, -6px, 0); }
}
.loader__name {
  display: flex; justify-content: center;
  color: var(--brand-aqua); font-family: var(--serif); font-size: clamp(1.7rem, 4.6vw, 2.9rem);
  font-weight: 400; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase;
}
.loader__name b {
  display: inline-block; font-weight: inherit;
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i) * 45ms);
}
.loader__rule {
  width: clamp(64px, 12vw, 104px); height: 1px; background: var(--gold-line);
  transform: scaleX(0); transition: transform 0.85s var(--ease) 0.42s;
}
.loader__tag {
  max-width: 44ch; color: var(--brand-blush);
  font-family: var(--serif); font-size: clamp(0.86rem, 1.6vw, 1.14rem); line-height: 1.42;
  opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity 0.85s var(--ease) 0.5s, transform 0.85s var(--ease) 0.5s;
}
.loader__meter { display: flex; align-items: center; gap: 16px; }
.loader.is-stage-2 .loader__mark { animation: loaderMarkLift 0.7s var(--ease) forwards; }
.loader.is-stage-2 .loader__name b { opacity: 1; transform: none; }
.loader.is-stage-2 .loader__rule { transform: scaleX(1); }
.loader.is-stage-2 .loader__tag { opacity: 1; transform: none; }

/* inner pages: no ceremony, just a short fade under 400ms */
.loader--quick { transition: opacity 0.3s linear, visibility 0.3s; }
.loader--quick.is-done { transform: none; opacity: 0; visibility: hidden; }
.loader--quick .loader__mark { animation-duration: 0.3s; }
.loader--quick .loader__name b { opacity: 1; transform: none; transition: none; }
.loader--quick .loader__rule { transform: scaleX(1); transition: none; }
.loader--quick .loader__tag { opacity: 1; transform: none; transition: none; }
.loader--quick .loader__meter { display: none; }

/* brand carousel — absolutely stacked slides, cross-faded with a <=24px lift */
.brand-carousel {
  position: relative; height: var(--carousel-h); overflow: hidden;
  background-color: var(--surface); border-bottom: 1px solid var(--line);
}
.brand-carousel:focus { outline: none; }
.carousel__viewport { position: absolute; inset: 0; }
.carousel__slide {
  position: absolute; inset: 0; background-color: var(--surface);
  opacity: 0; transform: translate3d(0, 24px, 0); pointer-events: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.carousel__slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.carousel__slide > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.carousel__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.72) 0%, rgba(5, 5, 5, 0.16) 26%, transparent 46%, rgba(5, 5, 5, 0.86) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.62) 0%, transparent 52%);
}
.carousel__copy {
  position: absolute; z-index: 3; left: var(--pad); bottom: clamp(34px, 5vh, 58px);
  width: min(560px, calc(100% - var(--pad) * 2));
}
.carousel__copy p {
  margin: 14px 0 18px; color: var(--ink);
  font-family: var(--serif); font-size: clamp(1.25rem, 2.5vw, 2.05rem);
  font-weight: 400; line-height: 1.16; letter-spacing: -0.01em;
}
.carousel__dots {
  position: absolute; z-index: 4; right: var(--pad); bottom: clamp(34px, 5vh, 58px);
  display: flex; align-items: center; gap: 8px;
}
.carousel__dot {
  width: 26px; height: 2px; padding: 0; background: rgba(243, 238, 229, 0.28);
  transition: background 0.4s;
}
.carousel__dot:hover { background: rgba(243, 238, 229, 0.6); }
.carousel__dot.is-active { background: var(--brand-magenta); }

/* hero wordmark — the h1 is now the brand name, so it gets the lockup treatment */
.hero__intro h1.hero__title {
  margin: 20px 0 22px;
  color: var(--brand-aqua);
  font-size: clamp(4.4rem, 11vw, 11rem); line-height: 0.86;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Shared inner-page hero. About and Finder have no full-bleed hero, so this
   block reserves room for the fixed marquee (30px) + nav (78px) itself.
   --------------------------------------------------------------------------- */
.page-hero {
  padding-top: clamp(148px, 22vh, 250px); padding-bottom: clamp(52px, 8vw, 96px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0c0c0d, var(--bg) 72%);
}
.page-hero h1 {
  max-width: 22ch; margin: 22px 0 24px;
  color: var(--brand-aqua);
  font-size: clamp(3.4rem, 8vw, 8.2rem); line-height: 0.86; letter-spacing: -0.03em;
}
.page-hero p { max-width: 60ch; color: var(--muted); font-size: clamp(0.84rem, 1.2vw, 0.98rem); }

/* about.html — heritage timeline, brand panel, story, values, closing CTA */
.heritage { padding-block: clamp(80px, 10vw, 150px); }
.heritage__head { margin-bottom: clamp(34px, 5vw, 62px); }
.heritage__head h2 { margin-top: 18px; font-size: clamp(3rem, 5vw, 5.8rem); line-height: 0.88; letter-spacing: -0.04em; }
/* reuses .ritual__steps for the era rows; only the copy column needs widening */
.heritage .ritual__steps article { grid-template-columns: 50px 150px 1fr; align-items: start; }
.heritage .ritual__steps p { max-width: 74ch; }
.heritage .ritual__steps em { font-style: italic; }

.brand-panel {
  padding-block: clamp(70px, 9vw, 120px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 80px); align-items: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.brand-panel > img {
  width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover;
  border: 1px solid var(--line); background: var(--surface);
}
.brand-panel h2 {
  margin: 18px 0 20px; color: var(--brand-aqua);
  font-size: clamp(2.6rem, 4.6vw, 4.6rem); line-height: 0.9; letter-spacing: 0.06em; text-transform: uppercase;
}
.brand-panel__tag {
  padding-left: 20px; border-left: 1px solid var(--gold-line);
  color: var(--brand-blush); font-family: var(--serif);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem); line-height: 1.34;
}
.brand-panel > div > p:last-child { margin-top: 22px; color: var(--muted); font-size: 0.82rem; }

.story { padding-block: clamp(80px, 10vw, 150px); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.story__head h2 { margin-top: 18px; font-size: clamp(3rem, 4.8vw, 5.4rem); line-height: 0.88; letter-spacing: -0.04em; }
.story__body { border-top: 1px solid var(--line); }
.story__body article { padding: 26px 0; border-bottom: 1px solid var(--line); }
.story__body h3 { color: var(--gold-light); font-size: 1.45rem; }
.story__body p { max-width: 72ch; margin-top: 10px; color: var(--muted); font-size: 0.84rem; }

.values { padding-bottom: clamp(80px, 10vw, 150px); }
.values__grid { margin-top: clamp(32px, 4vw, 54px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.values__grid article { padding: clamp(28px, 4vw, 52px); background: var(--bg-soft); }
.values__grid strong { color: var(--brand-magenta-soft); font-family: var(--serif); font-size: 1rem; font-weight: 400; }
.values__grid h3 { margin: 12px 0 10px; font-size: 1.7rem; }
.values__grid p { color: var(--muted); font-size: 0.78rem; }

.about-cta {
  margin-bottom: clamp(80px, 10vw, 140px); padding: clamp(38px, 6vw, 80px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 34px;
  border: 1px solid var(--line); background: var(--surface);
}
.about-cta h2 { margin: 18px 0 14px; font-size: clamp(2.4rem, 4vw, 4rem); line-height: 0.92; letter-spacing: -0.03em; }
.about-cta p { max-width: 52ch; color: var(--muted); font-size: 0.82rem; }
.about-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* fragrances.html — facet finder, apply steps, occasion and season guides */
.finder { padding-block: clamp(56px, 7vw, 96px); }
.facet-group { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 210px 1fr; gap: clamp(16px, 3vw, 42px); align-items: baseline; }
.facet-group:first-of-type { border-top: 1px solid var(--line); }
.facet-group h3 { color: var(--gold-light); font-size: 1.15rem; letter-spacing: 0.02em; }
.facet-row { display: flex; flex-wrap: wrap; gap: 8px; }
.finder__bar {
  margin: clamp(26px, 4vw, 46px) 0 clamp(20px, 3vw, 32px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px;
}
.finder__bar > span { color: var(--gold); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.finder__bar .text-link { background: none; }
.finder__empty {
  margin-top: 26px; padding: clamp(42px, 7vw, 86px) 24px;
  display: grid; justify-items: center; gap: 20px; text-align: center;
  border: 1px solid var(--line); background: var(--surface);
}
.finder__empty p { color: var(--muted); font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.7rem); }

.apply { padding-block: clamp(80px, 10vw, 150px); display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(40px, 8vw, 120px); align-items: start; border-top: 1px solid var(--line); }
.apply__head h2 { margin-top: 18px; font-size: clamp(3rem, 5vw, 5.6rem); line-height: 0.88; letter-spacing: -0.04em; }
.apply__head p { margin-top: 20px; max-width: 44ch; color: var(--muted); font-size: 0.84rem; }
.apply .process { margin-top: 0; }

.guide { padding-bottom: clamp(80px, 10vw, 140px); }
.guide__grid { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.guide__card {
  padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color 0.4s, background 0.4s;
}
.guide__card:hover { border-color: var(--gold-line); background: var(--surface-2); }
.guide__card strong { color: var(--brand-magenta-soft); font-family: var(--serif); font-size: 0.9rem; font-weight: 400; }
.guide__card h3 { font-size: 1.5rem; line-height: 1.05; }
.guide__card p { flex: 1; color: var(--muted); font-size: 0.74rem; }
.guide__card span { color: var(--gold-light); font-size: 0.5rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .guide__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facet-group { grid-template-columns: 170px 1fr; }
}

@media (max-width: 900px) {
  .marquee__track > span:last-of-type { display: none; }
  .carousel__copy { right: var(--pad); width: auto; }
  .carousel__copy p { font-size: clamp(1.15rem, 3.4vw, 1.6rem); }
  .carousel__dots { left: var(--pad); right: auto; bottom: 20px; }
  .carousel__copy { bottom: 44px; }
  .page-hero { padding-top: clamp(108px, 17vh, 170px); }
  .brand-panel { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; }
  .heritage .ritual__steps article { grid-template-columns: 44px 120px 1fr; gap: 12px; }
  .values__grid { grid-template-columns: 1fr; }
  .about-cta { flex-direction: column; align-items: flex-start; }
  .facet-group { grid-template-columns: 1fr; gap: 14px; }
  .apply { grid-template-columns: 1fr; }
  .guide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .marquee { font-size: 0.48rem; letter-spacing: 0.13em; }
  .hero__intro h1.hero__title { margin: 16px 0; font-size: clamp(2.9rem, 15vw, 4.6rem); letter-spacing: 0.05em; }
  .carousel__copy { left: 18px; right: 18px; bottom: 40px; }
  .carousel__copy p { margin: 11px 0 14px; font-size: 1.12rem; }
  .carousel__dots { left: 18px; bottom: 16px; }
  .carousel__dot { width: 20px; }
  .page-hero h1 { font-size: clamp(2.9rem, 14vw, 4.4rem); }
  .heritage__head h2, .story__head h2, .apply__head h2 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .heritage .ritual__steps article { grid-template-columns: 1fr; gap: 6px; }
  .heritage .ritual__steps article > span { color: var(--brand-magenta-soft); }
  .brand-panel h2 { font-size: clamp(2.2rem, 12vw, 3.2rem); }
  .brand-panel__tag { padding-left: 14px; font-size: 1.05rem; }
  .about-cta { padding: 30px 22px; }
  .facet-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
  .facet-row::-webkit-scrollbar { display: none; }
  .guide__grid { grid-template-columns: 1fr; }
  .loader__name { letter-spacing: 0.16em; }
  .loader__tag { font-size: 0.84rem; }
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* the strip stops dead and simply shows the first items */
  .marquee__track { animation: none !important; transform: none !important; }
  /* no cross-fade: the active slide is just the visible one */
  .carousel__slide { transition: none !important; transform: none !important; }
  .carousel__slide:not(.is-active) { opacity: 0; }
  /* the loader resolves both stages at once, with no stagger */
  .loader__mark { animation: none !important; opacity: 1; transform: none !important; }
  .loader__name b,
  .loader__rule,
  .loader__tag { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0s !important; }
  .loader__rule { transform: scaleX(1) !important; }
}


/* --- logo mark blend --- the PNG is black-matted, so screen-blend it
   into the dark chrome instead of showing a rectangular tile */
.brand__mark,
.loader__mark {
  mix-blend-mode: screen;
  background: transparent;
}


/* --- carousel polish ---
   The fixed marquee (30px) + nav (78px) sit on top of this band, so it needs
   real height or the copy lands under the nav. The slide sources are portrait
   (1122x1402), so a short wide band crops them badly unless the focal point is
   pulled up toward the bottle. */
:root { --carousel-h: clamp(430px, 62svh, 660px); }

.brand-carousel { border-top: 1px solid var(--line); }

.carousel__slide > img { object-position: 50% 50%; }

/* keep the nav readable over any slide, and give the copy room to breathe */
.carousel__shade {
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.5) 14%, rgba(5, 5, 5, 0.12) 34%, transparent 52%, rgba(5, 5, 5, 0.9) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.68) 0%, rgba(5, 5, 5, 0.12) 58%, transparent 100%);
}

.carousel__copy {
  bottom: clamp(46px, 7vh, 76px);
  width: min(500px, calc(100% - var(--pad) * 2));
}
.carousel__copy p {
  margin: 12px 0 20px;
  font-size: clamp(1.2rem, 2.1vw, 1.75rem);
  line-height: 1.22;
}
.carousel__dots { bottom: clamp(46px, 7vh, 76px); }

@media (max-width: 900px) {
  :root { --carousel-h: clamp(400px, 56svh, 540px); }
  .carousel__slide > img { object-position: 50% 50%; }
}

@media (max-width: 650px) {
  :root { --carousel-h: clamp(360px, 52svh, 460px); }
  .carousel__copy {
    left: var(--pad); right: var(--pad); width: auto;
    bottom: clamp(56px, 9vh, 76px);
  }
  .carousel__copy p { font-size: clamp(1.05rem, 5.2vw, 1.35rem); }
  .carousel__dots { left: var(--pad); right: auto; bottom: 22px; }
}

/* short laptop screens: don't let the band eat the whole first view */
@media (max-height: 700px) and (min-width: 901px) {
  :root { --carousel-h: 400px; }
}


/* --- marquee retired: strip removed from markup, keep leftovers inert --- */
.marquee { display: none !important; }

/* --- account / auth --- reuses .modal so the overlay, focus trap and
   Escape handling already apply. Supabase drops into initAuth(). */
.account-button {
  display: inline-flex; align-items: center; min-height: 39px; padding: 0 15px;
  border: 1px solid var(--line); color: rgba(243, 238, 229, 0.78);
  font-size: 0.55rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  transition: color 0.35s, border-color 0.35s, background 0.35s;
}
.account-button:hover { color: #0a0a0a; background: var(--brand-aqua); border-color: var(--brand-aqua); }
.account-button.is-signed-in { color: var(--brand-aqua); border-color: var(--gold-line); }

.auth__dialog { width: min(860px, 100%); grid-template-columns: 0.85fr 1fr; }
.auth__side { position: relative; overflow: hidden; background: var(--surface); }
.auth__side > img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.auth__side-copy { position: absolute; inset: auto 26px 26px 26px; }
.auth__side-copy p { margin-top: 12px; color: var(--ink); font-family: var(--serif); font-size: 1.16rem; line-height: 1.3; }
.auth__panel { padding: clamp(30px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.auth__panel h2 { margin: 8px 0 22px; font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 0.95; }
.auth__tabs { display: flex; gap: 6px; margin-bottom: 24px; }
.auth__tab {
  flex: 1; min-height: 38px; border: 1px solid var(--line); color: var(--muted);
  font-size: 0.53rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.3s, background 0.3s, border-color 0.3s;
}
.auth__tab.is-active { color: #0a0a0a; background: var(--brand-aqua); border-color: var(--brand-aqua); }
.auth__form { display: grid; gap: 16px; }
.auth__field { display: grid; gap: 7px; }
.auth__field label { color: var(--muted-2); font-size: 0.5rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.auth__field input {
  min-height: 44px; padding: 0 13px; border: 1px solid var(--line); outline: 0;
  color: var(--ink); background: rgba(9, 9, 9, 0.6); font-size: 0.84rem;
  transition: border-color 0.3s;
}
.auth__field input:focus { border-color: var(--gold-line); }
.auth__field small { color: var(--muted-2); font-size: 0.58rem; }
.auth__msg { min-height: 20px; color: var(--muted); font-size: 0.68rem; }
.auth__msg.is-error { color: #c98080; }
.auth__msg.is-success { color: #8fa884; }
.auth__switch { margin-top: 20px; color: var(--muted-2); font-size: 0.68rem; }
.auth__switch .text-link { border-bottom: 0; font-size: 0.58rem; }
.auth__note { margin-top: 14px; color: var(--muted-2); font-size: 0.55rem; letter-spacing: 0.06em; }

@media (max-width: 900px) {
  .auth__dialog { grid-template-columns: 1fr; }
  .auth__side { display: none; }
}
@media (max-width: 650px) {
  .account-button { padding: 0 10px; font-size: 0.48rem; letter-spacing: 0.12em; }
}

/* legal / policy pages */
.policy { padding: 0 0 clamp(70px, 10vw, 130px); }
.policy__body { max-width: 76ch; display: grid; gap: 20px; }
.policy__body h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.1rem, 1.9vw, 1.45rem); color: var(--ink); margin-top: 20px; }
.policy__body h2:first-child { margin-top: 0; }
.policy__body p, .policy__body li { color: var(--muted); line-height: 1.78; font-size: 0.96rem; }
.policy__body ul { display: grid; gap: 9px; padding-left: 20px; }
.policy__body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.policy__note { border-left: 2px solid var(--gold-line); padding: 4px 0 4px 18px; }
.policy__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-top: 6px; }
.policy__grid div { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--surface); }
.policy__grid strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 5px; }
.policy__updated { color: var(--muted-2); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ============================================================
   ADMIN  -  orders panel (admin.html)
   Deliberately plainer than the shop: this screen is read at
   speed while packing parcels, so contrast and hit areas matter
   more than atmosphere.
   ============================================================ */

.admin-body { min-height: 100dvh; background: #0b0b0c; }

.adm-kicker { color: var(--gold); font-size: 0.49rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }

/* sign in */
.adm-gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.adm-gate__card { width: min(390px, 100%); padding: 34px 30px 30px; border: 1px solid var(--line); background: #101011; }
.adm-gate__card h1 { margin: 7px 0 6px; font-size: 2.1rem; }
.adm-gate__note { margin-bottom: 22px; color: var(--muted-2); font-size: 0.66rem; line-height: 1.5; }

.adm-field { display: grid; gap: 7px; margin-bottom: 18px; }
.adm-field label { color: var(--muted-2); font-size: 0.53rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.adm-field input {
  width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); outline: 0; border-radius: 0;
  color: var(--ink); background: rgba(9, 9, 9, 0.6); font-family: inherit; font-size: 0.9rem;
  transition: border-color 0.3s;
}
.adm-field input:focus { border-color: var(--gold-line); }

.adm-msg { min-height: 20px; margin-top: 13px; color: #c98080; font-size: 0.7rem; }

/* shell */
.adm { max-width: 1100px; margin: 0 auto; padding: 30px 22px 70px; }
.adm__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.adm__head h1 { margin-top: 5px; font-size: 2.2rem; }
.adm__head-side { display: flex; gap: 9px; }

.adm-ghost {
  min-height: 36px; padding: 0 15px; border: 1px solid var(--line); color: var(--muted);
  font-size: 0.53rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 0.3s, border-color 0.3s;
}
.adm-ghost:hover { color: var(--ink); border-color: var(--gold-line); }
.adm-ghost--sm { min-height: 31px; padding: 0 11px; margin-top: 11px; }

.adm__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 20px 0 18px; }
.adm__tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-tab {
  min-height: 33px; padding: 0 13px; border: 1px solid var(--line); color: var(--muted-2);
  font-size: 0.55rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.3s, background 0.3s, border-color 0.3s;
}
.adm-tab.is-active { color: #0a0a0a; background: var(--brand-aqua); border-color: var(--brand-aqua); }
.adm__stats { display: flex; gap: 18px; color: var(--muted-2); font-size: 0.7rem; }
.adm__stats b { color: var(--ink); font-weight: 500; }

.adm-empty { padding: 50px 0; color: var(--muted-2); font-size: 0.8rem; text-align: center; }

/* order card */
.adm__list { display: grid; gap: 14px; }
.adm-card { border: 1px solid var(--line); background: #101011; }
.adm-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.adm-card__when { color: var(--muted-2); font-size: 0.58rem; letter-spacing: 0.08em; }
.adm-card__top h2 { margin: 3px 0 5px; font-size: 1.35rem; }
.adm-card__items { color: var(--muted); font-size: 0.72rem; line-height: 1.5; }
.adm-card__money { display: grid; justify-items: end; gap: 6px; text-align: right; }
.adm-card__money strong { color: var(--gold-light); font-family: var(--serif); font-size: 1.4rem; font-weight: 400; }
.adm-card__combo { color: var(--brand-aqua); font-size: 0.6rem; }

.adm-pill { padding: 4px 10px; border: 1px solid var(--line); color: var(--muted); font-size: 0.5rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.adm-pill--paid { color: #e0c07a; border-color: rgba(224, 192, 122, 0.45); }
.adm-pill--packed { color: #9fb8d4; border-color: rgba(159, 184, 212, 0.45); }
.adm-pill--shipped { color: #7fc7c2; border-color: rgba(127, 199, 194, 0.45); }
.adm-pill--delivered { color: #8fa884; border-color: rgba(143, 168, 132, 0.5); }
.adm-pill--cancelled { color: #c98080; border-color: rgba(201, 128, 128, 0.45); }

.adm-card__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; }
.adm-card__ship, .adm-card__meta { padding: 18px 20px; }
.adm-card__meta { border-left: 1px solid var(--line); }
.adm-card__grid h3 { margin-bottom: 9px; color: var(--gold); font-family: var(--sans, inherit); font-size: 0.5rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; }
.adm-card__ship p { color: var(--ink); font-size: 0.82rem; line-height: 1.65; }
.adm-card__ship a { color: var(--brand-aqua); }
.adm-card__mail { margin-top: 7px; font-size: 0.74rem; }

.adm-card__meta dl { display: grid; gap: 6px; }
.adm-card__meta dl > div { display: flex; justify-content: space-between; gap: 14px; }
.adm-card__meta dt { color: var(--muted-2); font-size: 0.66rem; white-space: nowrap; }
.adm-card__meta dd { color: var(--ink); font-size: 0.68rem; text-align: right; word-break: break-all; }

.adm-card__actions { display: grid; grid-template-columns: 150px 1fr 1fr auto; gap: 12px; align-items: end; padding: 16px 20px 18px; border-top: 1px solid var(--line); background: #0d0d0e; }
.adm-card__actions label { display: grid; gap: 6px; color: var(--muted-2); font-size: 0.5rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.adm-card__actions input, .adm-card__actions select {
  width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid var(--line); outline: 0; border-radius: 0;
  color: var(--ink); background: rgba(9, 9, 9, 0.6); font-family: inherit; font-size: 0.82rem;
  text-transform: none; letter-spacing: normal;
}
.adm-card__actions input:focus, .adm-card__actions select:focus { border-color: var(--gold-line); }
.adm-card__actions .button { min-height: 40px; padding: 0 22px; }

.adm-toast {
  position: fixed; z-index: 1400; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  padding: 11px 20px; border: 1px solid var(--gold-line); background: #131314;
  color: var(--ink); font-size: 0.72rem; opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.adm-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 820px) {
  .adm-card__grid { grid-template-columns: 1fr; }
  .adm-card__meta { border-left: 0; border-top: 1px solid var(--line); }
  .adm-card__actions { grid-template-columns: 1fr 1fr; }
  .adm-card__actions .button { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .adm { padding: 22px 15px 60px; }
  .adm-card__top { flex-direction: column; }
  .adm-card__money { justify-items: start; text-align: left; }
  .adm-card__actions { grid-template-columns: 1fr; }
}

/* Staff entry point in the footer. Deliberately as quiet as the copyright
   line next to it - a customer's eye should slide past it. Obscurity is
   not the security here; the password is. */
.footer__staff { color: var(--muted-2); border-bottom: 0; transition: color 0.3s; }
.footer__staff:hover { color: var(--gold-light); }

/* admin - section nav */
.adm__nav { display: flex; gap: 7px; margin: 22px 0 6px; flex-wrap: wrap; }
.adm-nav-btn {
  min-height: 38px; padding: 0 18px; border: 1px solid var(--line); color: var(--muted);
  font-size: 0.56rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  transition: color 0.3s, background 0.3s, border-color 0.3s;
}
.adm-nav-btn:hover { color: var(--ink); border-color: var(--gold-line); }
.adm-nav-btn.is-active { color: #0a0a0a; background: var(--gold-light); border-color: var(--gold-light); }

.adm-ghost--danger { color: #c98080; border-color: rgba(201, 128, 128, 0.4); }
.adm-ghost--danger:hover { color: #e09a9a; border-color: #c98080; }

/* admin - add / edit form */
.adm-form { margin: 16px 0 22px; padding: 22px 22px 24px; border: 1px solid var(--gold-line); background: #101011; }
.adm-form__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.adm-form__head h2 { font-size: 1.4rem; }
.adm-form__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 14px; }
.adm-form__field { display: grid; gap: 7px; min-width: 0; color: var(--muted-2); font-size: 0.53rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }
.adm-form__field--wide { grid-column: 1 / -1; }
.adm-form__field small { font-size: 0.85em; font-weight: 400; letter-spacing: 0.06em; text-transform: none; opacity: 0.8; }
.adm-form__field input, .adm-form__field select {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); outline: 0; border-radius: 0;
  color: var(--ink); background: rgba(9, 9, 9, 0.6); font-family: inherit; font-size: 0.88rem;
  font-weight: 400; letter-spacing: normal; text-transform: none;
}
.adm-form__field input:focus, .adm-form__field select:focus { border-color: var(--gold-line); }
.adm-form__field input::placeholder { color: var(--muted-2); font-size: 0.8rem; }
.adm-form__hint { margin-top: 16px; color: var(--muted-2); font-size: 0.63rem; line-height: 1.6; }
.adm-form__actions { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.adm-form__actions .button { min-height: 42px; padding: 0 30px; }
.adm-form__actions .adm-msg { margin-top: 0; }

/* admin - product card */
.adm-card--prod .adm-prod__main, .adm-card--combo .adm-prod__main {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 17px 20px;
}
.adm-prod__main h2 { font-size: 1.3rem; }
.adm-prod__badge { padding: 3px 8px; border: 1px solid var(--gold-line); color: var(--gold-light); font-family: var(--sans, inherit); font-size: 0.48rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; vertical-align: middle; }
.adm-prod__meta { margin-top: 4px; color: var(--muted-2); font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase; }
.adm-prod__notes { margin-top: 7px; color: var(--muted); font-size: 0.72rem; line-height: 1.5; }
.adm-prod__money { display: grid; justify-items: end; gap: 5px; text-align: right; white-space: nowrap; }
.adm-prod__money strong { color: var(--gold-light); font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.adm-prod__mrp { color: var(--muted-2); font-size: 0.62rem; }
.adm-prod__ml { color: var(--muted); font-size: 0.62rem; }
.adm-card__actions--prod { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

@media (max-width: 820px) {
  .adm-form__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .adm-form__grid { grid-template-columns: 1fr; }
  .adm-form { padding: 18px 16px 20px; }
  .adm-card--prod .adm-prod__main, .adm-card--combo .adm-prod__main { flex-direction: column; }
  .adm-prod__money { justify-items: start; text-align: left; }
}

/* ============================================================
   SOCIAL DOCK — floating contact buttons, bottom right
   z-index 900: nav (1000+) aur modals (1200+) ke neeche rehta hai,
   taaki cart ya quick view khulne pe ye upar na aaye.
   ============================================================ */
.social-dock {
  position: fixed;
  right: clamp(14px, 2.2vw, 26px);
  bottom: clamp(14px, 2.2vw, 26px);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.social-dock__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transform-origin: bottom center;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.social-dock.is-open .social-dock__list {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.social-dock__item,
.social-dock__toggle {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.75);
  transition: transform 0.25s var(--ease), filter 0.25s;
}
.social-dock__item svg,
.social-dock__toggle svg {
  width: 23px;
  height: 23px;
  fill: #fff;
}
.social-dock__item:hover,
.social-dock__toggle:hover { transform: scale(1.09); filter: brightness(1.12); }

.social-dock__item:focus-visible,
.social-dock__toggle:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; }

/* brand colours */
.social-dock__item--whatsapp  { background: #25d366; }
.social-dock__item--instagram { background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888); }
.social-dock__item--phone     { background: #0f8f6f; }
.social-dock__item--email     { background: var(--brand-plum); }

.social-dock__toggle { background: var(--brand-magenta); }

/* toggle ke andar do icon hain — ek dikhta hai, doosra chhupa */
.social-dock__icon-close { display: none; }
.social-dock.is-open .social-dock__icon-open { display: none; }
.social-dock.is-open .social-dock__icon-close { display: block; }

/* phone pe thoda chhota, taaki content na dhake */
@media (max-width: 640px) {
  .social-dock__item,
  .social-dock__toggle { width: 44px; height: 44px; }
  .social-dock__item svg,
  .social-dock__toggle svg { width: 21px; height: 21px; }
}

/* cart ya modal khula ho to dock chhup jaaye — warna overlay pe tairta hai */
body.is-locked .social-dock { opacity: 0; visibility: hidden; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .social-dock__list,
  .social-dock__item,
  .social-dock__toggle { transition: none; }
}

/* ---------------------------------------------------------------------------
   QUICK VIEW — ek column layout.

   Pehle modal do column ka tha (image left, details right). Client ko details
   neeche chahiye thi, toh product modal ko single column kar diya: image aur
   thumbnail strip upar, saari details neeche.

   Sirf #modalCard pe lagaya hai, .modal__dialog pe nahi — kyunki wahi class
   sign-in modal bhi use karta hai, aur usko do column hi rehna chahiye.
   --------------------------------------------------------------------------- */
/* Do column — image BAAYE (badi), details DAAYE. Ek column kar ke dekha tha
   par usme image chhoti pad rahi thi, aur client ko images bada chahiye. */
#modalCard { grid-template-columns: 1fr 1fr; width: min(950px, 100%); }

/* Image waala column details ke barabar lamba hota hai (grid stretch), aur
   image square hai — toh neeche khaali jagah bach jaati thi. Flex se image ko
   beech me center kar diya, aur background modal ke panel jaisa hi rakha, toh
   bachi hui jagah alag nahi dikhti.
   position: relative chahiye kyunki arrows aur dots isi ke andar absolute hain. */
#modalCard .modal__media {
  position: relative; min-height: auto; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #101011;
}

/* aspect-ratio 1:1 — product images square hain, toh contain se poori image
   bhar jaati hai aur ek bhi pixel crop nahi hota. */
#modalCard .modal__media > img {
  width: 100%; aspect-ratio: 1 / 1; height: auto;
  object-fit: contain; display: block;
}

/* Details thoda tight, par do column ke hisaab se aaram se padhne layak */
#modalCard .modal__content { padding: clamp(26px, 3.4vw, 44px); justify-content: center; }
#modalCard .modal__content h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 0.96; }
#modalCard .modal__price { font-size: 1.28rem; }
#modalCard .modal__description { margin: 14px 0 19px; font-size: 0.76rem; }
#modalCard .modal__notes div { grid-template-columns: 68px 1fr; gap: 12px; padding: 9px 0; }

/* Mobile pe do column nahi samaate — wahan ek ke neeche ek */
@media (max-width: 760px) {
  #modalCard { grid-template-columns: 1fr; width: min(560px, 100%); }
  #modalCard .modal__content { padding: 24px 26px 28px; }
  #modalCard .modal__content h2 { font-size: 1.7rem; line-height: 1.1; }
  #modalCard .modal__price { font-size: 1.1rem; }
}

/* ---------------------------------------------------------------------------
   Gallery arrows + dots.

   Pehle neeche thumbnail strip thi. Woh jagah khaa rahi thi aur modal bhara
   hua lagta tha, toh usko hata ke image ke UPAR arrows aur neeche chhote dots
   rakhe hain — saaf dikhta hai aur Amazon/Flipkart jaisa feel deta hai.
   --------------------------------------------------------------------------- */
.gallery__nav { position: absolute; inset: 0; pointer-events: none; }

.gallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; cursor: pointer; pointer-events: auto;
  display: grid; place-items: center;
  background: rgba(9, 9, 9, 0.55); color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%;
  font-size: 0.72rem; line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.gallery__arrow:hover { background: rgba(9, 9, 9, 0.82); border-color: var(--gold-light); }
.gallery__arrow:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.gallery__arrow--prev { left: 10px; }
.gallery__arrow--next { right: 10px; }

.gallery__dots {
  position: absolute; bottom: 11px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px; pointer-events: auto;
}
.gallery__dot {
  width: 7px; height: 7px; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.3); border: none; border-radius: 50%;
  transition: background 0.2s ease, transform 0.2s ease;
}
.gallery__dot:hover { background: rgba(255, 255, 255, 0.6); }
.gallery__dot.is-active { background: var(--gold-light); transform: scale(1.25); }
.gallery__dot:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   BUNDLE BANNER — collection ke upar, dono box highlight karta hai.
   --------------------------------------------------------------------------- */
.bundle-banner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 0 auto 38px; padding: 0 clamp(18px, 5vw, 60px);
  max-width: 1400px;
}
.bundle-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 22px 24px; border-radius: 12px;
  border: 1px solid var(--gold-line);
  background: linear-gradient(135deg, rgba(226, 189, 98, 0.10), rgba(255, 255, 255, 0.02));
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.bundle-card:hover { border-color: var(--gold-light); transform: translateY(-2px); }
.bundle-card__tag {
  align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  background: rgba(226, 189, 98, 0.16); color: var(--gold-light);
  font-size: 0.56rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.bundle-card h3 { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; }
.bundle-card p { margin: 0; color: var(--muted); font-size: 0.72rem; line-height: 1.6; }
.bundle-card__price { display: flex; align-items: baseline; gap: 9px; margin-top: 3px; }
.bundle-card__price strong { color: var(--gold-light); font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.bundle-card__price s { color: var(--muted-2); font-size: 0.78rem; }
.bundle-card__price em { color: var(--brand-aqua, var(--gold-light)); font-size: 0.66rem; font-style: normal; }
.bundle-card .button { align-self: flex-start; margin-top: 6px; }

@media (max-width: 760px) {
  .bundle-banner { grid-template-columns: 1fr; }
}

/* ===========================================================================
   ACCESSIBILITY / READABILITY BUMP
   Client ne bola tha ki jinki eye sight kamzor hai unko bhi padha jaaye.
   Poori site ka text ek saath bada karna tha, isliye yahan neeche
   root font-size badhaya hai — saare clamp() aur rem values isi se
   scale hote hain, to ek jagah badalne se poori site badal jaati hai.
   File ke END me rakha hai taaki baaki sab rules ke upar jeet jaaye.
   --------------------------------------------------------------------------- */
html { font-size: 112.5%; }            /* 16px -> 18px base */

/* Chhote labels/kickers rem me nahi, px/em me the — unko alag se bump */
body { font-size: 1.02rem; line-height: 1.6; }
.kicker, .section-index { font-size: 0.72rem; letter-spacing: 0.12em; }
.filter { font-size: 0.78rem; }
.product-card__name { font-size: 1.05rem; }
.product-card__price { font-size: 0.95rem; }
.modal__description { font-size: 0.86rem; line-height: 1.62; }
.modal__notes div { font-size: 0.8rem; }

/* Main logo — client ko bada chahiye tha */
.logo, .brand__mark, .nav__logo { font-size: 1.32rem; letter-spacing: 0.16em; }
.logo img, .brand__mark img, .nav__logo img { height: 42px; width: auto; }

/* Mobile pe itna bada base thoda zyada ho jaata hai, halka kam */
@media (max-width: 760px) {
  html { font-size: 106.25%; }         /* 17px */
  .logo, .brand__mark, .nav__logo { font-size: 1.15rem; }
  .logo img, .brand__mark img, .nav__logo img { height: 34px; }
}

/* ===========================================================================
   FILTER ROW — EK HI ROW
   Client ko filters kai row me wrap hote hue pasand nahi aaye. Pehle
   flex-wrap: wrap tha, isliye chhoti screen pe 2-3 row ban jaati thi.
   Ab nowrap + horizontal scroll — mobile pe already aisa tha, ab desktop pe
   bhi. Scrollbar chhupa diya hai kyunki filters gine-chune hain, scroll
   bar dikhne se ganda lagta tha.
   --------------------------------------------------------------------------- */
.filter-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 5px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-row::-webkit-scrollbar { display: none; }
/* button ko sikudne se roko, warna nowrap me text toot jaata hai */
.filter { flex: 0 0 auto; white-space: nowrap; }

/* ===========================================================================
   MODAL IMAGE — MOBILE PE CUT HO RAHI THI
   Problem: mobile pe media column ki height content ke hisaab se lamba ho
   jaata tha aur overflow: hidden ke kaaran bottle ka hissa kat jaata tha.
   Fix: mobile pe image ko screen ki height ke hisaab se cap kar diya, aur
   object-fit: contain ke saath height auto — to poori bottle andar aa jaati
   hai, kuch bhi crop nahi hota.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  #modalCard .modal__media {
    max-height: 58vh;
    padding: 10px;
    overflow: visible;
  }
  #modalCard .modal__media > img {
    max-height: 56vh;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }
  /* arrows ungli ke hisaab se bade — 44px minimum touch target */
  .gallery__arrow { width: 44px; height: 44px; }
}

/* ===========================================================================
   MOBILE — COMPACT LAYOUT (Amazon / Flipkart jaisa)

   Pehle jo text bump kiya tha (readability ke liye) wo desktop pe theek tha
   par mobile pe sab kuch bahut bada ho gaya — ek screen me ek hi product
   aa raha tha aur modal ki image poori screen kha rahi thi.

   Yahan mobile ke liye base font wapas normal kiya hai aur grid ko do column
   me laaya hai. Ye block file ke END me hai, isliye upar ke saare mobile
   rules ko override karta hai — !important ki zaroorat nahi padi.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* Base wapas 16px. Readability ke liye line-height thoda khula rakha hai,
     font size badha ke nahi. */
  html { font-size: 100%; }
  body { font-size: 0.95rem; line-height: 1.58; }

  /* Do column grid — yahi e-commerce ka standard hai mobile pe */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* Card ka text chhota aur tight, taaki card ki height kam rahe */
  .product-card__name  { font-size: 0.82rem; line-height: 1.25; }
  .product-card__price { font-size: 0.8rem; }
  .product-card__meta,
  .product-card__family { font-size: 0.62rem; }

  /* Card ki image ko fixed square ratio — warna har card alag height ka
     ho jaata hai aur grid tedha dikhta hai */
  .product-card__media { aspect-ratio: 1 / 1; }
  .product-card__media img { width: 100%; height: 100%; object-fit: cover; }

  /* Section ke beech ka gap kam — mobile pe scroll chhota lage */
  .section { padding-block: 42px; }
  .shell { padding-inline: 14px; }

  /* Heading mobile pe 3rem+ ki thi, wo poori screen le rahi thi */
  h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.06; }
  h2 { font-size: clamp(1.6rem, 6.6vw, 2.1rem); line-height: 1.1; }
  .section-head__copy { font-size: 0.85rem; }

  /* Logo chhota — nav ek line me rahe */
  .logo, .brand__mark, .nav__logo { font-size: 1rem; letter-spacing: 0.14em; }
  .logo img, .brand__mark img, .nav__logo img { height: 28px; }

  /* Filter chips chhote */
  .filter { font-size: 0.72rem; padding: 7px 13px; }

  /* Hero ki height screen se chhoti rakho */
  .hero, .hero__sticky { min-height: 68svh; }
}

/* Quick view modal — mobile pe Flipkart jaisa: image upar (screen ka ~38%),
   details neeche scroll hote hue. Pehle image 58vh le rahi thi, isliye
   details dikhne ke liye bahut scroll karna padta tha. */
@media (max-width: 760px) {
  html { font-size: 100%; }
  body { font-size: 0.95rem; line-height: 1.58; }

  .modal { padding: 10px; }
  .modal__dialog {
    width: min(100%, 560px);
    max-height: 92svh;
  }

  #modalCard {
    grid-template-columns: 1fr;
    width: min(100%, 560px);
    min-width: 0;
    max-height: 92svh;
    overflow-y: auto;
  }
  #modalCard > * { min-width: 0; }
  #modalCard .modal__media {
    max-height: 34svh;
    padding: 8px;
    background: #101011;
  }
  #modalCard .modal__media > img {
    max-height: 32svh;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }
  #modalCard .modal__content {
    min-width: 0;
    padding: 14px 14px 18px;
  }
  #modalCard .modal__content h2 {
    max-width: 100%;
    font-size: clamp(1.75rem, 7vw, 2.4rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
  }
  #modalCard .modal__price { font-size: 1rem; }
  #modalCard .modal__description {
    max-width: 100%;
    font-size: 0.77rem;
    line-height: 1.48;
    overflow-wrap: anywhere;
  }
  #modalCard .modal__notes div {
    grid-template-columns: minmax(0, 78px) minmax(0, 1fr);
    gap: 8px;
    padding: 7px 0;
  }
  #modalCard .modal__notes dt,
  #modalCard .modal__notes dd {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #modalCard .modal__notes dt { font-size: 0.48rem; letter-spacing: 0.12em; }
  #modalCard .modal__notes dd { font-size: 0.72rem; line-height: 1.5; }
  .gallery__arrow { width: 34px; height: 34px; }
}

@media (max-width: 420px) {
  .modal { padding: 0; }
  .modal__dialog {
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }
  #modalCard {
    width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
  }
  #modalCard .modal__content {
    padding: 14px 12px 16px;
  }
  #modalCard .modal__content h2 {
    font-size: clamp(1.8rem, 8vw, 2.2rem);
    line-height: 1.05;
  }
  #modalCard .modal__price { font-size: 1rem; }
  #modalCard .modal__description {
    font-size: 0.75rem;
    line-height: 1.45;
  }
  #modalCard .modal__notes div {
    grid-template-columns: minmax(0, 72px) minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
  }
  #modalCard .modal__notes dt {
    font-size: 0.45rem;
    letter-spacing: 0.12em;
  }
  #modalCard .modal__notes dd {
    font-size: 0.7rem;
  }
}

/* Bahut chhoti screen (320-380px) — 2 column tab bhi rakho par aur tight */
@media (max-width: 400px) {
  .product-grid { gap: 8px; }
  .product-card__name { font-size: 0.76rem; }
  .product-card__price { font-size: 0.75rem; }
  .shell { padding-inline: 11px; }
}

/* ===========================================================================
   TEXT SIZE — FINAL PASS

   Pehle base font badhaya tha, phir mobile compact karte waqt wapas 16px kar
   diya — isse client ko lagaa ki text bada hi nahi hua. Ab dono cheez ek
   saath: layout compact rahega (2 column grid, chhoti image), par PADHNE
   WAALA text bada hoga.

   Tareeka: base font-size ko nahi chheda (usse layout phir se phool jaata
   hai). Sirf un elements ko bada kiya jinhe log actually padhte hain —
   paragraph, description, product ka naam, price, notes.
   --------------------------------------------------------------------------- */
html { font-size: 118.75%; }                 /* desktop: 19px base */

body { font-size: 1.02rem; line-height: 1.62; }
p, li, dd, .section-head__copy { font-size: 1rem; line-height: 1.62; }

.product-card__name   { font-size: 1.08rem; }
.product-card__price  { font-size: 1rem; }
.product-card__family { font-size: 0.7rem; }

.modal__description { font-size: 0.95rem; line-height: 1.65; }
.modal__notes div   { font-size: 0.88rem; }
.modal__notes dt    { font-size: 0.78rem; }

.filter { font-size: 0.84rem; }
.button { font-size: 0.84rem; }
.logo, .brand__mark, .nav__logo { font-size: 1.4rem; letter-spacing: 0.16em; }
.logo img, .brand__mark img, .nav__logo img { height: 46px; }

@media (max-width: 760px) {
  /* Mobile pe base 17px — 19px se layout tootne lagta hai.
     Padhne waale text ko alag se bada rakha hai. */
  html { font-size: 106.25%; }
  body { font-size: 0.98rem; line-height: 1.6; }
  p, li, dd, .section-head__copy { font-size: 0.95rem; line-height: 1.6; }

  /* Grid 2 column hi rahega, bas naam/price padhne layak bade */
  .product-card__name   { font-size: 0.9rem; line-height: 1.28; }
  .product-card__price  { font-size: 0.88rem; }
  .product-card__family { font-size: 0.66rem; }

  #modalCard .modal__content h2   { font-size: 1.45rem; }
  #modalCard .modal__price        { font-size: 1.12rem; }
  #modalCard .modal__description  { font-size: 0.9rem; line-height: 1.6; }
  #modalCard .modal__notes div    { font-size: 0.82rem; grid-template-columns: 92px 1fr; }

  .filter { font-size: 0.78rem; }
  .button { font-size: 0.82rem; }
  .logo, .brand__mark, .nav__logo { font-size: 1.06rem; }
  .logo img, .brand__mark img, .nav__logo img { height: 30px; }
}

/* ===========================================================================
   BUNDLE BANNER — IMAGES

   Card pehle sirf text ka tha. Client ko combo ki photo chahiye thi upar,
   isliye har card me ek image add ki hai. Grid 2 column ka hai; ab chaar
   card hain to desktop pe 2x2 aur mobile pe ek ke neeche ek aayenge.
   --------------------------------------------------------------------------- */
.bundle-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bundle-card { display: flex; flex-direction: column; overflow: hidden; }
.bundle-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  margin: 0 0 16px;
  border-radius: 4px;
  background: #101011;
}

/* Hero — scroll-scrub hata diya, to sticky ki extra height ki zaroorat nahi.
   Pehle .hero ki height 300vh type hoti thi taaki scroll ke saath frame
   badalte; ab wo bekaar scroll tha isliye normal height pe le aaye. */
.hero { height: auto; min-height: 72svh; }
.hero__sticky { position: relative; top: auto; height: 72svh; min-height: 72svh; }

@media (max-width: 760px) {
  .bundle-banner { grid-template-columns: 1fr; }
  .bundle-card__img { aspect-ratio: 16 / 11; margin-bottom: 13px; }
  .hero, .hero__sticky { min-height: 62svh; height: 62svh; }
}

/* ===========================================================================
   FILTER DROPDOWN + CLICKABLE BUNDLE CARD
   --------------------------------------------------------------------------- */
.filter-row { display: flex; justify-content: flex-start; margin-bottom: 26px; }

.filter-select { display: inline-flex; align-items: center; gap: 12px; }
.filter-select > span {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.filter-select select {
  appearance: none;
  min-width: 190px;
  padding: 11px 38px 11px 15px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  /* teer ka nishan — appearance: none ke baad browser ka arrow gayab ho jaata hai */
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.filter-select select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* dropdown ki list browser draw karta hai, isliye option ka rang alag se */
.filter-select select option { color: #0a0a0a; background: #f4f1ec; }

/* Poora card clickable hai, to cursor aur hover feedback zaroori hai —
   warna customer ko pata hi nahi chalega ki click ho sakta hai. */
.bundle-card[data-view] { cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; }
.bundle-card[data-view]:hover { border-color: var(--gold); transform: translateY(-2px); }
.bundle-card[data-view]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 760px) {
  .filter-select { width: 100%; }
  .filter-select select { flex: 1; min-width: 0; }
}

/* ===========================================================================
   FIND YOUR FRAGRANCE — FACETS AB DROPDOWN

   Pehle chaar group (family, occasion, personality, season) ke saare chip
   khule pade rehte the aur poori screen bhar jaati thi. Ab har group ek
   <details> ke andar hai — band haalat me sirf ek line, khol ke chips.

   <details> jaan-boojh ke chuna hai (select nahi): facets MULTI-select hain,
   ek waqt me kai chip on ho sakte hain. Isliye buttons wahi purane hain aur
   filter ka JS bilkul nahi chheda — sirf unke upar ek collapse aa gaya.
   --------------------------------------------------------------------------- */
.facet-drop { border-bottom: 1px solid var(--line); }
.facet-drop > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 2px;
  color: var(--brand-blush);
  font-family: var(--serif);
  font-size: 1.12rem;
  cursor: pointer;
  list-style: none;
}
.facet-drop > summary::-webkit-details-marker { display: none; }
/* + / − ka nishan — khulne par palat jaata hai */
.facet-drop > summary::after {
  content: "+";
  color: var(--gold);
  font-family: var(--sans, inherit);
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.facet-drop[open] > summary::after { content: "\2212"; }
.facet-drop > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.facet-drop .facet-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 2px 17px;
}

/* facet-group ka purana border hata do, warna dohri line dikhti hai */
.facet-group { border: 0; padding: 0; }

@media (max-width: 760px) {
  .facet-drop > summary { padding: 13px 2px; font-size: 1rem; }
  .facet-drop .facet-row { gap: 7px; padding-bottom: 14px; }
}

/* ===========================================================================
   FINAL POLISH PASS
   --------------------------------------------------------------------------- */

/* 1. Quick view button hata diya. Card ki image already clickable hai
   (data-view usi pe lagaya hua hai), isliye button sirf dohra option tha
   aur hover pe image ke upar aa ke usko chhupa raha tha.
   JS se nahi hataya — button rehne diya taaki koi handler na toote,
   bas dikhta nahi. */
.product-card__view { display: none !important; }

/* 2. WORD WRAP — mobile pe heading toot ke bahar nikal rahi thi.
   Bade serif heading ki width fixed thi aur letter-spacing negative,
   isliye chhoti screen pe shabd frame se bahar chala jaata tha. */
h1, h2, h3, .modal__content h2, .bundle-card h3 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.manifesto__title h2, .section-head h2 { max-width: 100%; }

@media (max-width: 760px) {
  h1 { font-size: clamp(1.75rem, 7.6vw, 2.3rem); letter-spacing: -0.02em; }
  h2 { font-size: clamp(1.5rem, 6.2vw, 1.95rem); letter-spacing: -0.015em; }
  h3 { font-size: 1.05rem; }
  .manifesto__title h2 { font-size: clamp(1.55rem, 6.6vw, 2rem); line-height: 1.06; }
}

/* 3. PHILOSOPHY SECTION — sirf heading.
   Client ne kaha "bas ek block, Wear a fragrance... itna hi".
   Side ki do lines aur khaali teesra column hata diya — wahi space kha
   raha tha. Section ki padding bhi aadhi kar di. */
.manifesto.philosophy { grid-template-columns: 120px minmax(0, 1fr); padding-block: clamp(46px, 6vw, 78px); }
.manifesto.philosophy > .manifesto__copy { display: none; }
/* Purana left-side label hata diya. Naya label poori section width mein,
   heading ke neeche exact center mein rahega. */
.manifesto.philosophy .philosophy__eyebrow {
  grid-column: 1 / -1;
  justify-self: center;
  justify-content: center;
  width: fit-content;
  margin-top: -4px;
}

@media (max-width: 760px) {
  .manifesto.philosophy { grid-template-columns: 1fr; gap: 14px; padding-block: 38px; }
}

/* 4. "Find your signature" ko thoda margin — client ne bola tha upar se
   chipka hua lag raha hai. */
#collection { padding-top: clamp(34px, 5vw, 66px); }
#collection .section-head { margin-bottom: clamp(20px, 3vw, 34px); }

/* 5. SMOKY / TEXTURED BACKGROUND
   Site flat black lag rahi thi. Yahan teen halki layer hain:
   - do bade radial gradient (dhuaan jaisa glow, gold aur magenta ka hint)
   - ek fine diagonal texture (grain ka ehsaas)
   Sab pointer-events: none aur body ke peeche, to click/scroll pe koi
   asar nahi. Opacity jaan-boojh ke bahut kam hai — texture dikhna chahiye,
   dhyaan kheenchna nahi. */
body { position: relative; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 12% 8%,  rgba(201, 162, 77, 0.10), transparent 62%),
    radial-gradient(52% 38% at 88% 22%, rgba(214, 51, 132, 0.07), transparent 65%),
    radial-gradient(70% 50% at 50% 100%, rgba(201, 162, 77, 0.06), transparent 68%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.05)        0 1px, transparent 1px 4px);
}
/* content in layers ke upar rahe */
main, header, footer { position: relative; z-index: 1; }
/* .modal ko is list me NAHI rakhna. Uska position: fixed hona zaroori hai �
   relative karne se modal page ke flow me chala jaata hai aur footer ke
   neeche khulta hai. Modal ka z-index uske apne rule me pehle se hai. */

/* 6. LOGO — philosophy section me halka watermark.
   Client ko lagaa page plain hai. Ye brand mark bahut low opacity pe hai,
   padhne me rukavat nahi karta. */
.manifesto.philosophy { position: relative; overflow: hidden; }
.manifesto.philosophy::after {
  content: "";
  position: absolute;
  right: -2%;
  bottom: -14%;
  width: clamp(150px, 20vw, 290px);
  aspect-ratio: 3 / 4;
  background: url("../media/logo-mark-t.png") center / contain no-repeat;
  opacity: 0.055;
  pointer-events: none;
}
@media (max-width: 760px) {
  .manifesto.philosophy::after { width: 126px; right: -6%; bottom: -8%; opacity: 0.045; }
}

/* ===========================================================================
   COMBO SIRF BANNER ME
   Client ne kaha combo attar ki list me nahi chahiye, sirf upar ke banner me.

   Server se inhe hataya NAHI hai — hata dete to banner pe click karne par
   quick view khulna band ho jaata (modal usi product data se banta hai) aur
   checkout bhi reject karta. Isliye sirf grid ka card chhupaya hai.
   --------------------------------------------------------------------------- */
/* Pehle yahan do id hardcoded thi. Ab 29 combos hain, isliye prefix se match
   kar rahe hain — koi bhi naya combo apne aap grid se bahar rahega aur sirf
   apne section me dikhega. */
.product-shell:has([data-view^="box-"]) { display: none; }

/* ===========================================================================
   HEADER — LOGO AUR SIGN IN BADE
   --------------------------------------------------------------------------- */
.logo, .brand__mark, .nav__logo { font-size: 1.72rem; letter-spacing: 0.2em; }
.logo img, .brand__mark img, .nav__logo img { height: 56px; }

/* Sign in / Bag ke button bhi usi hisaab se bade, warna logo ke aage
   dabe hue lagte hain */
.site-header .button,
.site-header .icon-button { font-size: 0.92rem; padding: 12px 22px; }

@media (max-width: 760px) {
  .logo, .brand__mark, .nav__logo { font-size: 1.24rem; letter-spacing: 0.17em; }
  .logo img, .brand__mark img, .nav__logo img { height: 36px; }
  .site-header .button { font-size: 0.8rem; padding: 9px 14px; }
}

/* Banner card ka poora area clickable karna hata diya — us wajah se click
   par page neeche kood jaata tha. Ab pehle jaisa hi hai: sirf card ka button
   quick view kholta hai. Card pe cursor/hover ka jhootha ishaara bhi hata
   diya, warna customer poore card pe click karta rehta. */
.bundle-card[data-view] { cursor: default; transform: none; }
.bundle-card:hover { border-color: var(--line); transform: none; }

/* ===========================================================================
   HERO WORDMARK FIX

   Pehle maine saare h1/h2 pe overflow-wrap: break-word laga diya tha (mobile
   pe heading bahar nikal rahi thi). Uska side effect: hero ka bada "SCENTELLE"
   do line me toot gaya aur header ke peeche chala gaya.

   Yahan hero ke wordmark ko wapas ek line me rakha hai aur size vw se
   calculate ho raha hai, to chhoti screen pe apne aap chhota ho jaata hai —
   todne ki zaroorat hi nahi padti. Saath me thoda top padding, taaki fixed
   header ke neeche se shuru ho.
   --------------------------------------------------------------------------- */
.hero h1,
.hero__intro h1 {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  font-size: clamp(2.3rem, 10.5vw, 8.6rem);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Header fixed hai, isliye hero ka content uske neeche se shuru hona chahiye */
.hero__intro { padding-top: clamp(78px, 11vh, 132px); }

@media (max-width: 760px) {
  .hero h1, .hero__intro h1 { font-size: clamp(1.9rem, 11.5vw, 3.1rem); letter-spacing: 0.06em; }
  .hero__intro { padding-top: 74px; }
}

/* Banner ki image pe click = quick view. data-view sirf <img> pe hai, poore
   card pe nahi — poore card pe lagane se text/price pe click karte waqt bhi
   modal khulta tha, jo confusing lagta hai. Button abhi bhi kaam karta hai. */
.bundle-card__img[data-view] { cursor: pointer; transition: opacity 0.2s ease; }
.bundle-card__img[data-view]:hover { opacity: 0.88; }

/* ===========================================================================
   HERO BACKGROUND — DIKHNE LAGE

   Problem: hero ka shade overlay itna gehra tha ki peeche ki image bilkul
   dikh hi nahi rahi thi — poora hero flat black lagta tha.

   Ab overlay halka hai (baayein taraf thoda gehra rakha hai taaki wahan ka
   text padha jaaye, aur neeche gehra taaki agla section smoothly mile).
   Image ko thoda brightness/contrast diya hai, aur bahut halka zoom +
   slow pan — warna still photo mein jaan nahi lagti.
   --------------------------------------------------------------------------- */
.hero__shade {
  background:
    linear-gradient(90deg, rgba(5,5,5,0.86) 0%, rgba(5,5,5,0.42) 34%, rgba(5,5,5,0.18) 62%, rgba(5,5,5,0.5) 100%),
    linear-gradient(180deg, rgba(5,5,5,0.5) 0%, transparent 30%, transparent 58%, rgba(5,5,5,0.9) 100%);
}

.hero__canvas {
  filter: brightness(1.14) contrast(1.06) saturate(1.04);
  transform: scale(1.06);
  animation: heroDrift 26s ease-in-out infinite alternate;
}

@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.4%, -1%, 0); }
}

/* Jinke phone/PC pe reduced motion on hai, unke liye animation band */
@media (prefers-reduced-motion: reduce) {
  .hero__canvas { animation: none; transform: scale(1.04); }
}

@media (max-width: 760px) {
  /* Mobile pe text image ke upar aata hai, isliye neeche thoda zyada gehra */
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.28) 34%, rgba(5,5,5,0.72) 78%, rgba(5,5,5,0.94) 100%);
  }
}

/* ===========================================================================
   HERO — RICH TEXTURED BACKGROUND

   Photo pe bharosa karna band kiya. Wajah: slide-*.jpg bahut dark hain, aur
   overlay ke saath poora hero flat black lag raha tha. Client ko "badhiya,
   textured" chahiye tha.

   Ab background CSS se bana hai — paanch layer, sab ek doosre ke upar:
     1. do gold glow (baayein-upar se aata hua, jaise ek hi roshni ka source)
     2. ek magenta hint daayein (brand ka doosra rang, bahut halka)
     3. fine diagonal weave — silk/fabric ka ehsaas
     4. horizontal scan lines — depth, flat plastic jaisa na lage
     5. neeche gehra fade taaki agla section smoothly mile

   Photo peeche rahegi par bahut halki (opacity 0.3), sirf texture ke liye —
   image ka detail dikhane ke liye nahi. Isse hero har screen pe consistent
   dikhta hai, chahe photo dark ho ya light.
   --------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* gold roshni — baayein upar se */
    radial-gradient(64% 58% at 8% 6%,   rgba(201, 162, 77, 0.30), transparent 60%),
    radial-gradient(44% 40% at 26% 34%, rgba(201, 162, 77, 0.14), transparent 66%),
    /* magenta hint — daayein */
    radial-gradient(52% 46% at 92% 16%, rgba(214, 51, 132, 0.13), transparent 64%),
    /* neeche se uthta halka gold */
    radial-gradient(84% 44% at 50% 104%, rgba(201, 162, 77, 0.10), transparent 70%),
    /* base — flat black nahi, warm charcoal */
    linear-gradient(165deg, #121013 0%, #0b0a0b 46%, #080808 100%);
}

/* Texture layer — silk weave + scan lines */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(48deg,  rgba(255,255,255,0.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-48deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg,   rgba(0,0,0,0.10)        0 1px, transparent 1px 3px);
}

/* Photo ab sirf halka texture hai, main background nahi */
.hero__canvas {
  z-index: 0;
  opacity: 0.3;
  filter: brightness(1.3) contrast(1.1) saturate(0.85);
  mix-blend-mode: luminosity;
}

/* Purana bhaari shade hata diya — ab sirf neeche ka fade chahiye,
   taaki hero se agla section smoothly mile aur text padha jaaye. */
.hero__shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.12) 42%, transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 56%, rgba(8,8,8,0.72) 84%, #0a0a0a 100%);
}

/* Text sabse upar */
.hero__intro, .hero__meta, .hero .shell { position: relative; z-index: 2; }

/* Wordmark pe halki gold chamak — plain safed se behtar lagta hai */
.hero h1, .hero__intro h1 {
  background: linear-gradient(176deg, #f6f1e6 6%, #e8dcc2 42%, #c9a24d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 760px) {
  .hero::after { opacity: 0.4; }
  .hero__canvas { opacity: 0.24; }
  .hero__shade {
    background: linear-gradient(180deg, rgba(5,5,5,0.4) 0%, transparent 34%, rgba(8,8,8,0.8) 82%, #0a0a0a 100%);
  }
}

/* ===========================================================================
   BRAND NAAM — "Scentelle" (bada E beech me)

   Logo aur hero wordmark pe text-transform: uppercase laga hua tha, jo
   "Scentelle" ko "SCENTELLE" bana deta tha aur bada E dikhta hi nahi tha.
   Isliye in jagahon pe transform band kiya hai.
   --------------------------------------------------------------------------- */
.logo, .brand__mark, .brand__name, .nav__logo,
.hero h1, .hero__intro h1, .loader__brand {
  text-transform: none;
}

/* ===========================================================================
   HERO WORDMARK — KAT RAHA THA

   white-space: nowrap ke saath font 10.5vw tha, to "Scentelle" container se
   bahar nikal ke overflow: hidden me kat gaya ("SCENT]" dikh raha tha).

   Ab size kam hai aur letter-spacing bhi, taaki 9 akshar aaram se ek line
   me aa jaayein. Neeche max-width bhi 100% kar di hai — agar kabhi naam
   lamba ho to woh sikud jaayega, katega nahi.
   --------------------------------------------------------------------------- */
.hero h1, .hero__intro h1 {
  font-size: clamp(2rem, 7.4vw, 6.2rem);
  letter-spacing: 0.005em;
  max-width: 100%;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .hero h1, .hero__intro h1 { font-size: clamp(1.7rem, 9.4vw, 2.8rem); letter-spacing: 0.01em; }
}

/* ===========================================================================
   "Scentelle" — MIXED CASE THEEK SE DIKHE

   Pehle sab uppercase tha, isliye letter-spacing kaafi khuli rakhi thi
   (0.2em). Mixed case me utni khuli spacing ganda lagti hai — chhote
   akshar ek doosre se toot ke alag-alag lagte hain.

   Isliye ab: spacing kam, aur beech ka bada E halka gold — brand ka
   asli trick wahi hai, usko dikhna chahiye.
   --------------------------------------------------------------------------- */
.brand__name, .logo, .nav__logo, .loader__brand {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.hero__title, .hero__wordmark, .hero h1, .hero__intro h1 {
  text-transform: none;
  letter-spacing: -0.005em;
  white-space: nowrap;
  max-width: 100%;
  font-size: clamp(2.1rem, 8.4vw, 7rem);
}

/* Loader ka bada E — baaki akshar safed, ye gold */
.loader__name .brand-cap { color: var(--gold); }

@media (max-width: 760px) {
  .hero__title, .hero__wordmark, .hero h1, .hero__intro h1 {
    font-size: clamp(1.8rem, 10.6vw, 3.1rem);
  }
  .brand__name, .logo, .nav__logo { letter-spacing: 0.015em; }
}

/* Keep the home hero wordmark and supporting copy visually grounded instead
   of crowding the upper half of the image. */
.hero__intro { bottom: clamp(52px, 7vh, 92px); }

/* Hero ka ek hi clean brand title: har screen par exact visual centre mein. */
.hero .hero__brand-title {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: calc(100% - (var(--pad) * 2));
  margin: 0;
  transform: translate(-50%, -50%);
  color: transparent;
  background: linear-gradient(112deg, #f7f1e4 6%, #dfc987 54%, #c9a24d 94%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--serif);
  font-size: clamp(5rem, 18vw, 14rem);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: 0.025em;
  text-align: center;
  text-transform: none;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.32);
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 760px) {
  .hero__intro { bottom: 28px; }
  .hero .hero__brand-title { font-size: clamp(4.5rem, 22vw, 7.5rem); letter-spacing: 0; }
}

/* Final narrow-screen guardrails: keep modal content inside its grid track
   and avoid extra top padding changing the hero block's vertical position. */
@media (max-width: 760px) {
  .hero__intro {
    padding-top: 0;
    bottom: clamp(24px, 5vh, 42px);
  }
  .hero__intro p {
    max-width: 34ch;
  }

  #modalCard {
    width: 100%;
    max-width: 100%;
  }
  #modalCard .modal__content {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #modalCard .modal__sizes {
    flex-wrap: wrap;
  }
  #modalCard .box-picker__head,
  #modalCard .box-picker__list,
  #modalCard .modal-box-note {
    min-width: 0;
    max-width: 100%;
  }
  #modalCard .box-pick,
  #modalCard .modal-box-note {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 400px) {
  .modal {
    padding: 10px;
  }
  #modalCard .modal__content {
    padding-inline: 13px;
  }
}

/* ===========================================================================
   HERO BRAND TITLE — KATNA BAND

   Asli wajah: `.hero .hero__brand-title` pe `font-size: clamp(5rem, 18vw, 14rem)`
   tha aur `white-space: nowrap`. clamp ka MINIMUM 5rem hai — chhoti screen pe
   18vw us minimum se neeche chala jaata hai, to browser 5rem (~95px) pe atak
   jaata hai. Us size pe "Scentelle" ke 9 akshar container se chaude ho jaate
   hain aur `overflow: hidden` unhe kaat deta hai ("SCENT]" dikhta tha).

   Doosri wajah: mere pichhle fix `.hero h1` pe the (specificity 0,1,1) jabki
   asli rule `.hero .hero__brand-title` (0,2,0) hai — isliye mera rule lagta
   hi nahi tha. Yahan `.hero h1.hero__brand-title` (0,2,1) use kiya hai.

   Fix: koi rem floor nahi. Size purely viewport se — min() lagaya hai, clamp
   nahi. Isse har width pe naam proportionally chhota hota hai aur kabhi
   container se bahar nahi jaata.

   Hisaab: is serif me "Scentelle" ki chaudai ≈ 4.8 × font-size. Jagah
   ≈ 96vw. To 4.8F ≤ 96vw → F ≤ 20vw. 16vw rakha hai, aaram se fit.
   --------------------------------------------------------------------------- */
.hero h1.hero__brand-title {
  font-size: min(16vw, 11.5rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
  width: calc(100% - (var(--pad) * 2));
  max-width: calc(100% - (var(--pad) * 2));
  text-align: center;
  overflow: visible;
}

@media (max-width: 760px) {
  .hero h1.hero__brand-title {
    font-size: min(17vw, 5.6rem);
    letter-spacing: 0.012em;
  }
}

/* Bahut chhoti screen (320-380px) — yahan sabse zyada katne ka khatra tha */
@media (max-width: 400px) {
  .hero h1.hero__brand-title { font-size: 16.5vw; letter-spacing: 0.005em; }
}

/* ===========================================================================
   CREAM SECTIONS + TEXTURE

   Client ek reference site se compare kar raha tha jo poori off-white hai.
   Poori site light karna jaan-boojh ke NAHI kiya — saare product photos
   dark background ke hain (890x890, kaala background). Light page par wo
   kaale chakor ki tarah dikhte, aur gold text light par padhne mein mushkil
   hota hai.

   Iske bajaye alternating sections: hero dark → assure cream → philosophy
   dark → collection dark → categories cream → craft dark...
   Isse site "designed" lagti hai, khaali nahi, aur photos bhi sahi baithti
   hain. Bade brands yahi karte hain.
   --------------------------------------------------------------------------- */

:root {
  --cream: #f2eee5;
  --cream-2: #e9e3d6;
  --cream-ink: #1a1612;
  --cream-muted: #6b6257;
  --cream-line: rgba(26, 22, 18, 0.13);
  --cream-gold: #96762e;      /* light background par gold ko gehra karna padta hai, warna padha nahi jaata */
}

/* Cream section ka base. Do texture layer hain:
   - halka diagonal weave (kaagaz ka ehsaas)
   - kone se aata warm gradient (flat na lage) */
.assure,
.cats {
  position: relative;
  background-color: var(--cream);
  color: var(--cream-ink);
  background-image:
    radial-gradient(72% 58% at 8% 0%, rgba(150, 118, 46, 0.07), transparent 62%),
    radial-gradient(60% 50% at 100% 100%, rgba(109, 47, 94, 0.05), transparent 66%),
    repeating-linear-gradient(46deg, rgba(26, 22, 18, 0.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-46deg, rgba(26, 22, 18, 0.014) 0 1px, transparent 1px 5px);
  border-block: 1px solid var(--cream-line);
}

/* Cream ke andar ke heading/text ko dark palette se bahar nikalna padta hai */
.assure h3, .cats h2 { color: var(--cream-ink); }
.assure p { color: var(--cream-muted); }
.cats .section-index { color: var(--cream-gold); }
.cats .section-head h2 em { color: var(--cream-gold); font-style: italic; }

/* ---------------- trust strip ---------------- */
.assure { padding-block: clamp(34px, 4.6vw, 62px); }

.assure__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 46px);
}
.assure__row article { display: flex; flex-direction: column; gap: 9px; }

.assure__ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--cream-line);
  border-radius: 50%;
  color: var(--cream-gold);
  background: rgba(255, 255, 255, 0.55);
}
.assure__ico svg { width: 20px; height: 20px; stroke-linecap: round; stroke-linejoin: round; }

.assure h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  letter-spacing: 0;
}
.assure p { margin: 0; font-size: 0.85rem; line-height: 1.55; max-width: 34ch; }

/* ---------------- shop by family ---------------- */
.cats { padding-block: clamp(52px, 7vw, 96px); }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(11px, 1.6vw, 20px);
}

.cat-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid var(--cream-line);
  background: #14110f;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(26, 22, 18, 0.22); }
.cat-card:focus-visible { outline: 2px solid var(--cream-gold); outline-offset: 3px; }

.cat-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.cat-card:hover img { transform: scale(1.05); }

/* photo dark hai, isliye upar se gehra fade — text padha jaaye */
.cat-card__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(8, 7, 6, 0.55) 68%, rgba(8, 7, 6, 0.9) 100%);
}

.cat-card__copy {
  position: absolute; inset: auto 0 0 0;
  padding: 15px 16px 17px;
  display: flex; flex-direction: column; gap: 3px;
}
.cat-card__copy small {
  color: rgba(242, 238, 229, 0.72);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.cat-card__copy b {
  color: #f7f3ea;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.7vw, 1.44rem);
}

/* ---------------- dark sections ko bhi thoda texture ---------------- */
/* Client ne kaha tha "khaali lagta hai". Flat kaale panel par ye halka
   weave depth de deta hai bina dhyaan kheenche. */
.craft, .ritual, .gift, .reviews {
  position: relative;
  background-image:
    repeating-linear-gradient(44deg, rgba(255, 255, 255, 0.013) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-44deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 6px);
}

/* ---------------- mobile ---------------- */
@media (max-width: 860px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .assure__row { grid-template-columns: 1fr; gap: 20px; }
  .assure__row article { flex-direction: row; align-items: flex-start; gap: 13px; }
  .assure__ico { flex: 0 0 auto; width: 34px; height: 34px; }
  .assure__ico svg { width: 17px; height: 17px; }
  .assure h3 { font-size: 0.98rem; }
  .assure p { font-size: 0.8rem; max-width: none; }
  .cat-card { aspect-ratio: 1 / 1; }
}

/* ===========================================================================
   CREAM HATAYA → WARM ESPRESSO PANEL

   Bright cream (#f2eee5) is dark luxury site par bahut chubh raha tha —
   jhatka lagta tha aur sasta dikh raha tha. Cream sirf tab kaam karta hai
   jab poori site aur photography usi hisaab se bani ho.

   Iske bajaye ab in sections par "elevated panel" hai: kaale se thoda halka,
   warm brown-espresso, gold hairline border ke saath. Separation mil jaata
   hai (section alag dikhta hai) par look premium rehta hai aur product
   photos ke saath baithta hai.

   File ke END me hai, isliye upar ke cream rules ko override kar deta hai.
   --------------------------------------------------------------------------- */

.assure,
.cats {
  color: var(--ink);
  background-color: #14100e;
  background-image:
    /* gold ki halki roshni upar-baayein se, ek hi source jaisa */
    radial-gradient(80% 62% at 6% 0%, rgba(201, 164, 95, 0.085), transparent 60%),
    radial-gradient(56% 48% at 100% 100%, rgba(109, 47, 94, 0.07), transparent 66%),
    /* kapde jaisa fine weave */
    repeating-linear-gradient(46deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-46deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #16120f 0%, #120f0d 100%);
  border-block: 1px solid var(--gold-line);
}

/* text wapas light palette par */
.assure h3 { color: var(--ink); }
.assure p  { color: var(--muted-2); }
.cats h2   { color: var(--ink); }
.cats .section-index { color: var(--gold); }

/* ---- trust strip ---- */
.assure { padding-block: clamp(30px, 4vw, 52px); }

/* teen item ke beech patli gold line — grid alag alag block jaisa na lage */
.assure__row { position: relative; }
.assure__row article { position: relative; padding-left: clamp(0px, 2vw, 26px); }
.assure__row article + article::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-line) 22%, var(--gold-line) 78%, transparent);
}

.assure__ico {
  width: 38px; height: 38px;
  color: var(--gold);
  background: rgba(201, 164, 95, 0.07);
  border: 1px solid var(--gold-line);
}
.assure h3 { letter-spacing: 0.01em; }
.assure p { font-size: 0.83rem; line-height: 1.56; }

/* ---- shop by family ---- */
.cats { padding-block: clamp(48px, 6.4vw, 88px); }

.cat-card {
  border: 1px solid var(--line);
  background: #100d0c;
}
.cat-card:hover {
  border-color: var(--gold-line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* photo ke upar gold ka halka wash — sab tiles ek family ki lagti hain */
.cat-card__shade {
  background:
    linear-gradient(180deg, transparent 30%, rgba(8, 7, 6, 0.6) 66%, rgba(8, 7, 6, 0.94) 100%),
    linear-gradient(140deg, rgba(201, 164, 95, 0.08), transparent 52%);
}
.cat-card__copy small { color: var(--gold); letter-spacing: 0.14em; }
.cat-card__copy b { color: var(--ink); }

/* naam ke neeche patli gold line, hover par khulti hai */
.cat-card__copy b { position: relative; display: inline-block; padding-bottom: 5px; }
.cat-card__copy b::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 22px; height: 1px;
  background: var(--gold);
  transition: width 0.35s ease;
}
.cat-card:hover .cat-card__copy b::after { width: 100%; }

@media (max-width: 640px) {
  .assure__row article { padding-left: 0; }
  .assure__row article + article::before { display: none; }
  /* mobile par line ki jagah upar halka divider */
  .assure__row article + article { border-top: 1px solid var(--line); padding-top: 18px; }
}

/* ===========================================================================
   ============  LIGHT THEME — OFF-WHITE + GOLD  =============================
   ===========================================================================

   Client reference site ke hisaab se poori site off-white + golden karni thi.

   Ek asli problem thi: saare product photos DARK background ke hain (890x890,
   kaala background). Unhe light page par seedha daalne se wo kaale chakor
   dikhte.

   Hal: product ki image ko ek DARK TILE ke andar rakha hai. Page light,
   photo ka dabba dark. Ye asli design pattern hai — premium perfume brands
   yahi karte hain. Photos badalne ki zaroorat nahi padi.

   Jo cheezein jaan-boojh ke DARK rakhi hain:
     - product card ki image tile
     - quick view modal ka image area
     - category tiles
     - footer (page ko neeche se anchor karta hai)
     - admin panel (internal tool, alag se dark restore kiya hai neeche)

   Ye block file ke END me hai, isliye upar ke saare dark rules ko jeet
   jaata hai. Wapas dark karna ho to sirf ye block hata do.
   --------------------------------------------------------------------------- */

:root {
  --bg: #f7f3ec;
  --bg-soft: #f1ebe0;
  --surface: #fffdf9;
  --surface-2: #f3ede2;

  --ink: #1b1611;
  --muted: #5d5449;
  --muted-2: #857a6b;

  /* Gold ko gehra karna zaroori hai — halka gold light background par
     bilkul nahi padha jaata. */
  --gold: #8c6c22;
  --gold-light: #b18e3c;

  --line: rgba(27, 22, 17, 0.13);
  --gold-line: rgba(140, 108, 34, 0.30);
  --accent-line: rgba(216, 27, 116, 0.30);

  /* review quotes light par gehra chahiye */
  --brand-blush: #7e3a48;
}

html, body { background: var(--bg); color: var(--ink); }

/* ---- page texture: light version ---- */
body::before {
  background:
    radial-gradient(60% 44% at 10% 6%,  rgba(140, 108, 34, 0.07), transparent 62%),
    radial-gradient(52% 38% at 90% 20%, rgba(109, 47, 94, 0.045), transparent 66%),
    radial-gradient(70% 48% at 50% 100%, rgba(140, 108, 34, 0.05), transparent 70%);
}
body::after {
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(27, 22, 17, 0.017) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(27, 22, 17, 0.012) 0 1px, transparent 1px 5px);
}

/* ---- loader ---- */
.loader { background: #f7f3ec; }
.loader__brand, .loader__name { color: var(--ink); }
.loader__tag { color: var(--muted); }
.loader__rule { background: var(--gold-line); }
.loader__name .brand-cap { color: var(--gold); }

/* ---- header ---- */
.nav {
  background: rgba(247, 243, 236, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav.is-scrolled {
  background: rgba(247, 243, 236, 0.96);
  border-bottom-color: var(--gold-line);
  box-shadow: 0 8px 26px rgba(27, 22, 17, 0.07);
}
.nav__links a { color: var(--muted); }
.nav__links a:hover { color: var(--ink); }
.logo, .brand__name, .nav__logo { color: var(--ink); }

/* ---- buttons ---- */
.button--solid { color: #fffdf9; background: var(--gold); }
.button--solid:hover { background: var(--ink); color: #fffdf9; }
.button--outline { color: var(--ink); border-color: var(--gold-line); background: transparent; }
.button--outline:hover { color: #fffdf9; background: var(--gold); border-color: var(--gold); }

/* ---- hero ---- */
/* Hero ki dark texture image light background par gandi lagti thi (luminosity
   blend se muddy ho jaati hai), isliye hide kar di. Uski jagah warm cream
   gradient + gold roshni. */
.hero__canvas, .hero__video { display: none !important; }

.hero { background: var(--bg); }
.hero::before {
  background:
    radial-gradient(66% 58% at 8% 4%,   rgba(140, 108, 34, 0.16), transparent 60%),
    radial-gradient(46% 40% at 28% 34%, rgba(177, 142, 60, 0.10), transparent 66%),
    radial-gradient(54% 46% at 92% 14%, rgba(109, 47, 94, 0.07), transparent 64%),
    radial-gradient(86% 44% at 50% 104%, rgba(140, 108, 34, 0.09), transparent 70%),
    linear-gradient(168deg, #fffdf8 0%, #f6f1e7 48%, #efe8db 100%);
}
.hero::after {
  opacity: 0.4;
  background-image:
    repeating-linear-gradient(48deg,  rgba(27, 22, 17, 0.02)  0 1px, transparent 1px 4px),
    repeating-linear-gradient(-48deg, rgba(27, 22, 17, 0.014) 0 1px, transparent 1px 5px);
}
.hero__shade {
  background: linear-gradient(180deg, transparent 0%, transparent 62%, rgba(239, 232, 219, 0.7) 86%, var(--bg) 100%);
}

/* Wordmark ka gold gradient gehra — cream par chamakta hua sona */
.hero h1.hero__brand-title {
  background: linear-gradient(168deg, #6d5015 4%, #a9852f 46%, #c9a45f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.hero__intro p, .hero__end p { color: var(--muted); }
.hero__timeline span { color: var(--muted-2); }

/* ---- collection ---- */
.collection { background: linear-gradient(180deg, #fffdf8, #f5efe4 70%); }

/* ---- product card: light card, DARK image tile ---- */
.product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.product-card:hover { border-color: var(--gold-line); box-shadow: 0 16px 38px rgba(27, 22, 17, 0.10); }

/* yahi wo dark tile hai jo photos ke saath baithti hai */
.product-card__media {
  background: #14110f;
  border-bottom: 1px solid var(--line);
}
.product-card__name, .product-card__price { color: var(--ink); }
.product-card__family, .product-card__meta { color: var(--muted-2); }
.product-card__mrp { color: var(--muted-2); }

/* ---- filters ---- */
.filter { color: var(--muted); border-color: var(--line); background: var(--surface); }
.filter:hover { color: var(--ink); border-color: var(--gold-line); }
.filter.is-active { color: #fffdf9; background: var(--gold); border-color: var(--gold); }
.filter.is-active b { color: rgba(255, 253, 249, 0.65); }
.filter-select select { background-color: var(--surface); color: var(--ink); border-color: var(--line); }
.filter-select select option { color: var(--ink); background: #fffdf9; }
.filter-select > span { color: var(--muted-2); }

/* ---- trust strip: soft gold band ---- */
.assure {
  color: var(--ink);
  background-color: #f2ead9;
  background-image:
    radial-gradient(70% 60% at 6% 0%, rgba(140, 108, 34, 0.10), transparent 62%),
    repeating-linear-gradient(46deg, rgba(27, 22, 17, 0.02) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #f4ecdc 0%, #efe6d3 100%);
  border-block: 1px solid var(--gold-line);
}
.assure h3 { color: var(--ink); }
.assure p { color: var(--muted); }
.assure__ico { color: var(--gold); background: rgba(255, 255, 255, 0.6); border-color: var(--gold-line); }

/* ---- shop by family ---- */
.cats {
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(64% 52% at 92% 0%, rgba(140, 108, 34, 0.07), transparent 62%),
    repeating-linear-gradient(-46deg, rgba(27, 22, 17, 0.014) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #fffdf8 0%, #f5efe4 100%);
  border-block: 1px solid var(--line);
}
.cats h2 { color: var(--ink); }
.cats .section-index { color: var(--gold); }

/* category tile DARK rehti hai — andar dark photo hai */
.cat-card { background: #14110f; border-color: var(--line); }
.cat-card:hover { border-color: var(--gold-line); box-shadow: 0 18px 44px rgba(27, 22, 17, 0.16); }

/* ---- sections ---- */
.manifesto, .craft, .ritual, .gift, .reviews, .newsletter, .story, .apply, .heritage {
  background-color: transparent;
  background-image:
    repeating-linear-gradient(44deg, rgba(27, 22, 17, 0.012) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-44deg, rgba(27, 22, 17, 0.01)  0 1px, transparent 1px 6px);
}
.reviews { background-color: #f2ead9; border-block: 1px solid var(--gold-line); }
.review-grid { background: var(--line); border-color: var(--line); }
.review-grid figure { background: var(--surface); }
.review-grid blockquote { color: var(--brand-blush); }
.review-grid figcaption { color: var(--ink); }
.review-grid figcaption span { color: var(--muted-2); }

/* logo watermark philosophy section me halka */
.manifesto.philosophy::after { opacity: 0.07; }

/* ---- footer: gehra, page ko anchor karta hai ---- */
.footer {
  background: #17120e;
  color: #f4efe6;
  border-top: 1px solid var(--gold-line);
}
.footer a, .footer p, .footer span, .footer li { color: rgba(244, 239, 230, 0.72); }
.footer a:hover { color: #fffdf9; }
.footer h3, .footer h4, .footer .brand__name { color: #fffdf9; }
.footer .section-index, .footer .kicker { color: var(--gold-light); }

/* ---- cart panel ---- */
.cart { background: var(--surface); border-left: 1px solid var(--line); color: var(--ink); }
.cart__footer, .ship { background: var(--surface-2); border-top: 1px solid var(--line); }
.cart-item__title { color: var(--ink); }
.cart-item__meta, .cart__empty { color: var(--muted-2); }

/* ---- quick view modal: light panel, DARK image area ---- */
#modalCard { background: var(--surface); }
#modalCard .modal__media { background: #14110f; }
#modalCard .modal__content h2, #modalCard .modal__price { color: var(--ink); }
#modalCard .modal__description { color: var(--muted); }
#modalCard .modal__notes dt { color: var(--muted-2); }
#modalCard .modal__notes dd { color: var(--ink); }
#modalCard .modal__family { color: var(--gold); }
.modal__disclaimer { color: var(--muted-2); }
.modal { background: rgba(27, 22, 17, 0.55); }
.gallery__arrow { color: #fffdf9; background: rgba(20, 17, 15, 0.6); border-color: rgba(255, 253, 249, 0.3); }
.gallery__arrow:hover { background: rgba(20, 17, 15, 0.85); }

/* ---- form fields ---- */
input, textarea, select { color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
.newsletter__form input, .ship input, .ship select, .auth input {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

/* ---- sign in modal ---- */
#authCard { background: var(--surface); color: var(--ink); }
.auth__side-copy p { color: rgba(255, 253, 249, 0.85); }

/* ---- bundle banner ---- */
.bundle-card { background: var(--surface); border-color: var(--line); }
.bundle-card h3, .bundle-card__price strong { color: var(--ink); }
.bundle-card p { color: var(--muted); }
.bundle-card__price s { color: var(--muted-2); }
.bundle-card__tag { color: var(--gold); border-color: var(--gold-line); background: rgba(140, 108, 34, 0.08); }

/* ---- misc ---- */
.section-index, .kicker { color: var(--gold); }
.stars { color: var(--gold); }
hr, .rule { background: var(--gold-line); }
::selection { background: rgba(140, 108, 34, 0.22); color: var(--ink); }

/* ===========================================================================
   ADMIN PANEL — DARK HI REHNE DO

   Admin ke rules me background hardcoded dark hai (#0b0b0c, #101011). Agar
   --ink ko light theme ki tarah dark kar dein to admin me dark text dark
   background par aa jaata hai — kuch padha nahi jaata.
   Isliye .admin-body ke andar variables wapas dark palette par set kar diye.
   --------------------------------------------------------------------------- */
.admin-body {
  --bg: #0b0b0c;
  --bg-soft: #0e0e0f;
  --surface: #141313;
  --surface-2: #191716;
  --ink: #faf7f2;
  --muted: #cdc7bc;
  --muted-2: #a8a19a;
  --gold: #c9a45f;
  --gold-light: #e2bd62;
  --line: rgba(243, 238, 229, 0.1);
  --gold-line: rgba(226, 189, 98, 0.32);
  background: #0b0b0c;
  color: #faf7f2;
}
.admin-body input, .admin-body select, .admin-body textarea { color: #faf7f2; }
.admin-body .button--solid { color: #090909; background: var(--gold-light); }

/* ===========================================================================
   LIGHT THEME — FIXES
   --------------------------------------------------------------------------- */

/* 1. SIGN IN button ka text gayab tha.
   Wajah: uski class .button nahi, .account-button hai — light theme ke button
   rules usme lage hi nahi. Text light rang ka reh gaya aur cream background
   par invisible ho gaya. */
.account-button {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
}
.account-button:hover {
  color: #fffdf9;
  background: var(--gold);
  border-color: var(--gold);
}

/* BAG button aur icon buttons bhi usi hisaab se */
.cart-button, .icon-button { color: var(--ink); }
.cart-button { border-color: var(--line); }
.cart-button:hover { border-color: var(--gold-line); }
.cart-button__count { color: #1b1611; background: var(--gold-light); }
.icon-button:hover { color: var(--gold); }

/* 2. Hero ka text dikhna chahiye.
   Scroll-scrub function band karne ke baad hero__intro ka reveal nahi chal
   raha tha, isliye zabardasti visible kar rahe hain. */
.hero__intro {
  opacity: 1;
  visibility: visible;
  z-index: 3;
}
.hero__intro .kicker { color: var(--gold); }
.hero__intro p { color: var(--muted); }
.hero__intro .text-link, .hero__intro a { color: var(--ink); border-bottom-color: var(--gold-line); }
.hero__intro a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* 3. Hero khali lag raha tha — do halke ornament daale hain.
   Dono pointer-events: none hain, click/scroll par koi asar nahi. */

/* gold ka bada halka vritt, wordmark ke peeche */
.hero__sticky::before {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: min(78vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 108, 34, 0.11) 0%, rgba(140, 108, 34, 0.04) 46%, transparent 68%);
  z-index: 0;
  pointer-events: none;
}

/* brand mark watermark, daayein neeche */
.hero__sticky::after {
  content: "";
  position: absolute;
  right: 4%; bottom: 6%;
  width: clamp(110px, 15vw, 210px);
  aspect-ratio: 3 / 4;
  background: url("../media/logo-mark-t.png") center / contain no-repeat;
  opacity: 0.09;
  z-index: 0;
  pointer-events: none;
}

/* patli gold line wordmark ke neeche — frame ka ehsaas deti hai */
.hero h1.hero__brand-title::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -22px;
  transform: translateX(-50%);
  width: clamp(80px, 12vw, 170px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

@media (max-width: 760px) {
  .hero__sticky::before { width: 88vw; top: 44%; }
  .hero__sticky::after { width: 92px; right: 2%; bottom: 4%; opacity: 0.07; }
  .hero h1.hero__brand-title::after { bottom: -16px; width: 90px; }
}

/* 4. Footer ke andar copyright wagera ka rang theek */
.footer__bottom, .footer__bottom span, .footer__bottom a { color: rgba(244, 239, 230, 0.6); }
.footer .brand__name { color: #fffdf9; }

/* ===========================================================================
   FOOTER — LIGHT BROWN (kraft / leather feel)

   Pehle footer gehra espresso tha. Client ko wo alag nahi lag raha tha, aur
   usme bada "Scentelle" watermark bilkul dikh hi nahi raha tha (dark par
   dark watermark).

   Ab footer warm light brown hai aur text gehra brown — kraft paper ya
   leather jaisa. Isse do faayda: footer page se saaf alag dikhta hai, aur
   watermark ab gehre rang ka hai to clearly visible hai.
   --------------------------------------------------------------------------- */

.footer {
  background-color: #ab9070;
  background-image:
    radial-gradient(70% 60% at 8% 0%, rgba(255, 249, 238, 0.16), transparent 60%),
    radial-gradient(56% 50% at 96% 100%, rgba(58, 42, 26, 0.13), transparent 66%),
    repeating-linear-gradient(46deg, rgba(58, 42, 26, 0.03) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-46deg, rgba(255, 249, 238, 0.03) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #b49873 0%, #9d825e 100%);
  color: #2a1e12;
  border-top: 1px solid rgba(58, 42, 26, 0.28);
}

/* text gehra brown — light brown par sabse saaf padha jaata hai */
.footer p,
.footer li,
.footer span,
.footer a {
  color: rgba(42, 30, 18, 0.82);
}
.footer a:hover { color: #1a1208; }

.footer h3,
.footer h4,
.footer .brand__name {
  color: #1c1409;
}

/* column ke heading (SHOP / CARE / LEGAL / CONTACT) — gehra, thoda bold */
.footer .section-index,
.footer .kicker,
.footer__col h4,
.footer__col span:first-child {
  color: #3f2d18;
  font-weight: 600;
}

.footer__bottom,
.footer__bottom span,
.footer__bottom a { color: rgba(42, 30, 18, 0.66); }

/* divider lines footer ke andar */
.footer hr,
.footer .rule,
.footer__top,
.footer__bottom { border-color: rgba(58, 42, 26, 0.22); }

/* ---- bada watermark wordmark — ab CLEARLY dikhega ---- */
/* Pehle ye light rang ka tha dark footer par, isliye gayab tha. Ab gehra
   brown hai light brown background par. */
.footer__wordmark,
.footer__watermark,
.footer__brand-big,
.footer .wordmark {
  color: rgba(42, 30, 18, 0.16);
  -webkit-text-fill-color: rgba(42, 30, 18, 0.16);
  background: none;
  opacity: 1;
}

/* ---- logo mark image ---- */
.footer .brand__mark,
.footer .logo img {
  height: 44px;
  width: auto;
  opacity: 1;
  filter: none;
}

@media (max-width: 760px) {
  .footer .brand__mark, .footer .logo img { height: 34px; }
}

/* ===========================================================================
   FOOTER — ASLI CLASS NAAM KE SAATH FIX

   Pichhli baar maine .footer h3 / .footer h4 / .footer__col target kiye the —
   wo classes site me hain hi nahi. Asli naam ye hain:
     .footer__word    = bada watermark wordmark
     .footer__column strong = column ka heading (SHOP / CARE / LEGAL / CONTACT)
     .footer__column a      = links
     .footer__brand p       = brand ke neeche ka paragraph
   --------------------------------------------------------------------------- */

/* bada watermark — light brown par gehra brown, ab saaf dikhega */
.footer__word {
  color: rgba(42, 30, 18, 0.17);
  -webkit-text-fill-color: rgba(42, 30, 18, 0.17);
  background: none;
  opacity: 1;
}

/* column headings */
.footer__column strong {
  color: #3b2a16;
  font-weight: 700;
}

/* links aur baaki text */
.footer__column a,
.footer__column span { color: rgba(42, 30, 18, 0.8); }
.footer__column a:hover { color: #14100a; }

.footer__brand p { color: rgba(42, 30, 18, 0.78); }

.footer__staff { color: rgba(42, 30, 18, 0.62); }
.footer__staff:hover { color: #14100a; }

.footer__bottom { border-top-color: rgba(58, 42, 26, 0.24); }

/* ===========================================================================
   LOGO FADE KA ASLI KAARAN — mix-blend-mode: screen

   Upar line ~1137 par ye hai:
       .brand__mark, .loader__mark { mix-blend-mode: screen; }

   "screen" blend dark background par logo ko chamka deta hai — dark theme ke
   liye bilkul sahi tha. Par light background par screen blend har cheez ko
   lagbhag SAFED kar deta hai, isliye logo gayab jaisa lag raha tha.

   Light theme me blend normal chahiye — image apne asli rang me dikhe.
   --------------------------------------------------------------------------- */
.brand__mark,
.loader__mark,
.footer .brand__mark {
  mix-blend-mode: normal;
  background: transparent;
  opacity: 1;
  filter: none;
}

/* header ka logo thoda bada aur crisp */
.nav .brand__mark { height: 46px; width: auto; min-height: 0; min-width: 0; }

/* loader ka mark bhi normal blend par — wahan bhi background cream hai */
.loader__mark { opacity: 1; }

/* ---------------------------------------------------------------------------
   Hero ka logo watermark hata diya.

   Wo daayein taraf ek halka gulaabi chokor ki tarah dikh raha tha — lagta tha
   galti se koi image reh gayi hai. Gold ka soft vritt aur wordmark ke neeche
   ki line hi kaafi hai, hero ab khali nahi lagta.
   --------------------------------------------------------------------------- */
.hero__sticky::after { content: none; display: none; }

@media (max-width: 760px) {
  .nav .brand__mark { height: 34px; }
}

/* ===========================================================================
   HERO — LOGO MARK WAPAS, AUR SAAF DIKHTA HUA

   Pehle maine ise hata diya tha (samajh baitha tha ki galti se aa gaya).
   Chahiye tha ki dikhe. Ab wapas hai, par 9% ki jagah 55% opacity par aur
   multiply blend ke saath — multiply se image cream background par naturally
   baith jaati hai, dhoyi hui nahi lagti.
   --------------------------------------------------------------------------- */
.hero__sticky::after {
  content: "";
  display: block;
  position: absolute;
  right: 5%;
  bottom: 8%;
  width: clamp(96px, 13vw, 190px);
  aspect-ratio: 3 / 4;
  background: url("../media/logo-mark-t.png") center / contain no-repeat;
  opacity: 0.55;
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}

/* ===========================================================================
   WORDMARK — TEXTURE + SMOKE

   Plain gold text flat lag raha tha. Ab teen layer hain, sab text ke andar
   hi clip hoti hain (background-clip: text):

     1. sprinkles  — chhote chamakte kan, jaise sone par chamak
     2. brushed    — tirchi patli lakeerein, dhaatu ke brush finish jaisa
     3. gold       — asli gradient, gehra sona upar se halka neeche

   Aur peeche ek smoke layer hai jo dheere-dheere sarakti hai.
   --------------------------------------------------------------------------- */
.hero h1.hero__brand-title {
  position: absolute;                 /* pehle se hai, pseudo ke liye zaroori */
  background-color: transparent;
  background-image:
    /* 1. sprinkles */
    repeating-radial-gradient(circle at 0 0, rgba(255, 252, 240, 0.55) 0 0.9px, transparent 1.2px 8px),
    repeating-radial-gradient(circle at 4px 6px, rgba(255, 248, 225, 0.32) 0 0.7px, transparent 1px 11px),
    /* 2. brushed metal streaks */
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.17) 0 2px, transparent 2px 10px),
    /* 3. gold base */
    linear-gradient(168deg, #6a4c12 3%, #a9852f 42%, #d0aa63 78%, #8c6c22 100%);
  background-size: 8px 8px, 12px 12px, auto, auto;
  background-repeat: repeat, repeat, repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* halki gehraai — sona uthaa hua lage */
  filter: drop-shadow(0 2px 1px rgba(90, 66, 18, 0.18));
}

/* smoke — wordmark ke peeche, dheere sarakti hui */
.hero h1.hero__brand-title::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 128%;
  height: 230%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44% 38% at 26% 52%, rgba(140, 108, 34, 0.20), transparent 70%),
    radial-gradient(38% 34% at 62% 44%, rgba(198, 166, 96, 0.18), transparent 72%),
    radial-gradient(34% 30% at 84% 58%, rgba(109, 47, 94, 0.10), transparent 74%);
  filter: blur(30px);
  animation: wordmarkSmoke 22s ease-in-out infinite alternate;
}

@keyframes wordmarkSmoke {
  from { transform: translate(-50%, -50%) scale(1) translateX(-1.5%); opacity: 0.85; }
  to   { transform: translate(-50%, -50%) scale(1.12) translateX(2%);  opacity: 1; }
}

/* reduced motion on ho to smoke rukni chahiye */
@media (prefers-reduced-motion: reduce) {
  .hero h1.hero__brand-title::before { animation: none; }
}

@media (max-width: 760px) {
  .hero__sticky::after { width: 84px; right: 3%; bottom: 5%; opacity: 0.45; }
  .hero h1.hero__brand-title { background-size: 6px 6px, 9px 9px, auto, auto; }
  .hero h1.hero__brand-title::before { filter: blur(20px); width: 118%; }
}

/* ===========================================================================
   LOGO KA ASLI PROBLEM — PNG KA BACKGROUND KAALA THA

   `logo-mark.png` me background transparent nahi, SOLID KAALA tha (alpha 255,
   RGB 0,0,0). Isi wajah se purane code me `mix-blend-mode: screen` lagaya
   gaya tha — dark theme par screen blend kaale ko gayab kar deta hai, to
   logo saaf dikhta tha.

   Light theme par wahi kaala background grey chokor ban ke dikhne laga
   (philosophy section me). Aur screen blend lagane par poora logo dhul
   ke safed ho jaata tha. Dono taraf se fanse hue the.

   HAL: naya file banaya — `logo-mark-t.png`. Usme har pixel ki brightness ko
   alpha me badal diya (jitna chamkeela, utna opaque). Ab background asli
   transparent hai, to kisi blend hack ki zaroorat nahi. Purani file waise
   hi padi hai, backup ke liye.
   --------------------------------------------------------------------------- */
.brand__mark,
.loader__mark,
.footer .brand__mark,
.nav .brand__mark {
  mix-blend-mode: normal;
  background: transparent;
  opacity: 1;
  filter: none;
}

/* philosophy section ka watermark — ab saaf, bina chokor */
.manifesto.philosophy::after {
  opacity: 0.16;
  mix-blend-mode: normal;
}

/* hero ka watermark */
.hero__sticky::after {
  opacity: 0.5;
  mix-blend-mode: normal;
}

@media (max-width: 760px) {
  .manifesto.philosophy::after { opacity: 0.12; }
  .hero__sticky::after { opacity: 0.42; }
}

/* ===========================================================================
   QUICK VIEW — BACK BUTTON

   Mobile par log X dhoondhne ki jagah Back dabate hain. Browser ka Back ab
   sahi kaam karta hai (JS me handle kiya), aur saath me ye dikhne wala
   button bhi hai taaki saaf pata chale ki wapas kaise jaana hai.

   Desktop par upar-baayein, X ke saamne. Mobile par neeche chipka hua, jahan
   ungooth aaram se pahunchta hai.
   --------------------------------------------------------------------------- */
.modal__back {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  color: var(--ink);
  background: rgba(255, 253, 249, 0.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.modal__back span { font-size: 0.95rem; line-height: 1; }
.modal__back:hover {
  color: #fffdf9;
  background: var(--gold);
  border-color: var(--gold);
}
.modal__back:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 760px) {
  /* mobile par neeche chipka do — ungooth ki pahunch me */
  .modal__back {
    top: auto;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    padding: 11px 24px;
    font-size: 0.8rem;
    box-shadow: 0 6px 20px rgba(27, 22, 17, 0.18);
  }
  /* content ke neeche jagah chhodo taaki button kisi cheez ko na dhake */
  #modalCard .modal__content { padding-bottom: 62px; }
}

/* ===========================================================================
   ==============  STORE LAYOUT  (reference site jaisa)  =====================
   ===========================================================================
   Topbar, header, hero slider, promo row, promo banners, categories,
   video section. Purane premium-editorial rules ko ye block override karta
   hai kyunki file ke END me hai.
   --------------------------------------------------------------------------- */

/* ---- TOPBAR ---- */
.topbar {
  position: relative;
  z-index: 60;
  background: #1b1611;
  color: rgba(247, 243, 236, 0.86);
  font-size: 0.74rem;
}
.topbar__in {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar__left { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.topbar__sep { width: 1px; height: 12px; background: rgba(247, 243, 236, 0.3); }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--gold-light); }
.topbar__right { display: flex; align-items: center; gap: 12px; }
.topbar__right svg { width: 16px; height: 16px; display: block; }

/* ---- HEADER ---- */
.shop-layout .nav {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 3vw, 44px);
  padding: 12px clamp(14px, 3vw, 46px);
  min-height: 74px;
  background: rgba(255, 253, 249, 0.95);
  border-bottom: 1px solid var(--line);
}
.shop-layout .nav__links {
  justify-content: center;
  gap: clamp(16px, 2.4vw, 34px);
}
.shop-layout .nav__links a {
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--muted);
}
.shop-layout .nav__links a[aria-current="page"] { color: var(--gold); }

.account-button, .bag-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.account-button svg, .bag-button svg { width: 18px; height: 18px; }
.account-button:hover, .bag-button:hover { border-color: var(--gold); color: var(--gold); }
.bag-button { background: var(--ink); color: #fffdf9; border-color: var(--ink); }
.bag-button:hover { background: var(--gold); border-color: var(--gold); color: #fffdf9; }
.bag-button__count {
  min-width: 20px; height: 20px;
  display: grid; place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold-light);
  color: #1b1611;
  font-size: 0.68rem;
  font-weight: 700;
}
.bag-button:hover .bag-button__count { background: #fffdf9; color: var(--gold); }

/* ---- HERO SLIDER ---- */
.hero--slider, .hero--slider .hero__sticky {
  height: auto;
  min-height: clamp(400px, 56vh, 560px);
  position: relative;
  overflow: hidden;
}
.hero--slider::before, .hero--slider::after { content: none; }
.hero--slider .hero__sticky::before, .hero--slider .hero__sticky::after { content: none; }
.hero--slider .hero__shade { display: none; }

.hslider { position: relative; height: 100%; }

.hslide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(16px, 3vw, 50px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  background:
    radial-gradient(70% 62% at 12% 10%, rgba(140, 108, 34, 0.12), transparent 62%),
    linear-gradient(120deg, #fffdf8 0%, #f4eee2 58%, #ebe2d1 100%);
}
.hslide.is-active { opacity: 1; visibility: visible; }

.hslide__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.hslide__eyebrow {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hslide h1 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: normal;
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
}
.hslide h1 em { font-style: italic; color: var(--gold); }
.hslide h1::before, .hslide h1::after { content: none; }
.hslide p { margin: 0; max-width: 48ch; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.hslide__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.hslide__media { position: relative; height: 100%; display: grid; place-items: center; }
.hslide__media img {
  max-width: 88%;
  max-height: 84%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 22px 54px rgba(27, 22, 17, 0.2);
}

.hslider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 253, 249, 0.9);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.hslider__arrow:hover { background: var(--gold); border-color: var(--gold); color: #fffdf9; }
.hslider__arrow--prev { left: 12px; }
.hslider__arrow--next { right: 12px; }

.hslider__dots {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex; gap: 7px;
}
.hslider__dots button {
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: transparent;
  cursor: pointer;
}
.hslider__dots button.is-active { background: var(--gold); border-color: var(--gold); }

/* ---- TRUST BADGES (numbered) ---- */
.assure__row article { position: relative; padding-top: 4px; }
.assure__num {
  position: absolute;
  top: 0; left: 46px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
}
.assure h3 { font-family: var(--sans, inherit); font-size: 1rem; font-weight: 700; letter-spacing: 0; }

/* ---- SECTION HEAD (prow__head) ---- */
.prow__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  flex-wrap: wrap;
  padding-bottom: 13px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--line);
}
.prow__head h2 {
  margin: 0;
  font-family: var(--sans, inherit);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
  position: relative;
}
.prow__head h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -14px;
  width: 100%; height: 2px;
  background: var(--gold);
}
.prow__tabs { display: flex; gap: clamp(10px, 1.6vw, 22px); }
.prow__tab {
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted-2);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.prow__tab.is-active, .prow__tab:hover { color: var(--gold); }
.prow__count { color: var(--muted-2); font-size: 0.74rem; }
.prow__nav { margin-left: auto; display: flex; gap: 7px; }
.prow__arrow {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.prow__arrow:hover { border-color: var(--gold); color: var(--gold); }

/* ---- PROMO ROW ---- */
.prow { padding-block: clamp(40px, 5vw, 66px); }
.prow__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(196px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.prow__track::-webkit-scrollbar { display: none; }

/* ---- PRODUCT CARD (promo row) ---- */
.pcard { scroll-snap-align: start; display: flex; flex-direction: column; gap: 7px; }
.pcard__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: #14110f;
  cursor: pointer;
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.pcard__media:hover img { transform: scale(1.05); }

.pcard__off,
.pcard__new {
  position: absolute;
  top: 9px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fffdf9;
}
.pcard__off { left: 9px; background: var(--brand-magenta); }
.pcard__new { right: 9px; background: var(--gold); text-transform: uppercase; font-size: 0.6rem; }

.pcard__name {
  margin: 2px 0 0;
  font-family: var(--sans, inherit);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.pcard__cat { color: var(--muted-2); font-size: 0.72rem; }
.pcard__price { display: flex; align-items: baseline; gap: 8px; }
.pcard__price s { color: var(--muted-2); font-size: 0.78rem; }
.pcard__price b { color: var(--ink); font-size: 0.95rem; font-weight: 700; }

.pcard__add {
  margin-top: 4px;
  padding: 9px 12px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.pcard__add:hover { background: var(--gold); border-color: var(--gold); color: #fffdf9; }

/* grid ke card par bhi discount badge (JS se inject hota hai) */
.product-card__media { position: relative; }

/* ---- PROMO BANNERS ---- */
.promos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(13px, 1.8vw, 24px);
  padding-block: clamp(8px, 1.5vw, 20px) clamp(40px, 5vw, 66px);
}
.promo {
  position: relative;
  min-height: clamp(210px, 24vw, 280px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 6px;
  padding: clamp(20px, 2.6vw, 38px);
}
.promo--deep { background: linear-gradient(120deg, #17301f 0%, #0f2417 100%); }
.promo--warm { background: linear-gradient(120deg, #c9762e 0%, #a75a20 100%); }

.promo__copy { position: relative; z-index: 2; max-width: 56%; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.promo__copy span { color: rgba(255, 253, 249, 0.8); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.promo__copy h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.2rem); color: #fffdf9; font-weight: 400; }
.promo__copy p { margin: 0; color: rgba(255, 253, 249, 0.8); font-size: 0.82rem; line-height: 1.55; }
.promo__btn {
  margin-top: 5px;
  padding: 10px 20px;
  border: 0;
  border-radius: 3px;
  background: #b3202c;
  color: #fffdf9;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.promo__btn:hover { background: #8e161f; }
.promo img {
  position: absolute;
  right: -4%;
  bottom: -6%;
  width: 52%;
  max-height: 118%;
  object-fit: contain;
  z-index: 1;
}

/* ---- POPULAR CATEGORIES ---- */
.cats .cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cat-card { aspect-ratio: 1 / 1; border-radius: 5px; }
.cat-card__copy { padding: 13px 14px; }
.cat-card__copy b { font-family: var(--sans, inherit); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cat-card__copy b::after { display: none; }

/* ---- VIDEO SECTION ---- */
.vids { padding-block: clamp(34px, 4.4vw, 60px); }
.vid-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.7vw, 22px); }
.vid-card { margin: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #14110f; }
.vid-card video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.vid-card figcaption {
  padding: 11px 14px 13px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
}

/* ---- MOBILE ---- */
@media (max-width: 980px) {
  .cats .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vid-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .promos { grid-template-columns: 1fr; }
  .promo__copy { max-width: 62%; }
}
@media (max-width: 760px) {
  .topbar { font-size: 0.68rem; }
  .topbar__left span { display: none; }
  .topbar__sep { display: none; }

  .shop-layout .nav { grid-template-columns: auto 1fr auto; min-height: 62px; padding: 9px 12px; }
  .account-button span { display: none; }
  .account-button { padding: 8px 10px; }
  .bag-button__label { display: none; }
  .bag-button { padding: 8px 12px; }

  .hslide { grid-template-columns: 1fr; align-content: center; padding-block: 26px 58px; }
  .hslide__media { order: -1; height: 180px; }
  .hslide__media img { max-height: 100%; max-width: 74%; }
  .hslide h1 { font-size: clamp(1.55rem, 7vw, 2.1rem); max-width: none; }
  .hslide p { font-size: 0.85rem; }
  .hslider__arrow { width: 34px; height: 34px; font-size: 1.15rem; }

  .prow__head { gap: 10px; }
  .prow__head h2 { font-size: 0.95rem; width: 100%; }
  .prow__nav { display: none; }
  .prow__track { grid-auto-columns: minmax(150px, 1fr); gap: 11px; }

  .cats .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vid-grid { grid-template-columns: 1fr; }
  .promo { min-height: 190px; }
  .promo__copy { max-width: 70%; }
}

/* ===========================================================================
   FIX 1 — IMAGES KAT RAHI THI

   Kaaran: `object-fit: cover` tha. Cover dabbe ko poora bharta hai aur jo
   bahar nikle use KAAT deta hai.

   Do tarah ki photos hain:
     - 79 AI images  → square (890x890)
     - 22 asli photos → portrait (lambi)

   Square dabbe me portrait photo cover se daalo to upar-neeche se kat jaati
   hai — bottle ka cap ya base gayab. Wahi dikh raha tha.

   Hal: `object-fit: contain`. Contain poori image andar fit karta hai, ek
   pixel nahi katta. Bachi hui jagah par dabbe ka DARK background dikhta hai,
   jo photos ke background se milta hai — isliye khaali jagah nazar hi nahi
   aati.
   --------------------------------------------------------------------------- */

/* collection grid ka card */
.product-card__media {
  aspect-ratio: 1 / 1;          /* 4/5 tha — square photo usme katti thi */
  background: #14110f;
  padding: 6px;
}
.product-card__media img,
.product-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* promo row ka card */
.pcard__media { padding: 6px; }
.pcard__media img { object-fit: contain; }
.pcard__media:hover img { transform: scale(1.04); }

/* quick view */
#modalCard .modal__media > img { object-fit: contain; }

/* category tiles — inme square photos hain, cover se katti nahi.
   Par jahan portrait photo hai wahan safe rehne ke liye contain. */
.cat-card img { object-fit: contain; padding: 4px; }
.cat-card { background: #14110f; }

/* hero slider ki image pehle se contain hai, bas thoda padding */
.hslide__media img { object-fit: contain; }

/* promo banner ki image */
.promo img { object-fit: contain; }

/* ===========================================================================
   FIX 2 — MOBILE
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* ---- topbar: chhota, ek line me ---- */
  .topbar__in { min-height: 34px; }
  .topbar__left { gap: 9px; }
  .topbar__left a { font-size: 0.7rem; }

  /* ---- header ---- */
  .shop-layout .nav {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 9px 12px;
    min-height: 58px;
  }
  /* nav links mobile par burger menu me jaate hain, header me nahi */
  .shop-layout .nav__links { order: 3; }
  .nav__actions { gap: 8px; }

  /* ---- hero slider ---- */
  .hero--slider, .hero--slider .hero__sticky { min-height: 0; }
  .hslide {
    position: relative;
    display: block;
    padding: 18px 0 42px;
  }
  /* mobile par slides ek ke upar ek stack nahi karni — sirf active dikhe */
  .hslide { display: none; }
  .hslide.is-active { display: block; }

  .hslide__media { height: 210px; margin-bottom: 14px; }
  .hslide__media img { max-height: 210px; max-width: 68%; }
  .hslide__copy { align-items: center; text-align: center; gap: 10px; }
  .hslide h1 { max-width: none; font-size: clamp(1.5rem, 7.4vw, 2rem); }
  .hslide p { font-size: 0.84rem; max-width: 40ch; }
  .hslide__cta { justify-content: center; width: 100%; }
  .hslide__cta .button { flex: 1 1 auto; justify-content: center; text-align: center; }

  .hslider__arrow { width: 32px; height: 32px; font-size: 1.1rem; top: 96px; }
  .hslider__arrow--prev { left: 6px; }
  .hslider__arrow--next { right: 6px; }
  .hslider__dots { bottom: 10px; }

  /* ---- trust badges ---- */
  .assure__row article { padding-top: 0; padding-left: 0; }
  .assure__num { position: static; display: inline; margin-right: 5px; }
  .assure__ico { display: none; }          /* mobile par jagah bachao */
  .assure h3 { font-size: 0.92rem; }
  .assure p { font-size: 0.78rem; }

  /* ---- section heads ---- */
  .prow__head { padding-bottom: 10px; margin-bottom: 16px; }
  .prow__head h2 { width: 100%; font-size: 0.9rem; letter-spacing: 0.06em; }
  .prow__head h2::after { bottom: -11px; }
  .prow__tabs { gap: 14px; }
  .prow__tab { font-size: 0.68rem; }
  .prow__count { display: none; }

  /* ---- promo row: do card dikhein, teesra jhaanke ---- */
  .prow { padding-block: 30px; }
  .prow__track { grid-auto-columns: 42vw; gap: 10px; }
  .pcard__name { font-size: 0.8rem; }
  .pcard__price b { font-size: 0.88rem; }
  .pcard__add { padding: 8px 10px; font-size: 0.68rem; }
  .pcard__off, .pcard__new { font-size: 0.6rem; padding: 4px 7px; }

  /* ---- promo banners: image overlap ho raha tha ---- */
  .promos { padding-block: 4px 30px; gap: 11px; }
  .promo { min-height: 0; padding: 18px; display: block; }
  .promo__copy { max-width: 100%; }
  .promo__copy h3 { font-size: 1.4rem; }
  .promo__copy p { font-size: 0.78rem; }
  /* image ko absolute se hata ke neeche le aaye — overlap khatam */
  .promo img {
    position: static;
    width: 100%;
    max-height: 150px;
    margin-top: 14px;
  }

  /* ---- collection grid ---- */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* ---- categories ---- */
  .cats { padding-block: 30px; }
  .cats .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cat-card__copy { padding: 10px 11px; }
  .cat-card__copy b { font-size: 0.74rem; }

  /* ---- videos: 4/5 mobile par bahut lambi ho rahi thi ---- */
  .vids { padding-block: 26px; }
  .vid-grid { grid-template-columns: 1fr; gap: 11px; }
  .vid-card video { aspect-ratio: 16 / 10; }
  .vid-card figcaption { padding: 9px 12px 11px; font-size: 0.76rem; }

  /* ---- baaki sections ka spacing ---- */
  .craft, .ritual, .gift, .newsletter { padding-block: 34px; }
}

/* ---- 400px se chhoti screen ---- */
@media (max-width: 400px) {
  .prow__track { grid-auto-columns: 58vw; }
  .product-grid { gap: 8px; }
  .hslide__media { height: 170px; }
  .hslide__media img { max-height: 170px; max-width: 76%; }
}

/* ===========================================================================
   MOBILE CLEANUP — BACK BUTTON, COLLISIONS, SPACING
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. BACK BUTTON BEECH ME AA RAHA THA

   Kaaran: maine use `position: absolute; bottom: 12px` diya tha, aur
   #modalCard khud scroll hota hai (`overflow-y: auto`). Scrolling dabbe ke
   andar absolute element uske POORE content ke hisaab se baithta hai, screen
   ke hisaab se nahi — isliye wo content ke beech me kahin atak jaata tha.

   Hal: neeche se hata ke UPAR-BAAYEIN kar diya, jahan wo scroll ke saath
   nahi bhatakta. X button upar-daayein hai, to dono takraate bhi nahi.
   --------------------------------------------------------------------------- */
.modal__back {
  position: absolute;
  top: 12px;
  left: 12px;
  bottom: auto;
  transform: none;
  z-index: 8;
}

@media (max-width: 760px) {
  .modal__back {
    top: 10px;
    left: 10px;
    bottom: auto;
    transform: none;
    padding: 9px 16px;
    font-size: 0.74rem;
    box-shadow: 0 4px 14px rgba(27, 22, 17, 0.14);
  }
  /* neeche ka extra padding ab zaroori nahi — button upar chala gaya */
  #modalCard .modal__content { padding-bottom: 24px; }
  /* image ke upar do button aa rahe hain, to media ko thodi upar se jagah */
  #modalCard .modal__media { padding-top: 54px; }
}

/* ---------------------------------------------------------------------------
   2. MOBILE — SAANS LENE KI JAGAH
   Client ne kaha bhara-bhara lag raha hai. Har jagah spacing badhayi hai aur
   jo cheezein ek doosre se chipak rahi thi unhe alag kiya hai.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* ---- section ke beech khuli jagah ---- */
  .assure { padding-block: 26px; }
  .prow { padding-block: 34px; }
  .collection { padding-block: 30px 36px; }
  .cats { padding-block: 34px; }
  .promos { padding-block: 6px 34px; gap: 14px; }
  .craft, .ritual, .gift, .reviews, .newsletter { padding-block: 38px; }
  .shell { padding-inline: 16px; }

  /* ---- promo row: card bade karo taaki naam aur button na chipke ---- */
  .prow__track { grid-auto-columns: 56vw; gap: 13px; }
  .pcard { gap: 9px; }
  .pcard__name { font-size: 0.84rem; line-height: 1.35; min-height: 2.4em; }
  .pcard__cat { font-size: 0.7rem; }
  .pcard__price { gap: 7px; }
  .pcard__add { margin-top: 6px; padding: 10px 12px; font-size: 0.7rem; }

  /* ---- collection grid: card ke andar saans ---- */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .product-card { padding-bottom: 12px; }
  .product-card__body,
  .product-card__meta { padding-inline: 10px; }
  .product-card__name { margin-top: 9px; line-height: 1.3; }
  .product-card__price { margin-top: 5px; }

  /* card ke andar ka Add button — image se chipak raha tha */
  .product-card .button,
  .product-card__add {
    margin: 10px 10px 0;
    width: calc(100% - 20px);
    justify-content: center;
  }

  /* discount badge image ke kone me hi rahe, kisi text par na chadhe */
  .pcard__off, .pcard__new { top: 7px; font-size: 0.58rem; padding: 4px 6px; }
  .pcard__off { left: 7px; }
  .pcard__new { right: 7px; }

  /* ---- hero slider: buttons ek doosre par chadh rahe the ---- */
  .hslide { padding: 16px 0 46px; }
  .hslide__cta { flex-direction: column; gap: 9px; width: 100%; }
  .hslide__cta .button { width: 100%; padding-block: 12px; }
  .hslide__media { height: 190px; margin-bottom: 16px; }
  .hslide__media img { max-height: 190px; }

  /* arrows image ke level par, text se door */
  .hslider__arrow { top: 105px; }

  /* ---- trust badges: teen block alag-alag saaf ---- */
  .assure__row { gap: 22px; }
  .assure__row article { display: block; }
  .assure__row article + article { padding-top: 20px; }
  .assure h3 { margin-bottom: 5px; }

  /* ---- categories ---- */
  .cats .cat-grid { gap: 11px; }

  /* ---- section heading aur tabs ek line par chipak rahe the ---- */
  .prow__head { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 12px; }
  .prow__head h2 { margin-bottom: 4px; }
  .prow__head h2::after { bottom: -13px; }
  .prow__tabs { gap: 16px; }
  .filter-row { width: 100%; margin-bottom: 0; }
  .filter-select { width: 100%; }

  /* ---- floating social dock quick-view button ko dhak raha tha ---- */
  .social-dock { bottom: 14px; right: 12px; }
}

/* ---- 400px se chhoti screen ---- */
@media (max-width: 400px) {
  .prow__track { grid-auto-columns: 66vw; }
  .product-grid { gap: 11px; }
  .shell { padding-inline: 13px; }
  .hslide__media { height: 165px; }
  .hslide__media img { max-height: 165px; }
  .hslider__arrow { top: 92px; }
}

/* ===========================================================================
   MOBILE — HEADER OVERLAP + HERO ORDER + ARROWS
   --------------------------------------------------------------------------- */

@media (max-width: 760px) {

  /* -------------------------------------------------------------------------
     1. SIGN IN button logo ke upar chadh raha tha

     Kaaran: header ek 3-COLUMN grid hai (brand | nav__links | nav__actions).
     Mobile par maine columns 2 kar diye the, par children teen hi rahe —
     to teesra bachcha doosri row me chala gaya aur logo ke upar aa gaya.

     Hal: mobile par grid chhod ke FLEX. Flex me jitne children ho, sab ek
     line me baith jaate hain. nav__links apna burger menu waala positioning
     khud sambhaal leta hai.
     ------------------------------------------------------------------------- */
  .shop-layout .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    min-height: 56px;
  }
  .shop-layout .brand { flex: 0 1 auto; min-width: 0; }
  .brand__name { font-size: 0.98rem; letter-spacing: 0.02em; }
  .nav .brand__mark { height: 30px; }

  .nav__actions { flex: 0 0 auto; gap: 7px; }

  /* text hata do, sirf icon — jagah bahut kam hai */
  .account-button span,
  .bag-button__label { display: none; }
  .account-button { padding: 8px 9px; border-radius: 50%; }
  .bag-button { padding: 8px 11px; gap: 6px; }

  /* -------------------------------------------------------------------------
     2. HERO — image pehle, phir text

     `display: block` kar diya tha, usse grid/flex ka `order` kaam karna band
     ho gaya aur image text ke NEECHE chali gayi. Ab flex column hai, to
     image upar aa jaati hai.
     ------------------------------------------------------------------------- */
  .hslide {
    display: none;
  }
  .hslide.is-active {
    display: flex;
    flex-direction: column;
    padding: 14px 0 46px;
  }
  .hslide__media {
    order: -1;
    height: 200px;
    margin: 0 0 16px;
  }
  .hslide__media img { max-height: 200px; max-width: 70%; }

  /* -------------------------------------------------------------------------
     3. ARROWS text ke upar aa rahe the — ab image ke level par

     Image 14px se shuru hoti hai aur 200px lambi hai, to uska beech
     lagbhag 114px par padta hai.
     ------------------------------------------------------------------------- */
  .hslider__arrow {
    top: 114px;
    width: 34px;
    height: 34px;
    font-size: 1.15rem;
    background: rgba(255, 253, 249, 0.94);
    box-shadow: 0 2px 10px rgba(27, 22, 17, 0.12);
  }
  .hslider__arrow--prev { left: 8px; }
  .hslider__arrow--next { right: 8px; }

  /* -------------------------------------------------------------------------
     4. DO BUTTON ki jagah EK

     Mobile par "Buy now" aur "Shop all attars" dono poori width le rahe the
     aur screen bhar ja rahi thi. Ek hi kaafi hai — Buy now.
     Desktop par dono waise hi rahenge.
     ------------------------------------------------------------------------- */
  .hslide__cta .button--outline { display: none; }
  .hslide__cta { flex-direction: column; width: 100%; }
  .hslide__cta .button--solid { width: 100%; padding-block: 13px; }

  /* text center me, thoda tight */
  .hslide__copy { align-items: center; text-align: center; gap: 9px; }
  .hslide h1 { font-size: clamp(1.45rem, 6.8vw, 1.85rem); line-height: 1.12; }
  .hslide p { font-size: 0.82rem; line-height: 1.55; }
  .hslide__eyebrow { font-size: 0.64rem; }

  .hslider__dots { bottom: 12px; }
}

@media (max-width: 400px) {
  .hslide__media { height: 172px; }
  .hslide__media img { max-height: 172px; max-width: 76%; }
  .hslider__arrow { top: 100px; width: 31px; height: 31px; }
  .brand__name { font-size: 0.9rem; }
  .nav .brand__mark { height: 27px; }
}

/* ===========================================================================
   ==================  DARK THEME — WAPAS BLACK  =============================
   ===========================================================================

   Client ko off-white ke baad wapas black chahiye tha.

   Light theme ke blocks (line ~2573 se aage) ko HATAYA nahi hai — kyunki unme
   layout ka kaam bhi mila hua hai (store layout, mobile fixes, image contain).
   Sirf unke RANG ko yahan se palat diya gaya hai. Ye block file ke sabse
   aakhir me hai, to CSS ke niyam se yahi jeetta hai.

   Wapas light karna ho to bas ye poora block hata dena, kuch aur chhedne ki
   zaroorat nahi.

   Product photos ke dark background is theme me faayda hai — ab tile aur
   photo ka background ek jaisa hai, koi chokor nazar nahi aata.
   --------------------------------------------------------------------------- */

:root {
  --bg: #070707;
  --bg-soft: #0c0c0d;
  --surface: #131212;
  --surface-2: #181616;

  --ink: #faf7f2;
  --muted: #c9c3b8;
  --muted-2: #9c958a;

  /* dark par gold chamak sakta hai, gehra karne ki zaroorat nahi */
  --gold: #c9a45f;
  --gold-light: #e2bd62;

  --line: rgba(243, 238, 229, 0.11);
  --gold-line: rgba(226, 189, 98, 0.30);
  --accent-line: rgba(216, 27, 116, 0.32);

  --brand-blush: #e9aeba;
}

html, body { background: var(--bg); color: var(--ink); }

/* ---- page texture ---- */
body::before {
  background:
    radial-gradient(60% 44% at 10% 6%,  rgba(226, 189, 98, 0.07), transparent 62%),
    radial-gradient(52% 38% at 90% 20%, rgba(216, 27, 116, 0.05), transparent 66%),
    radial-gradient(70% 48% at 50% 100%, rgba(226, 189, 98, 0.05), transparent 70%);
}
body::after {
  opacity: 0.4;
  background-image:
    repeating-linear-gradient(45deg, rgba(243, 238, 229, 0.02) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(243, 238, 229, 0.014) 0 1px, transparent 1px 5px);
}

::selection { color: #090909; background: var(--gold-light); }

/* ---- loader ---- */
.loader { background: #070707; }
.loader__brand, .loader__name { color: var(--ink); }
.loader__tag { color: var(--muted); }
.loader__name .brand-cap { color: var(--gold-light); }

/* ---- topbar ---- */
.topbar {
  background: #000;
  color: rgba(243, 238, 229, 0.82);
  border-bottom: 1px solid var(--line);
}
.topbar__sep { background: rgba(243, 238, 229, 0.24); }
.topbar a:hover { color: var(--gold-light); }

/* ---- header ---- */
.nav {
  background: rgba(7, 7, 7, 0.88);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav.is-scrolled {
  background: rgba(7, 7, 7, 0.97);
  border-bottom-color: var(--gold-line);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}
.shop-layout .nav { background: rgba(9, 9, 9, 0.95); }
.nav__links a { color: var(--muted); }
.nav__links a:hover { color: var(--ink); }
.shop-layout .nav__links a { color: var(--muted); }
.shop-layout .nav__links a[aria-current="page"] { color: var(--gold-light); }
.logo, .brand__name, .nav__logo { color: var(--ink); }
.menu-button span { background: var(--ink); }

/* ---- buttons ---- */
.button--solid { color: #090909; background: var(--gold-light); }
.button--solid:hover { color: #090909; background: var(--ink); }
.button--outline { color: var(--ink); border-color: var(--gold-line); background: transparent; }
.button--outline:hover { color: #090909; background: var(--gold-light); border-color: var(--gold-light); }

.account-button {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
}
.account-button:hover { color: #090909; background: var(--gold-light); border-color: var(--gold-light); }

.cart-button, .icon-button { color: var(--ink); }
.cart-button { border-color: var(--line); }
.cart-button:hover { border-color: var(--gold-line); }
.cart-button__count { color: #090909; background: var(--gold-light); }
.icon-button:hover { color: var(--gold-light); }

.bag-button { background: var(--gold-light); color: #090909; border-color: var(--gold-light); }
.bag-button:hover { background: var(--ink); border-color: var(--ink); color: #090909; }
.bag-button__count { background: #090909; color: var(--gold-light); }
.bag-button:hover .bag-button__count { background: #090909; color: var(--ink); }

/* ---- hero ---- */
.hero { background: var(--bg); }
.hero::before {
  background:
    radial-gradient(66% 58% at 8% 4%,   rgba(226, 189, 98, 0.13), transparent 60%),
    radial-gradient(46% 40% at 28% 34%, rgba(201, 164, 95, 0.09), transparent 66%),
    radial-gradient(54% 46% at 92% 14%, rgba(216, 27, 116, 0.08), transparent 64%),
    radial-gradient(86% 44% at 50% 104%, rgba(226, 189, 98, 0.07), transparent 70%),
    linear-gradient(168deg, #0d0c0b 0%, #090909 48%, #050505 100%);
}
.hero::after {
  opacity: 0.32;
  background-image:
    repeating-linear-gradient(48deg,  rgba(243, 238, 229, 0.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-48deg, rgba(243, 238, 229, 0.016) 0 1px, transparent 1px 5px);
}
.hero__shade {
  background: linear-gradient(180deg, transparent 0%, transparent 62%, rgba(5, 5, 5, 0.72) 86%, var(--bg) 100%);
}
.hero__intro p, .hero__end p { color: var(--muted); }
.hero__intro .kicker { color: var(--gold-light); }
.hero__intro .text-link, .hero__intro a { color: var(--ink); border-bottom-color: var(--gold-line); }
.hero__intro a:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }
.hero__timeline span { color: var(--muted-2); }

/* gold ka halka vritt — dark par thoda tez */
.hero__sticky::before {
  background: radial-gradient(circle, rgba(226, 189, 98, 0.13) 0%, rgba(226, 189, 98, 0.05) 46%, transparent 68%);
}

/* wordmark ka gold — dark par chamakta hua */
.hero h1.hero__brand-title {
  background-color: transparent;
  background-image:
    repeating-radial-gradient(circle at 0 0, rgba(255, 252, 240, 0.6) 0 0.9px, transparent 1.2px 8px),
    repeating-radial-gradient(circle at 4px 6px, rgba(255, 248, 225, 0.34) 0 0.7px, transparent 1px 11px),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 10px),
    linear-gradient(168deg, #f2dfa6 3%, #e2bd62 42%, #c9a45f 78%, #8c6c22 100%);
  filter: drop-shadow(0 2px 10px rgba(226, 189, 98, 0.22));
}
.hero h1.hero__brand-title::before {
  background:
    radial-gradient(44% 38% at 26% 52%, rgba(226, 189, 98, 0.22), transparent 70%),
    radial-gradient(38% 34% at 62% 44%, rgba(201, 164, 95, 0.18), transparent 72%),
    radial-gradient(34% 30% at 84% 58%, rgba(216, 27, 116, 0.12), transparent 74%);
}
.hero h1.hero__brand-title::after {
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

/* ---- logo mark: transparent PNG hai, dark par normal blend hi theek ---- */
.brand__mark,
.loader__mark,
.nav .brand__mark,
.footer .brand__mark {
  mix-blend-mode: normal;
  background: transparent;
  opacity: 1;
  filter: none;
}
/* multiply dark par gayab kar deta hai — normal chahiye */
.hero__sticky::after { mix-blend-mode: normal; opacity: 0.4; }
.manifesto.philosophy::after { mix-blend-mode: normal; opacity: 0.12; }

@media (max-width: 760px) {
  .hero__sticky::after { opacity: 0.32; }
  .manifesto.philosophy::after { opacity: 0.09; }
}

/* ---- hero slider ---- */
.hslide {
  background:
    radial-gradient(70% 62% at 12% 10%, rgba(226, 189, 98, 0.11), transparent 62%),
    linear-gradient(120deg, #0e0d0c 0%, #090909 58%, #040404 100%);
}
.hslide h1 { color: var(--ink); }
.hslide h1 em { color: var(--gold-light); }
.hslide p { color: var(--muted); }
.hslide__eyebrow { color: var(--gold-light); }
.hslide__media img { box-shadow: 0 22px 54px rgba(0, 0, 0, 0.6); }

.hslider__arrow {
  background: rgba(14, 13, 12, 0.88);
  border-color: var(--gold-line);
  color: var(--ink);
}
.hslider__arrow:hover { background: var(--gold-light); border-color: var(--gold-light); color: #090909; }
.hslider__dots button { border-color: var(--gold-line); }
.hslider__dots button.is-active { background: var(--gold-light); border-color: var(--gold-light); }

@media (max-width: 760px) {
  .hslider__arrow { background: rgba(14, 13, 12, 0.9); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
}

/* ---- trust strip ---- */
.assure {
  color: var(--ink);
  background-color: #0b0b0b;
  background-image:
    radial-gradient(70% 60% at 6% 0%, rgba(226, 189, 98, 0.09), transparent 62%),
    repeating-linear-gradient(46deg, rgba(243, 238, 229, 0.018) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #0d0c0c 0%, #0a0a0a 100%);
  border-block: 1px solid var(--gold-line);
}
.assure h3 { color: var(--ink); }
.assure p { color: var(--muted); }
.assure__num { color: var(--gold-light); }
.assure__ico { color: var(--gold-light); background: rgba(243, 238, 229, 0.05); border-color: var(--gold-line); }

/* ---- section heads / promo row ---- */
.prow__head { border-bottom-color: var(--line); }
.prow__head h2 { color: var(--ink); }
.prow__head h2::after { background: var(--gold-light); }
.prow__tab { color: var(--muted-2); }
.prow__tab.is-active, .prow__tab:hover { color: var(--gold-light); }
.prow__count { color: var(--muted-2); }
.prow__arrow { border-color: var(--line); color: var(--ink); }
.prow__arrow:hover { border-color: var(--gold-light); color: var(--gold-light); }

.pcard__media { background: #0c0b0a; border-color: var(--line); }
.pcard__name { color: var(--ink); }
.pcard__cat { color: var(--muted-2); }
.pcard__price b { color: var(--ink); }
.pcard__price s { color: var(--muted-2); }
.pcard__add { color: var(--ink); border-color: var(--gold-line); background: transparent; }
.pcard__add:hover { background: var(--gold-light); border-color: var(--gold-light); color: #090909; }
.pcard__off { color: #090909; }
.pcard__new { color: #090909; background: var(--gold-light); }

/* ---- collection + product card ---- */
.collection { background: linear-gradient(180deg, #0a0a0a, #060606 70%); }
.product-card {
  background: var(--surface);
  border: 1px solid var(--line);
}
.product-card:hover { border-color: var(--gold-line); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55); }
.product-card__media { background: #0c0b0a; border-bottom: 1px solid var(--line); }
.product-card__name, .product-card__price { color: var(--ink); }
.product-card__family, .product-card__meta, .product-card__mrp { color: var(--muted-2); }
.product-card__add { color: var(--gold-light); border-color: var(--gold-line); }
.product-card__add:hover { color: #090909; background: var(--gold-light); }

/* ---- filters ---- */
.filter { color: var(--muted); border-color: var(--line); background: var(--surface); }
.filter:hover { color: var(--ink); border-color: var(--gold-line); }
.filter.is-active { color: #090909; background: var(--gold-light); border-color: var(--gold-light); }
.filter.is-active b { color: rgba(9, 9, 9, 0.6); }
.filter-select select { background-color: var(--surface); color: var(--ink); border-color: var(--line); }
.filter-select select option { color: var(--ink); background: #131212; }
.filter-select > span { color: var(--muted-2); }

/* ---- shop by family / categories ---- */
.cats {
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(64% 52% at 92% 0%, rgba(226, 189, 98, 0.07), transparent 62%),
    repeating-linear-gradient(-46deg, rgba(243, 238, 229, 0.014) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #0a0a0a 0%, #060606 100%);
  border-block: 1px solid var(--line);
}
.cats h2 { color: var(--ink); }
.cats .section-index { color: var(--gold-light); }
.cat-card { background: #0c0b0a; border-color: var(--line); }
.cat-card:hover { border-color: var(--gold-line); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6); }

/* ---- sections ---- */
.manifesto, .craft, .ritual, .gift, .newsletter, .story, .apply, .heritage {
  background-color: transparent;
  background-image:
    repeating-linear-gradient(44deg, rgba(243, 238, 229, 0.014) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-44deg, rgba(243, 238, 229, 0.01)  0 1px, transparent 1px 6px);
}
.reviews { background-color: #0b0b0b; border-block: 1px solid var(--gold-line); }
.review-grid { background: var(--line); border-color: var(--line); }
.review-grid figure { background: var(--bg-soft); }
.review-grid blockquote { color: var(--brand-blush); }
.review-grid figcaption { color: var(--ink); }
.review-grid figcaption span { color: var(--muted-2); }

/* ---- video cards ---- */
.vid-card { background: #0c0b0a; border-color: var(--line); }
.vid-card figcaption { background: var(--surface); color: var(--ink); }

/* ---- footer: wapas gehra ---- */
.footer {
  background-color: #0a0908;
  background-image:
    radial-gradient(70% 60% at 8% 0%, rgba(226, 189, 98, 0.07), transparent 60%),
    radial-gradient(56% 50% at 96% 100%, rgba(216, 27, 116, 0.05), transparent 66%),
    repeating-linear-gradient(46deg, rgba(243, 238, 229, 0.016) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #0c0b0a 0%, #060605 100%);
  color: #f4efe6;
  border-top: 1px solid var(--gold-line);
}
.footer p, .footer li, .footer span, .footer a { color: rgba(244, 239, 230, 0.7); }
.footer a:hover { color: #fffdf9; }
.footer h3, .footer h4, .footer .brand__name { color: #fffdf9; }
.footer .section-index, .footer .kicker { color: var(--gold-light); }
.footer hr, .footer .rule, .footer__top, .footer__bottom { border-color: rgba(243, 238, 229, 0.14); }
.footer__bottom, .footer__bottom span, .footer__bottom a { color: rgba(244, 239, 230, 0.55); }

/* bada watermark — dark par halka cream, tabhi dikhega */
.footer__word,
.footer__wordmark,
.footer__watermark,
.footer__brand-big,
.footer .wordmark {
  color: rgba(243, 238, 229, 0.05);
  -webkit-text-fill-color: rgba(243, 238, 229, 0.05);
  background: none;
  opacity: 1;
}
.footer__column strong { color: var(--gold-light); font-weight: 600; }
.footer__column a, .footer__column span { color: rgba(244, 239, 230, 0.7); }
.footer__column a:hover { color: #fffdf9; }
.footer__brand p { color: rgba(244, 239, 230, 0.68); }
.footer__staff { color: rgba(244, 239, 230, 0.5); }
.footer__staff:hover { color: var(--gold-light); }

/* ---- cart panel ---- */
.cart { background: var(--surface); border-left: 1px solid var(--line); color: var(--ink); }
.cart__footer, .ship { background: #0b0b0c; border-top: 1px solid var(--line); }
.cart-item__title, .cart-item__name { color: var(--ink); }
.cart-item__meta, .cart__empty { color: var(--muted-2); }

/* ---- quick view modal ---- */
.modal { background: rgba(0, 0, 0, 0.72); }
#modalCard { background: var(--surface); }
#modalCard .modal__media { background: #0c0b0a; }
#modalCard .modal__content h2, #modalCard .modal__price { color: var(--ink); }
#modalCard .modal__description { color: var(--muted); }
#modalCard .modal__notes dt { color: var(--muted-2); }
#modalCard .modal__notes dd { color: var(--ink); }
#modalCard .modal__family { color: var(--gold-light); }
.modal__disclaimer { color: var(--muted-2); }

.gallery__arrow { color: var(--ink); background: rgba(14, 13, 12, 0.7); border-color: rgba(243, 238, 229, 0.26); }
.gallery__arrow:hover { background: rgba(14, 13, 12, 0.92); border-color: var(--gold-light); }

/* back button — dark panel par */
.modal__back {
  color: var(--ink);
  background: rgba(20, 18, 17, 0.92);
  border: 1px solid var(--gold-line);
}
.modal__back:hover { color: #090909; background: var(--gold-light); border-color: var(--gold-light); }
.modal__back:focus-visible { outline: 2px solid var(--gold-light); }

@media (max-width: 760px) {
  .modal__back { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
}

/* ---- form fields ---- */
input, textarea, select { color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
.newsletter__form input, .ship input, .ship select, .auth input {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

/* ---- sign in modal ---- */
#authCard { background: var(--surface); color: var(--ink); }
.auth__side-copy p { color: rgba(243, 238, 229, 0.85); }

/* ---- bundle banner ---- */
.bundle-card { background: var(--surface); border-color: var(--line); }
.bundle-card h3, .bundle-card__price strong { color: var(--ink); }
.bundle-card p { color: var(--muted); }
.bundle-card__price s { color: var(--muted-2); }
.bundle-card__tag { color: var(--gold-light); border-color: var(--gold-line); background: rgba(226, 189, 98, 0.12); }
.bundle-card:hover { border-color: var(--gold-light); }

/* ---- misc ---- */
.section-index, .kicker { color: var(--gold-light); }
.stars { color: var(--gold-light); }
hr, .rule { background: var(--gold-line); }
.text-link { color: var(--ink); border-bottom-color: var(--gold-line); }
.size-button { color: var(--muted); border-color: var(--line); }
.size-button.is-active { color: #090909; background: var(--gold-light); border-color: var(--gold-light); }

/* ===========================================================================
   ADMIN PANEL — pehle se dark force kiya hua hai (line ~3086).
   Ab poori site dark hai to wo block bekaar nahi, bas harmless hai.
   Chhod diya hai taaki baad me theme phir badle to admin safe rahe.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   =================  PRODUCT PAGE MODE  =====================================
   ===========================================================================

   `body.is-product-page` lagte hi quick view overlay ki jagah POORA PAGE ban
   jaati hai — Oud Arabia jaisa. Header aur footer dikhte rehte hain, home ke
   saare section chhup jaate hain.

   Modal ko JS ne <main> ke andar daal diya hai, isliye wo header ke neeche
   aur footer ke upar baithti hai.
   --------------------------------------------------------------------------- */

/* home ke sections chhupao — modal ke alawa sab */
body.is-product-page main > section { display: none !important; }

/* page mode me scroll chalna chahiye. is-locked overlay ke liye tha. */
body.is-product-page.is-locked,
body.is-product-page {
  overflow: visible !important;
  position: static !important;
  height: auto !important;
}

/* overlay -> normal page block */
body.is-product-page #modal {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  padding: 0;
  background: none;
  backdrop-filter: none;
  opacity: 1;
  visibility: visible;
  overflow: visible;
}

body.is-product-page #modalCard {
  position: relative;
  width: 100%;
  max-width: min(1240px, 100%);
  max-height: none;
  height: auto;
  margin: 0 auto;
  overflow: visible;                /* page khud scroll hoga */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  background: transparent;
  padding: clamp(18px, 3vw, 40px) clamp(16px, 3vw, 46px) clamp(52px, 6vw, 92px);
}

/* X button page mode me bemaani hai — Back button hi kaafi */
body.is-product-page .modal__close { display: none; }

/* Back button page ke flow me, image ke upar */
body.is-product-page .modal__back {
  position: static;
  top: auto;
  left: auto;
  bottom: auto;
  transform: none;
  margin-bottom: clamp(14px, 2vw, 22px);
  box-shadow: none;
}

/* do column layout — baayein image, daayein details.
   #modalCard ke andar koi wrapper nahi hai (media aur content seedhe usi ke
   bachche hain), isliye grid usi par lagaya hai. Back button ko poori width
   di hai warna wo pehle column me ghus jaata hai. */
body.is-product-page #modalCard {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(20px, 3vw, 52px);
  align-items: start;
}
body.is-product-page .modal__back { grid-column: 1 / -1; justify-self: start; }

body.is-product-page #modalCard .modal__media {
  position: sticky;
  top: 96px;                        /* header ke neeche chipki rahe */
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c0b0a;
  aspect-ratio: 1 / 1;
}
body.is-product-page #modalCard .modal__media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* details column ko saans */
body.is-product-page #modalCard .modal__content {
  padding: 0;
  max-width: 620px;
}
body.is-product-page #modalCard .modal__content h2 {
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.02;
}

/* gallery arrows page mode me thode andar */
body.is-product-page .gallery__arrow { opacity: 1; }

@media (max-width: 900px) {
  body.is-product-page #modalCard {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body.is-product-page #modalCard .modal__media {
    position: static;
    top: auto;
    padding-top: 10px;              /* mobile ka 54px padding ab zaroori nahi */
  }
}

@media (max-width: 760px) {
  body.is-product-page #modalCard {
    padding: 14px 14px 44px;
  }
  body.is-product-page #modalCard .modal__content { padding-bottom: 0; }
  body.is-product-page .modal__back { margin-bottom: 12px; }
}

/* ===========================================================================
   PRODUCT PAGE MODE — FIXES

   1. Back button neeche chala jaata tha.
      Kaaran: JS use `card.appendChild()` se daalta hai, to wo #modalCard ka
      SABSE AAKHIRI bachcha hai. Grid me bachche DOM ke order me lagte hain,
      isliye wo image aur details ke NEECHE aa raha tha.
      Hal: grid me `order: -1` chalta hai — usse wo sabse upar aa jaata hai.

   2. Image ka dabba bahut lamba ho raha tha.
      Kaaran: base rule me `.modal__media { min-height: 610px }` hai. Wo mere
      `aspect-ratio: 1/1` ko haraa deta tha, mobile par 610px ka dabba ban
      jaata tha.
      Hal: page mode me min-height 0.

   3. Details beech me (center) lag rahi thi. Overlay me theek tha, page par
      upar se shuru honi chahiye.
   --------------------------------------------------------------------------- */

body.is-product-page .modal__back {
  order: -1;
  grid-column: 1 / -1;
  justify-self: start;
}

body.is-product-page #modalCard .modal__media {
  min-height: 0;
  max-height: none;
}

body.is-product-page #modalCard .modal__content {
  justify-content: flex-start;
}

/* image ke andar ki tasveer poori dikhe, kate nahi */
body.is-product-page #modalCard .modal__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* header sticky hai, uske neeche se page shuru ho */
body.is-product-page #modalCard {
  padding-top: clamp(14px, 2vw, 26px);
}

@media (max-width: 900px) {
  body.is-product-page #modalCard .modal__media {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
}

/* ===========================================================================
   =========  NAYI PHOTOS KE HISAAB SE TILE KA SHAPE  ========================
   ===========================================================================

   Client ne 13 attar ki nayi photos di hain — sab PORTRAIT hain (1050x1400,
   yaani 3:4). Tile pehle 1:1 (square) thi aur image `contain` se lagti hai,
   isliye har card me dono taraf motti khaali patti dikhti thi — photo chhoti
   lagti thi aur card khaali.

   Ab tile 3:4 hai, to nayi photos poora dabba bhar deti hain.

   Jin 8 product ki purani square photos hain (kafa-aura, lavish-musk,
   kashmiri-oudh, white-oudh, prime-seven, velvet-vice, dono box) unme upar-
   neeche halki patti aayegi — par tile ka background photo ke background
   jaisa kaala hai, isliye wo patti nazar nahi aati.

   `contain` hi rakha hai — `cover` bottle ka cap ya base kaat deta hai.
   --------------------------------------------------------------------------- */

/* collection grid ka card */
.product-card__media {
  aspect-ratio: 3 / 4;
  background: #0c0b0a;
  padding: 0;                       /* padding 6px thi — photo ab poora bhare */
}
.product-card__media img,
.product-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* promo row ka chhota card */
.pcard__media {
  aspect-ratio: 3 / 4;
  padding: 0;
}
.pcard__media img { object-fit: contain; }

/* product page ka bada image dabba */
body.is-product-page #modalCard .modal__media {
  aspect-ratio: 3 / 4;
  padding: 0;
  min-height: 0;
}

/* hero slider me bhi portrait photo hai */
.hslide__media img { object-fit: contain; }

/* ---------------------------------------------------------------------------
   MOBILE — 2 column grid me 3:4 card thoda lamba ho jaata hai, isliye gap aur
   text ka size thoda kasa hai taaki do card ek screen me aaram se aayein.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .product-card__media { aspect-ratio: 3 / 4; border-radius: 5px 5px 0 0; }

  .product-card__name { font-size: 0.86rem; line-height: 1.3; }
  .product-card__price { font-size: 0.9rem; }
  .product-card__family { font-size: 0.66rem; }

  /* promo row me card thoda chauda, taaki portrait photo chhoti na lage */
  .prow__track { grid-auto-columns: 52vw; }
  .pcard__media { aspect-ratio: 3 / 4; }

  /* product page ka image mobile par poori chaudai le */
  body.is-product-page #modalCard .modal__media {
    aspect-ratio: 3 / 4;
    max-height: 68vh;
  }
  body.is-product-page #modalCard .modal__media img { object-fit: contain; }
}

@media (max-width: 400px) {
  .prow__track { grid-auto-columns: 62vw; }
  .product-grid { gap: 10px; }
}

/* ===========================================================================
   PRODUCT PAGE — IMAGE KA SHAPE (last word)

   Upar line ~1568 par ye hai:
       #modalCard .modal__media > img { width: 100%; aspect-ratio: 1/1; height: auto; }

   Us `aspect-ratio: 1/1` ki wajah se nayi portrait photo square dabbe me
   simat jaati thi. Page mode me use hata rahe hain — dabba khud 3:4 hai,
   image ko usme poora bharna hai.
   --------------------------------------------------------------------------- */
body.is-product-page #modalCard .modal__media > img,
body.is-product-page #modalCard .modal__media img {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  display: block;
}

/* gallery ke arrows/dots isi dabbe ke andar absolute hote hain */
body.is-product-page #modalCard .modal__media { overflow: hidden; }

@media (max-width: 760px) {
  body.is-product-page #modalCard .modal__media > img,
  body.is-product-page #modalCard .modal__media img {
    max-height: none;
  }
  /* mobile ka purana 54px top padding page mode me bekaar hai */
  body.is-product-page #modalCard .modal__media { padding-top: 0; }
}

/* Keep the mobile back control visible while the quick-view content scrolls.
   It used to be positioned at the bottom of the card, which is outside the
   viewport when the product details are taller than one screen. */
@media (max-width: 760px) {
  #modal.is-open .modal__back {
    position: fixed;
    top: 78px;
    left: 12px;
    right: auto;
    bottom: auto;
    transform: none;
    z-index: 40;
    color: var(--ink);
    background: rgba(20, 18, 17, 0.96);
    border-color: var(--gold-line);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  }
}

/* ===========================================================================
   =============  HERO SLIDER — KATNA BAND  ==================================
   ===========================================================================

   ASLI KAARAN

   `.hslide` par `position: absolute; inset: 0` tha, aur uske container
   (.hero--slider .hero__sticky) par sirf `min-height` tha — pakki height
   nahi.

   Percentage height ko pakki height chahiye hoti hai. Image par jo
   `max-height: 84%` laga tha, wo isliye bekaar tha — browser ke paas base
   height hi nahi thi. Portrait photo (1050x1400) apni chaudai se size ho
   jaati, lambi ho ke dabbe se bahar nikal jaati, aur `overflow: hidden` use
   kaat deta.

   Usi wajah se text bhi kat raha tha — absolute slide container se bada ho
   jaata tha.

   Landscape photo (combo box waali) chaudi hai, lambi nahi, isliye wo theek
   dikh rahi thi. Isliye client ne usko example banaya.

   HAL

   1. Slides ab absolute NAHI hain. Sirf active slide dikhti hai
      (display: none / grid), to container ki height content se bante hai —
      kuch bhi katta nahi.
   2. Image ke dabbe ko PAKKI height di hai, to `max-height: 100%` sach me
      kaam karta hai aur photo poori andar aati hai.
   3. Khaali kaali jagah kam ki hai — padding aur height kasi hai.

   Cross-fade ki jagah ab halka fade-in animation hai (display: none ke saath
   opacity transition nahi chalti).
   --------------------------------------------------------------------------- */

.hero--slider,
.hero--slider .hero__sticky {
  height: auto;
  min-height: 0;                     /* content hi height tay karega */
  position: relative;
  overflow: visible;                 /* ab kuch bahar nahi nikalta, crop ki zaroorat nahi */
}

.hslider { position: relative; height: auto; }

/* sirf active slide */
.hslide {
  position: static;
  inset: auto;
  display: none;
  opacity: 1;
  visibility: visible;
  transition: none;
}

.hslide.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(18px, 3vw, 46px);
  padding-block: clamp(22px, 3vw, 40px);
  animation: hslideIn 0.42s ease both;
}

@keyframes hslideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hslide.is-active { animation: none; }
}

/* ---- image ka dabba: PAKKI height, isliye max-height chalti hai ---- */
.hslide__media {
  position: relative;
  height: clamp(300px, 40vh, 420px);
  display: grid;
  place-items: center;
  padding: 0;
}
.hslide__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
}

/* ---- text ---- */
.hslide__copy { gap: 11px; }
.hslide h1 { font-size: clamp(1.7rem, 3.4vw, 2.9rem); max-width: 20ch; }
.hslide p { font-size: 0.88rem; max-width: 44ch; }

/* ---- arrows: dabbe ke beech me, text par nahi ---- */
.hslider__arrow { top: 50%; transform: translateY(-50%); }

.hslider__dots { position: static; transform: none; justify-content: center; margin: 0 0 clamp(14px, 2vw, 20px); }

/* ===========================================================================
   HERO SLIDER — MOBILE

   Client ne kaha image "chhoti si aur kati hui" aa rahi thi. Ab:
     - image upar, text neeche (portrait photo pehle dikhni chahiye)
     - dabbe ki height pakki, to photo poori aati hai
     - chaudai 92% tak, to photo bhari hui lagti hai
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .hslide.is-active {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 16px 22px;
  }
  .hslide__media {
    order: -1;
    height: clamp(280px, 44vh, 380px);
    margin: 0;
  }
  .hslide__media img { max-width: 92%; max-height: 100%; }
  .hslide__copy { align-items: center; text-align: center; gap: 9px; }
  .hslide h1 { max-width: none; font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .hslide p { font-size: 0.85rem; max-width: 42ch; }

  /* arrows image ke level par — text ke upar nahi */
  .hslider__arrow { top: clamp(150px, 22vh, 200px); transform: none; }
}

@media (max-width: 760px) {
  .hslide__media { height: clamp(270px, 42vh, 350px); }
  .hslide__media img { max-width: 94%; }
  .hslide__cta { flex-direction: column; width: 100%; gap: 9px; }
  .hslide__cta .button--solid { width: 100%; padding-block: 13px; }
  .hslide__cta .button--outline { display: none; }   /* ek button hi kaafi */
  .hslider__arrow { width: 34px; height: 34px; font-size: 1.15rem; }
}

@media (max-width: 400px) {
  .hslide__media { height: 260px; }
  .hslide__media img { max-width: 96%; }
  .hslider__arrow { top: 140px; }
}

/* ===========================================================================
   ADMIN — PHOTO UPLOAD

   Admin panel dark hai (.admin-body me variables dark par set hain), isliye
   yahan bhi dark rang hi use kiye hain.

   Preview ka dabba 3:4 hai — bilkul waisa jaisa site par dikhega. Client ko
   pehle se pata chal jaata hai ki photo kaisi lagegi.
   --------------------------------------------------------------------------- */

.adm-photos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adm-photos__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #cdc7bc;
}
.adm-photos__label small { font-weight: 400; color: #8d867c; }

.adm-photos > input[type="file"] {
  width: 100%;
  margin-bottom: 6px;
  font-size: 0.72rem;
  color: #cdc7bc;
  background: transparent;
  border: 0;
  padding: 0;
}
.adm-photos > input[type="file"]::file-selector-button {
  margin-right: 9px;
  padding: 7px 12px;
  border: 1px solid rgba(226, 189, 98, 0.32);
  border-radius: 999px;
  background: transparent;
  color: #e2bd62;
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}
.adm-photos > input[type="file"]::file-selector-button:hover {
  background: #e2bd62;
  color: #090909;
}

.adm-photos__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.adm-photo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(243, 238, 229, 0.12);
  border-radius: 8px;
  background: #121111;
}

.adm-photo__tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e2bd62;
}

/* 3:4 — site ki tile jaisa */
.adm-photo__box {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(243, 238, 229, 0.1);
  border-radius: 6px;
  background: #0c0b0a;
}
.adm-photo__box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.adm-photo__empty {
  padding: 10px;
  font-size: 0.72rem;
  color: #7d766c;
  text-align: center;
}

.adm-photo input[type="file"] {
  width: 100%;
  font-size: 0.72rem;
  color: #cdc7bc;
  background: transparent;
  border: 0;
  padding: 0;
}
.adm-photo input[type="file"]::file-selector-button {
  margin-right: 9px;
  padding: 7px 12px;
  border: 1px solid rgba(226, 189, 98, 0.32);
  border-radius: 999px;
  background: transparent;
  color: #e2bd62;
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}
.adm-photo input[type="file"]::file-selector-button:hover {
  background: #e2bd62;
  color: #090909;
}

.adm-photo__msg {
  min-height: 1.1em;
  margin: 0;
  font-size: 0.7rem;
  color: #a9d6d1;
}

.adm-photos__url {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.74rem;
  color: #cdc7bc;
}
.adm-photos__url small { color: #8d867c; }
.adm-photos__url input {
  padding: 9px 11px;
  border: 1px solid rgba(243, 238, 229, 0.12);
  border-radius: 6px;
  background: #0e0e0f;
  color: #8d867c;          /* readonly hai, isliye halka rang */
  font-size: 0.72rem;
}

@media (max-width: 900px) {
  .adm-photos__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .adm-photos__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===========================================================================
   =========  GIFTING, CUSTOMISATION, BULK, MORE THAN FRAGRANCE  =============
   ===========================================================================

   Naye sections. Sab dark theme ke variables use karte hain, isliye theme
   badalne par apne aap saath chalte hain.

   Koi nayi image nahi lagayi — typography aur gold ke accent se banaya hai.
   Nakli photo lagane se brand sasta lagta hai, aur asli photos abhi nahi
   hain.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   GIFT FINDER — chips
   --------------------------------------------------------------------------- */
.finder { padding-block: clamp(34px, 4.4vw, 62px); }

.finder__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.finder__chip {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.finder__chip:hover {
  color: #090909;
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-2px);
}
.finder__chip:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   GIFTING — category cards
   --------------------------------------------------------------------------- */
.gifting {
  padding-block: clamp(38px, 5vw, 70px);
  background-color: #0b0b0b;
  background-image:
    radial-gradient(64% 52% at 92% 0%, rgba(226, 189, 98, 0.07), transparent 62%),
    repeating-linear-gradient(-46deg, rgba(243, 238, 229, 0.014) 0 1px, transparent 1px 5px);
  border-block: 1px solid var(--gold-line);
}

.gifting__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(11px, 1.4vw, 18px);
}

.gifting__card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 150px;
  padding: clamp(16px, 1.8vw, 24px);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.gifting__card:hover {
  border-color: var(--gold-light);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5);
}
.gifting__card strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.34rem);
  font-weight: 400;
  line-height: 1.15;
}
.gifting__card span {
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.55;
}

/* aakhiri card thoda alag — call to action hai */
.gifting__card--cta {
  border-color: var(--gold-line);
  background: linear-gradient(150deg, rgba(226, 189, 98, 0.1), rgba(226, 189, 98, 0.02));
}
.gifting__card--cta strong { color: var(--gold-light); }

/* ---------------------------------------------------------------------------
   CUSTOMISATION — step flow

   Desktop par teen-teen ke do row. Har step ke beech gold ka chhota arrow,
   taaki rasta dikhe (CSS se banaya hai, image se nahi).
   --------------------------------------------------------------------------- */
.custom { padding-block: clamp(38px, 5vw, 70px); }

.custom__flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(13px, 1.7vw, 22px);
}

.custom__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}
.custom__step b {
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}
.custom__step strong {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.custom__step span {
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.55;
}

/* arrow — row ke andar ke gaps me. Aakhiri column par nahi. */
.custom__step::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: calc(-1 * clamp(13px, 1.7vw, 22px) / 2);
  transform: translate(50%, -50%);
  color: var(--gold-line);
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
}
.custom__step:nth-child(3)::after,
.custom__step:nth-child(6)::after { content: none; }

.custom__foot { margin-top: clamp(20px, 2.4vw, 30px); }

/* ---------------------------------------------------------------------------
   BULK BAND
   --------------------------------------------------------------------------- */
.bulk {
  margin-block: clamp(10px, 1.5vw, 20px);
  padding: clamp(26px, 3.4vw, 54px);
  border: 1px solid var(--gold-line);
  border-radius: 9px;
  background:
    radial-gradient(70% 62% at 8% 0%, rgba(226, 189, 98, 0.12), transparent 62%),
    linear-gradient(140deg, #14120f 0%, #0a0a09 60%, #060605 100%);
}

.bulk__copy { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }

.bulk h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.6vw, 3.1rem);
  font-weight: 400;
  line-height: 1.06;
  color: var(--ink);
}
.bulk h2 em { font-style: italic; color: var(--gold-light); }
.bulk p { color: var(--muted); font-size: 0.9rem; line-height: 1.62; max-width: 66ch; }

.bulk__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.bulk__row div { display: flex; flex-direction: column; gap: 4px; }
.bulk__row strong {
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 400;
}
.bulk__row span {
  color: var(--muted-2);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bulk__cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 8px; }

/* ---------------------------------------------------------------------------
   MORE THAN FRAGRANCE
   --------------------------------------------------------------------------- */
.more { padding-block: clamp(38px, 5vw, 70px); }

.more__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.more__card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(18px, 2.1vw, 28px);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-soft);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.more__card:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.more__card strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.14rem, 1.5vw, 1.38rem);
  font-weight: 400;
}
.more__card span { color: var(--muted); font-size: 0.8rem; line-height: 1.58; }

/* ---- diffuser / decor bottle gallery (More than fragrance) ---- */
.more__gallery {
  margin-top: clamp(16px, 2vw, 26px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.more__slot {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
}
.more__slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.more__slot figcaption {
  display: none;
  padding: 0 10px;
  color: var(--muted-2);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.more__slot.is-empty { border-style: dashed; }
.more__slot.is-empty figcaption { display: block; }

@media (max-width: 760px) {
  .more__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   POLICY — no return flag
   --------------------------------------------------------------------------- */
.policy__flag {
  padding: 14px 16px;
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold-light);
  border-radius: 5px;
  background: rgba(226, 189, 98, 0.07);
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   MOBILE / TABLET
   --------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .gifting__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom__step:nth-child(3)::after { content: "\2192"; }
  .custom__step:nth-child(2)::after,
  .custom__step:nth-child(4)::after,
  .custom__step:nth-child(6)::after { content: none; }
  .more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .finder { padding-block: 28px; }
  .finder__grid { gap: 8px; }
  .finder__chip { min-height: 42px; padding: 0 15px; font-size: 0.8rem; }

  .gifting { padding-block: 32px; }
  .gifting__grid { grid-template-columns: 1fr; gap: 10px; }
  .gifting__card { min-height: 0; padding: 15px; }
  .gifting__card strong { font-size: 1.08rem; }
  .gifting__card span { font-size: 0.78rem; }

  .custom { padding-block: 32px; }
  .custom__flow { grid-template-columns: 1fr; gap: 10px; }
  /* mobile par ek column hai, to arrow neeche ki taraf */
  .custom__step::after {
    content: "\2193";
    top: auto;
    right: 50%;
    bottom: calc(-1 * 10px / 2);
    transform: translate(50%, 50%);
  }
  .custom__step:nth-child(2)::after,
  .custom__step:nth-child(3)::after,
  .custom__step:nth-child(4)::after,
  .custom__step:nth-child(5)::after { content: "\2193"; }
  .custom__step:nth-child(6)::after { content: none; }
  .custom__foot .button { width: 100%; justify-content: center; }

  .bulk { padding: 20px 17px; border-radius: 7px; }
  .bulk__row { grid-template-columns: 1fr; gap: 13px; padding-top: 15px; }
  .bulk__cta { flex-direction: column; }
  .bulk__cta .button { width: 100%; justify-content: center; }

  .more { padding-block: 32px; }
  .more__grid { grid-template-columns: 1fr; gap: 10px; }
  .more__card { padding: 16px; }
}

/* ===========================================================================
   ===============  COMBO SECTIONS — DUO + FIVE  =============================
   ===========================================================================

   Card ka dhaancha: upar photo (3:4, baaki site jaisa), neeche naam, vibe,
   andar kya-kya hai uski list, aur price + Add button.

   Andar ke attar ki list jaan-boojh ke dikhayi hai — combo bechne me sabse
   bada sawaal yahi hota hai "isme kya aayega". Usko quick view ke andar
   chhupane se customer click hi nahi karta.
   --------------------------------------------------------------------------- */

.combos { padding-block: clamp(36px, 4.6vw, 66px); }

.combos--five {
  background-color: #0a0a0a;
  background-image:
    radial-gradient(64% 52% at 8% 0%, rgba(226, 189, 98, 0.07), transparent 62%),
    repeating-linear-gradient(46deg, rgba(243, 238, 229, 0.014) 0 1px, transparent 1px 5px);
  border-block: 1px solid var(--gold-line);
}

/* ---- mood tabs ---- */
.combos__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.combos__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.combos__tab b {
  color: var(--muted-2);
  font-size: 0.66rem;
  font-weight: 600;
}
.combos__tab:hover { color: var(--ink); border-color: var(--gold-line); }
.combos__tab.is-active {
  color: #090909;
  background: var(--gold-light);
  border-color: var(--gold-light);
}
.combos__tab.is-active b { color: rgba(9, 9, 9, 0.6); }
.combos__tab:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* ---- grid ---- */
.combos__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(11px, 1.5vw, 18px);
}

.combos__empty {
  padding: 26px 0;
  color: var(--muted-2);
  font-size: 0.84rem;
}

/* ---- card ---- */
.combo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.combo-card:hover {
  border-color: var(--gold-line);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5);
}

.combo-card__media {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #0c0b0a;
  aspect-ratio: 3 / 4;
  cursor: pointer;
}
.combo-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.5s ease;
}
.combo-card:hover .combo-card__media img { transform: scale(1.03); }

.combo-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  padding: 14px 15px 16px;
}

.combo-card h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.4vw, 1.3rem);
  font-weight: 400;
  line-height: 1.16;
}

.combo-card__vibe {
  margin: 0;
  color: var(--muted-2);
  font-size: 0.73rem;
  line-height: 1.45;
}

/* andar kya-kya hai — chhote gold bullet ke saath */
.combo-card__picks {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.combo-card__picks li {
  position: relative;
  padding-left: 13px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}
.combo-card__picks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-light);
}

.combo-card__foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.combo-card__price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.combo-card__price s { color: var(--muted-2); font-size: 0.74rem; }
.combo-card__price b {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
}
.combo-card__price em {
  color: var(--gold-light);
  font-size: 0.66rem;
  font-style: normal;
  letter-spacing: 0.04em;
}

.combo-card__add {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-light);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.combo-card__add:hover:not(:disabled) {
  color: #090909;
  background: var(--gold-light);
  border-color: var(--gold-light);
}
.combo-card__add:disabled { opacity: 0.4; cursor: not-allowed; }
.combo-card__add:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* ---- tablet / mobile ---- */
@media (max-width: 1100px) {
  .combos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .combos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .combos { padding-block: 30px; }
  .combos__tabs { gap: 7px; margin-bottom: 14px; }
  .combos__tab { min-height: 34px; padding: 0 12px; font-size: 0.72rem; }
  .combos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }

  .combo-card__body { padding: 11px 12px 13px; gap: 6px; }
  .combo-card h3 { font-size: 0.98rem; }
  .combo-card__vibe { font-size: 0.7rem; }
  .combo-card__picks li { font-size: 0.71rem; padding-left: 11px; }
  .combo-card__foot { padding-top: 10px; gap: 8px; }
  .combo-card__price b { font-size: 1rem; }

  /* mobile par button poori width — chhote button pe ungooth nahi lagta */
  .combo-card__add { width: 100%; justify-content: center; display: inline-flex; align-items: center; }
}
@media (max-width: 400px) {
  .combos__grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   EMOJI — client ki list ke hisaab se

   Client ne combo naam aur gift finder me emoji diye the. Wo wapas lag gaye
   hain. Do cheezein dhyaan se ki hain:

     1. Size thoda chhota rakha hai. Emoji apne aap font se bada render hota
        hai aur line ki oonchai bigaad deta hai.
     2. `font-style: normal` — <i> tag italic karta hai, aur italic emoji
        kuch browser me tirchha dikhta hai.
   --------------------------------------------------------------------------- */

.combo-card__emoji {
  font-size: 0.92em;
  font-style: normal;
  line-height: 1;
  vertical-align: baseline;
}

.finder__chip i {
  font-size: 0.95em;
  font-style: normal;
  line-height: 1;
  margin-right: 2px;
}

/* ===========================================================================
   =========  HERO SLIDER — IMAGE KA BAHAR NIKALNA BAND  =====================
   ===========================================================================

   DIKKAT
   Hero ki photo apne dabbe se bahar nikal ke neeche wale section (trust
   badges) par chadh rahi thi. Photo bahut badi dikh rahi thi aur uska sirf
   ek hissa nazar aata tha.

   KYA HUA THA
   Maine photo ko `max-height: 100%` se roka tha. Par `.hslide__media` grid
   hai aur photo uska grid item hai — aise case me percentage waali
   `max-height` bharose ki nahi hoti, browser use nazarandaaz kar deta hai.
   Photo apni asli naap (1050x1400) par reh gayi. Aur kyunki maine crop
   (`overflow: hidden`) bhi hata diya tha, wo seedhi neeche ke section me
   ghus gayi.

   HAL — do taraf se band, taaki aage kabhi dobara na ho

   1. Photo ko `width: 100%` + `height: 100%` diya hai, `max-height` ki jagah.
      Ye pakki naap hai, percentage ka anuman nahi — photo dabbe se bahar ja
      hi nahi sakti. `object-fit: contain` isko khinchne se rokta hai: poori
      photo andar aati hai, bachi jagah dabbe ka rang dikhata hai (jo photo ke
      background jaisa hi kaala hai, to patti nazar nahi aati).

   2. `overflow: hidden` wapas laga diya — dabbe par aur hero par dono. Agar
      kal kisi wajah se naap phir bigde, to bhi kuch neeche ke section par
      nahi chadhega. Ye safety net hai.

   `!important` isliye lagaya hai ki is file me `.hslide__media img` ke 12 se
   zyada rule bikhre hue hain (mobile ke media query me bhi). Un sab se ladne
   ke bajaye ek jagah se pakka kar diya.
   --------------------------------------------------------------------------- */

/* safety net — hero se kuch bahar na jaaye */
.hero--slider,
.hero--slider .hero__sticky {
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   DOOSRI KOSHISH — ab percentage par bharosa hi nahi

   Pichhli baar photo kat rahi thi. Wajah: `width: 100%` lag gaya par
   `height: 100%` nahi. Height ko parent ki PAKKI height chahiye hoti hai, aur
   yahan parent ki height grid ki row se aa rahi thi (text column jitni) —
   browser ke liye wo "definite" nahi thi. Nateeja: photo chaudi hokar apne
   ratio se lambi ho gayi aur neeche se kat gayi.

   Ab photo `position: absolute` + `inset: 0` hai. Isme top aur bottom dono
   pinned hote hain, to height khud-ba-khud nikal aati hai — koi percentage
   resolve karne ki zaroorat hi nahi. `object-fit: contain` ke saath poori
   photo andar aati hai, kuch katta nahi.

   `min-height` bhi rakhi hai taaki dabba kabhi patla na ho jaaye.
   --------------------------------------------------------------------------- */
.hslide__media {
  position: relative;
  overflow: hidden;
  height: clamp(300px, 38vh, 400px);
  min-height: 280px;
  display: block;                        /* grid ki zaroorat nahi, photo absolute hai */
  padding: 0;
}

.hslide__media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
  border-radius: 6px;
  box-shadow: none;                      /* contain ke saath shadow khaali jagah par dikhti thi */
}

@media (max-width: 860px) {
  .hslide__media { height: clamp(260px, 40vh, 340px); min-height: 250px; }
}

@media (max-width: 760px) {
  .hslide__media { height: clamp(240px, 38vh, 300px); min-height: 230px; }
}

@media (max-width: 400px) {
  .hslide__media { height: 230px; min-height: 220px; }
}

/* ===========================================================================
   =====================  GIFT FINDER PAGE  ==================================
   ===========================================================================
   gifts.html. Teen step neeche-neeche: kaun, kitne ka, aur nateeja.
   Result cards wahi combo-card style use karte hain, to site ka look ek jaisa
   rehta hai.
   --------------------------------------------------------------------------- */

.gf { padding-block: clamp(24px, 3vw, 40px); }
.gf--results { padding-bottom: clamp(44px, 5.5vw, 80px); }

.gf__step {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 400;
  line-height: 1.1;
}
.gf__step b {
  color: var(--gold-light);
  font-family: var(--sans, inherit);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* ---- step 1: log ---- */
.gf__people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(9px, 1.2vw, 14px);
}

.gf-person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: clamp(14px, 1.7vw, 20px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.gf-person i {
  font-size: 1.32rem;
  font-style: normal;
  line-height: 1;
}
.gf-person strong {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.gf-person:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.gf-person:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.gf-person.is-active {
  border-color: var(--gold-light);
  background: linear-gradient(150deg, rgba(226, 189, 98, 0.14), rgba(226, 189, 98, 0.04));
}
.gf-person.is-active strong { color: var(--gold-light); }

/* ---- step 2: budget (combos__tab hi use kiya hai) ---- */
.gf__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- step 3: nateeja ---- */
.gf__summary {
  margin: -6px 0 clamp(16px, 2vw, 22px);
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ---- bulk band ---- */
.gf__bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: clamp(26px, 3.2vw, 44px);
  padding: clamp(20px, 2.6vw, 34px);
  border: 1px solid var(--gold-line);
  border-radius: 9px;
  background:
    radial-gradient(70% 62% at 8% 0%, rgba(226, 189, 98, 0.12), transparent 62%),
    linear-gradient(140deg, #14120f 0%, #0a0a09 60%, #060605 100%);
}
.gf__bulk h3 {
  margin: 8px 0 7px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 400;
  line-height: 1.1;
}
.gf__bulk p { margin: 0; max-width: 52ch; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.gf__bulk-cta { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 760px) {
  .gf { padding-block: 20px; }
  .gf__people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .gf-person { padding: 12px; gap: 7px; }
  .gf-person i { font-size: 1.2rem; }
  .gf-person strong { font-size: 0.82rem; }
  .gf__summary { font-size: 0.83rem; }
  .gf__bulk { padding: 17px; gap: 14px; }
  .gf__bulk-cta { flex-direction: column; width: 100%; }
  .gf__bulk-cta .button { width: 100%; justify-content: center; }
}

/* ===========================================================================
   PRICE TYPOGRAPHY — final normalization

   Prices sabse zaroori number hain, isliye inhe ek jaisa, saaf aur thoda
   bhaari rakha hai. Serif Cormorant patla dikhta tha; ab sans (Jost/Manrope)
   600 weight me hai taaki har card par price turant padha jaaye. Rang pehle
   jaise hi hain — sirf font, weight aur size seedhe kiye hain.
   Ye block jaan-boojh ke file ke sabse neeche hai taaki cascade me jeete.
   =========================================================================== */
.product-card__price,
.pcard__price b,
.combo-card__price b {
  font-family: var(--sans, inherit);
  font-weight: 600;
  letter-spacing: 0;
}
.product-card__price { font-size: 1.04rem; }
.pcard__price b { font-size: 1.02rem; }
.combo-card__price b { font-size: 1.04rem; }

/* struck MRP: halka aur chhota, par padhne layak */
.product-card__price s,
.pcard__price s,
.combo-card__price s {
  font-family: var(--sans, inherit);
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--muted-2);
}

/* quick view ka bada price — gold serif rehne diya (jaan-boojh ke elegant),
   bas weight thoda uthaya taaki patla na lage */
.modal__price { font-weight: 500; }

@media (max-width: 760px) {
  .product-card__price { font-size: 0.95rem; }
  .pcard__price b,
  .combo-card__price b { font-size: 0.96rem; }
}

/* ===========================================================================
   QUICK VIEW — "Choose another fragrance" strip

   Amazon ke variant row jaisa: baaki in-stock attar ki chhoti thumbnails,
   same family pehle. Click karne par wahi quick view us attar par badal
   jaati hai (modal band nahi hota).
   =========================================================================== */
.modal-related { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.modal-related[hidden] { display: none; }
.modal-related h3 {
  margin: 0 0 10px;
  font-family: var(--sans, inherit);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.modal-related__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.modal-related__item {
  flex: 0 0 auto;
  width: 78px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.modal-related__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: #101011;
}
.modal-related__item span {
  display: block;
  padding: 0 6px 7px;
  font-size: 0.6rem;
  line-height: 1.3;
  text-align: center;
}
.modal-related__item:hover { border-color: var(--gold-line); color: var(--ink); }
.modal-related__item:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* ===========================================================================
   QUICK VIEW WIDTH FIX

   "Choose another fragrance" strip ki thumbnails ek line me hain. Grid/flex
   ke bachche default me apne content se chhote nahi hote (min-width: auto),
   isliye strip poore panel ko side me phaila deti thi — horizontal scrollbar
   aata tha aur Policy ka text right me kat jaata tha. min-width: 0 se strip
   panel ke andar rehti hai aur khud scroll hoti hai.
   Labels ka column bhi chauda kiya taaki "How to use" ek line me aaye.
   =========================================================================== */
#modalCard { overflow-x: hidden; }
#modalCard .modal__content,
#modalCard .modal__notes,
#modalCard .modal-related { min-width: 0; max-width: 100%; }
#modalCard .modal-related__track { max-width: 100%; }

#modalCard .modal__notes div { grid-template-columns: 110px minmax(0, 1fr); }
#modalCard .modal__notes dt { white-space: nowrap; }
#modalCard .modal__notes dd { overflow-wrap: break-word; white-space: normal; }

@media (max-width: 760px) {
  #modalCard .modal__notes div { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   15 Oct 2026 — homepage changes
   - promo card ka button ab <a> hai (gifts.html), button jaisa dikhe
   - hero slider ka pause button (auto-play ab hamesha chalta hai)
   - reviews section hidden hai; koi purana display rule use dikha na de
   --------------------------------------------------------------------------- */
.promo__btn--link { display: inline-block; align-self: flex-start; text-decoration: none; }

.reviews[hidden] { display: none !important; }

.hslider__pause {
  position: absolute;
  right: 14px;
  bottom: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  background: rgba(14, 13, 12, 0.88);
  color: var(--ink);
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
}
.hslider__pause:hover,
.hslider__pause:focus-visible { background: var(--gold-light); border-color: var(--gold-light); color: #090909; }

/* ---- admin: Photos tab (15 Oct 2026) ---- */
.adm-pm__search { display: flex; flex-direction: column; gap: 6px; min-width: min(320px, 100%); color: #cdc7bc; font-size: 0.78rem; font-weight: 600; }
.adm-pm__search input { padding: 9px 11px; border: 1px solid rgba(243, 238, 229, 0.12); background: #0c0b0a; color: var(--ink); font: inherit; font-weight: 400; }
.adm-pm__id { margin-left: 8px; color: #8d867c; font-size: 0.72rem; }
.adm-pm__msg { color: var(--gold-light); font-size: 0.76rem; }
.adm-pm__row { padding: 16px 20px 20px; }
.adm-pm__badge { margin-left: 4px; color: var(--gold-light); font-style: normal; font-weight: 500; }
.adm-pm__actions { position: relative; display: flex; gap: 6px; flex-wrap: wrap; }
.adm-pm__actions .adm-ghost--sm { margin-top: 8px; display: inline-flex; align-items: center; cursor: pointer; }
/* asli file input chhupa hai, "Change" label usse kholta hai */
.adm-photo .adm-pm__actions input.adm-pm__file { position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.adm-pm__actions:focus-within .adm-pm__change { outline: 2px solid var(--gold-light); outline-offset: 2px; }
@media (max-width: 760px) {
  .adm-pm__row { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px; }
}

/* About: naya brand card (QR codes ke saath). Purana rule 5/3 + cover tha,
   jo QR codes kaat deta — isliye poori photo bina crop ke. */
.brand-panel > img.brand-panel__card { aspect-ratio: auto; height: auto; object-fit: contain; background: #000; }

/* Combo modal: "Choose another duo / combo" strip. Saare duo ki photo ek
   jaisi hai, isliye neeche andar ke attar ke naam bhi. */
.modal-related__item:has(.modal-related__picks) { width: 112px; }
.modal-related__picks {
  display: block;
  padding: 0 6px 8px;
  color: var(--muted-2);
  font-size: 0.6rem;
  line-height: 1.3;
  text-align: center;
}

/* gifts.html — client ki list ke neeche CTA */
.gf__cta { display: flex; justify-content: center; margin-top: 26px; }
.gf__cta:empty { display: none; }

/* ===========================================================================
   16 Oct 2026 — client changes
   =========================================================================== */

/* Loader wordmark: "Scentelle" normal likhawat me, koi gold akshar nahi */
.loader__name { text-transform: none; letter-spacing: 0.06em; }
.loader__name b { color: inherit; }

/* Site photos: gallery aur slot sirf photo hone par dikhte hain.
   .more__gallery ka display:grid [hidden] ko jeet leta tha. */
[data-site-gallery][hidden],
[data-site-slot][hidden] { display: none !important; }
/* "More than fragrance" cards ab link hain (WhatsApp enquiry) */
a.more__card { color: inherit; text-decoration: none; cursor: pointer; }
a.more__card:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.more__ask {
  display: inline-block; margin-top: auto; padding-top: 6px;
  color: var(--gold-light); font-style: normal; font-size: 0.78rem; letter-spacing: 0.04em;
}
a.more__card:hover .more__ask { text-decoration: underline; }

/* khaali Luxury / Solid section chhupa rahe */
main > section[hidden] { display: none !important; }