/* ==========================================================================
   Zoha Kids Wear — design system and site styles
   Mobile first. Breakpoints: 600px (large phones), 900px (tablet/desktop), 1200px.
   Colours come from the supplied logo: navy #032C62 and coral #F45B52,
   with soft yellow and cobalt as supporting accents.
   ========================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/figtree-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  --navy: #032c62;
  --navy-700: #0a3a7a;
  --navy-900: #021f47;
  --ink: #0b1d3a;
  --ink-2: #3e4b63;
  --muted: #5a6580;
  --line: #dce2ec;
  --line-strong: #7a869c;
  --paper: #ffffff;
  --paper-2: #f5f7fb;
  --paper-3: #e9eef7;
  --cream: #fbf7f0;
  --cream-2: #f4ede0;
  --sky: #e8eeff;

  --coral: #f45b52;
  --coral-hover: #f7736b;
  --coral-300: #ff9c94;
  --coral-700: #b8342b;
  --coral-50: #fdecea;
  --sun: #ffd45c;
  --sun-hover: #ffdc7a;
  --sun-600: #e9b92e;
  --sun-50: #fff6d6;
  --cobalt: #2b4fe0;
  --mint: #dff3ea;
  --success: #0d6e4c;
  --success-50: #e5f4ec;
  --error: #b42318;
  --error-50: #fef0ee;

  --on-navy: #ffffff;
  --on-navy-2: #c9d5ee;
  --on-navy-3: #afc0e4;

  --font-display: 'Bricolage Grotesque', 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(3 44 98 / 0.06), 0 1px 1px rgb(3 44 98 / 0.04);
  --shadow-md: 0 10px 30px -12px rgb(3 44 98 / 0.28);
  --shadow-lg: 0 30px 70px -24px rgb(2 20 48 / 0.5);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast: 150ms;
  --base: 240ms;

  --gutter: 20px;
  --maxw: 1280px;
  --header-h: 64px;
  --section-y: clamp(56px, 7vw + 24px, 112px);
}

@media (min-width: 600px) {
  :root { --gutter: 32px; }
}
@media (min-width: 900px) {
  :root { --gutter: 48px; --header-h: 76px; }
}

/* ---------- Reset & base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@view-transition { navigation: auto; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

@media (min-width: 900px) {
  body { font-size: 1.0625rem; }
}

img,
svg,
picture,
video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul[role='list'],
ol[role='list'] { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; text-underline-offset: 3px; }
button,
input,
select,
textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a,
button,
label,
summary { -webkit-tap-highlight-color: transparent; }
code { font-size: 0.9em; background: rgb(3 44 98 / 0.07); padding: 0.1em 0.35em; border-radius: 4px; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.hero :focus-visible,
.section--navy :focus-visible,
.site-footer :focus-visible { outline-color: var(--sun); }
::selection { background: var(--sun); color: var(--ink); }

html:has(dialog[open]) { overflow: hidden; }
main:focus { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Typography ---------- */

