/* base.css: Nagpal Girlswear demo store.
   Tokens, reset, shared components and the shared chrome (announcement bar, header,
   drawers, sheets, search, toasts, footer). Page CSS adds to this and never redefines it.

   Contrast notes (measured): --ink is 12.3:1 on --bg and 15.7:1 on --surface.
   --muted is 6.1:1 on --bg and 7.8:1 on --surface.
   --bg is 12.3:1 on --ink. White on --accent is 6.0:1, and --accent is 4.7:1 against --bg. */

:root {
  --bg: #f8dde4;
  --surface: #ffffff;
  --ink: #351a2b;
  --muted: #6c4857;
  --accent: #be185d;
  --accent-ink: #fff;
  --focus: var(--ink);
  --surface-deep: color-mix(in srgb, var(--surface) 86%, var(--ink));
  /* Corner-to-corner stroke for sold-out sizes (ink, 2px at any tile size). */
  --strike: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L100 0' fill='none' stroke='%23351a2b' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");

  --font: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.75rem, 1rem + 8vw, 10rem);

  --margin: clamp(16px, 2.2vw, 32px);
  --gap: clamp(12px, 1.6vw, 24px);
  --section: clamp(96px, 12vw, 200px);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-ui: cubic-bezier(.76, 0, .24, 1);
  --t-fast: .3s;
  --t-mid: .5s;
  --t-slow: .8s;

  --announce-h: 32px;
  --header-h: 64px;

  --z-header: 40;
  --z-backdrop: 99;
  --z-drawer: 100;
  --z-sheet: 110;
  --z-toast: 120;
  --z-curtain: 200;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: .98;
  text-wrap: balance;
}
h1, h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-lead); letter-spacing: -.03em; line-height: 1.1; }
h4 { font-size: var(--step-body); letter-spacing: -.02em; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
a:not([class]) { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .08em; }
s { text-decoration-thickness: 1px; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--bg); }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; border-radius: 0; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, a, summary, label, select, [role="button"] { touch-action: manipulation; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
:where(input, select, textarea):focus-visible { outline-offset: 2px; }

.is-inverse { background: var(--ink); color: var(--bg); --focus: var(--bg); }

/* Layout ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: 1920px; margin-inline: auto; padding-inline: var(--margin); }
.section { padding-block: var(--section); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: calc(var(--z-curtain) + 10);
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 500;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; --focus: var(--bg); outline-offset: -6px; }

/* Type ------------------------------------------------------------------ */
.t-small { font-size: var(--step-small); line-height: 1.45; }
.t-body { font-size: var(--step-body); line-height: 1.5; }
.t-lead { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -.02em; font-weight: 500; }
.t-head { font-size: var(--step-head); line-height: .98; letter-spacing: -.04em; font-weight: 600; text-wrap: balance; }
.t-display { font-size: var(--step-display); line-height: .92; letter-spacing: -.045em; font-weight: 600; text-wrap: balance; }
.t-muted { color: var(--muted); }

/* Controls -------------------------------------------------------------- */
/* Controls are flat tone steps: no outlines. Press feedback uses the `scale` property, never `transform`,
   so a GSAP tween on the same element (it writes `transform`) is never smoothed or delayed by a CSS transition. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--step-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s linear, color .15s linear, scale .1s linear;
}
.btn:hover { background: var(--muted); }
.btn:active { scale: .97; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--ink); color: var(--accent-ink); }
.btn--quiet { background: var(--surface); color: var(--ink); }
.btn--quiet:hover { background: var(--surface-deep); color: var(--ink); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 1; background: var(--surface); color: var(--ink); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.is-added { background: var(--ink); color: var(--bg); }

/* Chips and size buttons: --surface tile, ink tile when chosen. A sold-out size keeps its label (ink on --surface, 7.9:1)
   and gets a corner-to-corner stroke, drawn as an SVG so it stays 2px at any tile size. */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  min-width: 48px;
  padding: 0 18px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--step-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s linear, color .15s linear, scale .1s linear;
}
.chip:hover { background: var(--surface-deep); }
.chip:active { scale: .97; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.chip:disabled { background: var(--strike) center / 100% 100% no-repeat, var(--surface); color: var(--ink); cursor: not-allowed; }

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s linear, color .15s linear, scale .1s linear;
}
.icon-btn:hover { background: var(--surface); }
.icon-btn:active { scale: .97; }
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn[aria-pressed="true"] svg { fill: currentColor; }
.icon-btn__count {
  position: absolute;
  top: 2px; right: 0;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
  pointer-events: none;
}

