@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800;900&family=Permanent+Marker&family=Space+Grotesk:wght@500;700&display=swap');
/* ===================================================================
   FILMED LAST NIGHT — site.css
   -------------------------------------------------------------------
   EVERYTHING BRAND-RELATED IS IN THE :root BLOCK BELOW.
   To restyle the whole site, change only that block (and the @import
   line above if the fonts change). Nothing else in this file, and
   nothing in any .html file, needs to be touched.

   THE LOOK, in one line: a flash photo taken at 1am at a party.
   Near-black, one loud acid accent, type big enough to fill a phone
   screen, and motion that snaps rather than fades. The content is shot
   handheld at night — the site is not allowed to look calmer than the
   thing it is selling.
   =================================================================== */

/* ===================================================================
   ///  DESIGN TOKENS  ///  ← THE ONLY BLOCK YOU EDIT PER CLIENT
   =================================================================== */
:root{

  /* --- BRAND COLORS ------------------------------------------------
     ONE accent, deliberately. A second loud color halves the impact of
     the first, and this palette is carrying the whole personality.
     --brand      acid lime. Buttons, prices, every call to action.
     --brand-ink  text that sits ON TOP of --brand. Must contrast.
     --hot        used ONLY for alerts and "new price" flags. Not decor. */
  --brand:        #D4FF2F;
  --brand-ink:    #0A0E00;
  --hot:          #FF3B1F;

  /* Kept as an alias so any rule still reaching for --brand-2 resolves
     to something sane rather than to nothing. */
  --brand-2:      var(--hot);

  /* --- SURFACES ----------------------------------------------------
     Near-black with a cold cast, the way a phone sensor renders a dark
     room. Flat grey would read as "dashboard". */
  --bg:           #08070A;   /* page background        */
  --surface:      #100F14;   /* cards, drawer          */
  --surface-2:    #191820;   /* raised bits, inputs    */
  --line:         rgba(255,255,255,.12);  /* hairline borders */

  /* --- TEXT --------------------------------------------------------
     Pure white on purpose. Flash photography blows the highlights, and
     an off-white here immediately makes the page look soft. */
  --ink:          #FFFFFF;
  --muted:        #8E8A9C;

  /* --- STATUS ------------------------------------------------------ */
  --sale:         #D4FF2F;

  /* --- PAPER -------------------------------------------------------
     The ad-space previews are physical objects — a sticky note, a sheet
     of paper, a spray-painted bedsheet. They need real light surfaces
     or the preview stops looking like the thing you are buying. */
  --paper:        #F4F1E8;
  --paper-ink:    #14120C;
  --sticky-yellow:#FFE44D;
  --sticky-blue:  #7FD4FF;
  --sticky-purple:#C9A7FF;
  --sticky-pink:  #FF9EC4;

  /* --- TYPE --------------------------------------------------------
     Two families. Anton exists to be enormous — it is condensed, so a
     headline can run at 18vw on a phone and still fit. It ships ONE
     weight; never ask it for bold, the browser fakes it and it smears.
     Inter does everything else.                                       */
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  /* Marker. Used ONLY inside the ad-space previews — a sticky note and a
     spray-painted bedsheet are handwritten objects, and a UI font there
     makes the preview stop looking like the thing being sold. */
  --font-hand:    'Permanent Marker', 'Bradley Hand', cursive;
  --tracking-tight: -.01em;
  --tracking-wide:  .14em;

  /* --- RADIUS ------------------------------------------------------
     Nearly square. Rounded corners read as friendly and calm, which is
     the opposite of the brief. */
  --r-sm:   3px;
  --r:      6px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-pill: 999px;

  /* --- SPACING SCALE ----------------------------------------------- */
  --s1:  4px;   --s2:  8px;   --s3: 12px;   --s4: 16px;
  --s5: 24px;   --s6: 32px;   --s7: 48px;   --s8: 64px;
  --s9: 96px;   --s10:128px;

  /* --- LAYOUT ------------------------------------------------------ */
  --wrap:     1240px;  /* max content width  */
  --pad:      18px;    /* page gutter, phone */
  --header-h: 58px;

  /* --- MOTION ------------------------------------------------------
     Kinetic, not expensive. --ease-back overshoots slightly and is what
     makes a button feel like it was hit rather than faded. Durations
     stay short: anything over ~.3s reads as a luxury brand. */
  --ease:       cubic-bezier(.2,.9,.3,1);
  --ease-back:  cubic-bezier(.34,1.56,.64,1);
  --fast:  .13s;
  --med:   .24s;
  --slow:  .36s;
}
/* =============  END DESIGN TOKENS — don't edit below  ============== */


/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
/* The UA's [hidden] rule is display:none at the lowest priority, so any
   component that sets its own display silently ignores it — .cart-btn is
   display:grid, and stayed on screen every time JS hid it. Anything the
   JS hides has to actually disappear, so this is global and it wins. */
[hidden]{display:none !important}
/* padding:0 matters — browsers default <button> to 1px 6px, which inset
   the spotlight card's image 7px on each side (imperceptible vertically,
   obvious horizontally). Every button here sets its own padding. */
button{font:inherit; color:inherit; border:0; padding:0; background:none; cursor:pointer}
input,textarea,select{font:inherit; color:inherit}
a{color:var(--brand); text-decoration:none}
[id]{scroll-margin-top:calc(var(--header-h) + var(--s5))}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:var(--r-sm)}

/* Film-grain overlay. Cheap texture, keeps flat dark from feeling dead. */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.075; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad)}
section{padding:var(--s9) 0; position:relative}
.section-head{margin-bottom:var(--s7)}
.section-head--row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s5); flex-wrap:wrap;
}

/* ---------- Type ----------
   h1 and h2 are the award-poster serif and nothing else is. Instrument
   Serif ships one weight, so these stay at 400 — asking for 700 makes
   the browser synthesise a smeared fake bold. Everything smaller is
   Inter, because a serif at 1rem in a card title reads as a typo. */
/* Anton, uppercase, set as large as the box allows. 18vw on a 390px
   phone is ~70px — a condensed face is the only way a headline that
   size still fits "FILMED LAST NIGHT" on two lines.
   line-height under 1 is deliberate: the lines have to lock together
   into a block, not float as separate sentences. */
h1,h2{
  /* .88 rather than .84: Anton's caps are tall, and if it ever fails to
     load, a fallback with different metrics would collide the lines of a
     two-line heading. The hero opts back down to .84 on its own. */
  font-family:var(--font-display); font-weight:400; line-height:.88;
  letter-spacing:var(--tracking-tight); text-transform:uppercase;
  margin:0 0 var(--s4);
}
h3,h4{
  font-family:var(--font-display); font-weight:700; line-height:1.15;
  letter-spacing:-.015em; margin:0 0 var(--s4);
}
h1{font-size:clamp(3.4rem, 18vw, 9.5rem)}
h2{font-size:clamp(2.6rem, 12vw, 5.5rem)}
h3{font-size:clamp(1.05rem, 4vw, 1.3rem)}
h4{font-size:1rem; line-height:1.25}
p{margin:0 0 1em}
.lede{font-size:clamp(1.05rem,4vw,1.3rem); color:var(--muted); max-width:56ch; line-height:1.55}
.muted{color:var(--muted)}
/* Italic serif — for the one word per page that gets to be dramatic.
   The right margin is not decoration: an italic serif overhangs its own
   advance width, so "Filmed <em>Last</em> Night" sets as "LastNight"
   without it. */
/* The one word per headline that goes acid. Used inside an h1/h2, so
   it inherits Anton and only changes color. */
.em{color:var(--brand)}
/* Knockout variant — outlined rather than filled. Reads as spray-paint
   stencil at headline scale, and stops three solid lines of white from
   becoming a wall. */
.hollow{
  color:transparent; -webkit-text-stroke:2px var(--ink);
}
@supports not (-webkit-text-stroke: 1px red){ .hollow{color:var(--ink)} }