.display,
.h1,
.h2,
.h3,
.h4 {
  font-family: var(--font-display);
  color: inherit;
  text-wrap: balance;
}
.display {
  font-size: clamp(2.7rem, 1.2rem + 6.4vw, 5.6rem);
  font-weight: 780;
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.5rem);
  font-weight: 740;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  font-weight: 720;
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.h3 {
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.h4 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral-700);
}
.eyebrow--light { color: var(--coral-300); }
.lede {
  max-width: 62ch;
  margin-top: 14px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lede-sm { font-size: 1.125rem; color: var(--ink); }
.muted { color: var(--muted); }
.prose h3 { font-family: var(--font-display); font-size: 1.125rem; margin: 20px 0 8px; }
.prose p + p { margin-top: 10px; }
.prose a { color: var(--navy); font-weight: 600; }

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow { max-width: calc(820px + var(--gutter) * 2); }
.section { padding-block: var(--section-y); }
.section--compact { padding-block: clamp(40px, 5vw, 64px); }
.section--flush-top { padding-top: 0; }
.section--tint { background: var(--paper-2); }
.section--paper { background: var(--cream); }
.section--navy {
  background: radial-gradient(90% 70% at 100% 0%, rgb(43 79 224 / 0.35), transparent 60%), var(--navy);
  color: var(--on-navy);
}
.stack > * + * { margin-top: 16px; }
.stack--lg > * + * { margin-top: 32px; }
.stack--xl > * + * { margin-top: 48px; }
.split { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .split--form { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
}

/* Reveal on scroll (only when the script runs, so nothing is ever hidden without it). */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
html.js [data-reveal].is-revealed { opacity: 1; transform: none; }
html.js [data-reveal]:nth-child(2) { transition-delay: 80ms; }
html.js [data-reveal]:nth-child(3) { transition-delay: 160ms; }
html.js [data-reveal]:nth-child(4) { transition-delay: 240ms; }

/* ---------- Buttons & links ---------- */

.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--btn-border);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--base) var(--ease);
}
.btn .icon { flex: none; }
.btn:active { transform: scale(0.98); }
.btn[disabled],
.btn[aria-disabled='true'] { opacity: 0.6; cursor: not-allowed; }
.btn--lg { min-height: 58px; padding-inline: 28px; font-size: 1.0625rem; }
.btn--sm { min-height: 40px; padding-inline: 16px; font-size: 0.9375rem; }
.btn--block { width: 100%; }
.btn--primary { --btn-bg: var(--navy); --btn-fg: #fff; }
.btn--coral { --btn-bg: var(--coral); --btn-fg: var(--ink); }
.btn--sun { --btn-bg: var(--sun); --btn-fg: var(--ink); }
.btn--outline { --btn-bg: #fff; --btn-fg: var(--navy); --btn-border: var(--navy); }
.btn--light-outline { --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgb(255 255 255 / 0.75); }
.btn--quiet { --btn-bg: transparent; --btn-fg: var(--navy); min-height: 48px; text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) {
  .btn--primary:hover { --btn-bg: var(--navy-700); box-shadow: var(--shadow-md); }
  .btn--coral:hover { --btn-bg: var(--coral-hover); box-shadow: 0 10px 30px -12px rgb(244 91 82 / 0.7); }
  .btn--sun:hover { --btn-bg: var(--sun-hover); box-shadow: 0 10px 30px -12px rgb(233 185 46 / 0.8); }
  .btn--outline:hover { --btn-bg: var(--sky); }
  .btn--light-outline:hover { --btn-bg: rgb(255 255 255 / 0.1); --btn-border: #fff; }
  .btn--quiet:hover { --btn-bg: var(--paper-2); }
}
.btn.is-pending { pointer-events: none; opacity: 0.75; }
.btn.is-pending .icon { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.text-btn:hover { text-decoration-thickness: 2.5px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.link-arrow .icon { transition: transform var(--fast) var(--ease); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-arrow--light { color: #fff; }

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--navy);
  text-decoration: none;
  transition: background-color var(--fast) var(--ease);
}
@media (hover: hover) {
  .icon-btn:hover { background: var(--paper-2); }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--fast), border-color var(--fast), color var(--fast);
}
.chip:hover { border-color: var(--navy); }
.chip[aria-current],
.chip[aria-pressed='true'] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip--sm { min-height: 36px; padding-inline: 12px; font-size: 0.875rem; }
.chip--ghost { border-style: dashed; }
.chip--static { cursor: default; border-color: var(--line); }
.chip-row { display: flex; gap: 8px; overflow-x: auto; margin-top: 18px; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row--wrap { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
.chip-row--inline { display: inline-flex; flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
@media (min-width: 600px) {
  .chip-row { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
}

/* ---------- Badges, tags & preview markers ---------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status--stock { background: var(--success-50); color: var(--success); }
.status--preorder { background: var(--sun); color: var(--ink); }
.status--made { background: var(--coral-50); color: var(--coral-700); }
.status--soldout { background: var(--paper-3); color: var(--ink-2); }

.tag-sample {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--ink);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.sticker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  box-shadow: 0 0 0 3px #fff, var(--shadow-sm);
  transform: rotate(-3deg);
}
.sticker--coral { background: var(--coral); }

.is-preview .tbc {
  text-decoration: underline dashed var(--sun-600);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.preview-note {
  margin-bottom: 28px;
  padding: 14px 18px;
  border: 2px dashed var(--sun-600);
  border-radius: var(--r-md);
  background: var(--sun-50);
  color: var(--ink);
  font-size: 0.9375rem;
}
.preview-note-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ph-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 6px 12px 6px 10px;
  border-radius: var(--r-pill);
  background: rgb(11 29 58 / 0.84);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}
.ph-caption .icon { flex: none; }

.sample-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-2); }

/* ---------- Preview ribbon & header ---------- */

.preview-ribbon { background: var(--sun); color: var(--ink); font-size: 0.8125rem; line-height: 1.35; }
.preview-ribbon-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding-block: 6px; }
.preview-ribbon strong {
  margin-right: 6px;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: var(--ink);
  color: var(--sun);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ribbon-long { display: none; }
.ribbon-link { flex: none; min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .preview-ribbon { font-size: 0.875rem; }
  .ribbon-short { display: none; }
  .ribbon-long { display: inline; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(255 255 255 / 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  transition: box-shadow var(--base) var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -18px rgb(3 44 98 / 0.45); }
.header-inner { display: flex; align-items: center; gap: 8px; height: var(--header-h); }
.brand { display: flex; align-items: center; margin-right: auto; padding: 6px 4px 6px 0; border-radius: var(--r-sm); }
.brand-logo { width: auto; height: 40px; }
.wordmark { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.wordmark span { color: var(--coral-700); font-weight: 700; }
.primary-nav { display: none; }
.header-actions { display: flex; align-items: center; gap: 0; margin-right: -8px; }
.bag-count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--coral);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}
.bag-count.is-bumped { animation: bump 380ms var(--ease); }
@keyframes bump { 40% { transform: scale(1.3); } }

@media (min-width: 900px) {
  .brand-logo { height: 46px; }
  .primary-nav { display: block; }
  .primary-nav ul { display: flex; align-items: center; gap: 2px; }
  .primary-nav a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--r-pill);
    font-weight: 700;
    text-decoration: none;
    color: var(--ink);
    transition: background-color var(--fast), color var(--fast);
  }
  .primary-nav a:hover { background: var(--paper-2); }
  .primary-nav a[aria-current] { background: var(--sky); color: var(--navy); }
  .menu-btn { display: none; }
  .header-actions { margin-left: 12px; }
}

/* ---------- Footer ---------- */

.site-footer { position: relative; padding-block: 0 28px; background: var(--navy); color: var(--on-navy-2); font-size: 0.9375rem; }
.site-footer .container { position: relative; }
.washing-line { position: relative; height: 150px; overflow: hidden; background: linear-gradient(to bottom, var(--paper) 0, var(--paper) 40px, var(--navy) 40px); }
.section--tint + .site-footer .washing-line { background: linear-gradient(to bottom, var(--paper-2) 0, var(--paper-2) 40px, var(--navy) 40px); }
.washing-line-rope { position: absolute; left: -2%; top: 24px; width: 104%; height: 40px; }
.washing-line-items { position: absolute; left: 0; right: 0; top: 30px; display: flex; justify-content: space-around; padding: 0 4%; }
.peg { position: relative; width: 64px; transform-origin: 50% 0; animation: sway 4.2s ease-in-out infinite alternate; }
.peg--2 { animation-delay: -1.1s; animation-duration: 4.8s; }
.peg--3 { animation-delay: -2.3s; animation-duration: 3.9s; }
.peg--4 { animation-delay: -0.6s; animation-duration: 5.1s; }
.peg--5 { animation-delay: -3s; animation-duration: 4.4s; }
.peg-clip { position: absolute; left: 50%; top: -6px; width: 8px; height: 22px; border-radius: 3px; background: #c89b6d; translate: -50% 0; z-index: 1; }
.peg img { width: 64px; height: auto; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.25)); }
@keyframes sway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@media (min-width: 600px) { .peg, .peg img { width: 84px; } .washing-line { height: 176px; } }
.footer-top { display: grid; gap: 40px; padding-top: 24px; }
.footer-logo { display: inline-flex; padding: 10px 16px; border-radius: var(--r-md); background: #fff; }
.footer-logo-img { width: auto; height: 52px; }
.footer-tagline { max-width: 40ch; margin-top: 18px; color: var(--on-navy); font-size: 1.0625rem; }
.footer-brand .contact-list,
.footer-brand .contact-tbc { margin-top: 18px; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.footer-h { margin-bottom: 10px; color: #fff; font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--on-navy-2); text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 0.16); color: var(--on-navy-3); font-size: 0.875rem; }
.contact-list { display: grid; gap: 6px; }
.contact-list a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.contact-tbc { color: var(--ink-2); }
.site-footer .contact-tbc { color: var(--on-navy-2); }
@media (min-width: 900px) {
  .footer-top { grid-template-columns: 1.1fr 1.9fr; gap: 64px; }
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Dialogs: sheets, drawer ---------- */

dialog { max-width: 100%; max-height: 100%; padding: 0; border: 0; background: var(--paper); color: var(--ink); }
dialog::backdrop { background: rgb(2 20 48 / 0.55); }
dialog[open]::backdrop { animation: fade-in var(--base) ease; }

.sheet,
.drawer { box-shadow: var(--shadow-lg); }
.sheet[open],
.drawer[open] { display: flex; flex-direction: column; }
.sheet { width: 100%; margin: auto 0 0; max-height: 92dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.sheet[open] { animation: sheet-in 280ms var(--ease); }
.drawer { width: min(440px, 100%); height: 100%; max-height: 100dvh; margin: 0 0 0 auto; }
.drawer[open] { animation: drawer-in 280ms var(--ease); }
.sheet-inner { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.sheet-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 10px 8px 20px; border-bottom: 1px solid var(--line); }
.sheet-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 720; letter-spacing: -0.015em; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.sheet-foot { display: grid; flex: none; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
.sheet-foot--split { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) {
  .sheet { width: min(660px, calc(100% - 48px)); max-height: 86dvh; margin: auto; border-radius: var(--r-lg); }
  .sheet--wide { width: min(860px, calc(100% - 48px)); }
}
@keyframes sheet-in { from { transform: translateY(28px); opacity: 0; } }
@keyframes drawer-in { from { transform: translateX(28px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* menu */
.menu-list { display: grid; }
.menu-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; text-decoration: none; }
.menu-link small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.menu-link .icon { color: var(--coral-700); flex: none; }
.menu-link[aria-current] { color: var(--navy); }
.menu-link[aria-current] span { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.menu-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 18px; border-bottom: 1px solid var(--line); }
.menu-help { display: grid; gap: 4px; margin-top: 20px; }
.menu-help a { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; text-decoration: none; color: var(--navy); }

/* bag */
.bag-title-count { color: var(--muted); font-weight: 600; }
.bag-added { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--success-50); color: var(--success); font-weight: 700; }
.bag-lines { display: grid; gap: 16px; }
.bag-line { display: grid; grid-template-columns: 84px 1fr; gap: 14px; }
.bag-line.is-new { animation: fade-in 500ms ease; }
.bag-line-media { overflow: hidden; border-radius: var(--r-sm); background: var(--paper-2); aspect-ratio: 4 / 5; }
.bag-line-media img { width: 100%; height: 100%; object-fit: cover; }
.bag-line-name { font-weight: 700; line-height: 1.3; text-decoration: none; }
.bag-line-name:hover { text-decoration: underline; }
.bag-line-meta { margin-top: 2px; font-size: 0.875rem; color: var(--muted); }
.bag-line-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.bag-line-price { font-weight: 800; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); }
.qty button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-pill); background: none; color: var(--navy); }
.qty button:disabled { color: var(--line-strong); cursor: not-allowed; }
.qty output { min-width: 28px; font-weight: 800; text-align: center; }
.bag-remove { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 0.875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bag-empty { display: grid; justify-items: center; gap: 10px; padding: 24px 8px; text-align: center; }
.bag-empty p { color: var(--ink-2); }
.bag-empty-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 4px; border-radius: 50%; background: var(--sky); color: var(--navy); }
.bag-empty-actions { display: grid; gap: 10px; width: 100%; margin-top: 12px; }
.bag-total { display: flex; align-items: baseline; justify-content: space-between; font-size: 1.125rem; font-weight: 800; }
.bag-total dd { font-family: var(--font-display); font-size: 1.375rem; }
.bag-delivery,
.bag-notice { display: flex; gap: 10px; font-size: 0.875rem; color: var(--ink-2); }
.bag-delivery .icon,
.bag-notice .icon { flex: none; margin-top: 2px; }
.bag-notice { padding: 10px 12px; border-radius: var(--r-sm); background: var(--sun-50); color: var(--ink); }

/* ---------- Hero & stage ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(70% 55% at 100% 0%, rgb(43 79 224 / 0.42), transparent 62%), radial-gradient(50% 40% at 0% 100%, rgb(244 91 82 / 0.18), transparent 70%), var(--navy);
  color: var(--on-navy);
}
.hero-grid { display: grid; grid-template-areas: 'copy' 'stage' 'links'; gap: 20px; padding-block: 28px 24px; }
.hero-copy { grid-area: copy; max-width: 640px; }
.hero-links { grid-area: links; }
.hero .eyebrow { margin-bottom: 16px; }
.verb-swap { position: relative; display: inline-grid; color: var(--coral); }
.hero-accent { color: var(--coral); }
.legal { display: grid; gap: 32px; }
.legal-section .h3 { margin-bottom: 10px; }
.legal-section p + p { margin-top: 10px; }
.legal-section .bullets li + li { margin-top: 10px; }
.size-note { font-size: 0.9375rem; }
.hero-photo { grid-area: stage; width: min(100%, 520px); margin: 0 auto; overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg); }
.hero-photo picture, .custom-figure picture { display: block; height: 100%; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .hero-photo { width: 100%; max-height: 620px; } }
.verb-swap .verb { grid-area: 1 / 1; opacity: 0; transform: translateY(0.45em) rotate(2deg); transform-origin: 0 100%; transition: opacity 380ms var(--ease), transform 480ms var(--ease-bounce); white-space: nowrap; }
.verb-swap .verb.is-active { opacity: 1; transform: none; }
.verb-swap .verb.is-leaving { opacity: 0; transform: translateY(-0.4em) rotate(-2deg); transition: opacity 260ms ease, transform 300ms ease; }
.verb-sizer { grid-area: 1 / 1; visibility: hidden; white-space: nowrap; }
.hero-lede { max-width: 38ch; margin-top: 14px; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--on-navy-2); text-wrap: pretty; }
.hero-actions { display: grid; gap: 12px; margin-top: 24px; }
.hero-eid { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding: 10px 14px; border-radius: var(--r-md); background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.14); color: var(--on-navy-2); font-size: 0.9375rem; line-height: 1.45; }
.hero-eid .icon { flex: none; color: var(--sun); margin-top: 2px; }
.hero-eid strong { color: #fff; }
.hero-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.hero-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--on-navy-2); font-size: 0.9375rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(201 213 238 / 0.45); text-underline-offset: 5px; }
.hero-links a:hover { color: #fff; text-decoration-color: currentColor; }
.hero-links .icon { color: var(--coral-300); }

.stage { grid-area: stage; position: relative; aspect-ratio: 1 / 1.05; max-height: 560px; margin-inline: auto; width: min(100%, 520px); isolation: isolate; }
.stage-glow { position: absolute; inset: 6% 8% 14%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 212 92 / 0.55), rgb(255 212 92 / 0.12) 60%, transparent 72%); filter: blur(2px); }
.stage-floor { position: absolute; left: 14%; right: 14%; bottom: 10%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.42), transparent); }
.stage-star { position: absolute; top: 6%; right: 12%; color: var(--sun); animation: twinkle 2.6s ease-in-out infinite; }
.stage-star svg { fill: currentColor; }
@keyframes twinkle { 0%, 100% { transform: scale(0.8) rotate(-8deg); opacity: 0.55; } 50% { transform: scale(1.15) rotate(10deg); opacity: 1; } }
.performer { position: absolute; inset: 0 0 4%; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity 500ms var(--ease), transform 600ms var(--ease); pointer-events: none; }
.performer.is-active { opacity: 1; transform: none; pointer-events: auto; }
.figure { height: 100%; width: auto; max-width: 100%; overflow: visible; }
.performer--eid { gap: 4%; padding-inline: 4%; }
.performer--eid .figure--main { height: 96%; }
.performer--eid .figure--second { height: 62%; margin-bottom: 2%; }
.stage-caption {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: 92%;
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 0.96);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.stage-caption strong { display: inline-flex; align-items: center; gap: 4px; color: var(--navy); }
.stage-controls { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 8px; }
.stage-dot { position: relative; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.stage-dot::before { content: ''; position: absolute; inset: 7px; border: 2px solid rgb(255 255 255 / 0.7); border-radius: 50%; transition: background-color var(--fast), transform var(--fast), border-color var(--fast); }
.stage-dot.is-active::before { background: var(--sun); border-color: var(--sun); transform: scale(1.15); }
.stage-pause { display: grid; place-items: center; width: 32px; height: 32px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.14); color: #fff; }
.stage-pause[aria-pressed='true'] { background: var(--sun); color: var(--ink); }

/* The performances. Each part group has its transform-origin set inline, in SVG units. */
.p-figure, .p-skirt, .p-sleeve, .p-legs, .p-dupatta, .p-body, .p-vest, .p-coat { transform-box: view-box; }
.is-playing.performer--twirling .p-figure,
.performer--twirling.is-active .p-figure { animation: twirl-body 2.6s ease-in-out infinite; }
.is-playing.performer--twirling .p-skirt,
.performer--twirling.is-active .p-skirt { animation: twirl-skirt 1.3s ease-in-out infinite alternate; }
.is-playing.performer--twirling .p-sleeve-l,
.performer--twirling.is-active .p-sleeve-l { animation: arm-out-l 1.3s ease-in-out infinite alternate; }
.is-playing.performer--twirling .p-sleeve-r,
.performer--twirling.is-active .p-sleeve-r { animation: arm-out-r 1.3s ease-in-out infinite alternate-reverse; }
.is-playing.performer--twirling .p-dupatta,
.performer--twirling.is-active .p-dupatta { animation: dupatta-sway 1.3s ease-in-out infinite alternate; }
@keyframes twirl-body { 0%, 100% { transform: rotate(-4deg) translateY(0); } 25% { transform: rotate(3deg) translateY(-16px); } 50% { transform: rotate(-3deg) translateY(0); } 75% { transform: rotate(4deg) translateY(-12px); } }
@keyframes twirl-skirt { from { transform: scaleX(0.92) skewX(-5deg); } to { transform: scaleX(1.14) skewX(5deg); } }
@keyframes arm-out-l { from { transform: rotate(4deg); } to { transform: rotate(38deg); } }
@keyframes arm-out-r { from { transform: rotate(-4deg); } to { transform: rotate(-38deg); } }
@keyframes dupatta-sway { from { transform: skewX(-6deg) translateX(-6px); } to { transform: skewX(6deg) translateX(6px); } }

.is-playing.performer--jumping .p-figure,
.performer--jumping.is-active .p-figure { animation: jump 1.7s cubic-bezier(0.3, 0, 0.2, 1) infinite; }
.is-playing.performer--jumping .p-sleeve-l,
.performer--jumping.is-active .p-sleeve-l { animation: arms-up-l 1.7s cubic-bezier(0.3, 0, 0.2, 1) infinite; }
.is-playing.performer--jumping .p-sleeve-r,
.performer--jumping.is-active .p-sleeve-r { animation: arms-up-r 1.7s cubic-bezier(0.3, 0, 0.2, 1) infinite; }
.is-playing.performer--jumping .p-legs,
.performer--jumping.is-active .p-legs { animation: legs-tuck 1.7s cubic-bezier(0.3, 0, 0.2, 1) infinite; transform-origin: 400px 540px; }
@keyframes jump { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(8px) scale(1.06, 0.93); } 36% { transform: translateY(-96px) scale(0.97, 1.05); } 56% { transform: translateY(-96px) scale(1, 1); } 78% { transform: translateY(0) scale(1.06, 0.94); } 88% { transform: translateY(-12px) scale(0.99, 1.01); } }
@keyframes arms-up-l { 0%, 12%, 100% { transform: rotate(0); } 36%, 56% { transform: rotate(120deg); } 78% { transform: rotate(-6deg); } }
@keyframes arms-up-r { 0%, 12%, 100% { transform: rotate(0); } 36%, 56% { transform: rotate(-120deg); } 78% { transform: rotate(6deg); } }
@keyframes legs-tuck { 0%, 12%, 100% { transform: scaleY(1); } 36%, 56% { transform: scaleY(0.82); } 78% { transform: scaleY(1.04); } }

.is-playing.performer--dancing .p-figure,
.performer--dancing.is-active .p-figure { animation: dance-body 1.9s ease-in-out infinite; }
.is-playing.performer--dancing .p-skirt,
.performer--dancing.is-active .p-skirt { animation: dance-skirt 0.95s ease-in-out infinite alternate; }
.is-playing.performer--dancing .p-sleeve-l,
.performer--dancing.is-active .p-sleeve-l { animation: arm-out-l 0.95s ease-in-out infinite alternate; }
.is-playing.performer--dancing .p-sleeve-r,
.performer--dancing.is-active .p-sleeve-r { animation: arm-out-r 0.95s ease-in-out infinite alternate; }
.is-playing.performer--dancing .p-dupatta,
.performer--dancing.is-active .p-dupatta { animation: dupatta-sway 0.95s ease-in-out infinite alternate; }
@keyframes dance-body { 0%, 100% { transform: translateX(-22px) rotate(-5deg); } 50% { transform: translateX(22px) rotate(5deg); } 25%, 75% { transform: translateY(-10px); } }
@keyframes dance-skirt { from { transform: scaleX(0.96) skewX(-6deg); } to { transform: scaleX(1.16) skewX(6deg); } }

.is-playing.performer--eid .figure--main .p-figure,
.performer--eid.is-active .figure--main .p-figure { animation: bob 2.2s ease-in-out infinite; }
.is-playing.performer--eid .figure--second .p-figure,
.performer--eid.is-active .figure--second .p-figure { animation: bob 2.2s ease-in-out -1.1s infinite; }
.is-playing.performer--eid .figure--main .p-sleeve-r,
.performer--eid.is-active .figure--main .p-sleeve-r { animation: wave 2.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes wave { 0%, 40%, 100% { transform: rotate(0); } 55% { transform: rotate(-140deg); } 65% { transform: rotate(-120deg); } 75% { transform: rotate(-140deg); } 85% { transform: rotate(0); } }

.stage.is-paused .performer * { animation-play-state: paused !important; }

@media (min-width: 600px) {
  .hero-actions { display: flex; flex-wrap: wrap; }
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: '. stage' 'copy stage' 'links stage' '. stage';
    column-gap: 48px;
    row-gap: 20px;
    padding-block: 56px 64px;
  }
  .stage { width: 100%; max-height: 620px; aspect-ratio: 1 / 1.1; }
}

/* marquee */
.marquee { overflow: hidden; background: var(--sun); color: var(--ink); border-block: 1px solid rgb(11 29 58 / 0.08); }
.marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: 22px; padding: 10px 22px 10px 0; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.marquee-star { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section heads ---------- */

.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.section-head-text { max-width: 720px; }
.section-intro { margin-top: 12px; max-width: 58ch; color: var(--ink-2); font-size: 1.0625rem; text-wrap: pretty; }
.section--navy .section-intro { color: var(--on-navy-2); }

/* ---------- Category tiles ---------- */

.cat-grid { display: grid; gap: 12px; }
.cat-tile {
  --tile-bg: var(--coral);
  --tile-fg: var(--ink);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 42%;
  overflow: hidden;
  min-height: 136px;
  border-radius: var(--r-lg);
  background: var(--tile-bg);
  color: var(--tile-fg);
  text-decoration: none;
  isolation: isolate;
}
.cat-tile--coral { --tile-bg: var(--coral); --tile-fg: var(--ink); }
.cat-tile--navy { --tile-bg: var(--navy); --tile-fg: #fff; }
.cat-tile--sun { --tile-bg: var(--sun); --tile-fg: var(--ink); }
.cat-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 18px 8px 18px 22px; }
.cat-name { font-family: var(--font-display); font-size: 1.875rem; font-weight: 760; line-height: 1; letter-spacing: -0.03em; }
.cat-blurb { font-size: 0.9375rem; font-weight: 500; line-height: 1.35; opacity: 0.92; }
.cat-count { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.875rem; font-weight: 800; }
.cat-count .icon { transition: transform var(--fast) var(--ease); }
.cat-media { position: relative; }
.cat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 600ms var(--ease); }
@media (hover: hover) {
  .cat-tile:hover .cat-media img { transform: scale(1.05) rotate(-2deg); }
  .cat-tile:hover .cat-count .icon { transform: translateX(4px); }
}
@media (min-width: 600px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .cat-tile { grid-template-columns: 1fr; grid-template-rows: 1fr auto; min-height: 0; aspect-ratio: 4 / 5; }
  .cat-text { order: 2; justify-content: flex-end; padding: 4px 20px 22px; }
  .cat-media { order: 1; min-height: 0; }
  .cat-name { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); }
}

/* ---------- Play stages ---------- */

.play-grid { display: grid; gap: 16px; }
.play-stage { position: relative; display: grid; gap: 6px; padding: 20px 20px 22px; border-radius: var(--r-lg); background: #fff; border: 1px solid rgb(11 29 58 / 0.08); box-shadow: var(--shadow-sm); }
.play-figure { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 6%; height: 220px; margin-bottom: 8px; border-radius: var(--r-md); background: radial-gradient(60% 50% at 50% 100%, rgb(3 44 98 / 0.08), transparent); overflow: visible; }
.play-figure .figure { height: 100%; }
.play-stage--eid .figure--second { height: 62%; }
.play-stage h3 { margin-top: 6px; }
.play-stage p { color: var(--ink-2); font-size: 0.9375rem; }
.play-stage.is-playing { --dummy: 1; }
.play-stage--twirling.is-playing .p-figure { animation: twirl-body 2.6s ease-in-out infinite; }
.play-stage--twirling.is-playing .p-skirt { animation: twirl-skirt 1.3s ease-in-out infinite alternate; }
.play-stage--twirling.is-playing .p-sleeve-l { animation: arm-out-l 1.3s ease-in-out infinite alternate; }
.play-stage--twirling.is-playing .p-sleeve-r { animation: arm-out-r 1.3s ease-in-out infinite alternate-reverse; }
.play-stage--jumping.is-playing .p-figure { animation: jump 1.7s cubic-bezier(0.3, 0, 0.2, 1) infinite; }
.play-stage--jumping.is-playing .p-sleeve-l { animation: arms-up-l 1.7s cubic-bezier(0.3, 0, 0.2, 1) infinite; }
.play-stage--jumping.is-playing .p-sleeve-r { animation: arms-up-r 1.7s cubic-bezier(0.3, 0, 0.2, 1) infinite; }
.play-stage--dancing.is-playing .p-figure { animation: dance-body 1.9s ease-in-out infinite; }
.play-stage--dancing.is-playing .p-skirt { animation: dance-skirt 0.95s ease-in-out infinite alternate; }
.play-stage--dancing.is-playing .p-dupatta { animation: dupatta-sway 0.95s ease-in-out infinite alternate; }
.play-stage--eid.is-playing .figure .p-figure { animation: bob 2.2s ease-in-out infinite; }
.play-stage--eid.is-playing .figure--second .p-figure { animation-delay: -1.1s; }
.play-stage--eid.is-playing .figure:not(.figure--second) .p-sleeve-r { animation: wave 2.2s ease-in-out infinite; }
@media (min-width: 600px) { .play-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .play-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Product cards & grids ---------- */

.rail {
  display: grid;
  grid-auto-columns: 72%;
  grid-auto-flow: column;
  gap: 14px;
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding: 4px var(--gutter) 12px;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 600px) { .rail { grid-auto-columns: 40%; } }
@media (min-width: 900px) {
  .rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; overflow: visible; margin-inline: 0; padding: 0; }
  .rail--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
@media (min-width: 900px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
  .product-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .product-grid:not(.product-grid--two):not(.product-grid--shop) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card-media { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--paper-2); aspect-ratio: 4 / 5; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--base) var(--ease), transform 600ms var(--ease); }
.card-media-alt { position: absolute; inset: 0; display: none; opacity: 0; }
.card-badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px; pointer-events: none; }
.card-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 680; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; text-wrap: pretty; }
.card-title a { text-decoration: none; }
.card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-md); }
.card-title a:focus-visible { outline: none; }
.card-title a:focus-visible::after { outline: 3px solid var(--cobalt); outline-offset: 4px; }
.card-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 4px; font-size: 0.9375rem; color: var(--ink-2); }
.card-price { font-weight: 800; color: var(--ink); }
.card-pkr { font-size: 0.8125rem; }
.card-pieces { font-size: 0.8125rem; }
@media (hover: hover) and (min-width: 900px) {
  .card-media-alt { display: block; }
  .card:hover .card-media-alt { opacity: 1; }
  .card:hover .card-media img { transform: scale(1.03); }
  .card:hover .card-title a { text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 599px) {
  .product-grid .card-badges .status { font-size: 0.75rem; padding-inline: 8px; }
  .product-grid .card-title { font-size: 1rem; }
  .product-grid .card-meta { font-size: 0.875rem; }
}
.card--skeleton .card-media { background: linear-gradient(100deg, var(--paper-2) 30%, var(--paper-3) 50%, var(--paper-2) 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.sk { display: block; height: 14px; border-radius: 6px; background: var(--paper-3); }
.sk--title { width: 80%; }
.sk--meta { width: 45%; margin-top: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Occasions, custom, pre-order, guides, help ---------- */

.occ-layout { display: grid; gap: 28px; }
.occ-grid { display: grid; gap: 12px; }
.occ-tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; text-decoration: none; transition: border-color var(--base), box-shadow var(--base) var(--ease), transform var(--base) var(--ease); }
.occ-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sun-50); color: var(--coral-700); }
.occ-text strong { display: block; font-family: var(--font-display); font-size: 1.125rem; }
.occ-text span { font-size: 0.9375rem; color: var(--ink-2); }
@media (hover: hover) { .occ-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); } }
@media (min-width: 900px) { .occ-layout { grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; } }

.eid-dates { margin-top: 20px; padding: 16px 18px; border-radius: var(--r-md); background: var(--sun-50); border: 1px solid #f3dc8e; color: var(--ink); }
.eid-dates-title { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.eid-dates ul { display: grid; gap: 6px; margin-top: 10px; }
.eid-dates li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 0.9375rem; }
.eid-dates li span { color: var(--ink-2); }
.eid-dates-note { margin-top: 10px; font-size: 0.8125rem; color: var(--muted); }
.eid-dates--compact { margin-top: 20px; }
.section--navy .eid-dates { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.16); color: #fff; }
.section--navy .eid-dates li span, .section--navy .eid-dates-note { color: var(--on-navy-2); }

.custom-grid { display: grid; gap: 40px; }
.custom-copy .h2 { color: #fff; }
.steps { display: grid; gap: 20px; margin-top: 28px; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.steps p { margin-top: 4px; color: var(--ink-2); }
.section--navy .steps p { color: var(--on-navy-2); }
.steps--guide { margin-top: 12px; }
.step-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--coral); color: var(--ink); font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; }
.custom-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.custom-media { position: relative; }
.custom-figure { position: relative; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 4 / 5; background: var(--sky); }
.custom-figure img { width: 100%; height: 100%; object-fit: cover; }
.stitch-card { padding: 16px 18px 14px; border-radius: var(--r-md); background: #fff; color: var(--ink); box-shadow: var(--shadow-md); }
.stitch-card p { margin-top: 4px; font-size: 0.875rem; color: var(--ink-2); text-align: center; }
.stitch-card--float { position: absolute; left: 12px; right: 12px; bottom: -28px; }
.stitch { width: 100%; height: auto; }
.stitch-text { font-family: var(--font-display); font-size: 88px; font-weight: 800; letter-spacing: 0.02em; fill: none; stroke: var(--coral); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 9 7; animation: stitch-run 6s linear infinite; }
.stitch-text--under { stroke: var(--coral-50); stroke-width: 10; stroke-dasharray: none; animation: none; }
.stitch-needle { transform: translate(60px, 118px); animation: needle 6s ease-in-out infinite; }
@keyframes stitch-run { to { stroke-dashoffset: -400; } }
@keyframes needle { 0% { transform: translate(60px, 118px); } 50% { transform: translate(330px, 60px); } 100% { transform: translate(60px, 118px); } }
@media (max-width: 599px) { .custom-actions .btn { width: 100%; } .custom-media { margin-bottom: 36px; } }
@media (min-width: 900px) {
  .custom-grid { grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: center; }
  .steps { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
  .steps--guide { grid-template-columns: 1fr; }
  .split .steps { grid-template-columns: 1fr; }
}

.preorder-band { display: grid; gap: 28px; }
.preorder-copy { padding: 28px 24px; border-radius: var(--r-lg); background: var(--sun-50); border: 1px solid #f6e2a0; }
.preorder-copy .eyebrow { color: var(--ink); }
.preorder-copy p { margin-top: 14px; color: var(--ink-2); max-width: 56ch; }
.preorder-copy .btn { margin-top: 24px; }
.preorder-terms { font-size: 0.9375rem; }
.mini-cards { display: grid; gap: 12px; align-content: center; }
.mini-card { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; transition: box-shadow var(--base) var(--ease), border-color var(--base); }
.mini-card img { width: 96px; height: 120px; border-radius: var(--r-sm); object-fit: cover; }
.mini-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-card-title { margin-top: 8px; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 680; line-height: 1.25; overflow-wrap: anywhere; }
.mini-card-title a { text-decoration: none; }
.mini-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-md); }
.mini-card-meta { margin-top: 4px; font-size: 0.9375rem; color: var(--ink-2); }
@media (hover: hover) { .mini-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); } }
@media (min-width: 900px) { .preorder-band { grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: stretch; } .preorder-copy { padding: 44px; } }

.guide-cards { display: grid; gap: 14px; }
.guide-card a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px 22px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; text-decoration: none; transition: border-color var(--base), box-shadow var(--base) var(--ease), transform var(--base) var(--ease); }
.guide-card p { color: var(--ink-2); font-size: 0.9375rem; flex: 1; }
.guide-card-time { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral-700); }
@media (hover: hover) { .guide-card a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); } }
@media (min-width: 900px) { .guide-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .guide-cards--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guide-group + .guide-group { margin-top: 40px; }
.guide-group .h3 { margin-bottom: 14px; }
.guide-links { display: grid; gap: 10px; }
.guide-links a { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); text-decoration: none; }
.guide-links a:hover { border-color: var(--line-strong); }
.guide-links-cat { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral-700); }
.guide-links-time { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--muted); }
@media (min-width: 900px) { .section .guide-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } .guide-more .guide-links { grid-template-columns: 1fr; } }
.guide-meta { display: flex; align-items: center; gap: 6px; margin-top: -12px; margin-bottom: 28px; font-size: 0.875rem; color: var(--muted); }
.guide-body { font-size: 1.0625rem; }
.guide-section + .guide-section { margin-top: 36px; }
.guide-section .h3 { margin-bottom: 12px; }
.guide-section p + p { margin-top: 12px; }
.bullets--spaced { gap: 10px; margin-top: 8px; }
.guide-related { margin-top: 40px; }
.guide-related .h4 { margin-bottom: 10px; }
.guide-related .chip { min-height: 40px; padding-block: 8px; white-space: normal; text-align: left; line-height: 1.3; }
.guide-more { margin-top: 36px; }
.guide-more .h4 { margin-bottom: 10px; }