.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
  cursor: pointer;
  transition: color .15s linear, text-decoration-thickness .15s linear;
}
.link:hover { text-decoration-thickness: .16em; color: var(--muted); }
.is-inverse .link:hover { color: var(--surface); }
.footer .link:hover { color: var(--ink); }
button.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* Price ----------------------------------------------------------------- */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: var(--step-body); line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; }
.price__now { font-weight: 600; letter-spacing: -.01em; }
.price__mrp { color: var(--muted); font-weight: 400; }
.price__off { font-weight: 500; }

/* Product card ---------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px) var(--gap);
}
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: start;
  min-width: 0;
}
/* Overlays share the photo's grid cell, so they sit on the photo without a wrapper element. */
/* overflow: clip (not hidden) so the photo's scroll-driven drift below can watch the page scroller. */
.card__media { grid-area: 1 / 1; position: relative; display: block; overflow: hidden; overflow: clip; aspect-ratio: 4 / 5; background: var(--surface); }
.card__media img { width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
/* The reveal curtain: a flat panel in the section's ground colour (set --ground on a section that is not on --bg).
   Hidden until core.js arms it, so the photo shows if scripts fail; it lifts off the photo as the card scrolls in. */
.card__cover { display: none; position: absolute; inset: -1px; background: var(--ground, var(--bg)); pointer-events: none; }
.card__heart, .card__badge, .card__quick, .card__plus { grid-area: 1 / 1; z-index: 1; }
.card__heart, .card__plus {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: 8px;
  background: var(--bg);
  color: var(--ink);
  transition: background-color .15s linear, color .15s linear, opacity .15s linear, scale .1s linear;
}
.card__heart { align-self: start; justify-self: end; }
.card__plus { align-self: end; justify-self: end; }
.card__heart svg, .card__plus svg { width: 22px; height: 22px; }
.card__heart[aria-pressed="true"] svg { fill: currentColor; }
.card__heart:hover, .card__plus:hover { background: var(--ink); color: var(--bg); }
.card__heart:active, .card__plus:active { scale: .97; }
.card__plus.is-added { background: var(--ink); color: var(--bg); }
.card__badge {
  align-self: start;
  justify-self: start;
  margin: 8px;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--step-small);
  font-weight: 500;
  line-height: 1.3;
  pointer-events: none;
}
.card__body { grid-area: 2 / 1; display: grid; gap: 4px; align-content: start; padding-top: 12px; }
@media (max-width: 479px) { .card__body .price__now { flex-basis: 100%; } }
.card__name { font-size: var(--step-body); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; }
.card__name a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .18em;
  transition: text-decoration-color .15s linear;
}
.card__name a:hover { text-decoration-color: currentColor; }