/* Eyebrow: tiny wide-tracked label. Typewriter, because on this site
   every label is meant to read like it was typed onto a form. */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--font); font-size:.7rem; font-weight:800;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--brand); margin:0 0 var(--s4);
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--brand); border-radius:2px}
/* Centered variant drops the leading dash — with it, the text sits
   visibly off-centre against anything centred above it. */
.eyebrow--center{justify-content:center}
.eyebrow--center::before{display:none}
.eyebrow--red{color:var(--brand-2)}
.eyebrow--red::before{background:var(--brand-2)}

/* Section index number — 01 / 02. Pure hierarchy signal. */
.s-num{
  font-family:var(--font); font-size:.72rem; font-weight:800;
  letter-spacing:var(--tracking-wide); color:var(--muted); opacity:.6;
}

/* Gradient-filled display text for the one or two lines that matter most */
.grad{
  background:linear-gradient(100deg,var(--brand) 0%,var(--brand-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Buttons ---------- */
/* transition uses --ease-back so the lift overshoots and settles. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:16px var(--s6); border-radius:var(--r);
  font-family:var(--font); font-weight:800; font-size:.92rem;
  letter-spacing:.04em; text-transform:uppercase; text-align:center; white-space:nowrap;
  background:var(--brand); color:var(--brand-ink);
  transition:transform var(--med) var(--ease-back), box-shadow var(--fast) var(--ease), background var(--fast);
}
.btn:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 12px 0 -6px color-mix(in srgb, var(--brand) 45%, transparent)}
/* Pressed state travels further than the hover lift. On a phone there is
   no hover at all, so this is the only feedback most people ever get —
   it has to be unmistakable. */
.btn:active{transform:translateY(1px) scale(.97); transition-duration:.06s}
.btn--ghost{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--brand); color:var(--brand)}
.btn--block{display:flex; width:100%}
.btn--sm{padding:11px var(--s5); font-size:.85rem}
.btn[disabled]{opacity:.45; pointer-events:none}

/* ---------- Reveal on scroll ---------- */
/* Kinetic, not expensive: a short rise that overshoots a couple of
   pixels and snaps back. A slow fade would make a party site feel like
   a hotel booking page. */
[data-reveal]{
  opacity:0; transform:translateY(30px);
  transition:opacity var(--med) var(--ease), transform var(--slow) var(--ease-back);
}
[data-reveal].is-in{opacity:1; transform:none}

/* ===================================================================
   HEADER
   =================================================================== */
.header{
  position:sticky; top:0; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color var(--fast);
}
.header.is-stuck{border-bottom-color:var(--line)}
.header .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s4)}

/* Condensed caps, tight. It has to survive next to six nav links on a
   laptop and still read at a glance on a phone. */
.logo{
  font-family:var(--font-display); font-weight:400; font-size:1.15rem;
  letter-spacing:.01em; text-transform:uppercase;
  color:var(--ink); display:inline-flex; align-items:center; gap:var(--s2);
}
.logo .dot{
  width:7px; height:7px; border-radius:50%; background:var(--brand-2); flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--brand-2) 70%, transparent);
  animation:rec 2.4s var(--ease) infinite;
}
/* A recording light. It is always on, because he is always filming. */
@keyframes rec{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--brand-2) 60%, transparent)}
  55%    {box-shadow:0 0 0 6px transparent}
}

.nav{display:none}
.nav a{
  color:var(--muted); font-weight:500; font-size:.92rem; position:relative;
  padding:var(--s2) 0; transition:color var(--fast);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--brand); border-radius:2px;
}

.header-actions{display:flex; align-items:center; gap:var(--s2)}

/* Cart button + count bubble */
.cart-btn{
  position:relative; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink);
  transition:background var(--fast);
}
.cart-btn:hover{background:var(--surface-2)}
.cart-btn svg{width:21px; height:21px}
.cart-count{
  position:absolute; top:1px; right:0;
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pill);
  background:var(--brand); color:var(--brand-ink);
  font-size:.66rem; font-weight:700; font-family:var(--font-display);
  display:grid; place-items:center; line-height:1;
  transform:scale(0); transition:transform .25s var(--ease);
}
.cart-count.is-on{transform:scale(1)}

/* Hamburger */
.nav-toggle{width:42px; height:42px; display:grid; place-items:center; border-radius:50%}
.nav-toggle:hover{background:var(--surface-2)}
.nav-toggle span{
  display:block; width:20px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform var(--fast) var(--ease), opacity var(--fast);
}
.nav-toggle span + span{margin-top:5px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Full-screen mobile menu */
.mobile-nav{
  position:fixed; inset:var(--header-h) 0 0; z-index:99;
  background:var(--bg); padding:var(--s8) var(--pad);
  display:flex; flex-direction:column; gap:var(--s2);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast);
}
.mobile-nav.is-open{opacity:1; visibility:visible; transform:none}
.mobile-nav a{
  font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-size:clamp(2rem,11vw,3rem); letter-spacing:var(--tracking-tight);
  padding:var(--s3) 0; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-nav a[aria-current="page"]{color:var(--brand)}
.mobile-nav a span{font-family:var(--font); font-size:.7rem; letter-spacing:var(--tracking-wide); color:var(--muted)}
/* Locking with position:fixed rather than overflow:hidden — the latter
   lets iOS Safari jump to the top, which would lose the visitor's place
   behind the product overlay. site.js restores scrollY on unlock. */
body.is-locked{position:fixed; left:0; right:0; width:100%; overflow:hidden}

/* ===================================================================
   HERO — featured product
   =================================================================== */
.hero{
  padding-top:var(--s7); padding-bottom:var(--s8);
  position:relative; overflow:hidden;
}
/* Soft brand bloom behind the hero */
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(120vw,900px); aspect-ratio:1; border-radius:50%;
  top:-45%; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, var(--brand) 0%, transparent 60%);
  opacity:.16; filter:blur(40px);
}
.hero .wrap{position:relative; z-index:1}
/* The featured drop is the spotlight card now, so .hero is only the
   section wrapper that supplies the brand bloom behind it. */
.hero h1{margin-bottom:var(--s4)}
.hero-cta{display:flex; gap:var(--s3); flex-wrap:wrap}

/* ---------- Marquee ---------- */
.marquee{
  border-block:1px solid var(--line); padding:var(--s4) 0;
  overflow:hidden; display:flex; user-select:none; background:var(--surface);
}
.marquee div{
  display:flex; gap:var(--s6); padding-right:var(--s6); flex:none;
  animation:scroll-x 26s linear infinite;
}
.marquee span{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.15rem,5vw,2rem); letter-spacing:.005em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap; display:flex; align-items:center; gap:var(--s5);
}
.marquee span::after{content:"◆"; color:var(--brand-2); font-size:.7em}
@keyframes scroll-x{to{transform:translateX(-100%)}}

/* ===================================================================
   PRODUCT CARDS + horizontal merch row
   =================================================================== */
.rail{
  display:flex; gap:var(--s4); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:var(--s1) var(--pad) var(--s5);
  margin:0 calc(-1 * var(--pad));
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{flex:0 0 74%; scroll-snap-align:start; max-width:300px}


.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--fast) var(--ease), border-color var(--fast);
}
.card:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--brand) 45%, transparent)}
.card-body{padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1}
.card-title{font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:-.02em; line-height:1.25}
.card-price{display:flex; align-items:baseline; gap:var(--s2); font-family:var(--font-display); font-weight:700}
.card-price .now{font-size:1.05rem}
.card-price .was{font-size:.85rem; color:var(--muted); text-decoration:line-through; font-weight:500}
.card-price .now.is-sale{color:var(--sale)}
.card .btn{margin-top:auto}

/* Sold-out / badge chip on media */
.chip{
  position:absolute; top:var(--s3); left:var(--s3); z-index:2;
  font-size:.63rem; font-weight:700; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; padding:5px 10px; border-radius:var(--r-pill);
  background:var(--sale); color:var(--brand-ink);
}
.chip--out{background:var(--surface-2); color:var(--muted)}

