/* ==========================================================================
   NUREN storefront — bold, sporty, poster-like: condensed display type, brand colours in solid blocks,
   generous space, big tap targets.
   Brand colours and fonts are tokens (NUREN brand board: plum, dusty rose, nude, chocolate, olive, charcoal, ivory).
   ========================================================================== */
:root {
  /* brand palette — text pairs checked for WCAG AA (≥ 4.5:1) */
  --plum: #4b2150;
  --dusty-rose: #d7a9a5;
  --nude: #e8dccf;
  --chocolate: #3e2a26;
  --olive: #4b5b3c;
  --charcoal: #1f1f1f;
  --ivory: #f8f4ec;

  --bg: var(--ivory);
  --surface: #fffdf9;
  --soft: #f1e8df;         /* nude wash */
  --soft-2: #f3e4e1;       /* dusty-rose wash */
  --soft-3: #e7eadf;       /* olive wash */
  --ink: #241a18;          /* near-black chocolate: the headline colour */
  --ink-2: #6e5a53;
  --line: #e3d7ca;
  --accent: var(--plum);
  --accent-dark: #3a1840;
  --accent-ink: var(--ivory);
  --danger: #c0362c;       /* cancel buttons */
  --sale: #8e3a4c;         /* deep dusty rose, readable on ivory */
  --ok: var(--olive);
  --deliver: #1f7a4d;      /* "we deliver here" at checkout: a plain green, ≥ 4.5:1 on ivory */
  --warn: #a15c00;
  --star: #b07a28;         /* antique gold, ≥ 3:1 on ivory */

  /* type */
  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;                  /* headings, labels: bold Manrope */
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-statement: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;  /* only the big statement headlines */

  /* shape */
  --radius: 16px;
  --radius-sm: 10px;
  --pill: 999px;
  --wrap: 1320px;
  --tap: 48px;             /* minimum touch target (Apple/Google ask for 44–48) */
  --shadow: 0 18px 40px -24px rgba(36, 26, 24, .45);
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } /* 16px base, like most modern shops */
/* clip on html too: iPhone Safari ignores it on body alone and lets a page slide sideways under the finger */
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h2 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
/* Statement headlines: Archivo Black capitals (one weight, so never let the browser fake a bolder one) */
.display { font-family: var(--font-statement); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: -.015em;
           line-height: .95; font-size: clamp(2.5rem, 6vw, 5.4rem); margin: 0 0 .4em; }
.display em { font-style: normal; color: var(--plum); }
.display-sm { font-family: var(--font-statement); font-weight: 400; font-synthesis: none; text-transform: uppercase; line-height: 1;
              font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -.01em; margin: 0; }
.lead { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.muted { color: var(--ink-2); }
.center { text-align: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; font-weight: 700; color: var(--plum); margin-bottom: 1.1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .75rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap); padding: 0 1.5rem;
       border-radius: var(--pill); border: 1.5px solid transparent; font: 700 .95rem/1 var(--font-body); letter-spacing: .01em;
       text-decoration: none; cursor: pointer; touch-action: manipulation;
       transition: transform .15s, background-color .2s, border-color .2s, color .2s; }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 44px; padding: 0 .9rem; font-size: .88rem; }
.btn-lg { min-height: 54px; padding: 0 2rem; font-size: 1rem; }
.btn-xl { min-height: 58px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:disabled { background: #d9c3ca; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { background: #000; }
.btn-light { background: var(--ivory); color: var(--plum); }
.btn-light:hover { background: #fff; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------------------------------------------------------------- header */
.announce { background: var(--ink); color: var(--ivory); text-align: center; font-size: .78rem; font-weight: 600; padding: .55rem 1rem;
            letter-spacing: .12em; text-transform: uppercase; }
.announce a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
.announce a:hover { text-decoration-color: currentColor; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(248, 244, 236, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
/* Logo | centred categories | search, wishlist, account, bag — one line, never wrapping. */
.header-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; min-height: 72px; }
.logo { display: block; color: var(--plum); text-decoration: none; margin: 0; justify-self: start; line-height: 0; }
.logo .brand-logo { height: 2.5rem; width: auto; display: block; }
.logo:hover { color: var(--accent-dark); }
.footer-logo { display: inline-block; color: var(--ivory); line-height: 0; margin-bottom: 1rem; }
.footer-logo .brand-lockup { width: 220px; height: auto; display: block; }
.footer-note { color: var(--ink-2); max-width: 24em; }
.main-nav { display: flex; gap: clamp(1.1rem, 2.4vw, 2.4rem); flex-wrap: nowrap; white-space: nowrap; justify-content: center; }
.main-nav a { text-decoration: none; font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; padding: .5rem 0;
              border-bottom: 2px solid transparent; transition: border-color .2s, color .2s; }
.main-nav a:hover, .main-nav a[aria-current="page"] { border-color: var(--plum); color: var(--plum); }
.header-actions { display: flex; align-items: center; gap: .25rem; justify-self: end; }
.search-mini input { min-height: 44px; width: clamp(150px, 14vw, 210px); border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); padding: 0 1.1rem; font: inherit; font-size: .92rem; }
.icon-link { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--ink); transition: background-color .2s; }
.icon-link svg { width: 24px; height: 24px; }
.icon-link:hover { background: var(--soft); }
.icon-link[href="/search"] { display: none; }
.menu-btn { display: none; width: 48px; height: 48px; border: 0; background: none; flex-direction: column; justify-content: center; gap: 6px; padding: 0 12px; cursor: pointer; }
.menu-btn span:not(.sr) { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.mobile-nav { display: flex; flex-direction: column; padding: .5rem var(--gutter) 1.25rem; border-top: 1px solid var(--line); }
.mobile-nav a { text-decoration: none; font-family: var(--font-body); font-weight: 500; text-transform: uppercase;
                font-size: 1rem; letter-spacing: .12em; padding: 1.05rem 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.mobile-nav a:active, .mobile-nav a:hover { color: var(--plum); }

/* ---------------------------------------------------------------- hero */
.hero { background: var(--bg); overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(2rem, 5vw, 5rem);
              min-height: min(66vh, 620px); padding-top: clamp(1.75rem, 4vw, 3.25rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
/* the section right after the strip sits closer to it */
.ticker + .block { padding-top: clamp(2rem, 4vw, 3.25rem); }
.hero h1 { margin-bottom: .3em; }
.hero h1 em { font-style: normal; color: var(--plum); }
.hero .lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.hero-cta { display: flex; gap: .85rem; flex-wrap: wrap; margin: 2.1rem 0 0; }
.promises { list-style: none; display: flex; gap: 1.5rem; flex-wrap: wrap; padding: 0; margin: 1.75rem 0 0; font-weight: 600; }
.promises li::before { content: "✓"; color: var(--ok); margin-right: .45rem; font-weight: 700; }

/* No photo yet: a poster of brand colour blocks with the logo's figure — a tall plum panel, a dusty-rose sun,
   an olive pill and a round sticker. */
.hero-art { position: relative; aspect-ratio: 4 / 5; width: 100%; max-height: 74vh; justify-self: end; }
.blob { position: absolute; display: block; }
.b1 { inset: 0 8% 6% 12%; border-radius: 28px; background: var(--plum); }
.b2 { width: 44%; aspect-ratio: 1; left: 0; bottom: 0; border-radius: 50%; background: var(--dusty-rose); mix-blend-mode: multiply; }
.b3 { width: 15%; height: 42%; right: 0; top: 10%; border-radius: var(--pill); background: var(--olive); }
.hero-figure { position: absolute; inset: 14% 22% 22% 26%; display: grid; place-items: center; color: var(--ivory); }
.hero-figure .brand-mark { width: 100%; height: auto; max-height: 100%; }
.hero-sticker { position: absolute; right: 3%; bottom: 14%; width: clamp(92px, 9vw, 124px); aspect-ratio: 1; border-radius: 50%;
                display: grid; place-items: center; text-align: center; background: var(--ivory); color: var(--plum);
                font: 900 clamp(.95rem, 1.3vw, 1.2rem)/.95 var(--font-display); text-transform: uppercase;
                transform: rotate(-12deg); box-shadow: var(--shadow); animation: sticker-float 6s ease-in-out infinite; }
@keyframes sticker-float { 50% { transform: rotate(-8deg) translateY(-8px); } }

/* With a video: the words take a little less room and the video sits beside them in its own shape —
   landscape stays landscape, portrait stays portrait, nothing is cropped. */
.hero-inner.has-video { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.hero-inner.has-video h1.display { font-size: clamp(2.2rem, 4.4vw, 4.1rem); }
.hero-inner.has-video .lead { font-size: clamp(1rem, 1.3vw, 1.12rem); }
.hero-video { display: flex; justify-content: flex-end; min-width: 0; }
/* A clean edge: a thin inset crop with rounded corners trims the soft, blurry rim many clips have, so the
   video's border is crisp. */
.hero-video video { display: block; width: auto; height: auto; max-width: 100%; max-height: 74vh;
  clip-path: inset(2.5% round var(--radius)); }
/* A sale picture is a designed graphic with clean edges: no crop, just rounded corners. */
.hero-video img { display: block; width: auto; height: auto; max-width: 100%; max-height: 74vh; border-radius: var(--radius); }
a.hero-video { text-decoration: none; }
.sale-headline { font-family: var(--font-statement); font-weight: 400; font-synthesis: none; text-transform: uppercase; line-height: .95;
                 font-size: clamp(2.3rem, 5.2vw, 4.8rem); color: var(--plum); }
.sale-ends { margin: 1rem 0 0; font-size: .9rem; }
.sale-coupon { margin: 1.25rem 0 0; font-size: .95rem; }
.sale-coupon strong { background: var(--surface); border: 1px dashed var(--accent); border-radius: 6px; padding: .1rem .45rem; letter-spacing: .06em; }
/* A banner that carries its own words, shown alone across the page. */
.sale-hero { background: var(--bg); padding: 1.5rem 0; }
.sale-hero-link { display: block; line-height: 0; }
.sale-hero .sale-coupon { margin: .9rem auto 0; text-align: center; }
.sale-hero-link img, .sale-hero-link video { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain;
  border-radius: var(--radius); }

/* ---------------------------------------------------------------- home banners
   Full width, 12:5 on computers (capped so a tall screen still sees what follows), 4:5 on phones when every banner
   has a phone version: about half to two thirds of a phone's screen, never all of it. One slide per view; swiping
   scrolls the track, nuren.js moves it on (pictures after 5 s, videos when they end). */
.banners { position: relative; background: var(--soft); }
.banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.banner-track::-webkit-scrollbar { display: none; }
.banner-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative;
                aspect-ratio: 12 / 5; max-height: 76vh; width: 100%; overflow: hidden; }
.banner-link { display: block; width: 100%; height: 100%; }
.banner-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.banner-tall { display: none; }
.banner-arrow { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; border: 0;
                display: grid; place-items: center; background: rgba(255, 253, 249, .92); color: var(--ink); cursor: pointer;
                box-shadow: 0 6px 18px -8px rgba(36, 26, 24, .45); transition: background-color .2s; }
.banner-arrow:hover { background: var(--surface); }
.banner-arrow svg { width: 22px; height: 22px; }
.banner-arrow.prev { left: clamp(.6rem, 2vw, 1.5rem); }
.banner-arrow.next { right: clamp(.6rem, 2vw, 1.5rem); }
.banner-dots { position: absolute; left: 50%; bottom: clamp(.5rem, 1.5vw, 1rem); translate: -50% 0; display: flex; gap: .15rem;
               padding: .2rem .4rem; border-radius: var(--pill); background: rgba(36, 26, 24, .28); }
.banner-dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.banner-dots span { width: 7px; height: 7px; border-radius: var(--pill); background: rgba(255, 253, 249, .65); transition: width .3s, background-color .3s; }
.banner-dots .is-on span { width: 20px; background: var(--surface); }
.banners + .ticker { margin-top: 0; }
@media (max-width: 640px) {
  .banners.is-tall .banner-slide { aspect-ratio: 4 / 5; max-height: 72svh; }
  .banners.is-tall .banner-wide { display: none; }
  .banners.is-tall .banner-tall { display: block; }
  .banner-arrow { width: 36px; height: 36px; }
  .banner-arrow svg { width: 18px; height: 18px; }
}
@media (hover: none) and (max-width: 640px) { .banner-arrow { display: none; } }   /* phones swipe */

/* ---------------------------------------------------------------- promise ticker */
.ticker { background: var(--plum); color: var(--ivory); overflow: hidden; padding: .6rem 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker-list li { font: 800 clamp(.82rem, 1.15vw, 1rem)/1 var(--font-display); text-transform: uppercase;
                  letter-spacing: .08em; white-space: nowrap; padding: 0 1.1rem; display: flex; align-items: center; gap: 2.2rem; }
.ticker-list li::after { content: "✦"; color: var(--dusty-rose); font-size: .8em; margin-right: -1.1rem; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- why NUREN: most brands vs ours
   Compact on purpose: four short lines each side, so the products come into view soon after. */
.why { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: clamp(1.25rem, 4vw, 4rem); align-items: center;
       padding-top: clamp(1.75rem, 4vw, 3rem); }
.why-intro .eyebrow { margin-bottom: .55rem; }
.why-intro h2 { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.75rem); }
/* Nuren's column is one plum panel running the height of the table */
.why-table { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1fr) minmax(0, 1.1fr); font-size: .95rem; }
.why-row { display: contents; }
.why-row > * { padding: .62rem clamp(.6rem, 1.4vw, 1.2rem); border-top: 1px solid var(--line); display: flex; align-items: center; gap: .55rem; }
.why-headings > * { border-top: 0; padding-top: .8rem; padding-bottom: .5rem; font: 700 .78rem/1 var(--font-display); letter-spacing: .04em; }
.why-label { font: 600 .82rem/1.2 var(--font-display); color: var(--ink-2); }
.why-them { color: var(--ink-2); }
.why-us { background: var(--plum); color: var(--ivory); font-weight: 700; border-top-color: rgba(248, 244, 236, .16); }
.why-headings .why-us { border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--dusty-rose); }
.why-row:last-child .why-us { border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding-bottom: .8rem; }
.why-table i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
               font: 700 .62rem/1 var(--font-body); font-style: normal; }
.why-them i { background: var(--soft-2); color: var(--sale); }
.why-us i { background: var(--dusty-rose); color: var(--plum); }
.why + .block { padding-top: clamp(2.25rem, 5vw, 4rem); }
@media (max-width: 900px) {
  .why { grid-template-columns: 1fr; gap: .9rem; }
}
@media (max-width: 640px) {
  .why-table { grid-template-columns: 4.6rem minmax(0, 1fr) minmax(0, 1.1fr); font-size: .82rem; line-height: 1.3; }
  .why-row > * { padding: .5rem .5rem; gap: .4rem; }
  .why-headings > * { padding: .55rem .5rem .4rem; font-size: .7rem; }
  .why-label { font-size: .72rem; padding-left: 0; }
  .why-table i { width: 15px; height: 15px; font-size: .55rem; }
}

/* ---------------------------------------------------------------- sections */
.block { padding-top: clamp(3rem, 7vw, 6rem); }
.block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.block-head h2 { margin: 0; }
.more { font-weight: 700; text-decoration: none; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
        padding-bottom: .3rem; border-bottom: 2px solid currentColor; }
.more:hover { color: var(--plum); }

/* Categories: poster tiles in solid brand colours */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.category-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(190px, 22vw, 290px);
                 padding: clamp(1.1rem, 2vw, 1.6rem); border-radius: var(--radius); text-decoration: none; overflow: hidden;
                 transition: transform .25s; }
.category-tile:hover { transform: translateY(-4px); }
.category-name { position: relative; font: 900 clamp(2rem, 3.6vw, 3rem)/.92 var(--font-display); text-transform: uppercase; max-width: 8ch; }
.category-tile .arrow { position: absolute; right: clamp(1.1rem, 2vw, 1.6rem); bottom: clamp(1.1rem, 2vw, 1.6rem); font-size: 1.6rem;
                        width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor;
                        transition: transform .25s, background-color .25s; }
.category-tile:hover .arrow { transform: rotate(-45deg); }
.tone-0 { background: var(--plum); color: var(--ivory); }
.tone-1 { background: var(--dusty-rose); color: var(--ink); }
.tone-2 { background: var(--olive); color: var(--ivory); }
.tone-3 { background: var(--nude); color: var(--ink); }

/* The statement band: dark, one big line and three promises */
.statement { margin-top: clamp(3.5rem, 8vw, 7rem); background: var(--ink); color: var(--ivory); }
.statement-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
                   padding-top: clamp(2.75rem, 5.5vw, 4.5rem); padding-bottom: clamp(2.75rem, 5.5vw, 4.5rem); }
/* a lighter, smaller cut than the hero: the band supports, it doesn't shout */
.statement .display { margin: 0; color: var(--ivory); font-size: clamp(2.3rem, 4.6vw, 4.2rem); font-weight: 700; line-height: .95; }
.statement .display em { color: var(--dusty-rose); }
.statement-lead { margin: 0; max-width: 30em; color: #cfc4bd; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; text-wrap: pretty; }
.statement .btn { grid-column: 2; justify-self: start; }
.band { margin-top: clamp(2.25rem, 4.5vw, 3.75rem); background: var(--soft-2); }
.band-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 3rem; padding-bottom: 3rem; flex-wrap: wrap; }
.band h2 { margin-bottom: .35rem; }
.band .lead { margin: 0; }

/* ---------------------------------------------------------------- product cards */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem) clamp(.75rem, 1.6vw, 1.4rem); }
.card { position: relative; min-width: 0; display: flex; flex-direction: column; }
.card-link { text-decoration: none; display: block; flex: 1; }
.card-media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform .6s; }
.card-media img.hover { opacity: 0; }
/* The second photo shows on mouse hover only: on phones a tap or scroll would flip it at random */
@media (hover: hover) {
  .card-link:hover .card-media img.hover { opacity: 1; }
  .card-link:hover .card-media img.primary { transform: scale(1.04); }
  .card-link:hover .card-title { color: var(--plum); }
}
.placeholder { position: absolute; inset: 0; display: grid; place-items: center;
               background: linear-gradient(165deg, var(--tint, var(--dusty-rose)) 0%, var(--soft) 92%); }