.card__quick { display: none; }
@media (hover: hover) and (pointer: fine) {
  .card__media img { transition: transform 600ms var(--ease-out); }
  .card:hover .card__media img { transform: scale(1.04); }
  .card__quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    align-self: end;
    gap: 4px;
    padding: 8px;
    overflow: hidden;
    pointer-events: none;
  }
  .card__size {
    min-height: 44px;
    background: var(--bg);
    color: var(--ink);
    font-size: var(--step-small);
    font-weight: 500;
    transform: translateY(calc(100% + 16px));
    transition: transform var(--t-fast) var(--ease-out), background-color .15s linear, color .15s linear;
  }
  .card__size:nth-child(2) { transition-delay: 30ms, 0s, 0s; }
  .card__size:nth-child(3) { transition-delay: 60ms, 0s, 0s; }
  .card__size:nth-child(4) { transition-delay: 90ms, 0s, 0s; }
  .card__size:nth-child(5) { transition-delay: 120ms, 0s, 0s; }
  .card__size:nth-child(6) { transition-delay: 150ms, 0s, 0s; }
  .card:hover .card__size, .card__quick:focus-within .card__size { transform: none; pointer-events: auto; }
  .card__size:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
  .card__size:disabled { background: var(--strike) center / 100% 100% no-repeat, var(--surface); color: var(--ink); cursor: not-allowed; }
  .card__size.is-added { background: var(--ink); color: var(--bg); }
  .card__size svg { width: 18px; height: 18px; margin: auto; stroke-width: 2.2; }
  /* Keyboard users reach quick add through the "+" button; it only shows when focused. */
  .card__plus { opacity: 0; pointer-events: none; }
  .card__plus:focus-visible { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover .card__media img { transform: none; }
  .card__size { transform: none !important; opacity: 0; transition: opacity .2s linear !important; }
  .card:hover .card__size, .card__quick:focus-within .card__size { opacity: 1; }
}
/* Touch: the photo presses in under the thumb and springs back. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .card__media { transition: scale .2s var(--ease-out); }
  .card__media:active { scale: .97; }
}
/* Scroll drift (compositor only): the photo rests slightly enlarged and slides through its frame as the card
   crosses the screen. Individual scale/translate properties compose with the hover transform and GSAP. */
@keyframes ng-drift { from { translate: 0 -3%; } to { translate: 0 3%; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .card__media img { scale: 1.06; animation: ng-drift linear both; animation-timeline: view(); }
  }
}