.pk-band { display: grid; gap: 20px; }
.pk-band p { color: var(--ink-2); max-width: 50ch; }
@media (min-width: 900px) { .pk-band { grid-template-columns: 1fr 1.2fr; align-items: center; gap: 48px; } }

.help-grid { display: grid; gap: 12px; }
.help-tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 88px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; text-decoration: none; transition: border-color var(--base), box-shadow var(--base) var(--ease), transform var(--base) var(--ease); }
.help-tile strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; }
.help-tile span span { display: block; font-size: 0.9375rem; color: var(--ink-2); }
.help-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sky); color: var(--navy); }
.help-arrow { color: var(--navy); }
@media (hover: hover) { .help-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); } }
@media (min-width: 900px) { .help-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* ---------- Page header, breadcrumb, shared blocks ---------- */

.page-header { padding-block: 24px 36px; }
.page-header .eyebrow { margin-top: 12px; }
.page-header .h1 { margin-top: 8px; }
@media (min-width: 900px) { .page-header { padding-block: 32px 48px; } }

.breadcrumb ol { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--muted); white-space: nowrap; overflow: hidden; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li:last-child { min-width: 0; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink-2); }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb [aria-current] { overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 600; }

.pending-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); background: var(--paper-2); }
.pending-card p { margin-top: 4px; color: var(--ink-2); }
.pending-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--navy); }