.placeholder span { font-family: var(--font-display); font-size: 5.5rem; font-weight: 900; color: rgba(255,255,255,.9); }
.placeholder.big span { font-size: 11rem; }
.badge { position: absolute; top: .75rem; left: .75rem; padding: .36rem .75rem; border-radius: var(--pill); font-size: .78rem; font-weight: 700;
         letter-spacing: .01em; background: var(--surface); }
.badge-sale { background: var(--sale); color: var(--ivory); }
.badge-sold { background: var(--ink); color: var(--bg); }
.badge-low { top: auto; bottom: .75rem; color: var(--warn); }
/* Top left: one badge, sold out or the nudge; the discount is in the price line */
.card-badges { position: absolute; top: .75rem; left: .75rem; right: 3.6rem; display: flex; flex-direction: column; align-items: flex-start;
               gap: .4rem; pointer-events: none; }
.card-badges .badge { position: static; white-space: nowrap; }
.card.is-sold-out .card-media { opacity: .6; }
.card-body { padding: .95rem .15rem 0; }
.card-actions { display: grid; grid-template-columns: 1fr; margin-top: .9rem; }
.card-actions .btn { width: 100%; padding: 0 .5rem; }
.quick-add-btn { min-height: 44px; font-size: .88rem; }

/* the wishlist heart */
.heart { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
         background: rgba(255, 253, 249, .94); color: var(--ink); box-shadow: 0 4px 14px -6px rgba(36, 26, 24, .35);
         transition: transform .15s, color .2s; touch-action: manipulation; }
.heart svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transition: fill .2s; }
.heart:hover { color: var(--plum); transform: scale(1.06); }
.heart[aria-pressed="true"] { color: var(--plum); }
.heart[aria-pressed="true"] svg { fill: currentColor; animation: heart-pop .3s ease-out; }
@keyframes heart-pop { 40% { transform: scale(1.3); } }
.heart-form { margin: 0; }
.card-heart { position: absolute; top: .65rem; right: .65rem; z-index: 2; }
.pdp-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pdp-title .heart { width: 48px; height: 48px; flex: none; box-shadow: none; border: 1.5px solid var(--line); }

/* the "Add to bag" picker opened from a card */
.sheet.sheet-narrow { width: min(480px, 94vw); }
.sheet:focus { outline: none; }               /* the dialog itself; its buttons keep their focus rings */
.quick-add { padding: 1.5rem; }
.quick-add .sheet-head { margin-bottom: .5rem; }
.quick-add .sheet-head h2 { font-size: 1.35rem; }
.quick-add .price { margin: 0 0 1.25rem; }
.quick-add .picker { margin-bottom: 1.1rem; }
.quick-add-details { display: block; text-align: center; margin-top: .9rem; }
.quick-add-next { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.25rem; }
.qa-buttons, .buy-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.buy-buttons .btn { width: 100%; }
.card-title { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; margin: 0 0 .2rem; line-height: 1.3;
              transition: color .2s; }
.card-sub { font-size: .95rem; color: var(--ink-2); margin: 0 0 .35rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.price { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin: 0; }
.price .now { font-weight: 700; font-size: 1.2rem; }
.price .was { color: var(--ink-2); text-decoration: line-through; font-size: 1rem; }
.price .off { color: var(--sale); font-weight: 600; }
.swatches { display: flex; gap: .35rem; margin-top: .55rem; }
.dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }

/* ---------------------------------------------------------------- listing */
.listing-page { padding-top: 2rem; padding-bottom: 2rem; }
.crumbs { color: var(--ink-2); font-size: .98rem; margin-bottom: .75rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.listing-head { margin-bottom: 2rem; }
.listing { display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem; align-items: start; }
.filters { position: sticky; top: 100px; }
.filter-toggle summary { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; cursor: pointer; list-style: none; margin-bottom: 1rem; }
.filter-toggle summary::-webkit-details-marker { display: none; }
.filter-body { display: flex; flex-direction: column; gap: 1.5rem; }
.filters fieldset { border: 0; padding: 0; margin: 0; }
.filters legend { font-weight: 600; font-size: 1.05rem; margin-bottom: .7rem; }
.filters select { width: 100%; min-height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); padding: 0 1rem; font: inherit; }
.size-pills, .colour-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.size-pill, .colour-pill { position: relative; cursor: pointer; }
.size-pill input, .colour-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.size-pill span { display: grid; place-items: center; min-width: 52px; min-height: 46px; padding: 0 .8rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-weight: 600; }
.size-pill input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.size-pill input:focus-visible + span, .colour-pill input:focus-visible ~ span:last-child { outline: 3px solid var(--accent); outline-offset: 2px; }
.colour-pill { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 .9rem 0 .5rem; border: 1.5px solid var(--line); border-radius: var(--pill); background: var(--surface); font-size: .95rem; }
.colour-pill .dot { width: 26px; height: 26px; }
.colour-pill:has(input:checked) { border-color: var(--ink); }
.toggle { display: flex; align-items: center; gap: .7rem; font-weight: 500; cursor: pointer; min-height: 48px; }
.toggle input { width: 24px; height: 24px; accent-color: var(--accent); }
.clear { color: var(--ink-2); font-size: .98rem; }
.result-count { color: var(--ink-2); margin-bottom: 1.25rem; }
.results .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.load-more { grid-column: 1 / -1; display: flex; justify-content: center; padding: 1.5rem 0; }
.htmx-request.results, #results.htmx-swapping { opacity: .5; transition: opacity .2s; }
.empty-state { text-align: center; padding: 4rem 1rem; }
.empty-state .lead { margin: 0 auto 1.5rem; }
.empty-state.tall { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.search-big { display: flex; gap: .75rem; flex-wrap: wrap; max-width: 760px; }
.search-big input { flex: 1 1 280px; min-height: 52px; border-radius: var(--pill); border: 1.5px solid var(--line); padding: 0 1.4rem; font: inherit; font-size: 1.05rem; background: var(--surface); }

/* ---------------------------------------------------------------- product page */
.product-page { padding-top: 1.5rem; padding-bottom: 2rem; }
.pdp { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.gallery-set { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.gallery-item { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--soft); aspect-ratio: 4 / 5; position: relative; }
.gallery-item:first-child { grid-column: 1 / -1; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.buybox { position: sticky; top: 100px; }
.buybox h1 { font-size: clamp(1.55rem, 2.4vw, 2rem); margin-bottom: .35rem; }
.subtitle { font-size: 1.2rem; color: var(--ink-2); margin-bottom: 1.1rem; }
.price.big .now { font-size: 1.9rem; }
.price.big .was { font-size: 1.2rem; }
.price.big .off { font-size: 1.15rem; }
.tax-note { font-size: .92rem; margin: .2rem 0 1.5rem; }
.sold-out-banner { background: var(--ink); color: var(--bg); padding: 1rem 1.25rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-weight: 500; }
.picker { border: 0; padding: 0; margin: 0 0 1.5rem; }
.picker legend { display: flex; justify-content: space-between; width: 100%; font-weight: 600; font-size: 1.08rem; margin-bottom: .8rem; }
.picker legend strong { font-weight: 500; color: var(--ink-2); margin-left: .35rem; }
.colour-choices { display: flex; gap: .75rem; flex-wrap: wrap; }
.colour-choice { position: relative; cursor: pointer; }
.colour-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.colour-choice .dot { width: 48px; height: 48px; border: 3px solid var(--bg); box-shadow: 0 0 0 1.5px var(--line); transition: box-shadow .15s; }
.colour-choice input:checked + .dot { box-shadow: 0 0 0 2.5px var(--ink); }
.colour-choice input:focus-visible + .dot { box-shadow: 0 0 0 3px var(--accent); }
.colour-choice.is-sold-out .dot { opacity: .45; background-image: linear-gradient(135deg, transparent 46%, var(--ink-2) 47%, var(--ink-2) 53%, transparent 54%) !important; }
.size-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .6rem; }
.size-choice { position: relative; }
.size-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.size-choice span { display: grid; place-items: center; min-height: 50px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-weight: 600; font-size: 1.1rem; transition: border-color .15s, background .15s; }
.size-choice input:hover:not(:disabled) + span { border-color: var(--ink); }
.size-choice input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.size-choice input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.size-choice.is-sold-out span { color: #b5aaa4; background: repeating-linear-gradient(135deg, transparent 0 8px, #f4ece7 8px 9px), var(--surface); text-decoration: line-through; cursor: pointer; }
.size-choice.is-sold-out input { cursor: pointer; }
.size-choice.is-sold-out input:checked + span { background: var(--soft); color: var(--ink); border-color: var(--ink); }
.notify-form { display: grid; gap: .75rem; margin-top: 1rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.notify-form[hidden] { display: none; }
.notify-form h2 { font-size: 1.05rem; margin: 0; }
.notify-form p { margin: 0; font-size: .92rem; }
.notify-form label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }
.notify-form select, .notify-form input { min-height: 46px; padding: .5rem .85rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  font: inherit; font-weight: 400; background: var(--bg); width: 100%; }
.stock-note { min-height: 1.6em; margin: .7rem 0 0; font-weight: 600; color: var(--warn); }
#checkout-soon { font-size: .95rem; margin: .8rem 0 1.5rem; }
.assurances { list-style: none; padding: 1.25rem 1.4rem; margin: 0 0 1.5rem; background: var(--soft); border-radius: var(--radius); display: flex; flex-direction: column; gap: .55rem; font-size: 1rem; }
.accordion details { border-top: 1px solid var(--line); padding: 1rem 0; }
.accordion details:last-child { border-bottom: 1px solid var(--line); }
.accordion summary { font-weight: 600; font-size: 1.12rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; min-height: 32px; align-items: center; }
.accordion summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; }
.accordion details[open] summary::after { content: "–"; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion p, .accordion ul { margin-top: .8rem; color: var(--ink-2); }
.ticks { list-style: none; padding: 0; }
.ticks li { padding-left: 1.6rem; position: relative; margin-bottom: .35rem; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }

/* ---------------------------------------------------------------- size chart sheet */
.sheet { border: 0; border-radius: var(--radius); padding: 0; width: min(760px, 94vw); max-height: 88vh; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.sheet::backdrop { background: rgba(42, 35, 32, .45); }
.size-chart { padding: 1.5rem clamp(1.1rem, 3vw, 2rem) 2rem; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sheet-head h2 { font-size: 1.6rem; margin: 0; }
.close { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 1.1rem; cursor: pointer; }
.unit-toggle { display: inline-flex; background: var(--soft); border-radius: var(--pill); padding: 4px; margin: 1.1rem 0; }
.unit-toggle button { min-height: 44px; min-width: 88px; border: 0; background: none; border-radius: var(--pill); font: 600 1rem var(--font-body); cursor: pointer; color: var(--ink-2); }
.unit-toggle button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.table-wrap { overflow-x: auto; }
.size-chart table { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.size-chart th, .size-chart td { padding: .8rem .75rem; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.size-chart thead th { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.size-chart tbody th { font-family: var(--font-display); font-size: 1.15rem; }
.fit-notes { background: var(--soft-2); padding: 1rem 1.2rem; border-radius: var(--radius-sm); margin-top: 1.25rem; }

/* ---------------------------------------------------------------- footer */
.site-footer { margin-top: clamp(4rem, 8vw, 7rem); background: var(--plum); color: var(--ivory); padding: 0 0 2rem; overflow: hidden; }
.footer-shout { font: 400 clamp(1.25rem, 3.2vw, 2.6rem)/1.05 var(--font-statement); font-synthesis: none; text-transform: uppercase;
                letter-spacing: 0; color: var(--dusty-rose); margin: 0 auto; text-align: center;
                padding-top: clamp(1.75rem, 3.5vw, 2.75rem); padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
                border-bottom: 1px solid rgba(248, 244, 236, .18); margin-bottom: 2.5rem; }
.site-footer .muted, .site-footer .footer-note { color: #d9c8d6; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2rem; }
.footer-contact a { overflow-wrap: anywhere; }
.footer-contact .footer-note { font-size: .9rem; margin: .35rem 0 0; }
.footer-grid a { display: block; text-decoration: none; padding: .35rem 0; color: #d9c8d6; }
.footer-grid a:hover { color: var(--ivory); text-decoration: underline; }
.footer-grid a.footer-logo { color: var(--ivory); padding: 0; }
.footer-head { font-weight: 700; margin-bottom: .5rem; color: var(--ivory); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.copyright { margin-top: 2.5rem; font-size: .92rem; }

/* ---------------------------------------------------------------- help and policy pages */
.info-page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding-top: 2.5rem; padding-bottom: 2rem; align-items: start; }
.info-page.narrow-page { grid-template-columns: minmax(0, 40rem); justify-content: center; }
.info-menu { position: sticky; top: 96px; display: flex; flex-direction: column; gap: .15rem; }
.info-menu a { padding: .55rem .9rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink-2); font-weight: 500; }
.info-menu a:hover { background: var(--soft); color: var(--ink); }
.info-menu a.active { background: var(--accent); color: var(--accent-ink); }
.info-body { max-width: 46rem; }
.info-body h1 { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.info-body h2 { font-size: 1.2rem; margin-top: 2.2rem; scroll-margin-top: 96px; }
.info-body h3 { font-size: 1.1rem; margin-top: 1.4rem; }
.info-body li { margin-bottom: .45rem; }
.info-body details { border-bottom: 1px solid var(--line); padding: .2rem 0; }
.info-body summary { cursor: pointer; padding: .85rem 2rem .85rem 0; font-weight: 600; min-height: 44px; list-style: none; position: relative; }
.info-body summary::-webkit-details-marker { display: none; }
.info-body summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-weight: 400;
  font-size: 1.3rem; color: var(--ink-2); transition: transform .2s; }
.info-body details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.info-body details p { margin-top: 0; }
.contact-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.4rem; margin: 1rem 0 1.5rem; }
.contact-card p { margin: .35rem 0; }
.contact-label { display: inline-block; min-width: 9.5rem; font-weight: 600; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .info-page { grid-template-columns: 1fr; padding-top: 1.25rem; }
  /* phones: the pages wrap onto a few lines (a sideways strip hid "About NUREN" off-screen, and swiping it on
     iPhones dragged the whole page sideways) */
  .info-menu { position: static; flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .info-menu a { white-space: nowrap; border: 1px solid var(--line); border-radius: var(--pill); padding: .45rem .8rem; font-size: .9rem; }
  .contact-label { display: block; min-width: 0; }
}
@media (max-width: 1180px) {
  .search-mini { display: none; }
  .icon-link[href="/search"] { display: grid; }
}
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .results .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .main-nav { display: none; }
  .menu-btn { display: flex; }
  .header-row { grid-template-columns: auto 1fr auto; gap: .5rem; min-height: 64px; }
  .logo { justify-self: center; }
  .logo .brand-logo { height: 2.1rem; }
  .hero-inner { grid-template-columns: 1fr; min-height: auto; text-align: left; }
  .hero-art { width: min(100%, 420px); max-height: 52vh; justify-self: center; }
  .hero-inner.has-video { grid-template-columns: minmax(0, 1fr); }   /* minmax(0,…): a 1920-px video must not widen the page */
  .hero-video { justify-content: center; order: -1; }
  .hero-video video, .hero-video img { max-height: 62vh; }
  .sale-hero { padding: .75rem 0; }
  .listing { grid-template-columns: 1fr; gap: 1rem; }
  .filters { position: static; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
  .filter-toggle summary { margin: 0; }
  .filter-toggle[open] summary { margin-bottom: 1rem; }
  .pdp { grid-template-columns: 1fr; }
  .buybox { position: static; }
  .gallery-set { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .6rem; margin: 0 calc(-1 * clamp(1.1rem, 4vw, 2.5rem)); padding: 0 clamp(1.1rem, 4vw, 2.5rem); }
  .gallery-item { flex: 0 0 86%; scroll-snap-align: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .statement-inner { grid-template-columns: 1fr; align-items: start; }
  .statement .btn { grid-column: auto; }
}
@media (max-width: 640px) {
  html { font-size: 100%; }
  .product-grid, .results .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-title { font-size: 1.02rem; }
  .price .now { font-size: 1.08rem; }
  .badge { font-size: .78rem; padding: .3rem .6rem; top: .55rem; left: .55rem; }
  .card-badges { top: .55rem; left: .55rem; right: 2.9rem; gap: .3rem; }
  .card-badges .badge { font-size: .72rem; padding: .28rem .55rem; }
  .hero-cta .btn { width: 100%; }
  .band-inner .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .heart { width: 38px; height: 38px; }
  .card-heart { top: .5rem; right: .5rem; }
  .category-grid { grid-template-columns: 1fr; }        /* full-width bands: long names stay whole */
  .category-tile { min-height: 128px; }
  .category-name { font-size: 2.3rem; max-width: none; }
  .cat-art { right: 3.5rem; top: 10%; height: 80%; }
  .cat-art-text { font-size: 3.2rem; right: -1rem; }
  .category-tile .arrow { top: .9rem; bottom: auto; right: .9rem; width: 36px; height: 36px; font-size: 1.05rem; }
  .statement .btn { width: 100%; }
  .hero-art { width: min(80%, 300px); max-height: 40vh; }
  .qa-buttons, .buy-buttons { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  /* four icons (search, account, wishlist, bag) and the logo on one line */
  .header-actions { gap: 0; }
  .icon-link { width: 40px; height: 40px; }
  .icon-link svg { width: 22px; height: 22px; }
  .menu-btn { width: 44px; padding: 0 10px; }
  .logo .brand-logo { height: 1.85rem; }
}
@media (max-width: 360px) {
  .icon-link { width: 36px; height: 36px; }
  .logo .brand-logo { height: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Bag, checkout, account
   ========================================================================== */
.icon-link.bag { position: relative; }
.bag-count { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--pill);
  background: var(--accent); color: var(--accent-ink); font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.flash-wrap { padding-top: 1rem; }
.flash { margin: 0 0 .5rem; padding: .9rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; }
/* success: light green with a tick; problems stay rose */
.flash-ok { background: #e6f1e3; color: #2f5a2b; border: 1px solid #cfe3ca; display: flex; align-items: center; gap: .6rem; }
.flash-ok::before { content: "✓"; flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
                    background: #3f7a3a; color: #fff; font-size: .8rem; }
.flash-bad { background: var(--soft); color: var(--sale); }
.problem { color: var(--sale); font-weight: 600; margin: .25rem 0; }
.ok { color: var(--ok); }
.small-note { font-size: .85rem; }
.problem-soft { color: var(--warn); }
.pay-option .address-remove { margin-left: auto; align-self: flex-start; font-size: .9rem; min-height: 44px; padding: 0 .25rem; }

.shop-page { padding-top: 2rem; padding-bottom: 4rem; }
.bag-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; align-items: start; }
.bag-lines { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.bag-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  background: var(--surface); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.bag-line.has-problem { outline: 2px solid var(--soft); }
.bag-thumb { position: relative; width: 96px; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; background: var(--soft); display: grid; place-items: center; }
.bag-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bag-thumb .placeholder { font-family: var(--font-display); font-size: 2rem; color: var(--accent); }
.bag-name { font-weight: 600; text-decoration: none; font-size: 1.05rem; }
.bag-info p { margin: .15rem 0; }
.bag-qty { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.bag-qty select { min-height: 44px; padding: 0 .75rem; border-radius: var(--radius-sm); border: 1px solid var(--line); font: inherit; background: var(--surface); }
.link { background: none; border: 0; padding: 0; color: var(--accent-dark); font: inherit; cursor: pointer; text-decoration: underline; }

.summary-card, .form-card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.summary-card { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.summary-card h2, .form-card h2 { font-size: 1.3rem; margin: .5rem 0; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; margin: 0; }
.totals dt, .totals dd { margin: 0; }
.totals dd { text-align: right; font-variant-numeric: tabular-nums; }
.totals .grand { font-weight: 700; font-size: 1.2rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.gift-note { background: var(--soft); border-radius: var(--radius-sm); padding: .7rem .85rem; margin: 0 0 .6rem; font-size: .9rem; }
.gift-note p { margin: 0; }
.gift-note.is-unlocked { background: var(--soft-2); color: var(--ok); }
.gift-note.is-unlocked span { color: var(--ink); }
.gift-bar { height: 6px; border-radius: 999px; background: rgba(0, 0, 0, .08); margin-top: .5rem; overflow: hidden; }
.gift-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.gift-line { border-style: dashed; }
.free-ship { background: var(--soft-3); border-radius: var(--radius-sm); padding: .6rem .8rem; margin: 0; font-size: .9rem; }
.mini-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.mini-lines li { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.form-grid .span-2 { grid-column: span 2; }
.form-card label, .stack-form label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .92rem; }
.form-card input:not([type=radio]):not([type=checkbox]) { min-height: var(--tap); padding: 0 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); font: inherit; background: var(--bg); }
.form-card input:focus { outline: 3px solid var(--soft); border-color: var(--accent); }
.form-card label.check { flex-direction: row; align-items: center; font-weight: 500; }
.pay-options { display: flex; flex-direction: column; gap: .75rem; }
.pay-option { flex-direction: row !important; align-items: flex-start; gap: .8rem !important; padding: 1rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer; font-weight: 400 !important; }
.pay-option:has(input:checked) { border-color: var(--accent); background: var(--soft); }
.pay-option input { margin-top: .35rem; accent-color: var(--accent); width: 20px; height: 20px; }
.auth-page { padding: 3rem 1rem 5rem; }
.form-card.narrow { max-width: 480px; margin: 0 auto; }
.stack-form { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; }

.account-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.order-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.order-list a { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--surface);
  border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; }
.order-right { text-align: right; }
.status { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--warn); }
.status-delivered { color: var(--ok); }
.status-cancelled { color: var(--sale); }
.placed-banner { background: var(--soft-2); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
.placed-banner h1 { font-size: 1.8rem; }
.timeline { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; counter-reset: step; }
.timeline li { padding: .7rem .5rem; text-align: center; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: .85rem; }
.timeline li.done { background: var(--accent); color: var(--accent-ink); }
.timeline li.off { opacity: .45; }
.mono { font-family: ui-monospace, Menlo, monospace; }

@media (max-width: 900px) {
  .bag-grid { grid-template-columns: minmax(0, 1fr); }
  .summary-card { position: static; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: auto; }
  .bag-line { grid-template-columns: 72px minmax(0, 1fr); }
  .bag-thumb { width: 72px; }
  .bag-qty { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==========================================================================
   Sales, coupons, returns
   ========================================================================== */
.badge-sale.is-sale { background: var(--sale); color: #fff; }
.sale-tag { margin: .3rem 0 0; font-size: .85rem; font-weight: 600; color: var(--sale); }
.sale-ribbon { display: inline-block; margin: 0 0 .6rem; padding: .3rem .9rem; border-radius: var(--pill); background: var(--sale); color: #fff; font-weight: 600; font-size: .9rem; letter-spacing: .02em; }

.coupon-box { display: flex; flex-direction: column; gap: .6rem; padding: .9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.coupon-entry { display: flex; gap: .5rem; }
.coupon-entry input { flex: 1; min-width: 0; min-height: 48px; padding: 0 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); font: inherit; text-transform: uppercase; background: var(--bg); }
.coupon-entry .btn { min-height: 48px; padding: 0 1.1rem; }
.coupon-applied { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; margin: 0; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--soft-2); color: var(--ok); }
.coupon-applied .muted { font-size: .9rem; }
.offers { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.offer { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem .9rem; border: 1.5px dashed var(--accent); border-radius: var(--radius-sm); background: var(--soft); }
.offer p { margin: .15rem 0 0; }
.offer .mono { margin-left: .35rem; color: var(--ink-2); }
.offer .btn { min-height: 44px; padding: 0 1rem; font-size: .95rem; white-space: nowrap; }
.offer-off { border-color: var(--line); background: var(--surface); opacity: .8; }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.5rem; }
.return-line { grid-template-columns: 96px minmax(0, 1fr) auto; }
.return-line.is-done { opacity: .55; }
.inline-field { display: flex !important; flex-direction: row !important; align-items: center; gap: .6rem !important; margin-top: .5rem; font-weight: 500 !important; }
.inline-field select, .bag-qty select, .form-card select, .form-card textarea { min-height: 44px; padding: .5rem .75rem; border-radius: var(--radius-sm); border: 1px solid var(--line); font: inherit; background: var(--bg); }
.form-card textarea { resize: vertical; }
.steps-list { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.section-gap { margin-top: 2.5rem; }
.account-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.account-foot form { margin: 0; }
.account-delete { margin: 1.5rem 0 0; text-align: right; font-size: .8rem; }
.account-delete a { color: var(--ink-2); }
.small-heading { font-size: 1rem; margin: 1.25rem 0 .4rem; }
.status-completed { color: var(--ok); }
.status-rejected, .status-cancelled { color: var(--ink-2); }
@media (max-width: 640px) {
  .two-up { grid-template-columns: 1fr; }
  .return-line { grid-template-columns: 72px minmax(0, 1fr); }
}

/* Sign-in, account and addresses */
.or { display: flex; align-items: center; gap: .75rem; color: var(--ink-2); margin: 1.25rem 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
.code-input { font-size: 1.6rem !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.dev-code { background: var(--soft-2); padding: .75rem 1rem; border-radius: var(--radius-sm); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.25rem; }
/* Product highlights: icon tiles under the price, two to a row, dashed outline */
.highlights { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.highlight { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent);
             border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem; line-height: 1.25; }
.highlight-icon { flex: none; width: 28px; height: 28px; color: var(--plum); }

/* Phones: size and "Add to bag" fixed to the bottom of the product page while its own buttons are off screen */
.sticky-buy { display: none; }
@media (max-width: 900px) {
  .sticky-buy.is-shown { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: .6rem; position: fixed; z-index: 40;
                         left: 0; right: 0; bottom: 0; padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom));
                         background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(36, 26, 24, .08); }
  .sticky-buy select { height: 50px; min-width: 0; font-weight: 600; border-radius: var(--pill); padding-inline: 1rem; }
  .sticky-buy .btn { min-height: 50px; width: 100%; }
  body:has(.sticky-buy.is-shown) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Account tabs: one row of pill buttons side by side (two by two on a phone, so all four show); the open one fills in plum. */
.account-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.account-tabs a { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 1.15rem; border-radius: var(--pill);
                  background: var(--surface); color: var(--ink); border: 1px solid color-mix(in srgb, var(--plum) 22%, transparent);
                  font: 600 .95rem/1 var(--font-body); white-space: nowrap; text-decoration: none; transition: border-color .2s, background-color .2s, color .2s; }
.account-tabs a:hover { border-color: var(--plum); color: var(--plum); }
.account-tabs a.is-active { background: var(--plum); border-color: var(--plum); color: var(--ivory); }
.account-panel > .form-card { max-width: 560px; }
.account-panel[hidden] { display: none; }
@media (max-width: 640px) {
  .account-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .account-tabs a { height: 42px; padding: 0 .75rem; font-size: .9rem; }
}
.contact-list { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 1rem 0; }
.contact-list dt { font-weight: 600; }
.contact-list dd { margin: 0; overflow-wrap: anywhere; }
.badge-ok, .badge-warn { display: inline-block; font-size: .75rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; margin-left: .25rem; }
.badge-ok { background: var(--soft-2); color: var(--ok); }
.badge-warn { background: var(--soft); color: var(--sale); }
.inline-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form label { flex: 1 1 220px; }
.address-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.address-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column;
    justify-content: space-between; gap: .75rem; background: var(--surface, #fff); }
.address-card p { margin: .25rem 0 0; }
.address-new { align-items: center; justify-content: center; border-style: dashed; min-height: 120px; }
.address-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.device-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .75rem; }
.device-card { border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1.1rem; display: flex;
               justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--surface, #fff); }
.device-card p { margin: .25rem 0 0; }
.form-card.narrow-wide { max-width: 640px; margin: 0 auto; }
.saved-addresses { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.pay-option.is-off { opacity: .55; }
.pin-status { margin: -.5rem 0 0; font-size: .88rem; color: var(--ink-2); min-height: 1.2em; }
.pin-status.ok { color: var(--deliver); font-weight: 600; }
.pin-status.problem { color: var(--sale); }
.contact-email { margin-bottom: 1.5rem; }
@media (max-width: 600px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .form-grid .span-2 { grid-column: auto; }
}

/* ------------------------------------------------------------- reviews */
.stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 2px; vertical-align: -1px; }
.stars-empty { color: var(--line); }
.stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--star); }
.rating-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-2); margin: .25rem 0 .75rem; }
.rating-link:hover { color: var(--ink); }
.reviews-layout { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.review-average { display: flex; align-items: center; gap: .75rem; margin: 0; }
.review-average strong { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.review-average .stars { font-size: 1.25rem; }
.review-bars { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; }
.review-bars li { display: grid; grid-template-columns: 2.4rem 1fr 2rem; align-items: center; gap: .6rem; font-size: .9rem; }
.review-bars .bar { height: 8px; border-radius: var(--pill); background: var(--soft); overflow: hidden; }
.review-bars .bar span { display: block; height: 100%; background: var(--star); border-radius: inherit; }
.review-list { display: grid; gap: 1.25rem; }
.review { border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; }
.review header { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.review-body { margin: 0 0 .6rem; white-space: pre-line; }
.review-photos { display: flex; gap: .6rem; margin-bottom: .6rem; }
.review-photos img { width: 96px; height: 120px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.verified { color: var(--ok); font-weight: 600; }
.review-list > .btn { justify-self: start; }
@media (max-width: 760px) { .reviews-layout { grid-template-columns: 1fr; } }

/* review form */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { font-size: 2rem; line-height: 1; color: var(--line); cursor: pointer; padding: .1rem; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--star); }
.star-input input:focus-visible + label { outline: 2px solid var(--accent); border-radius: 6px; }

/* product cards: ★★★★☆ 4.6 (12) */
.card-rating { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .35rem; font-size: .88rem; line-height: 1; }
.card-rating .stars { font-size: .85rem; letter-spacing: 1px; }
.card-rating-avg { font-weight: 600; color: var(--ink); }
.card-rating-count { color: var(--ink-2); }

/* ---------------------------------------------------------------- pay page */
.pay-page { max-width: 560px; }
.pay-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: 1rem; margin-top: 1rem; }
.pay-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 1.1rem; }
.pay-total strong { font-size: 1.8rem; }
.pay-safe { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: .92rem; display: grid; gap: .3rem; }
.pay-actions { display: grid; gap: .75rem; justify-items: center; }
.notice { margin: 0; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); }
.pay-card .problem { margin: 0; }
.sim-banner { background: #fff4d6; color: #6b4b00; border: 1px dashed #c99a2e; border-radius: var(--radius-sm); padding: .6rem 1rem; font-weight: 600; }
.sim-options { display: grid; gap: .6rem; }

/* ------------------------------------------------------------------ error page (templates/error.html) */
.error-body { background: var(--bg); min-height: 100vh; }
.error-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
              gap: 2rem; padding: 2.5rem 1rem; }
.error-card { width: 100%; max-width: 520px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
              padding: 2.25rem 1.75rem; text-align: center; }
.error-card h1 { margin: 0 0 .75rem; }
.error-card .lead { margin: 0 auto 1.5rem; }
.error-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.error-support { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.error-support h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
.error-support ul { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .4rem; }
.error-support a { font-weight: 600; color: var(--accent-dark); }
.error-ref { font-size: .8rem; margin: 1.5rem 0 0; }

/* ------------------------------------------------------------------ complete your profile */
.choice-group { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.choice-group legend { font-weight: 600; font-size: .92rem; margin-bottom: .5rem; padding: 0; }
.form-card label.choice { flex-direction: row; align-items: center; gap: .45rem; font-weight: 500; cursor: pointer;
                          border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1rem; min-height: var(--tap); }
.form-card label.choice:has(input:checked) { border-color: var(--accent); background: var(--soft-2); }
.form-card label.choice input { accent-color: var(--accent); margin: 0; }
.form-card .hint { font-weight: 400; font-size: .85rem; color: var(--ink-2); }
/* iPhone Safari gives date fields a fixed minimum width that ignores width: 100%, pushing the page wider than the screen */
.form-card input[type=date] { font: inherit; display: block; width: 100%; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
.form-card input[type=date]::-webkit-date-and-time-value { text-align: left; }
.reminder { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
            padding: .9rem 1.1rem; border-radius: var(--radius-sm); background: var(--soft-2); margin: 0 0 1.25rem; }

/* ==========================================================================
   Category line art and motion
   ========================================================================== */
/* Line drawings on the category tiles (templates/storefront/category-art.html), in the tile's text colour */
.cat-art { position: absolute; right: 5%; top: 7%; height: 60%; width: auto; aspect-ratio: 1; pointer-events: none;
           fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .55;
           transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.category-tile:hover .cat-art { transform: translateY(-6px) rotate(-4deg) scale(1.04); opacity: .85; }
/* A name with no drawing: the name itself, outlined, sitting behind the tile */
.cat-art-text { height: auto; width: auto; aspect-ratio: auto; top: 50%; right: -2%; transform: translateY(-50%);
                font: 900 clamp(3.5rem, 7vw, 6rem)/.85 var(--font-display); text-transform: uppercase;
                color: transparent; -webkit-text-stroke: 1.5px currentColor; white-space: nowrap; opacity: .35; }
.category-tile:hover .cat-art-text { transform: translateY(-50%) translateX(-10px); }

/* Buttons: a small lift, and an arrow that slides in on the main call to action */
@media (hover: hover) {
  .btn-primary:hover, .btn-dark:hover, .btn-light:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(36, 26, 24, .55); }
  .card:hover .card-media { box-shadow: 0 22px 40px -26px rgba(36, 26, 24, .6); }
}
.btn { transition: transform .2s, box-shadow .2s, background-color .2s, border-color .2s, color .2s; }
.card-media { transition: box-shadow .3s; }
/* Fill sweep: on hover a darker layer slides in from the left behind the label (every .btn) */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--sweep, transparent);
               transform: translateX(-101%); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.btn:hover:not(:disabled)::before, .btn:focus-visible::before { transform: none; }
.btn-primary { --sweep: var(--ink); }
.btn-primary:hover { background: var(--accent); }
.btn-dark { --sweep: var(--plum); }
.btn-dark:hover { background: var(--ink); }
.btn-light { --sweep: var(--dusty-rose); }
.btn-ghost { --sweep: var(--ink); }
.btn-ghost:hover { background: transparent; color: var(--bg); }

/* The main call to action: label plus a round arrow chip that turns on hover */
.btn-cta { padding-right: .4rem; gap: .9rem; }
.btn-chip { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ivory); color: var(--plum);
            transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), background-color .3s; }
.btn-cta:hover .btn-chip { transform: rotate(45deg); background: var(--dusty-rose); }
.btn-lg.btn-cta { padding-left: 1.9rem; }

/* Everything that moves stays still for shoppers who asked their device for less motion (see the rule above);
   pages look the same, just without the movement. */
@media (prefers-reduced-motion: no-preference) {
  /* The opening scene: words rise in one after another, the poster's shapes settle into place */
  .hero-copy > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .2s; }
  .hero-copy > :nth-child(4) { animation-delay: .3s; }
  .hero-copy > :nth-child(5) { animation-delay: .38s; }
  .hero-art .b1 { animation: grow-up 1s cubic-bezier(.2, .7, .2, 1) .1s both; transform-origin: bottom; }
  .hero-art .b2 { animation: pop .9s cubic-bezier(.3, 1.4, .5, 1) .45s both; }
  .hero-art .b3 { animation: drop .9s cubic-bezier(.2, .7, .2, 1) .35s both; }
  .hero-figure { animation: fade-in 1s ease .6s both; }
  .hero-sticker { animation: spin-in .9s cubic-bezier(.3, 1.4, .5, 1) .8s both, sticker-float 6s ease-in-out 1.8s infinite; }

  /* The line drawings draw themselves */
  .cat-art path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s cubic-bezier(.6, 0, .3, 1) .2s forwards; }
  .category-tile:nth-child(2) .cat-art path { animation-delay: .35s; }
  .category-tile:nth-child(3) .cat-art path { animation-delay: .5s; }
  .category-tile:nth-child(4) .cat-art path { animation-delay: .65s; }

  /* Sections rise into view as the page scrolls (browsers without scroll-linked animation just show them) */
  @supports (animation-timeline: view()) {
    .reveal, .reveal-group > * {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 5% entry 55%;
    }
    .reveal-group > :nth-child(4n + 2) { animation-range: entry 10% entry 62%; }
    .reveal-group > :nth-child(4n + 3) { animation-range: entry 15% entry 68%; }
    .reveal-group > :nth-child(4n + 4) { animation-range: entry 20% entry 74%; }
    .cat-art path { animation: draw linear forwards; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow-up { from { transform: scaleY(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drop { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin-in { from { transform: rotate(-120deg) scale(.3); opacity: 0; } to { transform: rotate(-12deg); opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Home: New arrivals, four across (two on phones), so the four pieces always fill whole rows */
.product-grid.home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.block-head .eyebrow { margin-bottom: .5rem; }
@media (max-width: 900px) {
  .product-grid.home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Nudge banners ("♥ Most loved", "★ Bestseller"…): white pills with a small coloured icon, like the sale badge */
.badge-nudge { display: inline-flex; align-items: center; gap: .32rem; background: var(--surface); color: var(--plum);
               box-shadow: 0 2px 8px -2px rgba(36, 26, 24, .25); white-space: nowrap; max-width: 100%; }
.nudge-icon { width: 1.05em; height: 1.05em; flex: none; fill: currentColor; }
.nudge-icon .stroke { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nudge-limited .nudge-icon path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.nudge-most_loved .nudge-icon { color: #c2566e; }
.nudge-bestseller .nudge-icon { color: var(--star); }
.nudge-hot_pick .nudge-icon { color: #d0632f; }
.nudges { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.25rem 0 .7rem; }
.nudges .badge { position: static; }

/* ==========================================================================
   Listing: filter panel (left), sort (top right), applied-filter chips
   ========================================================================== */
.listing-head { margin-bottom: 1.25rem; }
.listing-head h1 { font-family: var(--font-statement); font-weight: 400; font-synthesis: none; text-transform: uppercase;
                   font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1; margin-bottom: .35rem; }
.listing-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.filters-open { display: none; gap: .45rem; }
.filters-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: var(--pill);
                 background: var(--plum); color: var(--ivory); font-size: .72rem; }

/* sort: a segmented control in the top-right corner */
.sort-pills { margin: 0 0 0 auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface);
              display: flex; align-items: center; gap: 2px; }
.sort-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding: 0 .65rem 0 .75rem; }
.sort-pill { position: relative; cursor: pointer; }
.sort-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sort-pill span { display: block; padding: .55rem 1rem; border-radius: var(--pill); font-weight: 600; font-size: .9rem; white-space: nowrap;
                  transition: background-color .2s, color .2s; }
.sort-pill:hover span { background: var(--soft); }
.sort-pill input:checked + span { background: var(--ink); color: var(--ivory); }
.sort-pill input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* the panel */
.listing { grid-template-columns: 290px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); }
/* No overscroll containment here: the wheel over the panel must still scroll the page once the panel ends (or when
   it's short and doesn't scroll at all). The phone drawer below keeps its own scroll. */
.filters { position: sticky; top: 92px; max-height: calc(100vh - 108px); overflow-y: auto;
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; scrollbar-width: thin; }
.filters-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: .75rem; padding: 1.05rem 1.25rem;
                background: var(--surface); border-bottom: 1px solid var(--line); }
.filters-head h2 { margin: 0 auto 0 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
                   font-size: 1.45rem; letter-spacing: .01em; }
.filters-clear { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); text-decoration: none; }
.filters-clear:hover { text-decoration: underline; text-underline-offset: 3px; }
.filters-close, .filters-done { display: none; }

.facet { border-bottom: 1px solid var(--line); padding: 0 1.25rem; }
.facet:last-of-type { border-bottom: 0; }
.facet > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 52px;
                   font-size: .76rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); }
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
                          transform: rotate(-135deg) translate(-2px, -2px); transition: transform .25s; }
.facet:not([open]) > summary::after { transform: rotate(45deg) translate(-2px, -2px); }
.facet[open] > :not(summary) { padding-bottom: 1.15rem; }
.facet-flat { padding-top: .35rem; padding-bottom: .35rem; }

.facet-links { display: flex; flex-direction: column; gap: 2px; }
.facet-links a { position: relative; padding: .5rem .75rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink-2);
                 font-weight: 500; transition: background-color .2s, color .2s; }
.facet-links a:hover { background: var(--soft); color: var(--ink); }
.facet-links a.is-current { background: var(--soft-2); color: var(--plum); font-weight: 700; }
.facet-links a.is-current::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--plum); }
.facet-links .facet-sale { color: var(--sale); }

.price-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.price-range select { width: 100%; min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg);
                      color: var(--ink); padding: 0 .6rem; font: inherit; font-size: .92rem; }
.price-to { font-size: .85rem; color: var(--ink-2); }

.filters .size-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.filters .size-pill span { min-width: 0; min-height: 44px; padding: 0; font-size: .92rem; border-radius: var(--radius-sm);
                           transition: border-color .2s, background-color .2s, color .2s; }
.filters .size-pill:hover span { border-color: var(--ink); }

.swatch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem .5rem; }
.swatch-choice { position: relative; display: flex; align-items: center; gap: .6rem; min-height: 40px; padding: 0 .35rem; border-radius: var(--radius-sm);
                 cursor: pointer; font-size: .9rem; color: var(--ink-2); }
.swatch-choice:hover { background: var(--soft); color: var(--ink); }
.swatch-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); transition: box-shadow .2s; }
.swatch-choice input:checked ~ .swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.swatch-choice input:checked ~ .swatch-name { color: var(--ink); font-weight: 700; }
.swatch-choice input:focus-visible ~ .swatch { outline: 3px solid var(--accent); outline-offset: 3px; }
.swatch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rating-choices { display: flex; flex-direction: column; gap: .15rem; }
.check { display: flex; align-items: center; gap: .7rem; min-height: 40px; cursor: pointer; font-size: .95rem; }
.check input { width: 20px; height: 20px; accent-color: var(--plum); margin: 0; }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; cursor: pointer;
          font-size: .76rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.switch input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0;
                border-radius: var(--pill); background: var(--line); cursor: pointer; transition: background-color .25s; }
.switch input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
                        box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.switch input:checked { background: var(--plum); }
.switch input:checked::before { transform: translateX(18px); }
.switch input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* applied filters */
.results-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1.25rem; min-height: 40px; }
.results-head .result-count { margin: 0; font-weight: 600; color: var(--ink); }
.active-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 .85rem; border-radius: var(--pill);
        border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 600 .85rem/1 var(--font-body); cursor: pointer;
        transition: background-color .2s, color .2s; }
.chip:hover { background: var(--ink); color: var(--ivory); }
.chip .dot { width: 14px; height: 14px; }

/* phones and tablets: the panel slides in from the left */
@media (max-width: 900px) {
  .filters-open { display: inline-flex; }
  /* the panel is a drawer here, so the products take the whole width */
  .listing { grid-template-columns: minmax(0, 1fr); }
  .sort-label { display: none; }
  .sort-pill span { padding: .5rem .75rem; font-size: .85rem; }
  .filters { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: min(380px, 88vw); max-height: none; height: 100dvh;
             overscroll-behavior: contain;
             border: 0; border-radius: 0 var(--radius) var(--radius) 0; padding: 0; transform: translateX(-105%); visibility: hidden;
             transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s .35s; display: flex; flex-direction: column; }
  .filters.is-open { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, .7, .2, 1);
                     box-shadow: 0 0 0 100vmax rgba(36, 26, 24, .45); }
  .filters-close { display: grid; place-items: center; width: 40px; height: 40px; }
  .filters-done { display: flex; position: sticky; bottom: 0; margin: auto 1.25rem calc(1rem + env(safe-area-inset-bottom)); width: auto; }
  html.filters-locked { overflow: hidden; }
}
@media (max-width: 480px) {
  .listing-bar { flex-wrap: wrap; }
  .sort-pill span { padding: .5rem .65rem; }
  .sort-pills { margin-left: 0; }
}
.listing-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.listing-top .listing-head { margin-bottom: 0; }
.listing-top .listing-bar { margin-bottom: .35rem; }
.swatch-name { white-space: normal; line-height: 1.2; }
@media (max-width: 900px) {
  .listing-top { align-items: stretch; flex-direction: column; }
  .listing-top .listing-bar { justify-content: space-between; }
}
.filters-done { box-shadow: 0 -18px 22px 6px var(--surface); }

/* ---------------------------------------------------------------- bag drawer
   The bag slides in from the right (bag icon, and right after adding). Full height, sticky checkout at the bottom. */
.drawer { border: 0; padding: 0; margin: 0 0 0 auto; width: min(440px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw;
          background: var(--surface); color: var(--ink); box-shadow: -24px 0 60px -30px rgba(36, 26, 24, .5); overflow: hidden; }
.drawer::backdrop { background: rgba(42, 35, 32, .45); backdrop-filter: blur(2px); }
.drawer:focus { outline: none; }
#bag-drawer-body { height: 100%; }
.drawer-loading { padding: 2rem 1.5rem; }
.drawer-inner { display: flex; flex-direction: column; height: 100%; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem .9rem; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.7rem; letter-spacing: -.005em;
                  display: flex; align-items: center; gap: .55rem; }
.drawer-units { display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 .45rem; border-radius: var(--pill);
                background: var(--plum); color: var(--ivory); font-family: var(--font-body); font-size: .85rem; font-weight: 700; }
.drawer-added { display: flex; align-items: center; gap: .6rem; margin: .9rem 1.25rem 0; padding: .7rem .9rem; border-radius: var(--radius-sm);
                background: var(--soft-3); color: var(--olive); font-size: .92rem; }
.drawer-added svg { flex: none; }
.drawer-added strong { color: var(--ink); }
.drawer-ship { margin: .9rem 1.25rem 0; font-size: .9rem; }
.drawer-ship p { margin: 0 0 .45rem; }
.ship-bar { height: 6px; border-radius: var(--pill); background: var(--soft); overflow: hidden; }
.ship-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dusty-rose), var(--plum));
                 transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.drawer-lines { list-style: none; margin: .5rem 0 0; padding: 0 1.25rem; overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain; }
.drawer-line { display: grid; grid-template-columns: 76px 1fr auto; gap: .9rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.drawer-line:last-child { border-bottom: 0; }
.drawer-line .bag-thumb { width: 76px; }
.drawer-line.has-problem .bag-thumb { opacity: .5; }
.drawer-info { min-width: 0; }
.drawer-info .bag-name { font-weight: 700; color: var(--ink); text-decoration: none; display: block; line-height: 1.25; }
.drawer-info .small-note { margin: .15rem 0 0; }
.drawer-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .6rem; }
.drawer-price { font-weight: 700; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--pill); background: var(--bg); }
.stepper button { width: 36px; height: 36px; border: 0; background: none; border-radius: 50%; font: inherit; font-size: 1.1rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.stepper button:hover:not(:disabled) { background: var(--soft); }
.stepper button:disabled { color: var(--line); cursor: not-allowed; }
.stepper output { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--soft); color: var(--ink); }
.drawer .gift-note { margin: 0 1.25rem; }
.drawer-foot { padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface);
               box-shadow: 0 -16px 24px -20px rgba(36, 26, 24, .35); }
.drawer-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 1.05rem; }
.drawer-total strong { font-size: 1.3rem; }
.drawer-foot .small-note { margin: .2rem 0 .85rem; }
.drawer-links { display: flex; justify-content: space-between; margin-top: .8rem; font-size: .92rem; }
.drawer-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: .4rem; text-align: center; padding: 2rem 1.5rem; }
.drawer-empty-title { font-size: 2.2rem; margin: 0; }
.drawer-line.is-new { animation: drawer-new 1.6s ease-out; }
@keyframes drawer-new { 0%, 35% { background: var(--soft-2); } 100% { background: transparent; } }
@media (prefers-reduced-motion: no-preference) {
  .drawer[open] { animation: drawer-in .38s cubic-bezier(.2, .8, .2, 1); }
  .drawer[open]::backdrop { animation: fade-in .3s ease-out; }
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* "Only 2 left in M": in the bag and the drawer */
.few-left { display: inline-flex; align-items: center; gap: .35rem; margin: .3rem 0 0; font-size: .82rem; font-weight: 700; color: var(--warn); }
.few-left::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(161, 92, 0, .18); }
@media (prefers-reduced-motion: no-preference) {
  .few-left::before { animation: pulse-dot 1.8s ease-in-out infinite; }
}
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 6px rgba(161, 92, 0, 0); } }

/* ---------------------------------------------------------------- search suggestions */
.search-mini, .search-big { position: relative; }
.suggest { position: absolute; top: calc(100% + .5rem); left: 0; z-index: 70; width: max(100%, 360px); max-width: calc(100vw - 32px);
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .5rem; }
.search-mini .suggest { left: auto; right: 0; }
.suggest[hidden] { display: none; }
.suggest ul { list-style: none; margin: 0; padding: 0; }
.suggest a { display: flex; align-items: center; gap: .75rem; padding: .55rem .65rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.suggest a:hover, .suggest a:focus-visible { background: var(--soft); outline: none; }
.suggest-cats { border-bottom: 1px solid var(--line); padding-bottom: .35rem !important; margin-bottom: .35rem !important; }
.suggest-cat { justify-content: space-between; font-weight: 700; }
.suggest-kind { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); }
.suggest-thumb { flex: none; width: 44px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--soft); }
.suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.suggest-name { flex: 1; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.suggest-price { font-weight: 700; font-size: .9rem; }
.suggest-all { justify-content: center; margin-top: .25rem; font-weight: 700; color: var(--plum) !important; font-size: .9rem; }
.suggest-none { margin: 0; padding: .75rem; color: var(--ink-2); font-size: .92rem; }
.search-big .suggest { top: 60px; width: 100%; max-width: 760px; }

/* ---------------------------------------------------------------- guest checkout, Complete the set (sets) */
.guest-note { margin: -.5rem 0 1.5rem; padding: .85rem 1.1rem; border-radius: var(--radius-sm); background: var(--soft-2); font-size: .95rem; }
.guest-note a { font-weight: 700; color: var(--plum); }
.complete-set .block-head { display: block; }
.complete-set .block-head h2 { font-size: clamp(2rem, 4vw, 3rem); }
.complete-set .block-head .muted { margin: .35rem 0 0; }

/* ---------------------------------------------------------------- sets
   A set card: name and a "Save 18%" badge, its pieces side by side with "+" between them (a size each), then the
   set price beside the pieces bought separately, struck through, and one big button. */
/* auto-fill keeps the empty columns: a lone set stays one column wide instead of filling the page */
.set-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: 1.25rem; }
/* the home page shows two sets: they share the row instead of leaving a third of it empty */
.home-sets .set-list { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.set-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
            padding: clamp(1rem, 2.5vw, 1.5rem); display: flex; }
/* every card the same height in a row: the price and button sit at the bottom whatever the names' length */
.set-form { display: flex; flex-direction: column; width: 100%; }
.set-foot { margin-top: auto; }
.set-card .set-pieces { margin-bottom: 1.25rem; }
.set-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.set-name { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.set-tagline { margin: .25rem 0 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.set-badge { flex: none; margin: 0; padding: .4rem .8rem; border-radius: var(--pill); background: var(--deliver); color: #fff;
             font-weight: 800; font-size: .85rem; letter-spacing: .02em; white-space: nowrap; }
.set-pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
              gap: 1.6rem; position: relative; }
.set-piece { position: relative; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.set-piece + .set-piece::before { content: "+"; position: absolute; left: -1.3rem; top: 32%; width: 1rem; text-align: center;
                                  font: 800 1.4rem/1 var(--font-display); color: var(--plum); }
/* four pieces wrap two to a row, five or six three to a row (no "+" before the first of a row) */
.set-pieces.pieces-4, .set-pieces.pieces-5, .set-pieces.pieces-6 { grid-auto-flow: row; row-gap: 1.25rem; }
.set-pieces.pieces-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set-pieces.pieces-5, .set-pieces.pieces-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.set-pieces.pieces-4 .set-piece:nth-child(2n + 1)::before,
.set-pieces:is(.pieces-5, .pieces-6) .set-piece:nth-child(3n + 1)::before { display: none; }
.set-photo { display: grid; place-items: center; aspect-ratio: 4 / 5; max-height: 240px; border-radius: var(--radius-sm); overflow: hidden;
             text-decoration: none; background: color-mix(in srgb, var(--tint, var(--soft)) 22%, var(--soft)); }
.set-photo img { width: 100%; height: 100%; object-fit: cover; }
.set-photo span { font: 900 3rem/1 var(--font-display); color: rgba(255, 255, 255, .9); }
.set-piece-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
/* names take two lines at most, and always the space of two, so pieces line up across cards */
.set-piece-name { font-weight: 700; line-height: 1.25; text-decoration: none; color: var(--ink); font-size: .95rem;
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.set-piece-name:hover { color: var(--plum); }
.set-size select { width: 100%; height: 40px; margin-top: .35rem; border-radius: var(--pill); padding-inline: .9rem; font-weight: 600; }
.set-foot { padding-top: 1rem; border-top: 1px dashed var(--line); display: grid; gap: .75rem; }
.set-prices { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; }
.set-price { font: 800 clamp(1.35rem, 2.2vw, 1.7rem)/1 var(--font-display); }
.set-prices .was { color: var(--ink-2); text-decoration: line-through; }
.set-prices .off { color: var(--sale); font-weight: 700; }
/* what the set itself saves, on top of any markdown */
.set-why { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; margin: 0; font-size: .9rem; color: var(--ink-2); }
.set-foot .set-why { margin-top: -.35rem; }
.set-why .set-vs { color: var(--sale); font-weight: 600; }
.set-why .set-vs .vs { color: var(--ink-2); font-weight: 400; }
[data-piece-line] s { margin-left: .15rem; }
.set-saving { color: var(--deliver); font-weight: 800; }
.set-add { width: 100%; }
.set-card .set-add { min-height: 52px; font-size: 1rem; }
.set-problem { margin: 0; color: var(--danger); font-weight: 600; }
.sets-hero { max-width: 720px; margin-bottom: 2rem; }
.sets-hero .lead { color: var(--ink-2); }
.nav-sets { color: var(--deliver) !important; }
.set-saving-line, dt.set-saving { color: var(--deliver); }
/* bag: change a line's size in place */
.size-swap { margin: .15rem 0 .25rem; }
.size-swap label { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-2); font-size: .92rem; }
.size-swap select { width: auto; min-width: 0; height: 34px; padding: 0 2rem 0 .7rem; border-radius: var(--pill); font-size: .9rem; font-weight: 600; }
.set-best { position: static; justify-self: start; padding: .2rem .55rem; font-size: .72rem; margin-bottom: .3rem; }
/* product page, under the name: "Complete the set". One slide per set: this piece first, the others beside it */
.look { margin: .9rem 0 1.1rem; padding: .85rem .9rem 1rem; border-radius: var(--radius-sm); scroll-margin-top: 90px;
        border: 1px solid color-mix(in srgb, var(--deliver) 30%, var(--line)); background: color-mix(in srgb, var(--deliver) 4%, var(--surface)); }
.look-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.look-title { margin: 0; font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--deliver); }
.look-nav { display: flex; align-items: center; gap: .35rem; flex: none; }
.look-count { font-weight: 700; font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-right: .15rem; }
.look-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
              font: 700 1.15rem/1 var(--font-body, inherit); display: grid; place-items: center; cursor: pointer; padding: 0 0 .1rem; }
.look-arrow:hover:not(:disabled) { border-color: var(--plum); color: var(--plum); }
.look-arrow:disabled { opacity: .35; cursor: default; }
.look-all { margin-left: .35rem; font-weight: 700; font-size: .85rem; color: var(--plum); white-space: nowrap; }
/* the slides: the track takes the shown set's height (nuren.js); padding leaves room for the cards' shadows */
.look-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; align-items: start; overflow-x: auto; overflow-y: hidden;
              scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; transition: height .25s ease;
              margin: -.4rem -.5rem; }