/* Backdrop, drawers, sheets --------------------------------------------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(53, 26, 43, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s var(--ease-ui), visibility 0s linear .24s;
}
.backdrop.is-on { opacity: 1; visibility: visible; transition: opacity var(--t-fast) var(--ease-out), visibility 0s; }

.drawer {
  position: fixed;
  top: 0; bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(calc(100vw - 40px), 440px);
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  visibility: hidden;
  transition: transform .24s var(--ease-ui), visibility 0s linear .24s;
}
.drawer--left { left: 0; transform: translateX(-100%); }
.drawer--right { right: 0; transform: translateX(100%); }
.drawer.is-open { transform: none; visibility: visible; transition: transform .36s var(--ease-out), visibility 0s; }
.drawer__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-h);
  padding: 8px calc(var(--margin) - 6px) 8px var(--margin);
}
.drawer__title { font-size: var(--step-lead); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.drawer__foot { flex: none; padding: 16px var(--margin) calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--surface); color: var(--ink); }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sheet);
  width: min(100%, 560px);
  max-height: 88vh;
  max-height: 88dvh;
  margin-inline: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px var(--margin) calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  color: var(--ink);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .3s var(--ease-ui), visibility 0s linear .3s;
}
.sheet.is-open { transform: none; visibility: visible; transition: transform var(--t-mid) var(--ease-out), visibility 0s; }
/* From 640px a sheet is a centred dialog: a bottom sheet that wide looks stranded at the foot of the screen. */
@media (min-width: 640px) {
  .sheet {
    top: 0;
    height: fit-content;
    max-height: min(88dvh, 44rem);
    margin-block: auto;
    padding: 28px 32px 32px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .24s var(--ease-ui), transform .3s var(--ease-ui), visibility 0s linear .3s;
  }
  .sheet.is-open { opacity: 1; transform: none; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-mid) var(--ease-out), visibility 0s; }
}
.sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.sheet__title { font-size: var(--step-lead); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.sheet__product { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 20px; }
.sheet__product img { width: 64px; height: 80px; object-fit: cover; background: var(--surface); }
.sheet__name { font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.sheet__sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet__sizes .chip { flex: 1 0 auto; min-width: calc((100% - 17px) / 3); }
@media (min-width: 480px) { .sheet__sizes .chip { min-width: calc((100% - 41px) / 6); } }
.sheet__hint { margin-top: 16px; }
.sheet__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; }
.sheet__actions--guide { margin-top: 20px; }
.sheet__note { margin-bottom: 16px; }

/* WhatsApp number chooser (core.js, NG.waPick): one full-width row per number, the number in large tabular figures.
   Rows rise in 30ms apart on the sheet's own entrance ease; with reduced motion they simply appear with the sheet. */
.sheet__sub { margin-top: 6px; color: var(--muted); line-height: 1.35; }
.wa-pick { display: grid; gap: 8px; list-style: none; }
.wa-pick__row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 0 20px;
  background: var(--surface);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s linear, color .15s linear, scale .1s linear;
}
.wa-pick__row svg { width: 28px; height: 28px; flex: none; }
.wa-pick__num {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.wa-pick__row:active { scale: .98; }
@media (hover: hover) { .wa-pick__row:hover { background: var(--surface-deep); } }
@keyframes ng-wa-rise { from { opacity: 0; translate: 0 14px; } }
@media (prefers-reduced-motion: no-preference) {
  .sheet--wa.is-open .wa-pick__row { animation: ng-wa-rise .5s var(--ease-out) calc(60ms + var(--i, 0) * 30ms) backwards; }
}

/* Size guide table */
.size-table { width: 100%; margin-top: 4px; font-variant-numeric: tabular-nums; }
.size-table th, .size-table td { padding: 12px 14px; text-align: left; font-weight: 400; }
.size-table th { font-weight: 600; }
.size-table thead th { background: var(--ink); color: var(--bg); font-weight: 500; }
.size-table tbody tr:nth-child(even) { background: var(--surface); }

/* Announcement bar and header ------------------------------------------- */
.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--announce-h);
  padding: 4px var(--margin);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--step-small);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 479px) { .announce__extra { display: none; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: var(--bg);
  color: var(--ink);
}
.site-header__inner { display: flex; align-items: center; gap: var(--gap); height: 100%; padding-inline: var(--margin); }
.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
  white-space: nowrap;
}
.site-header__nav { display: none; align-items: center; gap: 8px; }
.site-header__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: .1em;
  text-underline-offset: .28em;
  transition: text-decoration-color .15s linear;
}
.site-header__link:hover, .site-header__link[aria-current="page"] { text-decoration-color: currentColor; }
.site-header__tools { display: flex; align-items: center; gap: 8px; }
.site-header__menu {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: background-color .15s linear, scale .1s linear;
}
.site-header__menu:hover { background: var(--surface); }
.site-header__menu:active { scale: .97; }
.site-header__wish, .site-header__wa { display: none; }
@media (min-width: 390px) { .site-header__wish { display: inline-grid; } }
@media (min-width: 640px) { .site-header__wa { display: inline-grid; } }
@media (min-width: 900px) {
  .site-header__nav { display: flex; margin-right: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .site-header { view-transition-name: ng-header; }
}

/* Menu drawer ------------------------------------------------------------ */
.menu-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.menu-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0 24px;
  background: var(--bg);
  transition: transform var(--t-mid) var(--ease-ui), visibility 0s;
}
/* A panel hides after its slide ends, and shows at once, so focus can move into it right away. */
.menu-panel--sub { transform: translateX(100%); visibility: hidden; transition: transform var(--t-mid) var(--ease-ui), visibility 0s linear var(--t-mid); }
.is-sub .menu-panel--main { transform: translateX(-30%); visibility: hidden; transition: transform var(--t-mid) var(--ease-ui), visibility 0s linear var(--t-mid); }
.is-sub .menu-panel--sub { transform: none; visibility: visible; transition: transform var(--t-mid) var(--ease-ui), visibility 0s; }
.menu-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px var(--margin);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-align: left;
  transition: background-color .15s linear;
}
.menu-link:hover { background: var(--surface); }
.menu-link:hover .menu-link__note { color: var(--ink); }
.menu-link[aria-current="page"] { font-weight: 600; }
.menu-link svg { width: 22px; height: 22px; flex: none; }
.menu-link__note { margin-left: 10px; color: var(--muted); font-size: var(--step-small); font-weight: 400; letter-spacing: 0; }
.menu-link__main { display: flex; align-items: baseline; flex-wrap: wrap; }
.menu-count { min-width: 28px; padding: 2px 8px; background: var(--ink); color: var(--bg); font-size: var(--step-small); font-weight: 600; line-height: 1.4; text-align: center; letter-spacing: 0; }
.menu-back { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; margin-bottom: 4px; padding: 8px var(--margin) 8px calc(var(--margin) - 4px); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; text-align: left; transition: background-color .15s linear; }
.menu-back:hover { background: var(--surface); }
.menu-back svg { width: 24px; height: 24px; }