.cta-band { display: grid; gap: 20px; padding: 28px 24px; border-radius: var(--r-lg); background: var(--sky); }
.cta-band p { margin-top: 6px; color: var(--ink-2); }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1fr auto; align-items: center; padding: 36px 40px; } }
@media (max-width: 599px) { .cta-band-actions .btn { flex: 1 1 100%; } }

.empty-state { display: grid; justify-items: center; gap: 12px; padding: 48px 24px; border-radius: var(--r-lg); background: var(--paper-2); text-align: center; }
.empty-state p { max-width: 52ch; color: var(--ink-2); }
.empty-icon { display: grid; place-items: center; width: 80px; height: 80px; margin-bottom: 4px; border-radius: 50%; background: #fff; color: var(--coral-700); box-shadow: var(--shadow-sm); }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
.empty-state--404 { overflow: hidden; }
.peek { height: 120px; width: 100px; overflow: hidden; }
.peek img { width: 100px; height: auto; animation: peek 3s ease-in-out infinite; }
@keyframes peek { 0%, 100% { transform: translateY(70px) rotate(-6deg); } 40%, 60% { transform: translateY(6px) rotate(0); } }

.policy-title { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.policy-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sky); color: var(--navy); flex: none; }

.checklist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.checklist li { position: relative; padding-left: 26px; }
.checklist li::before { content: ''; position: absolute; left: 4px; top: 0.6em; width: 10px; height: 10px; border: 2px solid var(--sun-600); border-radius: 50%; }
.checklist--ok li::before { border-color: var(--success); background: var(--success); }

.fact-list { display: grid; gap: 14px; }
.fact-list div { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); background: var(--paper-2); }
.fact-list dt { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral-700); }

.faq-list { display: grid; }
.faq summary { font-size: 1.0625rem; }

/* ---------- Product page ---------- */

.pdp-top { padding-top: 8px; }
.pdp { display: grid; gap: 24px; padding-bottom: var(--section-y); }
.pdp-info { min-width: 0; }
@media (min-width: 900px) { .pdp { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 8px; } }
@media (min-width: 900px) and (min-height: 760px) { .gallery { position: sticky; top: calc(var(--header-h) + 20px); } }
@media (min-width: 1200px) { .pdp { gap: 72px; } }

.gallery { min-width: 0; }
.gallery-track { position: relative; display: grid; grid-auto-columns: 100%; grid-auto-flow: column; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { position: relative; scroll-snap-align: center; }
.gallery-open { display: block; width: 100%; padding: 0; border: 0; background: var(--paper-2); cursor: zoom-in; }
.gallery-open img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gallery-view { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.92); color: var(--ink); font-size: 0.75rem; font-weight: 800; pointer-events: none; }
.gallery-ui { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.gallery-thumbs { display: flex; gap: 8px; }
.gallery-thumb { width: 56px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--r-sm); background: var(--paper-2); opacity: 0.7; transition: opacity var(--fast), border-color var(--fast); }
.gallery-thumb img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gallery-thumb[aria-current='true'] { border-color: var(--navy); opacity: 1; }
.gallery-count { flex: none; font-size: 0.875rem; font-weight: 700; color: var(--ink-2); }
.gallery-note { display: flex; gap: 8px; margin-top: 12px; font-size: 0.8125rem; color: var(--muted); }
.gallery-note .icon { flex: none; margin-top: 2px; }
@media (min-width: 600px) { .gallery-track { grid-auto-columns: 78%; gap: 12px; margin-inline: 0; } .gallery-open { border-radius: var(--r-md); overflow: hidden; } }
@media (min-width: 900px) {
  .gallery-track { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; }
  .gallery-ui { display: none; }
  .gallery-open img { transition: transform 600ms var(--ease); }
  .gallery-open:hover img { transform: scale(1.02); }
}

.pdp-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-title { margin-top: 14px; font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); font-weight: 740; line-height: 1.08; letter-spacing: -0.028em; overflow-wrap: anywhere; text-wrap: balance; }
.pdp-price { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; font-family: var(--font-display); font-size: 1.625rem; font-weight: 760; letter-spacing: -0.01em; }
.pdp-price-note { padding: 3px 8px; border-radius: var(--r-xs); background: var(--paper-3); color: var(--ink-2); font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0; }
.pdp-summary { margin-top: 12px; color: var(--ink-2); }
.pdp-pieces { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.9375rem; font-weight: 600; }
.pdp-pieces .icon { color: var(--coral-700); }
.pdp-colour { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 600; }
.swatch { display: inline-block; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(11 29 58 / 0.25); }

.mode-panel { margin-top: 24px; padding: 18px 20px; border-radius: var(--r-md); background: var(--paper-2); border: 1px solid var(--line); }
.mode-panel--sun { background: var(--sun-50); border-color: #f3dc8e; }
.mode-panel--coral { background: var(--coral-50); border-color: #f7c9c4; }
.mode-panel-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.125rem; font-weight: 720; }
.mode-panel p { margin-top: 6px; color: var(--ink-2); }
.mode-list { display: grid; gap: 10px; margin-top: 12px; }
.mode-list div { display: grid; gap: 2px; }
.mode-list dt { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.mode-list dd { color: var(--ink-2); }
.mode-steps { display: grid; gap: 8px; margin-top: 12px; counter-reset: step; }
.mode-steps li { position: relative; padding-left: 34px; color: var(--ink-2); counter-increment: step; }
.mode-steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--coral); color: var(--ink); font-size: 0.8125rem; font-weight: 800; }