/* ---------- Swipeable product gallery (1–6 photos) ---------- */
.gallery{position:relative}
.gallery-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  aspect-ratio:1; background:var(--surface-2);
}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track img{
  flex:0 0 100%; width:100%; height:100%; object-fit:cover;
  scroll-snap-align:center; cursor:zoom-in;
}
/* Dots — hidden when there's only one photo (set by JS) */
.gallery-dots{
  position:absolute; bottom:var(--s3); left:0; right:0; z-index:2;
  display:flex; justify-content:center; gap:6px;
}
.gallery-dots button{
  width:6px; height:6px; border-radius:50%; padding:0;
  background:rgba(255,255,255,.45);
  transition:width var(--fast) var(--ease), background var(--fast);
}
.gallery-dots button.is-on{width:18px; border-radius:3px; background:var(--ink)}
.gallery-dots[hidden]{display:none}

/* ---------- Variant pickers ---------- */
.variants{display:flex; flex-direction:column; gap:var(--s3)}
.variant-row{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.variant-row > .vlabel{
  width:100%; font-size:.64rem; font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tracking-wide); color:var(--muted);
}
.swatch{
  min-width:34px; padding:6px 10px; border-radius:var(--r-sm);
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line);
  font-size:.8rem; font-weight:600; text-align:center;
  transition:box-shadow var(--fast), color var(--fast);
}
.swatch[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--brand); color:var(--brand)}
/* Stronger ring than .swatch gets: a near-black colorway (very common in
   merch) sits on a near-black card, and a 10%-opacity edge leaves the
   swatch invisible. This keeps every color legible on any surface. */
.swatch--color{
  width:26px; height:26px; min-width:0; padding:0; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30);
}
.swatch--color[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--brand)}

/* ===================================================================
   AFFILIATE CARDS — must read as visually distinct from owned product
   =================================================================== */
.grid-affiliate{display:grid; gap:var(--s5); grid-template-columns:repeat(2,1fr)}
.aff-card{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-lg); background:var(--surface);
  /* Dashed border + secondary brand = reads "this leaves the site" */
  border:1.5px dashed color-mix(in srgb, var(--brand-2) 55%, transparent);
  color:var(--ink);
  transition:transform var(--fast) var(--ease), border-color var(--fast);
}
.aff-card:hover{transform:translateY(-4px); border-color:var(--brand-2)}
.aff-card img{width:100%; aspect-ratio:4/3; object-fit:cover}
.aff-card .card-body{gap:var(--s1)}
.aff-flag{
  position:absolute; top:var(--s3); left:var(--s3); z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  background:var(--brand-2); color:#fff;
  font-size:.62rem; font-weight:700; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; padding:5px 10px; border-radius:var(--r-pill);
}
.aff-merchant{
  font-size:.75rem; color:var(--muted);
  display:inline-flex; align-items:center; gap:5px;
}
.aff-merchant svg{width:12px; height:12px}
/* Standing disclosure so nobody wonders who they're buying from */
.aff-note{
  display:flex; gap:var(--s3); align-items:flex-start;
  background:color-mix(in srgb, var(--brand-2) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--brand-2) 30%, transparent);
  border-radius:var(--r); padding:var(--s4); margin-bottom:var(--s6);
  font-size:.85rem; color:var(--muted); line-height:1.5;
}
.aff-note svg{width:18px; height:18px; flex:none; color:var(--brand-2); margin-top:2px}

/* ===================================================================
   ANNOUNCEMENTS
   =================================================================== */
.ann-list{display:flex; flex-direction:column; gap:var(--s4)}
.ann{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s5);
  padding-left:calc(var(--s5) + 4px);
  overflow:hidden;
}
.ann::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--brand)}
.ann:first-child::before{background:linear-gradient(var(--brand),var(--brand-2))}
.ann-meta{
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  font-size:.7rem; font-weight:700; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--muted); margin-bottom:var(--s2);
}
.ann-new{background:var(--brand); color:var(--brand-ink); padding:3px 9px; border-radius:var(--r-pill)}
.ann h3{margin-bottom:var(--s2)}
.ann p{margin:0; color:var(--muted); font-size:.95rem}

/* ===================================================================
   VIDEOS
   =================================================================== */

/* ===================================================================
   SOCIALS
   =================================================================== */
.socials{display:grid; gap:var(--s3); grid-template-columns:repeat(2,1fr)}
.social{
  display:flex; align-items:center; gap:var(--s3); color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s4);
  transition:transform var(--fast) var(--ease), border-color var(--fast), background var(--fast);
}
.social:hover{transform:translateY(-3px); border-color:var(--brand); background:var(--surface-2)}
.social svg{width:20px; height:20px; flex:none; color:var(--brand)}
.social b{font-family:var(--font-display); font-size:.9rem; font-weight:600; letter-spacing:-.01em; display:block}
.social small{color:var(--muted); font-size:.72rem}

/* ===================================================================
   CONTACT CTA + FORM
   =================================================================== */
.cta{
  border-radius:var(--r-xl); padding:var(--s8) var(--s5); text-align:center;
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color:var(--brand-ink); position:relative; overflow:hidden;
}
.cta h2{color:var(--brand-ink); margin-bottom:var(--s3)}
.cta p{color:var(--brand-ink); opacity:.8; max-width:44ch; margin:0 auto var(--s6)}
.cta .btn{background:var(--brand-ink); color:var(--ink)}
.cta .btn:hover{box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}

.form{display:flex; flex-direction:column; gap:var(--s4)}
.field{display:flex; flex-direction:column; gap:var(--s2)}
.field label{font-size:.72rem; font-weight:700; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--muted)}
.field input,.field textarea,.field select{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px var(--s4); font-size:1rem; width:100%;
  transition:border-color var(--fast), background var(--fast);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--brand); background:var(--surface-2);
}
.field textarea{resize:vertical; min-height:130px}
.field-hp{position:absolute; left:-9999px}

/* ===================================================================
   ABOUT
   =================================================================== */
.about-grid{display:grid; gap:var(--s6)}
.about-portrait{
  border-radius:var(--r-xl); border:1px solid var(--line);
  aspect-ratio:4/5; object-fit:cover; width:100%;
}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin:var(--s6) 0}
.stat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s4) var(--s3); text-align:center;
}
.stat b{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.9rem,8vw,2.8rem); letter-spacing:0; color:var(--brand);
  line-height:1;
}
.stat span{font-family:var(--font); font-weight:700; font-size:.6rem; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--muted)}

.timeline{border-left:2px solid var(--line); padding-left:var(--s5); display:flex; flex-direction:column; gap:var(--s6)}
.tl-item{position:relative}
.tl-item::before{
  content:""; position:absolute; left:calc(-1 * var(--s5) - 7px); top:7px;
  width:12px; height:12px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 4px var(--bg);
}
.tl-item time{
  font-family:var(--font-display); font-size:.72rem; font-weight:700;
  letter-spacing:var(--tracking-wide); color:var(--brand);
}
.tl-item h3{margin:var(--s1) 0 var(--s2)}
.tl-item p{color:var(--muted); font-size:.92rem; margin:0}

/* ===================================================================
   CART DRAWER
   =================================================================== */
.scrim{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.65);
  opacity:0; visibility:hidden; transition:opacity var(--fast), visibility var(--fast);
  backdrop-filter:blur(2px);
}
.scrim.is-open{opacity:1; visibility:visible}

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:201;
  width:min(420px,100%); display:flex; flex-direction:column;
  background:var(--bg); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .3s var(--ease);
}
.drawer.is-open{transform:none}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s5); border-bottom:1px solid var(--line); flex:none;
}
.drawer-head h2{margin:0; font-size:1.35rem}
.icon-btn{width:38px; height:38px; border-radius:50%; display:grid; place-items:center}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn svg{width:18px; height:18px}
.drawer-body{flex:1; overflow-y:auto; padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4)}
.drawer-foot{padding:var(--s5); border-top:1px solid var(--line); flex:none}
.drawer-total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s4)}
.drawer-total b{font-family:var(--font-display); font-size:1.4rem; letter-spacing:-.03em}
.drawer-note{font-size:.72rem; color:var(--muted); text-align:center; margin:var(--s3) 0 0}