.menu-link:focus-visible, .menu-back:focus-visible, .search-hit:focus-visible { outline-offset: -4px; }

/* Bag drawer ------------------------------------------------------------- */
.bag-list { display: grid; gap: 24px; margin: 0; padding: 8px var(--margin) 24px; list-style: none; }
.bag-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
.bag-item__img { display: block; width: 76px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.bag-item__img img { width: 100%; height: 100%; object-fit: cover; }
.bag-item__info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.bag-item__name { font-weight: 500; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; }
.bag-item__name:hover { text-decoration: underline; text-underline-offset: .18em; }
.bag-item__meta { font-size: var(--step-small); color: var(--muted); }
.bag-item__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 4px; }
.bag-qty { display: inline-flex; align-items: center; }
.bag-qty button { display: grid; place-items: center; width: 44px; height: 44px; background: var(--surface); transition: background-color .15s linear, color .15s linear, scale .1s linear; }
.bag-qty button:hover { background: var(--ink); color: var(--bg); }
.bag-qty button:active { scale: .97; }
.bag-qty button svg { width: 20px; height: 20px; stroke-width: 2.2; }
.bag-qty output { min-width: 40px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.bag-item__remove { margin-left: auto; }
.bag-empty { display: grid; gap: 16px; justify-items: start; padding: 24px var(--margin) 32px; }
.bag-empty__title { font-size: var(--step-head); }
.bag-ship { display: grid; gap: 10px; margin-bottom: 16px; }
.bag-ship__bar { height: 8px; background: var(--bg); overflow: hidden; }
.bag-ship__fill { display: block; height: 100%; background: var(--ink); transform-origin: left center; transform: scaleX(0); transition: transform var(--t-mid) var(--ease-out); }
.bag-subtotal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; font-size: var(--step-lead); letter-spacing: -.02em; }
.bag-subtotal strong { font-weight: 600; }
.bag-actions { display: grid; gap: 8px; }
.bag-note { margin-top: 12px; font-size: var(--step-small); }
.bag-foot .btn--primary:hover { background: var(--ink); }