.buy { margin-top: 24px; }
.size-field { position: relative; }
.field-label { display: block; font-weight: 800; }
.size-field .field-label { float: left; width: 100%; padding-right: 130px; line-height: 44px; }
.field-label-note { color: var(--muted); font-weight: 600; }
.size-guide-btn { position: absolute; top: 0; right: 0; }
.size-grid { clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; padding-top: 6px; }
.size-option { position: relative; }
.size-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.size-option span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 6px 4px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; font-weight: 800; line-height: 1.15; text-align: center; transition: background-color var(--fast), border-color var(--fast), color var(--fast), box-shadow var(--fast); }
.size-option small { font-size: 0.6875rem; font-weight: 700; color: var(--muted); }
.size-option.is-sold-out span { border-style: dashed; color: var(--ink-2); background: repeating-linear-gradient(-45deg, #fff 0 6px, var(--paper-2) 6px 12px); }
.size-option input:hover + span { border-color: var(--navy); }
.size-option input:checked + span { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 6px 16px -8px rgb(3 44 98 / 0.6); }
.size-option input:checked + span small { color: var(--on-navy-2); }
.size-option.is-sold-out input:checked + span { background: var(--paper-3); color: var(--ink); border-style: solid; box-shadow: inset 0 0 0 1px var(--navy); }
.size-option.is-sold-out input:checked + span small { color: var(--ink-2); }
.size-option input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.size-field.has-error .size-option span { border-color: var(--error); }
.field-hint { margin-top: 8px; font-size: 0.875rem; color: var(--muted); }
.field-error { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--error); font-weight: 700; font-size: 0.9375rem; }
.size-status { min-height: 0; margin-top: 6px; font-size: 0.9375rem; font-weight: 700; color: var(--coral-700); }
.size-status:empty { display: none; }
.buy [data-buy-action] { margin-top: 16px; }
.btn-price { margin-left: 2px; padding-left: 12px; border-left: 1.5px solid rgb(255 255 255 / 0.4); }
.buy-help { margin-top: 10px; font-size: 0.875rem; color: var(--ink-2); text-align: center; }

.assurance { display: grid; gap: 0; margin-top: 24px; border-top: 1px solid var(--line); }
.assurance li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.assurance .icon { color: var(--navy); margin-top: 1px; }
.assurance strong { display: block; font-size: 0.9375rem; }
.assurance span { font-size: 0.9375rem; color: var(--ink-2); }

.custom-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 20px; padding: 16px; border-radius: var(--r-md); background: var(--sky); text-decoration: none; transition: box-shadow var(--base) var(--ease), transform var(--base) var(--ease); }
.custom-link-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--coral); color: var(--ink); }
.custom-link-text strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; }
.custom-link-text span { display: block; font-size: 0.9375rem; color: var(--ink-2); }
@media (hover: hover) { .custom-link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } }

.accordions { margin-top: 28px; border-bottom: 1px solid var(--line); }
.accordion { border-top: 1px solid var(--line); }
.accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding-block: 8px; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; list-style: none; cursor: pointer; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { flex: none; transition: transform var(--base) var(--ease); }
.accordion[open] summary .icon { transform: rotate(180deg); }
.accordion-body { display: grid; gap: 12px; padding-bottom: 22px; color: var(--ink-2); }
.bullets { display: grid; gap: 6px; padding-left: 20px; }
.spec { display: grid; gap: 8px; }
.spec div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.spec dt { font-weight: 700; color: var(--ink); }
.spec dd { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; box-shadow: 0 -12px 30px -20px rgb(3 44 98 / 0.4); transform: translateY(110%); transition: transform var(--base) var(--ease); }
.sticky-buy.is-visible { transform: none; }
.sticky-buy-info { flex: 1; min-width: 0; }
.sticky-buy-name { overflow: hidden; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.sticky-buy-meta { display: flex; gap: 8px; font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; }
.sticky-buy-meta span + span:not(:empty)::before { content: '·'; margin-right: 8px; }
.sticky-buy .btn { flex: none; min-height: 50px; padding-inline: 20px; }
body.has-sticky-buy { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .sticky-buy { display: none; } body.has-sticky-buy { padding-bottom: 0; } }

.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; background: #0b1d3a; color: #fff; }
.lightbox[open] { display: block; animation: fade-in var(--base) ease; }
.lightbox::backdrop { background: #0b1d3a; }
.lightbox-inner { position: relative; height: 100%; }
.lightbox-track { position: relative; display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lightbox-track::-webkit-scrollbar { display: none; }
.lightbox-slide { display: grid; flex: 0 0 100%; place-items: center; padding: 64px 12px 56px; scroll-snap-align: center; }
.lightbox-slide img { width: auto; max-width: 100%; height: auto; max-height: 100%; border-radius: var(--r-md); object-fit: contain; }
.lightbox-count { position: absolute; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); font-weight: 700; text-align: center; color: var(--on-navy-2); }
.lightbox .icon-btn { position: absolute; background: rgb(255 255 255 / 0.14); color: #fff; }
.lightbox .icon-btn:hover { background: rgb(255 255 255 / 0.24); }
.lightbox-close { top: 12px; right: 12px; }
.lightbox-nav { top: 50%; translate: 0 -50%; }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
@media (max-width: 599px) { .lightbox-nav { top: auto; bottom: calc(6px + env(safe-area-inset-bottom)); translate: none; } }

/* ---------- Size guide ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.size-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.size-table th,
.size-table td { padding: 12px 14px; text-align: left; white-space: nowrap; }
.size-table thead th { background: var(--paper-2); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.02em; }
.size-table thead th span { color: var(--muted); font-weight: 600; }
.size-table tbody tr + tr { border-top: 1px solid var(--line); }
.size-table tbody th { font-weight: 800; }
.size-table tr.is-highlighted { background: var(--sky); }
.size-table tr.is-highlighted th { color: var(--navy); }
.size-in { color: var(--muted); font-size: 0.8125rem; }
.measure-list { display: grid; gap: 16px; margin-top: 16px; }
.measure-list li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; }
.measure-list p { margin-top: 2px; color: var(--ink-2); }
.measure-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sky); color: var(--navy); font-weight: 800; }
.tips { display: grid; gap: 8px; margin-top: 20px; padding: 16px 18px; border-radius: var(--r-md); background: var(--paper-2); }
.tips li { position: relative; padding-left: 22px; }
.tips li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }

/* ---------- Shop: filters, results, load more ---------- */

.shop-layout { display: grid; gap: 20px; }
.shop-filters { display: none; }
.shop-main { min-width: 0; }
.shop-heading { margin-bottom: 14px; }
.shop-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.filters-btn { min-height: 46px; padding-inline: 16px; }
.filters-btn-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--coral); color: var(--ink); font-size: 0.75rem; }
.shop-count { margin-right: auto; font-weight: 700; color: var(--ink-2); font-size: 0.9375rem; }
.sort { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 700; }
.sort > span:first-child { display: none; }
.select-wrap { position: relative; display: block; }
.select-wrap .icon { position: absolute; right: 12px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--ink-2); }
.select-wrap select { padding-right: 40px; appearance: none; -webkit-appearance: none; }
.select-wrap--sm select { min-height: 46px; }
.applied { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.applied:empty { display: none; }
.applied-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px 0 12px; border: 0; border-radius: var(--r-pill); background: var(--sky); color: var(--navy); font-size: 0.875rem; font-weight: 700; }
.applied-chip .icon { width: 16px; height: 16px; }
.applied-clear { min-height: 36px; padding: 0 6px; border: 0; background: none; color: var(--ink-2); font-size: 0.875rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.shop-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 20px; border-radius: var(--r-lg); background: var(--paper-2); text-align: center; }
.shop-empty p { max-width: 46ch; color: var(--ink-2); }
.shop-more { display: grid; justify-items: center; gap: 10px; margin-top: 36px; }
.shop-more-status { font-size: 0.9375rem; color: var(--ink-2); }
.shop-sentinel { width: 100%; height: 1px; }
.shop-offline { display: flex; gap: 8px; margin-top: 16px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--sun-50); font-size: 0.9375rem; }
.shop-offline .icon { flex: none; margin-top: 2px; }
[data-results][aria-busy='true'] { opacity: 0.6; transition: opacity var(--fast); }

.filters { display: grid; gap: 4px; }
.filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.filter-search { margin-bottom: 8px; }
.search-wrap { position: relative; }
.search-wrap > .icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--ink-2); pointer-events: none; }
.search-wrap .input { padding-left: 44px; padding-right: 44px; }
.search-clear { position: absolute; right: 4px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); }
.filter-group { border-top: 1px solid var(--line); }
.filter-group summary { display: flex; align-items: center; gap: 8px; min-height: 52px; padding-block: 6px; font-weight: 800; list-style: none; cursor: pointer; }
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary > span:first-child { flex: 1; }
.filter-group summary .icon { transition: transform var(--base) var(--ease); color: var(--ink-2); }
.filter-group[open] summary .icon { transform: rotate(180deg); }
.filter-group-active { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--coral); color: var(--ink); font-size: 0.75rem; font-weight: 800; }
.filter-group-active:empty { display: none; }
.filter-group-body { padding-bottom: 14px; }
.filter-subhead { margin: 6px 0 2px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.filter-list { display: grid; gap: 2px; }
.filter-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 40px; padding: 2px 4px; border-radius: var(--r-sm); cursor: pointer; }
.filter-option:hover { background: var(--paper-2); }
.filter-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.filter-option.is-empty { color: var(--muted); }
.filter-option.is-empty input { opacity: 0.4; }
.filter-count { font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.filter-option--swatch .swatch { width: 18px; height: 18px; }
.filter-list--swatches .filter-option { grid-template-columns: auto auto 1fr auto; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.size-chip { position: relative; }
.size-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.size-chip span:first-of-type { display: inline-grid; place-items: center; min-width: 62px; min-height: 40px; padding: 0 10px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; font-size: 0.875rem; font-weight: 800; transition: background-color var(--fast), border-color var(--fast), color var(--fast); }
.size-chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.size-chip input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.size-chip.is-empty span:first-of-type { border-style: dashed; color: var(--muted); }
.price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.price-field { display: grid; gap: 4px; font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); }
.price-field .input { min-height: 44px; }
.price-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.filters-foot { display: none; }
[data-sort-field] { display: none; }
.filters-sheet .sheet-body { padding-top: 8px; }
.filters-sheet .filters-head,
.filters-sheet .filters-foot { display: none; }

@media (min-width: 900px) {
  .shop-layout { grid-template-columns: 272px minmax(0, 1fr); gap: 40px; align-items: start; }
  .shop-filters { display: block; position: sticky; top: calc(var(--header-h) + 12px); max-height: calc(100dvh - var(--header-h) - 24px); overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; scrollbar-width: thin; }
  .filters-btn { display: none; }
  .sort > span:first-child { display: inline; }
  .shop-toolbar { margin-bottom: 18px; }
}
@media (min-width: 1200px) { .shop-layout { grid-template-columns: 296px minmax(0, 1fr); gap: 56px; } .product-grid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .product-grid--shop { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Forms ---------- */

.input { display: block; width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; color: var(--ink); font-size: 1rem; line-height: 1.4; transition: border-color var(--fast), box-shadow var(--fast); }
.input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgb(43 79 224 / 0.2); }
.input--sm { min-height: 44px; padding-block: 8px; font-size: 0.9375rem; }
textarea.input { resize: vertical; min-height: 120px; }
.field { margin-top: 20px; }
.field .field-label { margin-bottom: 6px; }
.field .field-hint { margin: -2px 0 8px; }
.field.has-error .input,
.field.has-error .option-text { border-color: var(--error); }
.field.has-error .input:focus { box-shadow: 0 0 0 3px rgb(180 35 24 / 0.2); }
.form { position: relative; }
.form-fields { display: block; }
.form-actions { display: grid; gap: 14px; margin-top: 28px; }
.form-privacy { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--muted); }
.form-privacy a { color: var(--ink-2); }
.form-success { display: grid; justify-items: center; gap: 10px; padding: 36px 24px; border-radius: var(--r-lg); background: var(--success-50); text-align: center; }
.form-success p { max-width: 50ch; color: var(--ink-2); }
.form-success-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--success); color: #fff; animation: pop 500ms var(--ease-bounce); }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } }
.form-ref { font-size: 0.9375rem; }
.form-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.form-error { display: flex; gap: 12px; margin-bottom: 20px; padding: 14px 16px; border-radius: var(--r-md); background: var(--error-50); border: 1px solid #f3c1bb; color: var(--ink); }
.form-error .icon { flex: none; color: var(--error); margin-top: 2px; }
.form-error p + p { margin-top: 4px; font-size: 0.875rem; }
.form-aside { display: grid; gap: 20px; align-content: start; }
.form-aside .h3 + .h3 { margin-top: 12px; }
.help-links { display: grid; gap: 4px; }
.help-links a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--line); font-weight: 700; text-decoration: none; color: var(--navy); }
.help-links a:hover { text-decoration: underline; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--navy); }