.line{display:flex; gap:var(--s3); align-items:flex-start}
.line img{width:72px; height:72px; border-radius:var(--r); object-fit:cover; flex:none; background:var(--surface-2)}
.line-info{flex:1; min-width:0}
.line-info b{display:block; font-family:var(--font-display); font-size:.9rem; font-weight:600; letter-spacing:-.01em}
/* display:block matters — as an inline element the variant text and the
   qty pill share a line and collide once the variant string gets long */
.line-info small{display:block; color:var(--muted); font-size:.74rem}
.line-price{font-family:var(--font-display); font-weight:700; font-size:.9rem}
.qty{display:inline-flex; align-items:center; gap:var(--s1); margin-top:var(--s2); background:var(--surface-2); border-radius:var(--r-pill); padding:2px}
.qty button{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:1rem; line-height:1; color:var(--muted)}
.qty button:hover{background:var(--surface); color:var(--ink)}
.qty span{min-width:20px; text-align:center; font-size:.85rem; font-weight:600}

.empty{text-align:center; padding:var(--s8) var(--s4); margin:auto}
.empty svg{width:44px; height:44px; color:var(--muted); opacity:.4; margin:0 auto var(--s4)}
.empty p{color:var(--muted); font-size:.9rem}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(6,6,9,.95);
  display:grid; place-items:center; padding:var(--s5);
  opacity:0; visibility:hidden; transition:opacity var(--fast), visibility var(--fast);
}
.lightbox.is-open{opacity:1; visibility:visible}
.lightbox img{max-width:100%; max-height:82vh; border-radius:var(--r); object-fit:contain}
.lightbox .icon-btn{position:absolute; top:var(--s5); right:var(--s5); background:var(--surface)}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; background:var(--surface);
  display:grid; place-items:center; border:1px solid var(--line);
}
.lb-nav svg{width:18px; height:18px}
.lb-prev{left:var(--s4)} .lb-next{right:var(--s4)}
.lb-count{position:absolute; bottom:var(--s6); left:0; right:0; text-align:center; font-size:.8rem; color:var(--muted)}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:var(--s6); z-index:400;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--bg); font-weight:600; font-size:.88rem;
  padding:12px var(--s5); border-radius:var(--r-pill);
  transition:opacity var(--fast), transform var(--fast) var(--ease);
}
.toast.is-on{opacity:1; transform:translate(-50%,0)}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer{border-top:1px solid var(--line); padding:var(--s8) 0 var(--s6); background:var(--surface)}
.footer-top{display:grid; gap:var(--s6); margin-bottom:var(--s7)}
.footer-brand .logo{font-size:1.5rem; margin-bottom:var(--s3)}
.footer-col h4{
  font-family:var(--font); font-size:.7rem; font-weight:700;
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--muted);
  margin-bottom:var(--s4);
}
.footer-col nav{display:flex; flex-direction:column; gap:var(--s3)}
.footer-col a{color:var(--ink); font-size:.92rem; transition:color var(--fast)}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{
  border-top:1px solid var(--line); padding-top:var(--s5);
  display:flex; flex-direction:column; gap:var(--s5);
  align-items:center; justify-content:center; text-align:center;
}
.footer-bottom p{margin:0; font-size:.8rem; color:var(--muted)}
/* The badge sets align-self:flex-start so it can't stretch in a flex
   column. Centre it here rather than editing the badge block itself,
   which stays verbatim per CLAUDE.md. */
.footer-bottom .dd-badge{align-self:center}

/* -------------------------------------------------------------------
   DIGITAL DRAGONFRUIT BADGE — required on every site. Don't remove.
   Deliberately uses hard-coded brand colors, NOT the client's tokens,
   so it stays on-brand on any palette. The border/"Powered by" use
   currentColor, so they pick up whatever the client's footer text
   color is and never fight it.
   On a dark footer, add class "dd-badge--on-dark" to the link.
   ------------------------------------------------------------------- */
.dd-badge{
  display:inline-flex; align-items:center; gap:9px;
  align-self:flex-start;              /* don't stretch in the footer's flex column */
  color:inherit;                      /* beat the global a{} color so currentColor
                                         tracks the client's footer text color */
  padding:7px 14px 7px 10px;
  border:1px solid rgba(128,128,128,.28);              /* fallback */
  border:1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius:999px;
  text-decoration:none; line-height:1.15; white-space:nowrap;
  transition:border-color .15s ease, background-color .15s ease;
}
.dd-badge:hover{border-color:rgba(255,46,126,.5); background:rgba(255,46,126,.07)}
.dd-badge svg{width:30px; height:auto; flex:none; display:block}  /* viewBox is 120x110 */
.dd-badge .dd-text{display:flex; flex-direction:column; gap:3px}
.dd-badge .dd-pre{
  font-size:.62rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:currentColor;
}
/* Space Grotesk by name, not var(--font-display): this client's display
   face is a serif, and DD's wordmark must not restyle itself to match a
   client the way its colors already refuse to. Same reasoning as the
   hard-coded hexes below. */
.dd-badge .dd-mark{font-family:'Space Grotesk', system-ui, sans-serif; font-size:.9rem; letter-spacing:-.01em}
.dd-badge .dd-mark .d1{color:#1D0F2A; font-weight:500}   /* Seed Ink */
.dd-badge .dd-mark .d2{color:#FF2E7E; font-weight:700}   /* Dragonfruit Pink */
/* Dark-footer variant: Seed Ink would vanish, so "digital" goes Cream */
.dd-badge--on-dark .dd-mark .d1{color:#FFF9F4}

/* Footer text is muted, so let the badge inherit a legible color instead */
.footer .dd-badge{color:var(--ink)}

/* ===================================================================
   BREAKPOINTS
   =================================================================== */
@media (min-width:600px){

  .socials{grid-template-columns:repeat(3,1fr)}
  .rail > *{flex-basis:45%}
}

/* CLAUDE.md: hamburger under 768px, full nav links above it. This lives
   in its own query rather than the 900px block below — when it was in
   there, the 768-899px band showed the hamburger and hid the nav. */
@media (min-width:768px){
  .nav{display:flex; align-items:center; gap:var(--s5)}
  .nav-toggle,.mobile-nav{display:none}
}

@media (min-width:900px){
  :root{--pad:32px; --header-h:74px}
  .nav{gap:var(--s6)}
  body{font-size:17px}
  section{padding:var(--s10) 0}
  .hero{padding-top:var(--s9)}
  .grid-affiliate{grid-template-columns:repeat(3,1fr); gap:var(--s6)}

  .socials{grid-template-columns:repeat(6,1fr)}
  .rail > *{flex-basis:290px}
  .ann-list{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5)}
  .about-grid{grid-template-columns:.85fr 1.15fr; gap:var(--s9); align-items:start}
  .cta{padding:var(--s10) var(--s8)}
  .footer-top{grid-template-columns:2fr 1fr 1fr 1fr}
  .footer-bottom{flex-direction:row; align-items:center; justify-content:center; gap:var(--s6)}
}

@media (min-width:1100px){
}


/* ===================================================================
   SPOTLIGHT — the featured slot at the top of the store
   -------------------------------------------------------------------
   Deliberately spare: image, name, price. Nothing else. The badge is
   overlaid on the image itself, top left, so the card stays a clean
   rectangle. Tapping anywhere opens the product overlay.
   =================================================================== */
.spot{
  display:block; width:100%; text-align:left; position:relative;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden; color:var(--ink);
  transition:transform var(--fast) var(--ease), border-color var(--fast);
}
.spot:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--brand) 45%, transparent)}
/* display:block matters — this is a <span> (a button may only contain
   phrasing content), and aspect-ratio has no effect on inline boxes, so
   the card would collapse to a strip once the image went absolute. */