/* Search ----------------------------------------------------------------- */
.search-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-drawer);
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--ink);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .24s var(--ease-ui), visibility 0s linear .24s;
}
.search-panel.is-open { transform: none; visibility: visible; transition: transform .36s var(--ease-out), visibility 0s; }
.search-panel__inner { max-width: 880px; margin-inline: auto; padding: 14px var(--margin) 28px; }
.search-form { display: flex; align-items: center; gap: 8px; }
.search-input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--step-lead);
  font-weight: 500;
  letter-spacing: -.02em;
}
.search-input::placeholder { color: var(--ink); opacity: .72; font-weight: 400; }
.search-input:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; }
.search-input::-webkit-search-cancel-button, .search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-form .btn { display: none; }
@media (min-width: 640px) { .search-form .btn { display: inline-flex; } }
.search-results { margin-top: 20px; }
.search-label { margin-bottom: 8px; color: var(--muted); font-size: var(--step-small); }
.search-hits { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.search-hit { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 64px; padding: 6px 8px; transition: background-color .15s linear; }
.search-hit:hover { background: var(--surface); }
.search-hit img { width: 48px; height: 60px; object-fit: cover; background: var(--surface); }
.search-hit__name { font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.search-hit__price { font-weight: 600; }
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.search-all { margin-top: 12px; }

/* Toasts ----------------------------------------------------------------- */
.toast-region {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--sticky-bar-h, 0px) + var(--toast-lift, 0px));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-inline: 16px;
  pointer-events: none;
}
.toast-region.in-bag { left: auto; right: 0; width: min(calc(100vw - 40px), 440px); }
.toast {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  max-width: min(100%, 480px);
  min-height: 56px;
  padding: 6px 6px 6px 20px;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--step-body);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  pointer-events: auto;
  --focus: var(--bg);
}
.toast__action { flex: none; min-height: 44px; padding: 0 16px; background: var(--bg); color: var(--ink); font-weight: 500; transition: background-color .15s linear, scale .1s linear; }
.toast__action:hover { background: var(--surface); }
.toast__action:active { scale: .97; }
.toast.is-in { animation: ng-toast-in var(--t-fast) var(--ease-out) both; }
.toast.is-out { animation: ng-toast-out .24s var(--ease-ui) both; }
@keyframes ng-toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ng-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }

/* Fly-to-bag thumbnail ----------------------------------------------------- */
.fly { position: fixed; top: 0; left: 0; z-index: calc(var(--z-toast) + 1); object-fit: cover; pointer-events: none; will-change: transform; }
.is-bump { transform-origin: center; }

/* Reveal hooks ------------------------------------------------------------- */
[data-reveal="img"] { overflow: hidden; }
/* SplitText line masks clip at the line box; tight headings need room for descenders (g, p, y).
   Bottom only: sibling margins collapse, so a top margin would add space between lines. */
.ng-line-mask { padding-bottom: .16em; margin-bottom: -.16em; }

/* Footer ------------------------------------------------------------------- */
/* The footer is the white surface, so on Home the page closes in white after the aubergine WhatsApp chapter. */
.footer { background: var(--surface); color: var(--ink); overflow: hidden; }
.footer__mark { container-type: inline-size; padding: clamp(40px, 6vw, 96px) var(--margin) 0; }
/* The wordmark spans the full content width and is cut along its bottom edge: the descenders of g and p are sliced,
   every capital and baseline stays whole. 7.103em is the measured ink width of "Nagpal Girlswear" with its tracking
   (re-measure if the brand changes), and the left margin removes the N's side bearing so the ink starts on the margin. */