.option-field .field-label { margin-bottom: 8px; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.option-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-grid--sizes { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.option-grid--swatches { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.option { position: relative; }
.option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.option-text { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; font-weight: 700; line-height: 1.2; transition: background-color var(--fast), border-color var(--fast), color var(--fast), box-shadow var(--fast); }
.option-text small { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.option--swatch .option-text { flex-direction: row; align-items: center; gap: 10px; }
.option-swatch { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(11 29 58 / 0.25); pointer-events: none; }
.option--swatch .option-text { padding-left: 42px; }
.option input:hover + .option-text,
.option input:hover ~ .option-text { border-color: var(--navy); }
.option input:checked ~ .option-text { border-color: var(--navy); background: var(--navy); color: #fff; }
.option input:checked ~ .option-text small { color: var(--on-navy-2); }
.option input:focus-visible ~ .option-text { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.option-grid--sizes .option-text { align-items: center; text-align: center; }

.context-card { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; margin-bottom: 24px; padding: 12px; border: 2px solid var(--navy); border-radius: var(--r-md); background: #fff; }
.context-card img { width: 72px; height: 90px; border-radius: var(--r-sm); object-fit: cover; background: var(--paper-2); }
.context-card img[src='data:,'] { visibility: hidden; }
.context-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral-700); }
.context-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.context-meta { font-size: 0.9375rem; color: var(--ink-2); }

/* wizard */
.wizard-layout { display: grid; gap: 32px; }
.wizard-main { min-width: 0; }
.wizard-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 8px; counter-reset: none; }
.wizard-progress li { display: grid; justify-items: center; gap: 6px; padding-top: 8px; border-top: 4px solid var(--line); color: var(--muted); font-size: 0.75rem; font-weight: 700; text-align: center; }
.wizard-progress li.is-done { border-top-color: var(--success); color: var(--ink-2); }
.wizard-progress li.is-current { border-top-color: var(--coral); color: var(--ink); }
.wizard-progress-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper-3); font-size: 0.75rem; font-weight: 800; }
.wizard-progress li.is-current .wizard-progress-n { background: var(--coral); color: var(--ink); }
.wizard-progress li.is-done .wizard-progress-n { background: var(--success); color: #fff; }
.wizard-progress-label { display: none; }
.wizard-step { margin-top: 20px; animation: fade-in 300ms ease; }
.wizard-step legend { margin-bottom: 4px; }
.wizard-step > p { color: var(--ink-2); }
.wizard-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.wizard-nav [data-wizard-next],
.wizard-nav [data-wizard-submit] { margin-left: auto; }
.measure-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.measure-grid .field { margin-top: 12px; }
.style-picker { margin-top: 16px; }
.style-picker-tools { display: grid; gap: 10px; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; max-height: 420px; margin-top: 12px; padding: 4px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.style-option { position: relative; display: block; border-radius: var(--r-sm); }
.style-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.style-option img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--paper-2); }
.style-option-text { display: grid; gap: 1px; padding: 8px 8px 10px; border: 1.5px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); font-size: 0.8125rem; line-height: 1.25; }
.style-option-text strong { font-weight: 700; overflow-wrap: anywhere; }
.style-option-text small { color: var(--muted); }
.style-option input:checked ~ .style-option-text { border-color: var(--navy); background: var(--navy); color: #fff; }
.style-option input:checked ~ .style-option-text small { color: var(--on-navy-2); }
.style-option input:checked ~ img { outline: 3px solid var(--navy); }
.style-option input:focus-visible ~ img { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.style-option[hidden] { display: none; }
.style-picker-empty { margin-top: 10px; color: var(--ink-2); }
.upload { display: grid; gap: 12px; }
.upload input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload input:focus-visible + label { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.upload-preview { display: flex; align-items: center; gap: 14px; }
.upload-preview img { width: 96px; height: 96px; border-radius: var(--r-sm); object-fit: cover; }
.summary-card { padding: 20px; border-radius: var(--r-lg); background: var(--paper-2); }
.summary { display: grid; gap: 10px; margin-top: 8px; }
.summary div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 0.9375rem; }
.summary dt { color: var(--muted); font-weight: 600; }
.summary dd { font-weight: 600; overflow-wrap: anywhere; }
.summary--review { padding: 16px 18px; border-radius: var(--r-md); background: var(--paper-2); }
.summary-empty { margin-top: 10px; font-size: 0.875rem; color: var(--muted); }
.wizard-aside .stitch-card { margin-top: 16px; }
@media (min-width: 600px) { .wizard-progress-label { display: block; } }
@media (min-width: 900px) {
  .wizard-layout { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr); gap: 56px; align-items: start; }
  .wizard-aside { position: sticky; top: calc(var(--header-h) + 16px); }
}

/* ---------- Cities ---------- */

.city-facts { display: grid; gap: 12px; }
.fact-card { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; }
.fact-card p { margin-top: 4px; color: var(--ink-2); font-size: 0.9375rem; }
.fact-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sky); color: var(--navy); }
@media (min-width: 900px) { .city-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.city-region + .city-region { margin-top: 36px; }
.city-region .h3 { margin-bottom: 14px; }
.city-grid { display: grid; gap: 10px; }
.city-tile { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; text-decoration: none; transition: border-color var(--base), box-shadow var(--base) var(--ease); }
.city-tile .icon { grid-row: 1 / 3; color: var(--navy); }
.city-name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.city-note { font-size: 0.875rem; color: var(--ink-2); }
.city-tile--major { border-color: var(--navy); }
@media (hover: hover) { .city-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); } }
@media (min-width: 600px) { .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Reviews ---------- */

.review-list,
.review-grid { display: grid; gap: 16px; }
.review-card { padding: 24px; border-radius: var(--r-md); background: var(--paper-2); }
.review-by { margin-top: 12px; font-weight: 700; }
.review-product { margin-top: 4px; font-size: 0.9375rem; color: var(--ink-2); }
@media (min-width: 900px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Toasts ---------- */

.toast-region { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); translate: -50% 0; pointer-events: none; }
body.has-sticky-buy .toast-region { bottom: calc(92px + env(safe-area-inset-bottom)); }
.toast { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--r-md); background: var(--ink); color: #fff; font-weight: 600; box-shadow: var(--shadow-lg); animation: toast-in 260ms var(--ease); }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity 200ms, transform 200ms; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

/* Fly-to-bag */
.fly { position: fixed; z-index: 70; width: 72px; height: 90px; border-radius: var(--r-sm); object-fit: cover; pointer-events: none; box-shadow: var(--shadow-md); transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1), opacity 700ms ease; }

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Responsive photos, checkout and consent ---------- */

.card-media picture,
.gallery-open picture,
.lightbox-slide picture { display: contents; }
.bag-error { padding: 10px 12px; border-radius: var(--r-sm); background: var(--error-50); color: var(--ink); font-size: 0.9375rem; font-weight: 600; }
.order-state { display: grid; justify-items: center; gap: 10px; text-align: center; }
.order-state.form-error { grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
.order-spinner { animation: spin 1.6s linear infinite; }
.order-lines { display: grid; gap: 4px; margin-top: 6px; color: var(--ink-2); }
.order-total { font-size: 1.125rem; }
.empty-actions--start { justify-content: flex-start; }
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 55;
  display: grid;
  gap: 12px;
  max-width: 520px;
  margin-inline: auto;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
  font-size: 0.9375rem;
}
.consent .btn--outline { --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgb(255 255 255 / 0.6); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 600px) { .consent { grid-template-columns: 1fr auto; align-items: center; } }

/* ---------- Currency switch & cash on delivery ---------- */