.spot-media{display:block; position:relative; min-width:0; aspect-ratio:1; background:var(--surface-2)}
.spot-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .45s var(--ease);
}
/* Cycle mode crossfades between products */
.spot.is-swapping .spot-media img{opacity:0}
.spot-badge{
  position:absolute; top:var(--s4); left:var(--s4); z-index:2;
  background:var(--brand); color:var(--brand-ink);
  font-family:var(--font-display); font-weight:700;
  font-size:.68rem; letter-spacing:var(--tracking-wide); text-transform:uppercase;
  padding:7px 13px; border-radius:var(--r-pill);
}
.spot-badge--out{background:var(--surface-2); color:var(--muted)}
.spot-body{
  padding:var(--s5); display:flex; align-items:baseline;
  justify-content:space-between; gap:var(--s4);
}
.spot-name{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.15rem,5vw,1.6rem); letter-spacing:-.02em; line-height:1.15;
  min-width:0;
}
.spot-price{display:flex; align-items:baseline; gap:var(--s2); flex:none; font-family:var(--font-display)}
.spot-price .now{font-size:clamp(1.1rem,4.5vw,1.5rem); font-weight:700; letter-spacing:-.03em}
.spot-price .was{font-size:.9rem; color:var(--muted); text-decoration:line-through}

/* ===================================================================
   PRODUCT ROWS — full-width, alternating image side
   -------------------------------------------------------------------
   Replaces the 2-up grid on phones, where two columns squeezed the
   cards and stretched the type. Reverts to a grid at desktop widths
   (see the 900px query) — rows there would waste the horizontal space
   and force scrolling past one product at a time.
   =================================================================== */
.rows{display:flex; flex-direction:column; gap:var(--s4)}
.row-item{
  display:flex; align-items:stretch; overflow:hidden; cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); text-align:left; width:100%; color:var(--ink);
  transition:transform var(--fast) var(--ease), border-color var(--fast);
}
.row-item:nth-child(even){flex-direction:row-reverse}
.row-item:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--brand) 45%, transparent)}
/* min-width:0 is load-bearing: flex items default to min-width:auto, so
   an image with a large intrinsic width (the generated placeholder art
   is 800px) refuses to shrink and punches out of the card. */
.row-media{
  flex:0 0 40%; min-width:0; position:relative;
  aspect-ratio:1; background:var(--surface-2);
}
.row-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.row-body{
  flex:1; min-width:0; padding:var(--s4);
  display:flex; flex-direction:column; justify-content:center; gap:var(--s2);
}
.row-name{
  /* A real <button> so the overlay is keyboard reachable, styled as text */
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  letter-spacing:-.02em; line-height:1.25;
  padding:0; text-align:left; background:none; border:0; color:inherit;
}
.row-name:hover{color:var(--brand)}
/* Two compact actions side by side. flex:1 1 0 with min-width:0 keeps
   them on one line in the narrow column a row leaves for text. */
.row-actions{display:flex; gap:6px; margin-top:var(--s2)}
.row-actions .btn{flex:1 1 0; min-width:0; padding:10px 8px; font-size:.74rem}

/* ===================================================================
   PRODUCT OVERLAY — replaces per-product pages
   -------------------------------------------------------------------
   Bottom sheet on phones (swipe down to dismiss), centred panel on
   desktop. Same markup either way.
   =================================================================== */
.sheet-scrim{
  position:fixed; inset:0; z-index:250; background:rgba(0,0,0,.66);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity var(--fast), visibility var(--fast);
}
.sheet-scrim.is-open{opacity:1; visibility:visible}

.sheet{
  position:fixed; z-index:251; left:0; right:0; bottom:0;
  max-height:92vh;
  /* dvh tracks the *visible* viewport. On iOS Safari plain vh is the
     large viewport (URL bar hidden), so 92vh is taller than what you can
     actually see and the top of the sheet — grip, close button, badge —
     slides up under the browser chrome. */
  max-height:92dvh;
  display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--line); border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  transform:translateY(100%); transition:transform .32s var(--ease);
  overscroll-behavior:contain;
}
.sheet.is-open{transform:none}
.sheet.is-dragging{transition:none}

/* Grab handle — also the swipe-down target on touch */
.sheet-grip{
  flex:none; padding:var(--s3) 0 var(--s2); display:grid; place-items:center;
  cursor:grab; touch-action:none;
}
.sheet-grip::before{content:""; width:40px; height:4px; border-radius:2px; background:var(--line)}
.sheet-close{
  position:absolute; top:var(--s5); right:var(--s4); z-index:3;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
}
.sheet-close svg{width:17px; height:17px}
.sheet-body{overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 var(--s5) var(--s7)}
/* The gallery bleeds to the sheet edges, so the badge and close button
   would otherwise sit hard against the screen edge. */
.sheet-gallery{margin:0 calc(-1 * var(--s5)) var(--s5); border-radius:0}
.sheet-gallery .chip{top:var(--s4); left:var(--s4)}
.sheet-gallery .gallery-track{aspect-ratio:1}
.sheet h2{font-size:clamp(1.5rem,6vw,2rem); margin-bottom:var(--s2)}
.sheet-price{display:flex; align-items:baseline; gap:var(--s3); margin-bottom:var(--s4); font-family:var(--font-display)}
.sheet-price .now{font-size:1.6rem; font-weight:700; letter-spacing:-.03em}
.sheet-price .now.is-sale{color:var(--sale)}
.sheet-price .was{font-size:1rem; color:var(--muted); text-decoration:line-through}
.sheet-price .off{
  font-size:.66rem; font-weight:700; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--sale);
  border:1px solid var(--sale); border-radius:var(--r-pill); padding:4px 9px;
}
.sheet-desc{color:var(--muted); font-size:.95rem; margin-bottom:var(--s5)}
.sheet .variants{margin-bottom:var(--s5)}
.sheet-actions{display:flex; gap:var(--s3); flex-wrap:wrap}
.sheet-actions .btn{flex:1 1 140px}

@media (min-width:900px){
  /* Rows become a grid: at this width a stack of full-bleed rows wastes
     the horizontal space and hides most of the catalogue below the fold. */
  .rows{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6)}
  .row-item,.row-item:nth-child(even){flex-direction:column}
  .row-media{flex:none; width:100%}
  .row-body{padding:var(--s4)}
  .row-actions .btn{flex:1 1 0; font-size:.82rem}

  .spot{display:grid; grid-template-columns:1fr 1fr; align-items:stretch}
  .spot-media{aspect-ratio:auto; min-height:380px}
  .spot-body{flex-direction:column; justify-content:center; align-items:flex-start; gap:var(--s3); padding:var(--s8)}
  .spot-name{font-size:clamp(1.8rem,3vw,2.6rem)}

  /* Centred panel rather than a bottom sheet */
  .sheet{
    left:50%; right:auto; bottom:auto; top:50%;
    width:min(920px, calc(100% - 64px)); max-height:86vh;
    border:1px solid var(--line); border-radius:var(--r-xl);
    transform:translate(-50%,-46%) scale(.97); opacity:0;
    transition:transform .28s var(--ease), opacity .2s var(--ease);
  }
  .sheet.is-open{transform:translate(-50%,-50%) scale(1); opacity:1}
  .sheet-grip{display:none}
  .sheet-close{top:var(--s4)}
  .sheet-body{display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); padding:var(--s7)}
  .sheet-gallery{margin:0; border-radius:var(--r-lg); overflow:hidden; align-self:start}
  .sheet-info{min-width:0}
}

@media (min-width:1100px){
  .rows{grid-template-columns:repeat(4,1fr)}
}