.footer__word {
  display: block;
  height: .9em;
  margin-block: 0;
  overflow: hidden;
  margin-left: -.067em;
  font-size: 13.4vw;
  font-size: calc(100cqw / 7.103);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .86;
  white-space: nowrap;
  text-wrap: nowrap;
}
.footer__body { display: grid; gap: 40px; padding-top: clamp(40px, 5vw, 72px); }
.footer__places { display: grid; gap: 12px; align-content: start; font-size: var(--step-lead); letter-spacing: -.02em; line-height: 1.3; }
.footer__places a { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }
.footer__places a:hover { text-decoration-thickness: .16em; }
.footer__group { display: grid; gap: 4px; }
.footer__label { font-size: var(--step-small); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gap); align-content: start; }
.footer__links ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.footer__links a, .footer__links button { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-body); font-weight: 500; text-align: left; }
.footer__links a { text-decoration: none; }
.footer__links a:hover, .footer__links button:hover { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }
.footer__warn { padding-top: clamp(40px, 5vw, 72px); }
.footer__warn p { max-width: 34ch; font-size: var(--step-lead); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.footer__legal { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding-top: clamp(40px, 6vw, 96px); padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); font-size: var(--step-small); }
.footer__legal p { max-width: 60ch; }
.footer__legal-end { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.credits { flex-basis: 100%; }
.credits summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; cursor: pointer; list-style: none; }
.credits summary::-webkit-details-marker { display: none; }
.credits summary span { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: .08em; }
.credits summary::after { content: "+"; font-size: 1.25em; font-weight: 400; line-height: 1; }
.credits[open] summary::after { content: "\2212"; }
.credits__list { display: grid; gap: 0 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); margin: 8px 0; padding: 0; list-style: none; }
.credits__list li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-height: 44px; padding-block: 4px; line-height: 1.35; }
.credits__list a { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 900px) {
  .footer__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .footer__places { grid-column: 1 / span 5; }
  .footer__links { grid-column: 7 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Page and filter transitions (progressive: http only, never file://; Chrome 126+, Safari 18.2+) -------------- */
/* The photo frame carries the shared name (never the <img>, which drifts and scales inside it). */
.card__media, .dcard__media, .pdp-slide:first-child { view-transition-class: ng-photo; }
@keyframes ng-page-out { to { opacity: 0; transform: scale(.98); } }
@keyframes ng-page-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes ng-card-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes ng-card-out { to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  /* Taps and scrolls pass through while a transition runs. */
  ::view-transition { pointer-events: none; }
  ::view-transition-group(*) { animation-duration: var(--t-mid); animation-timing-function: var(--ease-out); }
  /* Page to page: the old page leaves fast, the new one rises in, the header stays and the photo morphs. */
  ::view-transition-old(root) { animation: ng-page-out .25s var(--ease-ui) both; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: ng-page-in .45s var(--ease-out) .1s both; mix-blend-mode: normal; }
  ::view-transition-group(.ng-photo) { animation-duration: .6s; animation-timing-function: var(--ease-out); }
  /* Filter changes on the same page: only the cards move (core.js, NG.swapGrid). */
  html.is-swapping::view-transition-old(root) { display: none; }
  html.is-swapping::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-group(.ng-card) { animation-duration: var(--t-mid); animation-timing-function: var(--ease-ui); }
  ::view-transition-new(.ng-card):only-child { animation: ng-card-in .45s var(--ease-out) .1s both; }
  ::view-transition-old(.ng-card):only-child { animation: ng-card-out .25s var(--ease-out) both; }
}

/* Reduced motion: fades only, no travel -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .drawer, .drawer--left, .drawer--right, .sheet, .search-panel { transform: none; opacity: 0; transition: opacity .2s linear, visibility 0s linear .2s; }
  .drawer.is-open, .sheet.is-open, .search-panel.is-open { opacity: 1; transition: opacity .2s linear, visibility 0s; }
  .menu-panel, .menu-panel--sub, .is-sub .menu-panel--main, .is-sub .menu-panel--sub { transform: none; transition: opacity .2s linear, visibility 0s; }
  .menu-panel--sub, .is-sub .menu-panel--main { opacity: 0; transition: opacity .2s linear, visibility 0s linear .2s; }
  .is-sub .menu-panel--sub { opacity: 1; transition: opacity .2s linear, visibility 0s; }
  .toast.is-in { animation: ng-fade-in .2s linear both; }
  .toast.is-out { animation: ng-fade-out .2s linear both; }
  .bag-ship__fill { transition: none; }
  .btn:active, .chip:active, .icon-btn:active, .card__heart:active, .card__plus:active, .site-header__menu:active, .bag-qty button:active, .toast__action:active, .wa-pick__row:active { scale: none; }
}
@keyframes ng-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ng-fade-out { from { opacity: 1; } to { opacity: 0; } }