.currency-switch { display: inline-flex; padding: 3px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: #fff; }
.currency-switch button { min-width: 40px; height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-weight: 800; font-size: 0.875rem; transition: background-color var(--fast), color var(--fast); }
.currency-switch button[aria-pressed='true'] { background: var(--navy); color: #fff; }
.currency-switch--header { display: none; margin-right: 6px; }
.menu-currency { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 700; }
@media (max-width: 899px) { .split--summary-first .form-aside { order: -1; } }
@media (min-width: 600px) { .currency-switch--header { display: inline-flex; } }
.bag-currency-note { padding: 8px 12px; border-radius: var(--r-sm); background: var(--sky); font-size: 0.8125rem; color: var(--ink-2); }
.cod-terms { margin-top: 24px; padding: 16px 18px; border-radius: var(--r-md); background: var(--sun-50); border: 1px solid #f3dc8e; }
.cod-terms .h4 { margin-bottom: 4px; }
.cod-empty { display: grid; gap: 12px; justify-items: start; padding: 20px; border-radius: var(--r-md); background: var(--paper-2); }
.cod-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cod-line img { width: 56px; height: 70px; border-radius: var(--r-sm); object-fit: cover; background: var(--paper-2); }
.cod-line strong { display: block; font-size: 0.9375rem; line-height: 1.3; }
.cod-line small { color: var(--muted); }
.cod-line em { font-style: normal; font-weight: 800; }
.summary-card .bag-total { margin-top: 12px; }

/* ---------- Checkout & order tracking ---------- */

.option-grid--1 { grid-template-columns: minmax(0, 1fr); }
.pay-option .option-text { min-height: 64px; padding: 12px 16px; font-size: 1rem; }
.pay-option .option-text small { margin-top: 3px; font-size: 0.8125rem; }
.checkout-totals { display: grid; gap: 6px; margin-top: 14px; }
.checkout-totals div { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.checkout-totals dd { font-weight: 700; color: var(--ink); text-align: right; }
.checkout-totals .checkout-total { padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); font-size: 1.125rem; font-weight: 800; }
.checkout-total dd { font-family: var(--font-display); font-size: 1.375rem; }
.transfer-accounts { display: grid; gap: 10px; width: 100%; margin-top: 8px; text-align: left; }
.transfer-accounts li { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.transfer-accounts dl { display: grid; gap: 4px; margin-top: 6px; }
.transfer-accounts dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.transfer-accounts dt { font-size: 0.875rem; color: var(--muted); }
.transfer-number { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; user-select: all; overflow-wrap: anywhere; }

.track-form { display: grid; gap: 20px; }
.track-fields { display: grid; gap: 0 16px; }
.track-fields .field:first-child { margin-top: 0; }
@media (min-width: 600px) { .track-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .track-fields .field { margin-top: 0; } }
.track-form .btn { justify-self: start; }
.track .form-error { margin-top: 24px; }
.track-result { display: grid; gap: 16px; margin-top: 28px; padding: 24px; border-radius: var(--r-lg); background: var(--paper-2); }
.track-result:focus { outline: none; }
.track-head { display: grid; gap: 4px; }
.track-status { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--navy); }
.track-result[data-status='delivered'] .track-status { color: var(--success); }
.track-result[data-status='cancelled'] .track-status,
.track-result[data-status='returned'] .track-status { color: var(--ink-2); }
.track-courier { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: #fff; }
.track-courier .icon { flex: none; color: var(--navy); }
.track-courier a { font-weight: 700; color: var(--navy); }
.track-transfer { display: grid; gap: 8px; padding: 14px; border: 1px solid #f3dc8e; border-radius: var(--r-md); background: var(--sun-50); }
.track-timeline li { position: relative; display: grid; gap: 2px; padding: 0 0 14px 26px; }
.track-timeline li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--navy); }
.track-timeline li::after { content: ''; position: absolute; left: 9px; top: 20px; bottom: 2px; width: 2px; background: var(--line-strong); }
.track-timeline li:last-child { padding-bottom: 0; }
.track-timeline li:last-child::after { display: none; }
.track-timeline li:last-child::before { background: var(--coral); box-shadow: 0 0 0 4px var(--coral-50); }
.track-timeline span { font-weight: 700; }
.track-timeline time { font-size: 0.875rem; color: var(--muted); }

/* ---------- Expressive hero & shop header ---------- */
/* A warmer, more playful language for the first screens: cream and sunshine instead of a
   navy block, chunky navy outlines with hard offset shadows on the things you tap, a
   highlighter swipe and a hand-drawn squiggle on the headline, and real pieces floating
   around the photo. The illustrated stage hero (samples only) keeps its navy look. */

:root { --coral-ink: #e5473e; }

/* Hero with the campaign photo */
.hero--photo {
  background:
    radial-gradient(circle at 1px 1px, rgb(3 44 98 / 0.08) 1.2px, transparent 1.7px) 0 0 / 22px 22px,
    radial-gradient(55% 60% at 0% 100%, rgb(244 91 82 / 0.16), transparent 70%),
    radial-gradient(45% 55% at 100% 0%, rgb(255 212 92 / 0.4), transparent 70%),
    var(--cream);
  color: var(--ink);
}
.hero--photo :focus-visible { outline-color: var(--cobalt); }
.hero--photo .hero-grid { padding-block: 24px 44px; }
.hero-kicker,
.shop-banner-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border: 2px solid var(--navy);
  border-radius: var(--r-pill);
  background: var(--sun);
  box-shadow: 3px 3px 0 var(--navy);
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  rotate: -2deg;
}
.hero-kicker { margin: 4px 0 20px; }
.hero-kicker .icon { color: var(--coral-ink); }
.hero--photo .hero-title { color: var(--navy); font-size: clamp(3.1rem, 1.3rem + 7.4vw, 6.6rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.045em; }
.hero-hl { position: relative; z-index: 0; display: inline-block; }
.hero-hl::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0.5em -0.12em 0.02em -0.1em;
  border-radius: 0.18em 0.4em 0.22em 0.36em;
  background: var(--sun);
  rotate: -2.5deg;
  transform-origin: 0 50%;
  animation: hl-in 700ms var(--ease) 250ms both;
}
@keyframes hl-in { from { scale: 0 1; } }
.hero-ones { position: relative; display: inline-block; color: var(--coral-ink); }
.hero-squiggle { position: absolute; left: -2%; bottom: -0.1em; width: 104%; height: 0.2em; overflow: visible; }
.hero-squiggle path { fill: none; stroke: var(--navy); stroke-width: 5px; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: squiggle-draw 900ms var(--ease) 650ms forwards; }
@keyframes squiggle-draw { to { stroke-dashoffset: 0; } }
.hero--photo .hero-lede { max-width: 40ch; margin-top: 22px; color: var(--ink-2); }
.hero--photo .hero-actions { margin-top: 28px; }
.btn--pop { --btn-border: var(--navy); box-shadow: 4px 4px 0 var(--navy); }
@media (hover: hover) {
  .btn--pop:hover { --btn-bg: var(--coral-hover); translate: -2px -2px; box-shadow: 6px 6px 0 var(--navy); }
}
.btn--pop:active { transform: none; translate: 2px 2px; box-shadow: 1px 1px 0 var(--navy); }
.hero--photo .btn--outline { border-width: 2px; }
.hero--photo .hero-note { max-width: 540px; margin-top: 22px; background: #fff; border: 1.5px dashed rgb(3 44 98 / 0.28); color: var(--ink-2); rotate: -0.6deg; }
.hero--photo .hero-note .icon { color: var(--coral-ink); }
.hero--photo .hero-links { gap: 8px; margin-top: 4px; }
.hero--photo .hero-links a { gap: 7px; min-height: 40px; padding: 0 14px 0 12px; border: 1.5px solid rgb(3 44 98 / 0.18); border-radius: var(--r-pill); background: rgb(255 255 255 / 0.75); color: var(--navy); font-size: 0.875rem; text-decoration: none; transition: border-color var(--fast), background-color var(--fast); }
.hero--photo .hero-links a:hover { border-color: var(--navy); background: #fff; }
.hero--photo .hero-links .icon { color: var(--coral-ink); }

/* The collage: arch photo on a sunshine blob, two real pieces as snapshots, a spinning badge */
.hero-collage { grid-area: stage; position: relative; isolation: isolate; width: min(100%, 560px); margin: 6px auto 0; aspect-ratio: 1 / 1.06; }
.hero-sun { position: absolute; z-index: -1; top: 3%; right: 3%; width: 80%; aspect-ratio: 1; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; background: var(--sun); animation: blob 16s ease-in-out infinite alternate; }
@keyframes blob {
  50% { border-radius: 58% 42% 45% 55% / 42% 58% 48% 52%; rotate: 8deg; }
  100% { border-radius: 48% 52% 60% 40% / 55% 45% 52% 48%; rotate: -6deg; }
}
.hero--photo .hero-photo { position: absolute; top: 5%; left: 17%; width: 64%; max-height: none; margin: 0; aspect-ratio: 4 / 5; border: 6px solid #fff; border-radius: 999px 999px 28px 28px; box-shadow: 0 34px 60px -30px rgb(3 44 98 / 0.6); }
.hero-snap {
  position: absolute;
  z-index: 2;
  width: 33%;
  padding: 7px 7px 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 40px -18px rgb(3 44 98 / 0.55);
  color: var(--navy);
  text-decoration: none;
  transition: rotate 400ms var(--ease-bounce), scale 400ms var(--ease-bounce);
  animation: snap-float 6s ease-in-out infinite;
}
.hero-snap img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.hero-snap-name { display: -webkit-box; overflow: hidden; padding: 6px 4px 8px; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; line-height: 1.2; text-align: center; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hero-snap--1 { bottom: 3%; left: 0; rotate: -8deg; }
.hero-snap--2 { top: 32%; right: 0; rotate: 7deg; animation-delay: -3s; }
.hero-snap:hover,
.hero-snap:focus-visible { z-index: 4; rotate: 0deg; scale: 1.06; }
@keyframes snap-float { 50% { translate: 0 -10px; } }
.hero-badge { position: absolute; z-index: 3; top: 1%; left: 3%; display: grid; place-items: center; width: max(84px, 23%); aspect-ratio: 1; border-radius: 50%; background: var(--navy); color: var(--coral); box-shadow: 0 14px 30px -14px rgb(3 44 98 / 0.7); }
.hero-badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 20s linear infinite; }
.hero-badge text { fill: #fff; font-family: var(--font-display); font-size: 9.6px; font-weight: 800; letter-spacing: 0.06em; }
.hero-badge .icon { width: 30%; height: auto; fill: var(--coral); }
@keyframes spin { to { rotate: 360deg; } }
.hero-spark { position: absolute; z-index: 3; width: 7%; fill: var(--coral); animation: twinkle 2.8s ease-in-out infinite; }
.hero-spark--1 { top: 2%; right: 8%; }
.hero-spark--2 { top: 52%; left: 9%; width: 5%; fill: var(--cobalt); animation-delay: -1s; }
.hero-spark--3 { right: 34%; bottom: 1%; width: 5.5%; fill: var(--navy); animation-delay: -1.8s; }

/* A few soft confetti shapes behind the copy */
.hero-confetti { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero--photo .hero-grid { position: relative; z-index: 1; }
.hero-confetti span { position: absolute; border-radius: 50%; animation: snap-float 7s ease-in-out infinite; }
.hero-confetti span:nth-child(1) { top: 7%; left: 4%; width: 18px; height: 18px; border: 4px solid var(--coral); }
.hero-confetti span:nth-child(2) { top: 16%; left: 44%; width: 10px; height: 10px; background: var(--cobalt); animation-delay: -2s; }
.hero-confetti span:nth-child(3) { bottom: 5%; left: 47%; width: 14px; height: 14px; background: var(--sun-600); animation-delay: -4s; }
.hero-confetti span:nth-child(4) { bottom: 30%; left: 2%; width: 26px; height: 13px; border: 4px solid var(--navy); border-top: 0; border-radius: 0 0 26px 26px; background: none; animation-delay: -1s; }
.hero-confetti span:nth-child(5) { top: 6%; right: 48%; width: 8px; height: 8px; background: var(--coral); animation-delay: -3s; }
.hero-confetti span:nth-child(6) { bottom: 8%; right: 4%; width: 20px; height: 20px; border: 4px solid var(--cobalt); animation-delay: -5s; }
@media (max-width: 899px) { .hero-confetti span:not(:nth-child(6)) { display: none; } }

@media (min-width: 900px) {
  .hero--photo .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: 40px; padding-block: 48px 76px; }
  .hero--photo .hero-links { margin-top: 0; }
  .hero-collage { width: 100%; max-width: 580px; margin: 0 0 0 auto; }
  .hero-snap-name { font-size: 0.8125rem; }
}

/* Tape: the marquee, tilted across the bottom of the hero on a crossed yellow strip */
.tape { position: relative; z-index: 2; margin-top: -18px; padding-block: 12px; overflow-x: clip; }
.tape::before { content: ''; position: absolute; top: 50%; left: -5%; right: -5%; height: 38px; translate: 0 -50%; background: var(--sun); rotate: 1.8deg; }
.tape .marquee { position: relative; margin-inline: -5%; border: 0; background: var(--navy); color: #fff; rotate: -1.4deg; box-shadow: 0 12px 24px -14px rgb(3 44 98 / 0.7); }
.tape .marquee-item { padding-block: 11px; font-size: 1rem; }
.tape .marquee-star { width: 14px; height: 14px; border-radius: 0; background: var(--sun); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@media (min-width: 900px) { .tape { margin-top: -30px; } .tape .marquee-item { font-size: 1.125rem; padding-block: 13px; } }

/* Shop banner: shop, category, type and occasion pages */
.shop-banner { --banner-bg: var(--sun-50); position: relative; z-index: 1; margin-bottom: 40px; padding-block: 8px 36px; background: radial-gradient(40% 70% at 100% 0%, rgb(244 91 82 / 0.14), transparent 70%), radial-gradient(35% 60% at 0% 100%, rgb(43 79 224 / 0.08), transparent 70%), var(--banner-bg); }
.shop-banner--coral { --banner-bg: var(--coral-50); }
.shop-banner--navy { --banner-bg: var(--sky); }
.shop-banner::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; background: radial-gradient(circle at 14px 0, var(--banner-bg) 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x; }
.shop-banner-grid { display: grid; gap: 8px; }
.shop-banner-copy { min-width: 0; }
.shop-banner-kicker { margin: 10px 0 16px; }
.shop-banner-kicker .icon { color: var(--coral-ink); }
.shop-banner-title { font-family: var(--font-display); font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.9rem); font-weight: 800; line-height: 0.96; letter-spacing: -0.04em; color: var(--navy); text-wrap: balance; }
.shop-banner-hl { color: var(--coral-ink); text-decoration: underline wavy var(--navy); text-decoration-thickness: 0.055em; text-underline-offset: 0.16em; text-decoration-skip-ink: none; }
.shop-banner .lede { max-width: 52ch; margin-top: 18px; }
.shop-banner .eid-dates { margin-top: 20px; background: #fff; }

.pop-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pop-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 7px 0 16px; border: 2px solid var(--navy); border-radius: var(--r-pill); background: #fff; box-shadow: 3px 3px 0 var(--navy); color: var(--navy); font-weight: 800; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; transition: translate var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.pop-chip:nth-child(4n + 1) { background: var(--sun); }
.pop-chip:nth-child(4n + 2) { background: #ffd9d5; }
.pop-chip:nth-child(4n + 3) { background: #dbe5ff; }
.pop-chip:nth-child(4n + 4) { background: #cdeedd; }
.pop-chip-count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--r-pill); background: var(--navy); color: #fff; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .pop-chip:hover { translate: -2px -2px; box-shadow: 5px 5px 0 var(--navy); } }
.pop-chip:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--navy); }
@media (max-width: 899px) {
  .pop-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .pop-chips::-webkit-scrollbar { display: none; }
  .pop-chip { flex: none; min-height: 42px; }
}

/* Phones: the bubbles sit in a row straddling the scalloped edge */
.shop-bubbles { position: relative; z-index: 2; display: flex; justify-content: center; margin: 14px 0 -66px; padding: 0; list-style: none; }
.shop-bubble { flex: none; width: 62px; height: 62px; margin-inline: -5px; overflow: hidden; border: 4px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 10px 22px -12px rgb(3 44 98 / 0.6); animation: snap-float 5s ease-in-out infinite; }
.shop-bubble:nth-child(2n) { animation-delay: -2.5s; }
.shop-bubble:nth-child(3n) { animation-delay: -1.2s; }
.shop-bubble picture { display: block; height: 100%; }
.shop-bubble img { width: 100%; height: 100%; object-fit: cover; }
.shop-banner:has(.shop-bubbles) { margin-bottom: 76px; }
@media (min-width: 900px) {
  .shop-banner { padding-block: 16px 52px; margin-bottom: 48px; }
  .shop-banner:has(.shop-bubbles) { margin-bottom: 48px; }
  .shop-banner-grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); align-items: center; gap: 40px; }
  .shop-bubbles { position: relative; display: block; height: 360px; margin: 0; }
  .shop-bubble { position: absolute; margin: 0; border-width: 6px; }
  .shop-bubble:nth-child(1) { top: 6%; left: 16%; width: 210px; height: 210px; box-shadow: 0 0 0 4px var(--sun), 0 24px 40px -20px rgb(3 44 98 / 0.6); }
  .shop-bubble:nth-child(2) { top: 0; right: 0; width: 128px; height: 128px; }
  .shop-bubble:nth-child(3) { bottom: 0; right: 6%; width: 156px; height: 156px; box-shadow: 0 0 0 4px #ffb3ab, 0 24px 40px -20px rgb(3 44 98 / 0.6); }
  .shop-bubble:nth-child(4) { bottom: 4%; left: 0; width: 112px; height: 112px; }
  .shop-bubble:nth-child(5) { bottom: 2%; left: 36%; width: 84px; height: 84px; z-index: 1; box-shadow: 0 0 0 4px #b9ccff, 0 18px 30px -16px rgb(3 44 98 / 0.6); }
}

/* Product cards: a little lift, tilt and a coloured shadow when you hover */
.card-media { border-radius: 20px; transition: translate 350ms var(--ease-bounce), rotate 350ms var(--ease-bounce), box-shadow 350ms var(--ease); }
.card-title a::after { border-radius: 20px; }
.product-grid > :nth-child(4n + 2),
.rail > :nth-child(4n + 2) { --pop: #ffc2bc; }
.product-grid > :nth-child(4n + 3),
.rail > :nth-child(4n + 3) { --pop: #c3d3ff; }
.product-grid > :nth-child(4n + 4),
.rail > :nth-child(4n + 4) { --pop: #bfe6d3; }
@media (hover: hover) and (min-width: 900px) {
  .card:hover .card-media { translate: 0 -6px; rotate: -1.2deg; box-shadow: 8px 10px 0 var(--pop, var(--sun)); }
}

/* ---------- Expressive home sections ---------- */
/* The rest of the home page in the banner's language: sticker labels, a highlighter swipe
   on one phrase per heading, and chunky outlined cards for the things you tap. */

.page-home .section-head .eyebrow,
.page-home .custom-copy .eyebrow,
.page-home .pk-band .eyebrow {
  gap: 7px;
  padding: 5px 12px 5px 10px;
  border: 2px solid var(--navy);
  border-radius: var(--r-pill);
  background: var(--sun);
  box-shadow: 3px 3px 0 var(--navy);
  color: var(--navy);
  font-size: 0.75rem;
  rotate: -2deg;
}
.page-home .section-head .eyebrow { margin-bottom: 16px; }
.page-home [aria-labelledby='guides-title'] .eyebrow { background: #dbe5ff; rotate: 1.5deg; }
.page-home .pk-band .eyebrow { background: #cdeedd; }
.page-home .custom-copy .eyebrow { margin-bottom: 18px; background: #fff; rotate: 2deg; }
.page-home .custom-copy .eyebrow .icon,
.page-home .pk-band .eyebrow .icon { color: var(--coral-ink); }

.title-hl { position: relative; z-index: 0; white-space: nowrap; }
.title-hl::before { content: ''; position: absolute; z-index: -1; inset: 0.52em -0.08em 0.02em -0.08em; border-radius: 0.2em 0.36em 0.24em 0.32em; background: var(--sun); rotate: -1.5deg; }
.page-home .section-head .h2 { color: var(--navy); }

.page-home .section-head .link-arrow { min-height: 44px; padding: 0 12px 0 16px; border: 2px solid var(--navy); border-radius: var(--r-pill); background: #fff; box-shadow: 3px 3px 0 var(--navy); transition: translate var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.page-home .section-head .link-arrow:hover { text-decoration: none; translate: -2px -2px; box-shadow: 5px 5px 0 var(--navy); }

/* Featured and help: white with a faint dot grid instead of cool grey */
.page-home .section--tint { background: radial-gradient(circle at 1px 1px, rgb(3 44 98 / 0.07) 1.2px, transparent 1.7px) 0 0 / 22px 22px, #fff; }

/* Custom orders: warm peach with scalloped edges, step cards with number stickers,
   the photo taped on at a tilt */
.section--stitch { --stitch-bg: #ffece6; position: relative; z-index: 1; margin-block: 14px; background: radial-gradient(circle at 1px 1px, rgb(3 44 98 / 0.06) 1.2px, transparent 1.7px) 0 0 / 22px 22px, var(--stitch-bg); color: var(--ink); }
.section--stitch::before,
.section--stitch::after { content: ''; position: absolute; left: 0; right: 0; height: 14px; }
.section--stitch::before { bottom: 100%; background: radial-gradient(circle at 14px 14px, var(--stitch-bg) 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x; }
.section--stitch::after { top: 100%; background: radial-gradient(circle at 14px 0, var(--stitch-bg) 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x; }
.section--stitch .custom-copy .h2 { color: var(--navy); }
.section--stitch .steps { gap: 14px; }
.section--stitch .steps li { padding: 16px 16px 16px 14px; border: 1.5px solid rgb(3 44 98 / 0.14); border-radius: 18px; background: #fff; box-shadow: 0 14px 28px -20px rgb(3 44 98 / 0.45); }
.section--stitch .steps p { color: var(--ink-2); }
.section--stitch .step-n { border: 2px solid var(--navy); background: var(--sun); color: var(--navy); rotate: -6deg; }
.section--stitch .steps li:nth-child(2) .step-n { background: #ffb3ab; rotate: 5deg; }
.section--stitch .steps li:nth-child(3) .step-n { background: #c3d3ff; rotate: -4deg; }
.section--stitch .steps li:nth-child(4) .step-n { background: #bfe6d3; rotate: 6deg; }
.section--stitch .custom-figure { border: 8px solid #fff; border-radius: 22px; box-shadow: 0 30px 50px -28px rgb(3 44 98 / 0.55); rotate: 2deg; }
.section--stitch .custom-media::before,
.section--stitch .custom-media::after { content: ''; position: absolute; z-index: 2; top: -12px; width: 96px; height: 28px; background: rgb(255 212 92 / 0.85); box-shadow: 0 2px 6px rgb(3 44 98 / 0.12); }
.section--stitch .custom-media::before { left: 18px; rotate: -10deg; }
.section--stitch .custom-media::after { right: 14px; rotate: 12deg; background: rgb(255 179 171 / 0.9); }
.section--stitch .stitch-card { z-index: 3; outline: 2px dashed #ffb3ab; outline-offset: -9px; rotate: -2deg; }
@media (min-width: 900px) { .section--stitch .steps { gap: 16px 18px; } }

/* Guides: pastel cards with a navy outline */
.page-home .guide-card a { gap: 10px; padding: 22px 22px 16px; border: 2px solid var(--navy); border-radius: 22px; background: var(--card-bg, #fff); box-shadow: 4px 4px 0 var(--navy); transition: translate var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.page-home .guide-card:nth-child(3n + 1) { --card-bg: var(--sun-50); }
.page-home .guide-card:nth-child(3n + 2) { --card-bg: #ffeee9; }
.page-home .guide-card:nth-child(3n + 3) { --card-bg: #eaf0ff; }
.page-home .guide-card-time { align-self: flex-start; padding: 3px 10px; border: 1.5px solid var(--navy); border-radius: var(--r-pill); background: #fff; color: var(--navy); }
.page-home .guide-card .h4 { color: var(--navy); }
@media (hover: hover) { .page-home .guide-card a:hover { transform: none; border-color: var(--navy); translate: -2px -2px; box-shadow: 6px 6px 0 var(--navy); } }

/* Cities: sunny band with pop chips */
.page-home .section--paper:has(.pk-band) { background: radial-gradient(40% 90% at 100% 50%, rgb(244 91 82 / 0.1), transparent 70%), var(--sun-50); }
.page-home .pk-band .h3 { color: var(--navy); }
.page-home .pk-band .chip { border: 2px solid var(--navy); background: #fff; box-shadow: 2px 2px 0 var(--navy); color: var(--navy); transition: translate var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background-color var(--fast); }
.page-home .pk-band li:nth-child(4n + 2) .chip { background: #ffe1dc; }
.page-home .pk-band li:nth-child(4n + 3) .chip { background: #e3eaff; }
.page-home .pk-band li:nth-child(4n + 4) .chip { background: #d9f2e5; }
.page-home .pk-band .chip--ghost { border-style: dashed; background: transparent; box-shadow: none; }
@media (hover: hover) { .page-home .pk-band .chip:hover { translate: -2px -2px; box-shadow: 4px 4px 0 var(--navy); } }

/* Help tiles */
.page-home .help-tile { border: 2px solid var(--navy); border-radius: 20px; box-shadow: 4px 4px 0 var(--navy); transition: translate var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.page-home .help-tile strong { color: var(--navy); }
.page-home .help-icon { border: 2px solid var(--navy); background: var(--sun); rotate: -6deg; }
.page-home .help-grid li:nth-child(2) .help-icon { background: #ffb3ab; rotate: 5deg; }
.page-home .help-grid li:nth-child(3) .help-icon { background: #bfe6d3; rotate: -4deg; }
@media (hover: hover) { .page-home .help-tile:hover { transform: none; border-color: var(--navy); translate: -2px -2px; box-shadow: 6px 6px 0 var(--navy); } }

/* ---------- Top bar: store news ---------- */
/* Real store facts, one at a time (app.js turns them). Short lines on phones, full ones on
   wider screens. Without JavaScript the first message shows. */

.top-bar { background: var(--navy); color: #fff; font-size: 0.8125rem; line-height: 1.35; }
.top-bar :focus-visible { outline-color: var(--sun); }
.top-bar-inner { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; }
.top-bar-list { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; text-align: center; }
.top-bar-item { display: none; }
.top-bar-item.is-active { display: block; animation: top-bar-in 420ms var(--ease) both; }
@keyframes top-bar-in { from { opacity: 0; translate: 0 6px; } }
.top-bar-item a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 4px 6px; color: #fff; font-weight: 700; text-decoration: none; }
.top-bar-item a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.top-bar-item .icon { flex: none; color: var(--sun); }
.top-bar-long { display: none; }
.top-bar-arrow { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgb(255 255 255 / 0.8); transition: background-color var(--fast), color var(--fast); }
.top-bar-arrow:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
@media (min-width: 900px) {
  .top-bar { font-size: 0.875rem; }
  .top-bar-short { display: none; }
  .top-bar-long { display: inline; }
}

/* Home headline lead-in: says what the shop sells before the brand line */
.hero-pre { display: block; margin-bottom: 0.14em; font-size: 0.42em; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; color: var(--navy); }