.look-track::-webkit-scrollbar { display: none; }
.look-slide { scroll-snap-align: start; display: grid; gap: .65rem; padding: .4rem .5rem .6rem; min-width: 0; }
.look-set-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.look-set-head > div { display: grid; min-width: 0; }
.look-set-name { font-weight: 800; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-set-name:hover { color: var(--plum); }
.look-pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.look-piece { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: .6rem; background: var(--surface); border-radius: 12px;
              box-shadow: 0 6px 16px -10px rgba(36, 26, 24, .4); overflow: hidden; padding-right: .6rem; }
.look-photo { display: grid; place-items: center; height: 100%; min-height: 84px; overflow: hidden; text-decoration: none;
              background: color-mix(in srgb, var(--tint, var(--soft)) 22%, var(--soft)); }
.look-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.look-photo span { font: 900 1.5rem/1 var(--font-display); color: rgba(255, 255, 255, .9); }
.look-body { display: grid; gap: .1rem; align-content: center; min-width: 0; padding: .45rem 0; }
.look-label { font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--deliver); }
.look-name { font-weight: 700; font-size: .85rem; line-height: 1.25; color: var(--ink); text-decoration: none;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.look-name:hover { color: var(--plum); }
.look-line { color: var(--ink-2); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-line s { margin-left: .25rem; }
.look-body select { width: 100%; height: 32px; margin-top: .2rem; border-radius: var(--pill); padding: 0 1.6rem 0 .65rem;
                    font-size: .82rem; font-weight: 600; min-width: 0; }
.look-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap;
             padding-top: .6rem; border-top: 1px dashed var(--line); }
.look-prices { display: grid; gap: .15rem; min-width: 0; }
.look-foot .set-price { font-size: 1.3rem; }
.look-foot .set-why { font-size: .8rem; }
.look-foot .set-add { width: auto; min-height: 42px; padding: 0 1.2rem; font-size: .92rem; white-space: nowrap; }
.look-foot .set-problem { flex-basis: 100%; }
.look-slide.is-collapsed .look-piece:nth-child(n + 3) { display: none; }
.look-more { display: block; width: 100%; margin: .5rem 0 0; padding: .55rem; border: 1px dashed var(--line); border-radius: 12px;
             background: transparent; color: var(--plum); font: 700 .85rem/1.2 var(--font-body); cursor: pointer; }
.look-more:hover { border-color: var(--plum); background: var(--surface); }
@media (max-width: 480px) {
  .look-pieces { grid-template-columns: minmax(0, 1fr); }
  .look-foot .set-add { width: 100%; }
  .look-head { gap: .4rem; }
  .look-title { letter-spacing: .04em; font-size: .78rem; white-space: nowrap; }
  .look-nav { gap: .25rem; }
  .look-all { margin-left: .2rem; font-size: .8rem; }
}
/* bag and checkout: a piece in a set shows its new price and the set's % off */
.set-off { color: var(--deliver); font-weight: 700; font-size: .85rem; }
.drawer-price .was, .mini-set-price .was { color: var(--ink-2); text-decoration: line-through; font-size: .85rem; margin-right: .3rem; }
.drawer-price .off, .mini-set-price .off { display: block; text-align: right; color: var(--sale); font-weight: 700; font-size: .85rem; }
.mini-set-price { text-align: right; white-space: nowrap; }
/* a piece in a set: which set, and what it takes off on top */
.set-tag { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .35rem; margin: .2rem 0 .3rem; color: var(--deliver); font-size: .82rem; }
.set-tag svg { flex: none; }
.set-tag strong { font-weight: 800; }
/* MRP → discounts in the drawer: smaller than the bag page's */
.drawer-totals { font-size: .88rem; gap: .2rem 1rem; margin-bottom: .45rem; color: var(--ink-2); }
/* "You save ₹1,699 on this order, including ₹299 from the Studio Duo set" */
.saved-note { margin: .6rem 0; padding: .55rem .75rem; border-radius: var(--radius-sm); font-size: .9rem; line-height: 1.4;
              background: color-mix(in srgb, var(--deliver) 10%, var(--surface)); color: var(--deliver); }
.saved-note strong { font-weight: 800; }
@media (max-width: 560px) {
  /* three or more pieces: a row of narrow columns gets cramped, so they stack (photo beside the details) */
  .set-pieces.pieces-3, .set-pieces.pieces-4, .set-pieces.pieces-5, .set-pieces.pieces-6 { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: none; gap: 1rem; }
  .set-pieces.pieces-3 .set-piece, .set-pieces.pieces-4 .set-piece, .set-pieces.pieces-5 .set-piece, .set-pieces.pieces-6 .set-piece {
    display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: .9rem; }
  .set-pieces.pieces-3 .set-piece + .set-piece::before, .set-pieces.pieces-4 .set-piece + .set-piece::before,
  .set-pieces.pieces-5 .set-piece + .set-piece::before, .set-pieces.pieces-6 .set-piece + .set-piece::before { display: none; }
}

/* "Go" buttons — Checkout and Place order: a clear green so the last step stands out (white text ≥ 5:1) */
.btn-go, .btn-primary.btn-go { background: #1f7a4d; color: #fff; --sweep: #145a37; }
.btn-go:hover, .btn-primary.btn-go:hover { background: #1f7a4d; }
.btn-go:disabled { background: #b9d3c4; cursor: not-allowed; transform: none; }
.btn-go:focus-visible { outline: 3px solid #1f7a4d; outline-offset: 3px; }
@media (hover: hover) {
  .btn-go:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(20, 90, 55, .7); }
}

/* The big "Place order" button: title + small line, payment badges, arrow (bag, drawer, checkout) */
.btn-order { display: flex; width: 100%; min-height: 68px; padding: .65rem 1.1rem .65rem 1.4rem; gap: .9rem; border-radius: 18px; text-decoration: none; }
.order-text { flex: 1; display: grid; justify-items: center; gap: .1rem; line-height: 1.15; text-align: center; }
.order-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.3rem; }
.order-sub { font-size: .78rem; font-weight: 600; opacity: .88; }
.pay-badges { display: flex; flex: none; }
.pay-badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #145a37;
             border: 2px solid #1f7a4d; font-size: .56rem; font-weight: 800; letter-spacing: -.01em; }
.pay-badge + .pay-badge { margin-left: -9px; }
.order-arrow { flex: none; transition: transform .25s; }
.btn-order:hover .order-arrow { transform: translateX(3px); }

.order-text { min-width: 0; }
.order-title, .order-sub { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guest-coupon { margin: 1rem 0; padding: .75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guest-coupon a { color: var(--plum); font-weight: 700; }
/* A narrow button (checkout summary on phones) drops the payment badges so the words stay whole */
.btn-order { container-type: inline-size; }
/* A narrow button (checkout summary) keeps the logos, a little smaller; only a very narrow one drops them */
@container (max-width: 340px) {
  .pay-badge { width: 30px; height: 30px; }
  .order-title { font-size: 1.15rem; }
}
@container (max-width: 250px) {
  .pay-badges { display: none; }
}

/* ---------------------------------------------------------------- category tabs (home)
   One row of quiet white tabs with a thin plum outline: a small line drawing and the name. The picked one fills in plum.
   All fit on one line on desktop; on narrower screens the row scrolls sideways. Overrides the old tall tiles. */
.category-grid { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
                 padding: 4px 2px 6px; margin: -4px -2px 0; }
.category-grid::-webkit-scrollbar { display: none; }
.category-tile { flex: 1 0 auto; min-width: max-content; flex-direction: row; align-items: center; justify-content: center; gap: .5rem;
                 min-height: 0; height: 48px; padding: 0 1.15rem 0 .8rem; border-radius: var(--pill); scroll-snap-align: start;
                 background: var(--surface); color: var(--ink); border: 1px solid color-mix(in srgb, var(--plum) 22%, transparent);
                 transition: border-color .2s, background-color .2s, color .2s; }
.category-tile:hover { transform: none; border-color: var(--plum); color: var(--plum); }
.cat-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; }
.cat-icon .cat-art { position: static; width: 28px; height: 28px; aspect-ratio: auto; opacity: .85; stroke-width: 7; }
.category-tile:hover .cat-art { transform: none; opacity: 1; }
.cat-letter { font: 700 1rem/1 var(--font-body); }
.category-name { flex: none; max-width: none; font: 600 .95rem/1 var(--font-body); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.category-tile .arrow { display: none; }
.category-tile.is-active { background: var(--plum); border-color: var(--plum); color: var(--ivory); }
.category-tile.is-active .cat-art { opacity: 1; }
@media (max-width: 640px) {
  .category-grid { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .category-tile { flex: 0 0 auto; height: 42px; padding: 0 .95rem 0 .65rem; }
  .cat-icon, .cat-icon .cat-art { width: 24px; height: 24px; }
  .category-name { font-size: .9rem; }
}

/* Payment app logos in the badges: white discs, slightly overlapping */
.pay-badge { overflow: hidden; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(20, 90, 55, .35); }
.pay-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pay-badge + .pay-badge { margin-left: -6px; }
.pay-badge.pad img { padding: 4px; }

/* Home: the shelf of pieces under the picked tab */
.shelf { margin-top: 1.5rem; transition: opacity .2s; }
.category-grid:has(.htmx-request) + .shelf { opacity: .45; }
.shelf-empty { padding: 2rem 0; }
/* the tile that ends a short shelf: the way into the whole category */
.shelf-more { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: var(--radius); border: 1.5px dashed var(--line);
              color: var(--plum); font: 800 clamp(1rem, 1.4vw, 1.2rem)/1.2 var(--font-display); text-decoration: none; text-align: center;
              padding: 1rem; transition: background-color .2s, border-color .2s; }
.shelf-more:hover { background: var(--soft-2); border-color: var(--plum); }

/* Price slider (listing filters): two range inputs stacked on one track; --lo/--hi colour the chosen stretch */
.price-slider { padding: .1rem 0 .3rem; }
.price-readout { display: flex; justify-content: center; gap: .45rem; margin: 0 0 .85rem; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.price-track { position: relative; height: 28px; }
.price-track::before, .price-track::after { content: ""; position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px; }
.price-track::before { left: 0; right: 0; background: var(--line); }
.price-track::after { left: var(--lo, 0%); right: calc(100% - var(--hi, 100%)); background: linear-gradient(90deg, var(--dusty-rose), var(--plum)); }
.price-track input[type="range"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; background: none;
                                   pointer-events: none; -webkit-appearance: none; appearance: none; }
.price-track input[type="range"]::-webkit-slider-runnable-track { background: none; height: 28px; }
.price-track input[type="range"]::-moz-range-track { background: none; }
.price-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 24px; height: 24px; margin-top: 2px;
                                                         border-radius: 50%; background: var(--surface); border: 3px solid var(--plum);
                                                         box-shadow: 0 2px 6px rgba(36, 26, 24, .25); cursor: grab; }
.price-track input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--surface);
                                                     border: 3px solid var(--plum); box-shadow: 0 2px 6px rgba(36, 26, 24, .25); cursor: grab; }
.price-track input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--accent); outline-offset: 2px; }
.price-track input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.price-ends { display: flex; justify-content: space-between; margin: .35rem 0 0; font-size: .78rem; color: var(--ink-2); }

/* "Are you sure?" dialog (forms with data-confirm) */
.confirm-dialog { border: 0; padding: 0; border-radius: var(--radius); width: min(420px, calc(100vw - 32px)); background: var(--surface);
                  color: var(--ink); box-shadow: 0 30px 80px -30px rgba(36, 26, 24, .55); }
.confirm-dialog::backdrop { background: rgba(42, 35, 32, .45); backdrop-filter: blur(2px); }
.confirm-dialog[open] { animation: confirm-in .22s cubic-bezier(.2, .7, .2, 1); }
@keyframes confirm-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.confirm-inner { padding: 1.5rem 1.5rem 1.25rem; }
.confirm-inner h2 { font-size: 1.35rem; margin: 0 0 .5rem; }
.confirm-inner p { margin: 0 0 1.25rem; }
.confirm-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.confirm-actions .btn { flex: 1 1 auto; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #a02c23; border-color: #a02c23; }
@media (prefers-reduced-motion: reduce) { .confirm-dialog[open] { animation: none; } }

/* About page: the tagline and the sign-off */
.about-tagline { font: 400 clamp(1.3rem, 2.6vw, 1.75rem)/1.15 var(--font-statement); font-synthesis: none; text-transform: uppercase;
                 color: var(--plum); margin: -.25rem 0 1.1rem; }
.about-signoff { font-weight: 800; font-size: 1.15rem; color: var(--plum); margin-top: 1.5rem; }

/* Cancel buttons (an order, a return request): red outline, filled red on hover */
.btn-cancel { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-cancel:hover, .btn-cancel:focus-visible { background: var(--danger); color: #fff; border-color: var(--danger); }
.link.link-cancel { color: var(--danger); font-weight: 700; }

/* About: "Why Nuren", a grid of short points */
.why-nuren { margin: 2.25rem 0 2rem; }
.why-nuren h2 { font: 400 clamp(1.3rem, 2.4vw, 1.7rem)/1.1 var(--font-statement); font-synthesis: none; text-transform: uppercase; margin-bottom: 1.1rem; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.why-list li { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.why-list strong { display: flex; align-items: center; gap: .45rem; color: var(--plum); font-weight: 800; margin-bottom: .25rem; }
.why-list strong::before { content: "✦"; font-size: .75em; color: var(--dusty-rose); }
.why-list span { color: var(--ink-2); font-size: .95rem; line-height: 1.5; }

/* Section headings: a band of plum-and-rose light passes over the words once as they come into view (nuren.js adds
   .is-lit), under a small eyebrow whose star turns slowly. At rest the words are plain ink, so without JavaScript,
   or with less motion asked for, they read exactly as before. */
.star-eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .55rem; }
.star-eyebrow svg { width: 13px; height: 13px; flex: none; fill: currentColor; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .display-sm, .listing-head h1, .why-nuren h2 {
    background: linear-gradient(100deg, var(--ink) 0 40%, #8a4a84 47%, var(--dusty-rose) 50%, #8a4a84 53%, var(--ink) 60% 100%)
                100% 0 / 250% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .is-lit.display-sm, .listing-head h1.is-lit, .why-nuren h2.is-lit { animation: heading-shimmer 2.2s cubic-bezier(.4, 0, .2, 1) .15s both; }
  .star-eyebrow svg { animation: star-turn 7s linear infinite; }
}
@keyframes heading-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes star-turn { to { transform: rotate(360deg); } }

/* Product photos tilt a few degrees toward the pointer and catch a soft light (nuren.js sets the angles; mouse and
   trackpad only, never on touch or with less motion asked for) */
.card-media.is-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.015);
                         transition: transform .12s ease-out; will-change: transform; }
.card-media { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.card-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: 0;
                     background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%);
                     transition: opacity .3s; }
.card-media.is-tilting::after { opacity: 1; }
.card-badges, .badge-low { z-index: 2; }

/* Order page: a product still on sale links to its page */
a.bag-name-link { color: inherit; text-decoration: none; }
a.bag-name-link:hover { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
a.bag-thumb { display: block; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
a.bag-thumb:hover { transform: scale(1.03); }

/* Size labels stay on one line; a long one ("One size", "Free size") takes two boxes */
.size-pill span, .size-choice span { white-space: nowrap; }
.size-choice span { padding: 0 .6rem; }
.size-set .size-choice.is-wide, .filters .size-pill.is-wide { grid-column: span 2; }