/* ===================================================================
   ///  FILMED LAST NIGHT — BRAND COMPONENTS  ///
   -------------------------------------------------------------------
   Everything below is specific to this client, and all of it is built
   from the tokens at the top, so a rebrand still only touches :root.

   The organising idea: the content is shot handheld, at night, at
   parties. The site is not allowed to look calmer than that. Type runs
   as large as the box allows, surfaces carry grain, motion snaps, and
   exactly one colour is loud.
   =================================================================== */

/* ---------- Typed label pill ---------- */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font); font-size:.64rem; font-weight:800;
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:5px 10px; white-space:nowrap;
}
.tag--brand{color:var(--brand); border-color:color-mix(in srgb, var(--brand) 45%, transparent)}
.tag--hot{color:var(--hot); border-color:color-mix(in srgb, var(--hot) 55%, transparent)}
.tag--solid{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
.tag--live::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--hot);
  flex:none; animation:rec 2s var(--ease) infinite;
}
.tag-row{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center}

/* ---------- Flash-photo treatment ----------
   Every photo on the site is a still from night footage shot with a
   phone flash. Nudging contrast and saturation makes uploaded photos
   sit with that rather than looking like stock product shots. */
.flash{filter:contrast(1.14) saturate(1.12) brightness(1.02)}

/* ===================================================================
   THE COUNT — follower ticker
   -------------------------------------------------------------------
   No longer the hero. It is a live strip under the headline: proof the
   channel is moving, not the thing being sold.
   =================================================================== */
.countbar{
  display:inline-flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:10px var(--s4);
}
.countbar b{
  font-family:var(--font-display); font-weight:400; font-size:1.5rem;
  line-height:1; color:var(--brand); font-variant-numeric:tabular-nums;
}
.countbar span{
  font-size:.68rem; font-weight:800; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--muted);
}
.countbar i{
  width:7px; height:7px; border-radius:50%; background:var(--hot); flex:none;
  animation:rec 2s var(--ease) infinite; font-style:normal;
}

/* ===================================================================
   THE HERO
   -------------------------------------------------------------------
   The headline is the loudest thing on the site and it is allowed to
   be. 23vw on a 390px phone is ~90px of condensed caps — three stacked
   lines fill the screen edge to edge, which is the point.

   The section itself is tight, because the drops have to be reachable
   with one thumb flick. A tall cinematic hero would push the thing
   people came to buy below two screens of nothing.
   =================================================================== */
.hero--home{padding-top:var(--s6); padding-bottom:var(--s7)}
.hero-title{
  font-size:clamp(3.6rem, 23vw, 11rem);
  line-height:.84;
  margin:var(--s4) 0 var(--s5);
}
.hero-sub{
  font-size:clamp(1rem, 4.2vw, 1.2rem); line-height:1.5;
  color:var(--muted); max-width:42ch; margin:0 0 var(--s6);
}

/* ===================================================================
   CURRENT DROPS — the centrepiece
   -------------------------------------------------------------------
   Has to look deliberate with one item and with eight. A single
   auto-fit grid cannot do that: one card in an auto-fit grid either
   stretches into a billboard or sits marooned in a column.

   So the renderer counts the items and writes data-count on the
   container, and the layout switches. One item becomes a horizontal
   feature; two or three get wide cards; four or more fall into a grid.
   =================================================================== */
.drops{display:grid; gap:var(--s4); grid-template-columns:1fr}

.drop{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform var(--med) var(--ease-back), border-color var(--fast);
}
.drop:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--brand) 55%, transparent)}

.drop-media{
  position:relative; display:block; width:100%; aspect-ratio:4/5;
  background:var(--surface-2); overflow:hidden;
}
.drop-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--slow) var(--ease);
}
.drop:hover .drop-media img{transform:scale(1.04)}

.drop-badges{
  position:absolute; top:var(--s3); left:var(--s3); right:var(--s3); z-index:2;
  display:flex; flex-wrap:wrap; gap:6px;
}
/* "New price" is the one flag that has to interrupt someone who has
   seen these before, so it is the only thing on the card allowed to
   use --hot. */
.badge{
  font-family:var(--font); font-size:.6rem; font-weight:900;
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  padding:5px 9px; border-radius:var(--r-sm);
  background:var(--ink); color:var(--bg);
}
.badge--new{background:var(--hot); color:#fff}
.badge--limited{background:var(--brand); color:var(--brand-ink)}

.drop-body{
  display:flex; flex-direction:column; gap:var(--s3);
  padding:var(--s4); flex:1;
}
.drop-kicker{
  font-size:.62rem; font-weight:800; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--muted);
}
.drop-title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.4rem, 6vw, 1.9rem); line-height:.92; letter-spacing:0;
  margin:0; color:var(--ink);
}
.drop-price{
  display:flex; align-items:baseline; gap:var(--s2);
  font-family:var(--font-display); font-weight:400; font-size:1.7rem;
  line-height:1; color:var(--brand);
}
.drop-price .was{
  font-family:var(--font); font-size:.85rem; font-weight:600;
  color:var(--muted); text-decoration:line-through;
}
.drop-desc{margin:0; color:var(--muted); font-size:.88rem; line-height:1.5}
.drop-foot{margin-top:auto; display:flex; flex-direction:column; gap:var(--s2)}
.drop-foot .btn{width:100%}
.drop-left{
  font-size:.66rem; font-weight:800; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--brand); text-align:center;
}
.drop-left.is-low{color:var(--hot)}

/* Empty state — Stripe unreachable or nothing configured. Never a
   broken store: it says what is true and points at Instagram. */
.drops-empty{
  border:1.5px dashed var(--line); border-radius:var(--r-lg);
  padding:var(--s8) var(--s5); text-align:center;
}

/* ===================================================================
   THE CUSTOMIZER
   -------------------------------------------------------------------
   Bottom sheet on a phone, centred panel on a laptop. The preview is
   pinned to the top of the sheet and the controls scroll under it, so
   the thing you are building stays on screen while you change it —
   on a 390px phone the preview would otherwise scroll away the moment
   the keyboard opens.
   =================================================================== */
.cz-scrim{
  position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.78);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity var(--med), visibility var(--med);
}
.cz-scrim.is-open{opacity:1; visibility:visible}

.cz{
  position:fixed; z-index:301; left:0; right:0; bottom:0;
  max-height:94dvh; display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--line); border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  transform:translateY(100%); transition:transform var(--slow) var(--ease-back);
  overscroll-behavior:contain;
}
.cz.is-open{transform:none}

.cz-head{
  flex:none; position:relative; padding:var(--s5) var(--s5) var(--s3);
  border-bottom:1px solid var(--line);
}
.cz-head h2{
  font-size:clamp(1.5rem,7vw,2.2rem); margin:0 0 4px; line-height:.9;
}
.cz-head .cz-sub{margin:0; font-size:.8rem; color:var(--muted)}
.cz-close{
  position:absolute; top:var(--s4); right:var(--s4);
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); color:var(--ink); border:1px solid var(--line);
}
.cz-close svg{width:16px; height:16px}

/* Nothing in the stage may grow past a third of a phone screen — the
   controls have to stay reachable without scrolling past the preview. */
.cz-stage > *{max-height:32vh}
.cz-stage .gallery,
.cz-stage .gallery-track{max-height:32vh}
.cz-stage .gallery-track img{max-height:28vh; object-fit:contain}
.cz-stage{
  flex:none; display:grid; place-items:center;
  padding:var(--s4) var(--s4) var(--s5);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%),
    var(--surface);
  border-bottom:1px solid var(--line);
}
.cz-body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:var(--s5)}
.cz-foot{
  flex:none; padding:var(--s4) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--bg);
  display:flex; flex-direction:column; gap:var(--s2);
}
.cz-total{
  display:flex; align-items:baseline; justify-content:space-between;
  font-family:var(--font-display); font-weight:400; font-size:1.4rem; color:var(--ink);
}
.cz-total span{font-family:var(--font); font-size:.68rem; font-weight:800; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--muted)}
.cz-actions{display:flex; gap:var(--s2)}
.cz-actions .btn{flex:1 1 0; min-width:0}

.cz-field{display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s5)}
.cz-field > label{
  font-size:.66rem; font-weight:800; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--muted);
}
.cz-field textarea,.cz-field input[type="text"]{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  padding:13px var(--s4); color:var(--ink); font-size:1rem; width:100%;
}
.cz-field textarea:focus,.cz-field input:focus{outline:none; border-color:var(--brand)}
.cz-field textarea{resize:vertical; min-height:88px}
.cz-count{
  align-self:flex-end; font-size:.68rem; font-weight:700;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.cz-count.is-full{color:var(--hot)}

/* Option chips — colours and either/or choices. */
.opts{display:flex; flex-wrap:wrap; gap:var(--s2)}
.opt{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px var(--s4); border-radius:var(--r);
  background:var(--surface-2); color:var(--ink);
  font-size:.82rem; font-weight:700;
  box-shadow:inset 0 0 0 1.5px var(--line);
  transition:transform var(--fast) var(--ease-back), box-shadow var(--fast);
}
.opt:hover{transform:translateY(-1px)}
.opt[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--brand); color:var(--brand)}
.opt-dot{width:16px; height:16px; border-radius:50%; flex:none; border:1px solid rgba(255,255,255,.25)}
.opt--swatch{padding:8px; width:44px; height:44px; justify-content:center}
.opt--swatch .opt-dot{width:24px; height:24px}
.opt--wide{flex:1 1 140px; justify-content:center; text-align:center}

/* Upload zone */
.uz{
  border:2px dashed var(--line); border-radius:var(--r-lg);
  padding:var(--s6) var(--s4); text-align:center; width:100%;
  background:var(--surface-2); color:var(--muted);
  transition:border-color var(--fast), background var(--fast);
}
.uz:hover,.uz.is-over{border-color:var(--brand); background:color-mix(in srgb, var(--brand) 6%, var(--surface-2))}
.uz b{display:block; color:var(--ink); font-size:.95rem; margin-bottom:4px}
.uz small{font-size:.72rem}
.uz-thumb{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--surface-2);
}
.uz-thumb img{width:100%; max-height:260px; object-fit:contain; display:block}
.uz-swap{
  position:absolute; top:var(--s2); right:var(--s2);
  padding:7px 11px; border-radius:var(--r-sm);
  background:rgba(0,0,0,.7); color:#fff; font-size:.7rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
.uz-err{color:var(--hot); font-size:.78rem; font-weight:600; margin:var(--s2) 0 0}

/* The approval terms. Stated at the point of purchase, not buried in a
   page nobody opens — it is the thing most likely to cause a dispute. */
.cz-terms{
  border-left:3px solid var(--brand); padding:var(--s3) 0 var(--s3) var(--s4);
  font-size:.78rem; line-height:1.6; color:var(--muted); margin:0;
}
.cz-terms b{color:var(--ink); display:block; margin-bottom:3px; font-size:.8rem}

/* ===================================================================
   LIVE PREVIEWS — the sticky note and the bedsheet
   -------------------------------------------------------------------
   These are the product. Someone deciding whether $9.99 is worth it is
   really deciding whether the thing on screen looks funny on a wall,
   so the previews are physical: real paper colour, a real drop shadow,
   a slight rotation, handwriting rather than a UI font.
   =================================================================== */
.sticky{
  width:min(215px, 56vw); max-height:30vh; aspect-ratio:1; position:relative;
  display:grid; place-items:center; padding:var(--s5) var(--s4);
  background:var(--sticky-yellow); color:#15130A;
  font-family:var(--font-hand); font-size:clamp(.95rem, 4.4vw, 1.25rem);
  line-height:1.3; text-align:center; word-break:break-word; overflow-wrap:anywhere;
  transform:rotate(-2.5deg);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.9), 0 2px 0 rgba(0,0,0,.25);
  transition:background var(--fast), color var(--fast), transform var(--med) var(--ease-back);
}
/* The adhesive strip — the top of a real sticky note sits flatter and
   catches more light than the curling bottom. */
.sticky::before{
  content:""; position:absolute; left:0; right:0; top:0; height:26%;
  background:linear-gradient(rgba(255,255,255,.34), transparent);
  pointer-events:none;
}
.sticky-text{position:relative; z-index:1; max-width:100%}
.sticky-text:empty::after{content:"your message here"; opacity:.35}

.bedsheet{
  width:min(330px, 84vw); max-height:30vh; aspect-ratio:4/3; position:relative;
  display:grid; place-items:center; padding:var(--s5) var(--s4);
  background:#EDE9E0;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.9);
  transition:background var(--fast);
}
/* Woven texture plus a sag across the middle, so it reads as fabric
   pinned to a wall rather than a coloured rectangle. */
.bedsheet::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
}
.bedsheet::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(0,0,0,.16), transparent 70%),
    radial-gradient(90% 50% at 50% 100%, rgba(0,0,0,.12), transparent 70%);
}
.bedsheet-text{
  position:relative; z-index:2; text-align:center;
  font-family:var(--font-hand);
  font-size:clamp(1.55rem, 8vw, 2.5rem); line-height:1.08;
  text-transform:uppercase; word-break:break-word; overflow-wrap:anywhere;
  /* Overspray: a tight halo of the same colour, plus a sub-pixel blur.
     Spray paint on fabric bleeds into the weave — crisp edges would
     make it look printed, which is not what he is selling. */
  filter:blur(.4px);
  text-shadow:0 0 4px currentColor, 0 0 14px color-mix(in srgb, currentColor 45%, transparent);
}
.bedsheet-text:empty::after{content:"your message"; opacity:.4}
/* Corner tape */
.bedsheet-tape{
  position:absolute; width:52px; height:17px; z-index:3;
  background:rgba(255,255,255,.34); border:1px solid rgba(255,255,255,.2);
}
.bedsheet-tape--tl{top:-8px; left:14px; transform:rotate(-38deg)}
.bedsheet-tape--tr{top:-8px; right:14px; transform:rotate(38deg)}

/* The paper and poster tiers preview the real upload on a wall. */
.wallprev{
  height:min(300px, 30vh); width:auto; max-width:80vw;
  position:relative; background:var(--paper);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.9);
  display:grid; place-items:center; overflow:hidden;
}
.wallprev--paper{aspect-ratio:8.5/11}
.wallprev--poster{aspect-ratio:2/3}
.wallprev img{width:100%; height:100%; object-fit:cover; display:block}
.wallprev-empty{
  color:#6A6656; font-size:.78rem; font-weight:700; text-align:center;
  padding:var(--s5); letter-spacing:.06em; text-transform:uppercase;
}

/* ===================================================================
   SIZES — merch
   =================================================================== */
.sizes{display:flex; flex-wrap:wrap; gap:var(--s2)}
.size{
  min-width:50px; padding:11px var(--s3); border-radius:var(--r);
  background:var(--surface-2); color:var(--ink);
  font-size:.86rem; font-weight:800; text-align:center;
  box-shadow:inset 0 0 0 1.5px var(--line);
  transition:transform var(--fast) var(--ease-back), box-shadow var(--fast);
}
.size:hover{transform:translateY(-1px)}
.size[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--brand); color:var(--brand)}
.size[disabled]{opacity:.3; pointer-events:none; text-decoration:line-through}

.chart{width:100%; border-collapse:collapse; font-size:.8rem; margin-top:var(--s3)}
.chart th,.chart td{
  padding:9px var(--s3); text-align:left; border-bottom:1px solid var(--line);
}
.chart th{
  font-size:.62rem; font-weight:800; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--muted);
}
.chart td{color:var(--ink); font-variant-numeric:tabular-nums}
details.chartwrap{margin-top:var(--s3)}
details.chartwrap > summary{
  cursor:pointer; font-size:.74rem; font-weight:800; color:var(--brand);
  letter-spacing:.06em; text-transform:uppercase; list-style:none;
}
details.chartwrap > summary::-webkit-details-marker{display:none}
details.chartwrap > summary::after{content:" +"}
details.chartwrap[open] > summary::after{content:" –"}

/* ===================================================================
   THE EVIDENCE — vertical reels
   -------------------------------------------------------------------
   9:16 because that is the only shape the content comes in. Two up on
   a phone: one column wastes the screen, three makes captions unreadable.
   =================================================================== */
.reels{display:grid; gap:var(--s3); grid-template-columns:repeat(2,1fr)}
.reel{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:9/16; border-radius:var(--r);
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  transition:transform var(--med) var(--ease-back), border-color var(--fast);
}
.reel:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--brand) 55%, transparent)}
.reel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--slow) var(--ease);
}
.reel:hover img{transform:scale(1.06)}
.reel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(transparent 40%, rgba(0,0,0,.88));
}
.reel-cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:var(--s4) var(--s3) var(--s3)}
/* The reel-caption look: heavy white, outlined, all caps. text-shadow
   rather than -webkit-text-stroke — the stroke version thins the
   counters at this size and the caps start to fill in. */
.reel-cap b{
  display:block; font-family:var(--font); font-weight:900;
  font-size:.78rem; line-height:1.18; letter-spacing:-.01em;
  text-transform:uppercase; color:#fff;
  text-shadow:
     0 1px 0 rgba(0,0,0,.9),  0 -1px 0 rgba(0,0,0,.9),
     1px 0 0 rgba(0,0,0,.9), -1px 0 0 rgba(0,0,0,.9),
     0 3px 12px rgba(0,0,0,.85);
}
.reel-cap small{
  display:block; margin-top:5px;
  font-size:.62rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brand);
}
.reel-plat{
  position:absolute; top:var(--s3); left:var(--s3); z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 8px; border-radius:var(--r-sm);
  background:rgba(0,0,0,.6); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff;
}
.reel-plat svg{width:11px; height:11px}
.reel-play{
  position:absolute; top:var(--s3); right:var(--s3); z-index:2;
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand); color:var(--brand-ink);
}
.reel-play svg{width:11px; height:11px; margin-left:1px}

/* ===================================================================
   NOTICES + PROSE
   =================================================================== */
.notice{
  border:1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  border-left-width:3px; border-radius:var(--r);
  background:color-mix(in srgb, var(--brand) 6%, transparent);
  padding:var(--s4) var(--s5);
  font-size:.86rem; line-height:1.65; color:var(--muted);
}
.notice b{
  display:block; color:var(--brand); font-weight:800;
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  font-size:.64rem; margin-bottom:var(--s2);
}
.notice--hot{
  border-color:color-mix(in srgb, var(--hot) 50%, transparent);
  background:color-mix(in srgb, var(--hot) 7%, transparent);
}
.notice--hot b{color:var(--hot)}

.prose{max-width:62ch}
.prose h2{margin-top:var(--s8); font-size:clamp(1.8rem,7vw,2.6rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s6); margin-bottom:var(--s2)}
.prose p,.prose li{color:var(--muted); font-size:.95rem; line-height:1.7}
.prose strong{color:var(--ink); font-weight:700}
.prose ul{padding-left:1.15em; margin:0 0 1em}
.prose li{margin-bottom:.45em}

/* ===================================================================
   CONTACT — two doors
   -------------------------------------------------------------------
   Business goes to a real inbox and has to look like it. Everything
   else is a form. Splitting them stops a brand deal arriving in the
   same pile as "bro post more".
   =================================================================== */
.doors{display:grid; gap:var(--s4); grid-template-columns:1fr}
.door{
  display:flex; flex-direction:column; gap:var(--s3);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); background:var(--surface);
  transition:transform var(--med) var(--ease-back), border-color var(--fast);
}
.door:hover{transform:translateY(-3px)}
.door--biz{
  border-color:color-mix(in srgb, var(--brand) 50%, transparent);
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 62%),
    var(--surface);
}
.door h3{margin:0; font-size:1.15rem}
.door p{margin:0; color:var(--muted); font-size:.88rem; line-height:1.6}
.door .btn{margin-top:auto}
.door-list{margin:0; padding-left:1.1em; color:var(--muted); font-size:.84rem; line-height:1.7}

/* ===================================================================
   BREAKPOINTS for the components above
   =================================================================== */
@media (min-width:560px){
  .reels{grid-template-columns:repeat(3,1fr)}
  .drops{grid-template-columns:repeat(2,1fr)}
  .doors{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:900px){
  .reels{grid-template-columns:repeat(5,1fr)}
  .drops{grid-template-columns:repeat(3,1fr)}

  /* --- the count-aware layouts --- */
  /* One item: a horizontal feature. A lone card in a 3-up grid looks
     like two things failed to load. */
  .drops[data-count="1"]{grid-template-columns:1fr}
  .drops[data-count="1"] .drop{flex-direction:row; align-items:stretch}
  .drops[data-count="1"] .drop-media{width:46%; aspect-ratio:auto; flex:none}
  .drops[data-count="1"] .drop-body{
    justify-content:center; padding:var(--s8); gap:var(--s4);
  }
  .drops[data-count="1"] .drop-title{font-size:clamp(2.2rem,4vw,3.4rem)}
  .drops[data-count="1"] .drop-price{font-size:2.6rem}
  .drops[data-count="1"] .drop-desc{font-size:1rem; max-width:44ch}
  .drops[data-count="1"] .drop-foot{flex-direction:row; align-items:center; gap:var(--s3)}
  .drops[data-count="1"] .drop-foot .btn{width:auto; min-width:220px}

  /* Two: half each, taller media. */
  .drops[data-count="2"]{grid-template-columns:repeat(2,1fr); gap:var(--s5)}
  .drops[data-count="2"] .drop-title{font-size:clamp(1.8rem,3vw,2.4rem)}

  /* Four exactly: 2x2 reads as a set; 3+1 reads as a mistake. */
  .drops[data-count="4"]{grid-template-columns:repeat(2,1fr)}

  .drop-body{padding:var(--s5)}
}

@media (min-width:1100px){
  .drops[data-count="4"],
  .drops[data-count="7"],
  .drops[data-count="8"]{grid-template-columns:repeat(4,1fr)}
  /* Five stays on three columns: in a four-up grid the fifth card sits
     alone on its own row and reads as something that failed to load.
     Three-then-two reads as a deliberate arrangement. */
  .drops[data-count="5"],
  .drops[data-count="6"]{grid-template-columns:repeat(3,1fr)}
}

/* --- the customizer becomes a centred panel on a laptop --- */
@media (min-width:860px){
  .cz{
    left:50%; right:auto; bottom:auto; top:50%;
    width:min(940px, calc(100% - 64px)); max-height:88vh;
    border:1px solid var(--line); border-radius:var(--r-xl);
    transform:translate(-50%,-46%) scale(.97); opacity:0;
    transition:transform var(--slow) var(--ease-back), opacity var(--med) var(--ease);
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto 1fr auto;
    grid-template-areas:
      "stage head"
      "stage body"
      "stage foot";
  }
  .cz.is-open{transform:translate(-50%,-50%) scale(1); opacity:1}
  .cz-stage{grid-area:stage; border-bottom:0; border-right:1px solid var(--line); padding:var(--s7)}
  .cz-stage > *{max-height:none}
  .cz-stage .gallery,.cz-stage .gallery-track{max-height:none}
  .cz-stage .gallery-track img{max-height:none}
  .wallprev{height:min(420px, 52vh)}
  .sticky{max-height:none; width:min(260px,26vw)}
  .bedsheet{max-height:none; width:min(360px,32vw)}
  .cz-head{grid-area:head}
  .cz-body{grid-area:body}
  .cz-foot{grid-area:foot; padding-bottom:var(--s5)}
  .cz-actions{flex-direction:row}
}