/* ============================================================================
   KAALATERAL ASSET STORE - STOREFRONT STYLES  ("Drop")
   ----------------------------------------------------------------------------
   Streetwear / hype-drop: black, white and greys only, like the artwork.
   Sharp corners, 1px hairlines that turn white on hover, a heavy condensed
   display face for anything that shouts, Inter for reading, a mono for the
   small print. Red is kept for error messages and nothing else.

   One container for everything - header, hero strip, grids, footer - so every
   edge on the page lines up with every other one. It grows to 1800px, and the
   root size grows a little on big screens, so the owner's ultrawide gets a
   bigger page rather than a small one floating in the middle.
   ========================================================================== */

:root {
  /* neutrals - true greys, no tint */
  --bg:            #000000;
  --bg-alt:        #060606;
  --surface:       #0b0b0b;
  --surface-2:     #141414;
  --line:          #242424;
  --line-soft:     #171717;
  --line-strong:   #3b3b3b;

  --text:          #f5f5f5;
  --text-dim:      #a6a6a6;
  --text-faint:    #7a7a7a;

  /* white is the accent. Anything filled with it takes --on-brand text. */
  --brand:         #ffffff;
  --brand-bright:  #ffffff;
  --brand-rgb:     255, 255, 255;
  --on-brand:      #000000;
  --glint:         #d6d6d6;

  /* errors - the only colour on the site */
  --danger:        #ff8f8f;
  --danger-bg:     #1c0a0c;

  --radius:        2px;
  --radius-sm:     2px;
  --shadow:        0 28px 70px rgba(0, 0, 0, .7);

  /* 1800 up to ~1920, then it grows with the root size to 1860 on an
     ultrawide, so the page scales as one piece */
  --wrap:          clamp(1800px, 106.25rem, 1860px);
  --gutter:        clamp(16px, 2.5vw, 48px);
  --header-row:    92px;

  --font:          "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display:  "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

/* The browser's own [hidden] rule is display:none, which loses to any author
   rule that sets display - .btn being inline-flex, for one. */
[hidden] { display: none !important; }

/* 16px up to ~1920, easing up to 17.5px on an ultrawide: every rem-sized thing
   (type, buttons, the header) scales with it. Breakpoints stay in px. */
html {
  font-size: clamp(16px, calc(11.2px + .25vw), 17.5px);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Anton has one weight - asking for bold only makes the browser smear it */
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .012em;
  text-transform: uppercase;
}
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }

code {
  font-family: var(--font-mono);
  font-size: .86em;
  padding: .1em .4em;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow { max-width: calc(880px + 2 * var(--gutter)); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 18px;
  font-weight: 700;
  color: var(--on-brand); background: var(--brand);
}
.skip:focus { left: 0; }

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

/* micro-label above titles: a mono caption with a small white block */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-dim);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; flex: none;
  background: var(--brand);
}

/* ============================================================================
   BUTTONS
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px;
  padding: 0 22px;
  font-family: var(--font);
  font-size: .74rem; font-weight: 700;
  /* explicit - a <button> does not inherit line-height the way an <a> does */
  line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .12s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* solid white, black text; inverts on hover */
.btn--primary {
  color: var(--on-brand);
  background: var(--brand);
  border-color: var(--brand);
}
.btn--primary:hover:not(:disabled) { color: var(--brand); background: var(--bg); }

/* outline; the line turns white on hover */
.btn--ghost { color: var(--text); background: transparent; border-color: var(--line-strong); }
.btn--ghost:hover:not(:disabled) { color: #fff; border-color: var(--brand); }

.btn--lg { min-height: 54px; padding: 0 34px; font-size: .8rem; letter-spacing: .16em; }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: .68rem; }

.btn--buy { width: 100%; }

.btn.is-busy { pointer-events: none; }
.btn.is-busy::before {
  content: "";
  width: 14px; height: 14px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.is-unset { opacity: .4; cursor: default; pointer-events: none; }
.btn__icon { width: 16px; height: 16px; flex: none; }

/* ============================================================================
   HEADER
   ----------------------------------------------------------------------------
   Inside the same container as the page, so the logo sits on the content's
   left edge and the Shop button on its right edge.

     >= 1800px   one row: brand | category buttons (dead centre) | actions
     900-1799    brand + actions, then the category bar on a second row under
                 a hairline, centred in the same container
     < 900       brand + a Menu button; the categories and the actions open
                 in a full-width sheet

   The nav and the actions sit in .site-header__panel, which is
   display:contents on desktop (they are grid items of the bar) and becomes
   the sheet on a phone.
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 40;
  /* solid, not a backdrop blur: a sticky blur repaints on every scroll frame,
     and even at 95% the page showed through on a phone */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 20px;
  min-height: var(--header-row);
}
.site-header__panel { display: contents; }
.site-header__inner > .brand { justify-self: start; }
.site-header__actions { justify-self: end; }

/* --- brand ---------------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand__home { display: flex; flex: none; text-decoration: none; }
.brand__logo {
  display: block;
  width: 46px; height: 46px; object-fit: contain;
}
.brand__text { display: grid; gap: 6px; min-width: 0; line-height: 1; }
/* "FIVEM ASSET STORE" beside the logo, big and heavy */
.brand__title {
  font-family: var(--font-display);
  font-size: 1.62rem; line-height: .95;
  letter-spacing: .05em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  white-space: nowrap;
}
/* the small line under it: the Discord count with its icon */
.brand__meta {
  font-family: var(--font-mono);
  font-size: .56rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.brand__meta { display: flex; align-items: center; gap: 8px; min-height: 14px; }
.brand__meta .social { width: 15px; height: 15px; }
.brand__meta .social--discord svg { width: 11px; height: 11px; }
.brand__meta > .is-first-visible::before { content: none; }
.brand__meta > * + *::before {
  content: "/";
  margin-right: 8px;
  color: var(--line-strong);
}
/* the Discord icon belongs to the count beside it - no "/" between them */
.brand__meta > .socials::before { content: none; }
.brand__meta > .socials { margin-left: -2px; }

.stat { display: inline-flex; align-items: center; }
.stat b { color: var(--text-dim); font-weight: 700; margin-right: .45em; }
.stat__dot {
  width: 6px; height: 6px; margin-right: 7px;
  background: var(--brand);
  animation: pulse 2.6s ease-in-out infinite;
}
.stat__dot--discord { border-radius: 50%; }

.brand__badge {
  padding: 3px 8px;
  color: var(--on-brand); background: var(--brand);
}
.brand__meta > .brand__badge::before { content: none; }

/* social icons in the brand line */
.socials { display: inline-flex; align-items: center; gap: 2px; }
.social {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  color: var(--text-faint);
  transition: color .16s ease;
}
.social svg { display: block; }
.social--tiktok  svg { width: 9px;  height: 9px; }
.social--discord svg { width: 12px; height: 12px; }
.social--youtube svg { width: 12px; height: 12px; }
.social:hover { color: #fff; }
.social--unset { opacity: .32; cursor: default; }
.social--unset:hover { color: var(--text-faint); }
.social:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --- category bar ---------------------------------------------------------- */
.nav {
  display: flex; align-items: center; justify-content: center;
  gap: 2px;
  min-width: 0;
}

.menu__link, .menu__btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 11px;
  font-family: var(--font);
  font-size: .7rem; font-weight: 700; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-dim);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
/* the underline that marks where you are */
.menu__link::after, .menu__btn::after {
  content: "";
  position: absolute; left: 11px; right: 11px; bottom: 5px; height: 2px;
  background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.menu__link:hover, .menu__btn:hover { color: #fff; }
.menu__link:hover::after { transform: scaleX(1); }
.menu__link.is-active, .menu__btn.is-active { color: #fff; }
.menu__link.is-active::after, .menu__btn.is-active::after { transform: scaleX(1); }
.menu.is-open .menu__btn { color: #fff; border-color: var(--line-strong); background: var(--surface); }
.menu.is-open .menu__btn::after { transform: scaleX(0); }
.menu__link:focus-visible, .menu__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* the group glyphs belong to the phone sheet - the bar reads cleaner as words */
.menu__icon { display: none; width: 18px; height: 18px; flex: none; }
.menu__btn .dropdown__chevron { width: 10px; height: 10px; margin-right: -2px; opacity: .7; }
.menu__itemicon { display: none; }

/* --- actions -------------------------------------------------------------- */
.site-header__actions { display: flex; align-items: center; gap: 8px; }
.site-header__actions .btn { min-height: 40px; padding: 0 13px; gap: 8px; font-size: .68rem; letter-spacing: .1em; }
.site-header__actions .btn--primary { padding: 0 20px; }

/* the Menu button only exists on a phone */
.navtoggle { display: none; }

/* --- dropdowns ------------------------------------------------------------ */
.dropdown { position: relative; }
.dropdown--nav { display: inline-flex; }
.dropdown__toggle { gap: 8px; }
.dropdown__chevron { width: 12px; height: 12px; flex: none; transition: transform .2s ease; }
.dropdown.is-open .dropdown__chevron { transform: rotate(180deg); }

.dropdown__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 310px; padding: 6px;
  display: grid; gap: 2px;
  background: #070707;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.dropdown__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 10px 12px;
  color: var(--text);
  text-decoration: none;
  border-radius: 1px;
  transition: background-color .14s ease, color .14s ease;
}
/* background-COLOR, never the shorthand - it would reset the banner rows'
   background-size and snap their artwork to its natural size on hover */
.dropdown__item:hover { background-color: var(--brand); color: var(--on-brand); }
.dropdown__item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.dropdown__text { display: grid; gap: 2px; min-width: 0; }
.dropdown__label {
  font-family: var(--font);
  font-size: .86rem; font-weight: 600; letter-spacing: .01em;
  color: inherit;
}
.dropdown__note { font-size: .74rem; color: var(--text-faint); }
.dropdown__item:hover .dropdown__note { color: #444; }
.dropdown__icon {
  width: 34px; height: 34px; flex: none;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--line);
}
.dropdown__icon--fallback { display: grid; place-items: center; color: var(--text-dim); }
.dropdown__icon--fallback svg { width: 17px; height: 17px; }
.dropdown__item:hover .dropdown__icon--fallback { color: var(--on-brand); background: var(--brand); border-color: var(--on-brand); }
.dropdown__mark { display: block; }
.dropdown__mark--discord { width: 15px; height: 15px; }
.dropdown__mark--fivem   { width: 13px; height: 13px; }
.dropdown__menu--connect { min-width: 300px; }
.dropdown__menu button.dropdown__item {
  width: 100%; text-align: left;
  font: inherit; background: none; border: 0; cursor: pointer;
}
.dropdown__menu button.dropdown__item:hover { background-color: var(--brand); }
.dropdown__empty { padding: 10px 12px; color: var(--text-faint); font-size: .78rem; line-height: 1.5; }
.dropdown__empty--bad { color: var(--danger); }

/* network rows: each Discord's own banner fills the row */
.dropdown__item--banner {
  position: relative; overflow: hidden;
  grid-template-columns: 1fr;
  align-content: center;
  min-height: 68px;
  padding: 12px 16px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
}
.dropdown__item--banner::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .78) 45%, rgba(0, 0, 0, .35) 100%);
}
.dropdown__item--banner > * { position: relative; z-index: 1; }
.dropdown__item--banner:hover { background-color: transparent; color: var(--text); border-color: var(--brand); }
.dropdown__item--banner .dropdown__label {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 400;
  letter-spacing: .05em; text-transform: uppercase;
}

/* the category lists hang from the button's left edge */
.dropdown__menu--nav {
  left: 0; right: auto;
  min-width: 250px;
  max-width: calc(100vw - 20px);
}
.dropdown__menu--nav.menu__list { top: calc(100% + 8px); }
.dropdown__menu--nav .dropdown__item {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px 12px;
  white-space: normal;
}
/* a small arrow slides in on the row you point at */
.dropdown__menu--nav .dropdown__item::after {
  content: "\2192";
  font-size: .9rem; line-height: 1;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .15s ease, transform .15s ease;
}
.dropdown__menu--nav .dropdown__item:hover::after { opacity: 1; transform: none; }
.dropdown__menu--nav .dropdown__item.is-active { box-shadow: inset 2px 0 0 var(--brand); background-color: var(--surface-2); }
.dropdown__menu--nav .dropdown__item.is-active:hover { background-color: var(--brand); }

/* --- account control ------------------------------------------------------ */
/* a small box: FiveM mark + plug, the same height as the buttons beside it */
.account .account__toggle {
  position: relative;
  gap: 7px; padding: 0 12px;
}
.account__fivem { width: 17px; height: 17px; flex: none; }
.account__plug { width: 16px; height: 16px; flex: none; opacity: .75; }
.account__toggle:hover .account__plug,
.account.is-open .account__plug { opacity: 1; }
/* signed in: a white dot on the corner */
.account__dot {
  display: none;
  position: absolute; top: 5px; right: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-bright);
}
.account.is-signed-in .account__dot { display: block; }
.account.is-signed-in .dropdown__toggle { border-color: #5a5a5a; }
.account__who {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.account__avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.account__names { display: grid; gap: 1px; min-width: 0; }
.account__names strong { font-size: .9rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account__names small { font-size: .74rem; color: var(--text-faint); }
.account__badge {
  margin-left: auto; flex: none;
  padding: 3px 8px;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-brand); background: var(--brand);
}

/* --- two rows: brand + actions, then the category bar ---------------------
   One row needs ~1600px of container at 16px (brand, seven category buttons
   and four actions, with the bar dead centre). Below 1680 the bar takes a
   second row under a hairline; above it, fitHeader() in store.js measures and
   adds .site-header--stacked if a long account name would make them touch. */
@media (max-width: 1679px) and (min-width: 900px) {
  .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "nav nav";
    min-height: 0;
  }
  .site-header__inner > .brand { grid-area: brand; height: 84px; }
  .site-header__actions { grid-area: actions; }
  .site-header__inner .nav { grid-area: nav; height: 48px; border-top: 1px solid var(--line-soft); }
}
@media (min-width: 900px) {
  .site-header--stacked .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "nav nav";
    min-height: 0;
  }
  .site-header--stacked .site-header__inner > .brand { grid-area: brand; height: 84px; }
  .site-header--stacked .site-header__actions { grid-area: actions; }
  .site-header--stacked .site-header__inner .nav { grid-area: nav; height: 48px; border-top: 1px solid var(--line-soft); }
}

/* --- staff chrome (the gate and any staff page) ----------------------------- */
.site-header__inner--staff { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.site-header__inner--staff .nav a {
  padding: 10px 14px;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
}
.site-header__inner--staff .nav a:hover,
.site-header__inner--staff .nav a.is-active { color: #fff; }

/* ============================================================================
   NOTICES
   ========================================================================== */

.banner {
  margin-top: 18px; padding: 13px 18px;
  color: #ffd0d0; font-size: .92rem;
  background: var(--danger-bg);
  border: 1px solid rgba(255, 110, 110, .35);
  border-left: 3px solid var(--danger);
}

.notice {
  grid-column: 1 / -1;
  padding: 28px; text-align: center;
  font-family: var(--font-mono); font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim);
  border: 1px dashed var(--line-strong);
}
.notice--error {
  text-align: left;
  font-family: var(--font); font-size: .92rem;
  letter-spacing: 0; text-transform: none;
  color: #ffd0d0;
  background: var(--danger-bg);
  border: 1px solid rgba(255, 110, 110, .35);
  border-left: 3px solid var(--danger);
}

/* the "this is the official store" line - block, not flex, so the <strong>
   and the sentence after it stay one paragraph */
.official {
  position: relative;
  width: fit-content; max-width: 760px; margin: 0 auto;
  padding: 13px 22px;
  text-align: center;
  color: var(--text-dim); font-size: .86rem; line-height: 1.55;
  border: 1px solid var(--line);
  background: var(--bg-alt);
}
.official::before {
  content: "";
  display: inline-block; vertical-align: -3px;
  margin-right: 8px;
  width: 17px; height: 17px;
  background-color: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5.5v6c0 4.6 3.2 8.9 8 10.5 4.8-1.6 8-5.9 8-10.5v-6z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='m8.6 11.8 2.4 2.4 4.4-4.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5.5v6c0 4.6 3.2 8.9 8 10.5 4.8-1.6 8-5.9 8-10.5v-6z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='m8.6 11.8 2.4 2.4 4.4-4.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.official strong { color: var(--text); font-weight: 600; }
.official--wide { margin-bottom: 28px; }

/* --- counters: small pills in the banner strip ----------------------------- */
.hero__stats { margin-top: 18px; }
.hero__stats[hidden] { display: none; }
.spills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.spill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  color: inherit; text-decoration: none;
  background: rgba(0, 0, 0, .6);
  border: 1px solid var(--line-strong);
  transition: border-color .15s ease, background-color .15s ease;
}
.spill svg { width: 16px; height: 16px; flex: none; color: #fff; }
.spill b {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.15rem; line-height: 1; letter-spacing: .03em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.spill__label {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
}
a.spill:hover { border-color: var(--text-faint); background: rgba(255, 255, 255, .04); }
a.spill:hover .spill__label { color: var(--text); }
@media (max-width: 620px) {
  .spills { gap: 6px; }
  .spill { padding: 7px 10px; gap: 7px; }
  .spill svg { width: 14px; height: 14px; }
  .spill b { font-size: .95rem; }
  .spill__label { font-size: .5rem; letter-spacing: .08em; }
}

/* --- first-order offer ------------------------------------------------------ */
.welcome {
  position: fixed; inset: 0; z-index: 97;
  display: grid; place-items: center; padding: 24px;
}
.welcome__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .78); }
.welcome__panel {
  position: relative;
  width: min(30rem, 100%);
  display: grid; justify-items: center; gap: 12px;
  padding: 34px 30px 26px;
  text-align: center;
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  animation: panel-in .24s cubic-bezier(.2, .8, .3, 1);
}
.welcome__x {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px;
  font-size: 1.4rem; line-height: 1; color: var(--text-dim);
  background: none; border: 1px solid var(--line); cursor: pointer;
}
.welcome__x:hover { color: var(--text); border-color: var(--text-faint); }
.welcome__logo { width: 64px; height: 64px; object-fit: contain; margin-bottom: 2px; }
.welcome__big {
  margin: 0;
  font-size: clamp(3.4rem, 2.6rem + 3vw, 4.6rem); line-height: .9;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff 30%, #8a8a8a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.welcome__text { max-width: 24rem; color: var(--text-dim); line-height: 1.55; }
.welcome__text strong { color: var(--text); }
.welcome__code {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 6px; padding: 8px 8px 8px 14px;
  border: 1px dashed var(--text-faint);
}
.welcome__codelabel {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint);
}
.welcome__code strong {
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700;
  letter-spacing: .14em; color: var(--text);
}
.welcome__copy {
  padding: 7px 11px;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-brand); background: var(--brand); border: 0; cursor: pointer;
}
.welcome__claim { width: 100%; }
.welcome__no {
  padding: 6px 10px;
  font: inherit; font-size: .82rem; color: var(--text-faint);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.welcome__no:hover { color: var(--text); }
.welcome__fine { font-size: .74rem; color: var(--text-faint); }

/* in the cart, once claimed */
.cartdrawer__promo {
  margin: 0 0 12px; padding: 9px 12px;
  font-size: .8rem; color: var(--text-dim);
  border: 1px dashed var(--line-strong);
}
.cartdrawer__promo strong { font-family: var(--font-mono); letter-spacing: .1em; color: var(--text); }

/* the reminder slab the popup drops into - bottom left, opposite the cart */
.wslab {
  position: fixed; left: 24px; bottom: 24px; z-index: 79;
  display: flex; align-items: stretch;
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
}
.wslab[hidden] { display: none; }
.wslab.is-waiting { visibility: hidden; }
.wslab.is-in { animation: wslab-in .5s cubic-bezier(.2, .9, .3, 1.35); }
@keyframes wslab-in { from { transform: translateY(16px) scale(.94); opacity: 0; } }
/* a white edge, like a price tag */
.wslab::before { content: ""; flex: none; width: 3px; background: var(--brand-bright); }
.wslab.is-claimed { border-style: dashed; }
.wslab__main {
  display: grid; justify-items: start; gap: 4px;
  padding: 11px 16px 11px 14px;
  text-align: left; color: var(--text);
  background: none; border: 0; cursor: pointer;
}
.wslab__big {
  font-family: var(--font-display); font-size: 1.4rem; line-height: .95;
  letter-spacing: .02em; text-transform: uppercase;
}
.wslab__small {
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
  transition: color .15s ease;
}
.wslab__main:hover .wslab__small,
.wslab__main:focus-visible .wslab__small { color: var(--text); }
.wslab__x {
  flex: none; width: 34px;
  font-size: 1.1rem; line-height: 1; color: var(--text-faint);
  background: none; border: 0; border-left: 1px solid var(--line);
  cursor: pointer;
}
.wslab__x:hover { color: var(--text); background: var(--surface-2); }
@media (max-width: 620px) {
  .wslab { left: 16px; bottom: 16px; }
  .wslab__big { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wslab.is-in { animation: none; }
}

/* phones: a sheet from the bottom, thumb-reachable */
@media (max-width: 620px) {
  .welcome { place-items: end stretch; padding: 0; }
  .welcome__panel { width: 100%; padding: 30px 20px 22px; border-width: 1px 0 0; }
}

/* --- terms / privacy ------------------------------------------------------ */
.legal { color: var(--text-dim); font-size: 1rem; line-height: 1.7; }
.legal h2 {
  margin: 46px 0 12px;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  color: var(--text);
  /* land below the sticky header and the ticker when jumped to */
  scroll-margin-top: 200px;
}
.legal p, .legal ul { margin: 0 0 14px; }
.legal ul { padding-left: 20px; }
.legal li { margin: 7px 0; }
.legal li::marker { color: var(--text-faint); }
.legal a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--brand-bright); }
.legal strong { color: var(--text); font-weight: 600; }
.legal code {
  padding: 1px 6px;
  font-family: var(--font-mono); font-size: .86em;
  background: var(--surface-2); border: 1px solid var(--line);
}
.legal__updated {
  text-align: center;
  font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}
.legal__toc {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 18px 0 6px; padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.legal .legal__toc a {
  padding: 8px 12px;
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
  border: 1px solid var(--line);
  transition: color .15s ease, border-color .15s ease;
}
.legal .legal__toc a:hover { color: var(--text); border-color: var(--text-faint); }
.legal__also {
  margin-top: 44px; padding-top: 24px;
  text-align: center;
  border-top: 1px solid var(--line);
}

/* its own line under the name - beside it, the pair was centred as one and
   the name sat visibly left of the logo above it */
.site-footer__est {
  display: block;
  margin-top: 8px;
  /* letter-spacing also trails the last letter; the matching padding on the
     left puts the letters themselves dead centre */
  padding-left: .16em;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}
.site-footer__links a.is-active { color: var(--text); }

/* a category page (from the header menu): just the products */
#packages.is-focused .shopbar,
#packages.is-focused .shopbar__subs,
#packages.is-focused .shop__count { display: none; }

.authnote {
  max-width: 760px; margin: 18px auto 0;
  padding: 13px 18px;
  text-align: center;
  color: var(--text-dim); font-size: .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
}
.authnote--bad {
  color: #ffd0d0;
  background: var(--danger-bg);
  border-color: rgba(255, 110, 110, .35);
}

/* ============================================================================
   RECENT PURCHASES TICKER
   Two copies of the list run end to end and the track slides the width of
   one, so the loop has no seam. The items run past the viewport inside the
   window - that is the marquee, not an overflow.
   ========================================================================== */

.ticker {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  height: 36px;
  /* the label lines up with the container's left edge */
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.ticker__label {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  height: 22px; padding: 0 9px;
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-brand); background: var(--brand);
}
.ticker__label::before {
  content: ""; width: 6px; height: 6px;
  background: var(--on-brand);
  animation: pulse 1.6s ease-in-out infinite;
}
.ticker__window {
  position: relative;
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 60px), transparent 100%);
}
.ticker__track {
  display: inline-flex; align-items: center;
  white-space: nowrap;
  animation: ticker-run 52s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ticker__item {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 0 34px 0 0;
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
}
.ticker__item::before {
  content: "+"; color: var(--text-faint); margin-right: 2px;
}
.ticker__who { font-weight: 700; color: var(--text); }
.ticker__verb { color: var(--text-faint); }
.ticker__got { color: var(--text-dim); }
.ticker__when { color: var(--text-faint); }

/* ============================================================================
   HOME: THE DROP HERO
   ----------------------------------------------------------------------------
   The clean banner, edge to edge. It carries the wordmark, so there is no
   headline over it - just the art, fading into the page, and a short strip of
   copy and buttons under it. On the ultrawide the art stops at 2800px and
   feathers into the black band either side, over a faint grid that picks up
   the grid in the artwork, rather than being stretched soft.
   ========================================================================== */

.hero { position: relative; }

.hero__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2048 / 1120;           /* phones: the whole banner, uncropped */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center center;
}
.hero__art {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  display: block;
  width: 100%; height: 100%; max-width: 2800px;
  margin: 0 auto;
  object-fit: cover; object-position: 50% 50%;
}
/* fade into the page */
.hero__stage::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--bg));
  pointer-events: none;
}

@media (min-width: 700px) {
  .hero__stage { aspect-ratio: auto; height: clamp(360px, 55vh, 640px); }
  .hero__stage::after { height: 52%; }
}
@media (min-width: 2801px) {
  .hero__art {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
}

.hero__strip {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 18px;
  text-align: center;
  padding-top: 6px;
}
@media (min-width: 700px) {
  /* pulled up into the fade, so strip and art read as one piece - with a
     soft black pool behind the words so the art never runs through them */
  .hero__strip { margin-top: -92px; padding-top: 0; isolation: isolate; }
  .hero__strip::before {
    content: "";
    position: absolute; z-index: -1;
    left: 50%; top: -56px;
    width: min(1180px, 100%); height: 200px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(0, 0, 0, .88), rgba(0, 0, 0, .55) 60%, transparent);
    pointer-events: none;
  }
}
.hero__sub {
  max-width: 76ch;
  text-wrap: balance;
  font-size: clamp(1rem, .9rem + .3vw, 1.15rem); font-weight: 500;
  color: #d4d4d4;
}
.hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero__trust {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px;
  font-family: var(--font-mono);
  font-size: .62rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-faint);
}
.hero__trust span { display: inline-flex; align-items: center; gap: 9px; }
.hero__trust span::before { content: ""; width: 4px; height: 4px; background: var(--text-dim); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ============================================================================
   PAGE HEAD (store, FAQ)
   ========================================================================== */

.pagehero {
  position: relative;
  padding: clamp(48px, 5vw, 84px) 0 clamp(36px, 3.6vw, 56px);
  text-align: center;
  border-bottom: 1px solid var(--line);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(255, 255, 255, .07), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  background-position: center, center top, center top;
}
.pagehero__inner { position: relative; display: grid; justify-items: center; gap: 14px; }
.pagehero h1 { font-size: clamp(3rem, 6vw, 5.6rem); line-height: .92; }
.pagehero p { max-width: 60ch; color: var(--text-dim); }

.pagehero--compact { padding: clamp(36px, 3.4vw, 60px) 0 clamp(28px, 2.6vw, 44px); }
.pagehero--compact h1 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); }
.pagehero--compact + .section { padding-top: clamp(26px, 2.4vw, 40px); }

/* ============================================================================
   SECTIONS
   ========================================================================== */

.section { padding: clamp(56px, 5.4vw, 104px) 0; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }
.section--drops { padding-top: clamp(40px, 3vw, 60px); }

/* centred title between two hairlines that run to the container edges */
.section__head {
  display: grid; justify-items: center; gap: 14px;
  margin: 0 0 clamp(26px, 2.6vw, 44px);
  text-align: center;
}
.section__head h2 {
  display: flex; align-items: center; gap: clamp(18px, 2vw, 36px);
  width: 100%;
  font-size: clamp(2.3rem, 3.3vw, 3.6rem);
}
.section__head h2::before, .section__head h2::after {
  content: ""; flex: 1; height: 1px; background: var(--line-strong);
}
.section__head p { max-width: 60ch; color: var(--text-dim); }

.section__foot {
  margin-top: clamp(28px, 2.6vw, 44px);
  text-align: center;
  color: var(--text-faint); font-size: .86rem;
}
.section__foot a:not(.btn) { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.section__foot a:not(.btn):hover { text-decoration-color: var(--brand); }

/* ============================================================================
   PRODUCT CARDS
   ========================================================================== */

.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 16px;
}
.items > .notice { grid-column: 1 / -1; }

/* Only a few products on the page (set by paintShop): bigger cards, centred,
   until the section fills up and the normal grid takes over again. */
@media (min-width: 621px) {
  .items[data-few] { justify-content: center; gap: 20px; }
  .items[data-few="1"] { grid-template-columns: minmax(0, 38rem); }
  .items[data-few="2"] { grid-template-columns: repeat(2, minmax(0, 34rem)); }
  .items[data-few="3"] { grid-template-columns: repeat(3, minmax(0, 32rem)); }
  .items[data-few="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .items[data-few] .item__body { padding: 18px 20px 20px; gap: 9px; }
  .items[data-few] .item__name { font-size: clamp(1.4rem, 1.1rem + .8vw, 1.9rem); }
  .items[data-few] .item__now { font-size: 1.3rem; }
  .items[data-few] .item__foot .btn { min-height: 48px; font-size: .8rem; }
}

/* New drops: always the newest eight, so four across in two even rows */
.items--drops { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.item {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease;
}
.item:hover { border-color: var(--brand); }

.item__media {
  position: relative; display: block;
  aspect-ratio: 16 / 9; width: 100%;
  padding: 0; border: 0; cursor: pointer;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.item__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
.item:hover .item__media img { transform: scale(1.045); }
.item__media:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.item__noimg {
  display: block; width: 100%; height: 100%;
  background: url("../images/web/logo-256.png") center / 30% no-repeat, var(--bg);
  opacity: .45;
}

/* badges on the picture: sale or subscription, then Animated */
.item__flags {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; flex-wrap: wrap; gap: 6px;
  pointer-events: none;
}
.item__flag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: .58rem; font-weight: 700; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: rgba(0, 0, 0, .86);
  border: 1px solid rgba(255, 255, 255, .7);
}
.item__flag--sale { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.item__flag--anim svg { width: 11px; height: 11px; flex: none; }
.item__flag--anim { border-style: dashed; }
.pmodal__anim { align-self: flex-start; justify-self: start; width: max-content; margin: -2px 0 4px; }

.item__body { display: flex; flex-direction: column; gap: 7px; flex: 1; padding: 14px 14px 14px; }
.item__cat {
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item__name { font-size: 1.3rem; line-height: 1.04; letter-spacing: .02em; }
.item__name button {
  padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--text); text-align: left;
  background: none; border: 0; cursor: pointer;
}
.item__name button:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.item__name button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* price over a full-width button: side by side, a four-figure price or
   "per month" pushed the button out of the card */
.item__foot {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  margin-top: auto; padding-top: 6px;
}
.item__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.item__now { font-family: var(--font); font-size: 1.06rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.item__was { font-size: .82rem; color: var(--text-faint); }
.item__per { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }

/* on a card the button stays quiet (outline) and fills white when you point
   at the card - a grid of a hundred solid white bars shouts */
.item__foot .btn {
  width: 100%; margin: 0;
  min-height: 40px; padding: 0 12px;
  font-size: .68rem;
  color: var(--text); background: transparent; border-color: var(--line-strong);
}
.item__foot .btn svg { width: 15px; height: 15px; }
.item:hover .item__foot .btn:not(.is-incart):not(.is-added),
.item__foot .btn:not(.is-incart):not(.is-added):focus-visible { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }

.btn--buy.is-incart,
.item:hover .item__foot .btn--buy.is-incart {
  color: var(--text); background: var(--surface-2); border-color: var(--brand);
}
.btn--buy.is-added { color: var(--text); background: var(--surface-2); border-color: var(--brand); }

/* ============================================================================
   CATEGORY TILES (home)
   Portrait, black and white until you point at one - a lookbook row. As
   many across as fit at 150px+, so the seven categories sit on one row on a
   laptop and on the ultrawide alike.
   ========================================================================== */

.ctiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.ctiles > .notice { grid-column: 1 / -1; }
.ctile {
  position: relative; display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  color: #fff; text-decoration: none;
  background:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    var(--surface);
  background-size: 28px 28px, 28px 28px, auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s ease;
}
.ctile__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.5);
  transition: filter .45s ease, transform .6s cubic-bezier(.2, .8, .3, 1);
}
.ctile__img.item__noimg { background-size: 40%; filter: none; opacity: .18; }
.ctile:hover { border-color: var(--brand); }
.ctile:hover .ctile__img { filter: grayscale(0) brightness(.72); transform: scale(1.05); }
.ctile:hover .ctile__img.item__noimg { filter: none; opacity: .3; }
.ctile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 30%, transparent 45%, rgba(0, 0, 0, .92) 100%);
  pointer-events: none;
}
.ctile__idx {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; color: var(--text-dim);
}
.ctile__go {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  font-size: .95rem; line-height: 1;
  color: var(--on-brand); background: var(--brand);
  opacity: 0; transform: translate(-4px, 4px);
  transition: opacity .2s ease, transform .2s ease;
}
.ctile:hover .ctile__go, .ctile:focus-visible .ctile__go { opacity: 1; transform: none; }
.ctile__body {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1;
  display: grid; gap: 8px;
}
.ctile__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + .5vw, 1.75rem); line-height: 1;
  letter-spacing: .02em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.ctile__n {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim);
}
.ctile:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.home-official { margin-top: clamp(28px, 2.6vw, 44px); }

/* ============================================================================
   THE SHOP: SEARCH, CATEGORY PILLS, SUB-CATEGORIES
   ========================================================================== */

.shopbar { display: grid; justify-items: center; gap: 14px; margin-bottom: 14px; }
.shopbar__search { position: relative; width: min(600px, 100%); }
.shopbar__search::before {
  content: "";
  position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background-color: var(--text-faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.shopbar__search input {
  width: 100%; height: 50px; padding: 0 16px 0 44px;
  font: inherit; font-size: .95rem; color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color .15s ease;
}
.shopbar__search input::placeholder { color: var(--text-faint); }
.shopbar__search input:focus { outline: none; border-color: var(--brand); }
.shopbar__search:focus-within::before { background-color: var(--brand); }

.shopbar__cats, .shopbar__subs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  width: 100%; min-width: 0;
}
.shopbar__subs {
  margin: 0 auto 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  max-width: 1200px;
}

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 14px;
  font-family: var(--font);
  font-size: .68rem; font-weight: 700; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.pill:hover { color: #fff; border-color: var(--brand); }
.pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pill.is-on { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.pill__n {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: 0;
  color: var(--text-faint);
}
.pill.is-on .pill__n { color: #555; }
.shopbar__subs .pill { height: 32px; padding: 0 12px; font-size: .64rem; }

.shop__count {
  margin: 8px 0 20px;
  text-align: center;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ============================================================================
   ONE PRODUCT, IN A PANEL
   ========================================================================== */

.pmodal { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 24px; }
.pmodal[hidden] { display: none; }
.pmodal__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .82); }
.pmodal__panel {
  position: relative;
  width: min(80rem, 100%); max-height: calc(100vh - 48px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-alt);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: panel-in .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes panel-in { from { transform: translateY(12px); opacity: 0; } }
.pmodal__x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px;
  font-size: 1.5rem; line-height: 1; color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.pmodal__x:hover { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.pmodal__x:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pmodal__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

.pmodal__media {
  padding: 24px; display: grid; gap: 12px; align-content: start;
  border-right: 1px solid var(--line);
}
/* the pictures stay in view while a long description scrolls past */
@media (min-width: 861px) {
  .pmodal__media { position: sticky; top: 0; align-self: start; border-right: 0; }
  .pmodal__info { border-left: 1px solid var(--line); min-height: 100%; }
}
.pmodal__stage {
  aspect-ratio: 16 / 9;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.pmodal__stage img, .pmodal__stage iframe { width: 100%; height: 100%; display: block; border: 0; object-fit: contain; }
.pmodal__thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.pmodal__thumbs button {
  width: 78px; aspect-ratio: 16 / 9; padding: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; opacity: .55;
  transition: opacity .15s ease, border-color .15s ease;
}
.pmodal__thumbs button[aria-current="true"], .pmodal__thumbs button:hover { opacity: 1; border-color: var(--brand); }
.pmodal__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pmodal__play { justify-self: start; }

.pmodal__info {
  display: grid; gap: 16px; align-content: start;
  padding: 30px 30px 32px;
}
.pmodal__title { font-size: clamp(2rem, 2.6vw, 3.2rem); line-height: .98; padding-right: 48px; }
.pmodal__price .item__now { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 2.2vw, 2.6rem); line-height: 1; letter-spacing: .02em; }
.pmodal__price .item__was { font-size: .95rem; }
.pmodal__info > .btn { justify-self: stretch; }
.pmodal__note { margin: 0; font-size: .84rem; color: var(--text-faint); }
.pmodal__trust {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}
.pmodal__trust span { display: inline-flex; align-items: center; gap: 8px; }
.pmodal__trust span::before { content: ""; width: 4px; height: 4px; background: var(--text-dim); }
.pmodal__desc {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--text-dim); font-size: .93rem; line-height: 1.7;
  overflow-wrap: anywhere;
}
.pmodal__desc p + p { margin-top: 10px; }
.pmodal__desc a { color: var(--text); }
.pmodal__desc strong { color: var(--text); font-weight: 600; }
.pmodal__desc ul, .pmodal__desc ol { padding-left: 20px; margin: 10px 0; }
.pmodal__desc h1, .pmodal__desc h2, .pmodal__desc h3, .pmodal__desc h4 {
  margin: 14px 0 6px; font-size: 1.2rem; color: var(--text);
}

body.has-modal-open { overflow: hidden; }

@media (max-width: 860px) {
  .pmodal { padding: 0; place-items: stretch; }
  .pmodal__panel { max-height: 100vh; border: 0; }
  .pmodal__body { grid-template-columns: 1fr; }
  .pmodal__media { padding: 16px; border-right: 0; }
  .pmodal__info { padding: 4px 18px 30px; }
  .pmodal__x { top: 10px; right: 10px; }
}

/* ============================================================================
   STEPS ("How it works")
   ========================================================================== */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
}
.step {
  position: relative;
  padding: clamp(22px, 2vw, 34px);
  background: var(--surface);
}
.step + .step { border-left: 1px solid var(--line); }
.step__n {
  display: block; margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 3vw, 3.6rem); line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .55);
}
.step p { color: var(--text-dim); font-size: .93rem; }
.step p strong { color: var(--text); }
.step p a { color: var(--text); }

@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step + .step { border-left: 0; }
  .step:nth-child(even) { border-left: 1px solid var(--line); }
  .step:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .steps { grid-template-columns: 1fr; }
  .step:nth-child(even) { border-left: 0; }
  .step + .step { border-top: 1px solid var(--line); }
}

/* ============================================================================
   FAQ
   ========================================================================== */

#faq-list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px;
  font-size: 1.05rem; font-weight: 600;
  cursor: pointer; list-style: none;
  transition: color .15s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  font-family: var(--font-mono); font-size: 1rem; font-weight: 500;
  border: 1px solid var(--line-strong);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.faq__item summary:hover::after { border-color: var(--brand); }
.faq__item[open] summary::after { content: "\2212"; color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.faq__item summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.faq__answer { padding: 0 54px 24px 4px; color: var(--text-dim); font-size: .95rem; }
.faq__answer a { color: var(--text); }

/* ============================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  margin-top: 0;
  padding: clamp(52px, 4.4vw, 84px) 0 28px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.site-footer__inner { display: grid; justify-items: center; gap: 26px; text-align: center; container-type: inline-size; }
.site-footer__brand { display: grid; justify-items: center; gap: 14px; max-width: 720px; }
.site-footer__brand .brand__logo { width: 52px; height: 52px; }
.site-footer__brand strong {
  display: block;
  padding-left: .08em;          /* balances the trailing letter-spacing */
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.4rem; letter-spacing: .08em; text-transform: uppercase;
}
.site-footer__brand p { margin-top: 6px; color: var(--text-faint); font-size: .88rem; text-wrap: pretty; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.site-footer__links a {
  padding: 8px 16px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
  transition: color .15s ease;
}
.site-footer__links a:hover { color: #fff; }
/* the wordmark, full container width, in chrome */
.site-footer__mark {
  width: 100%;
  margin: 8px 0 -0.06em;
  font-family: var(--font-display);
  font-size: 19.4cqw; line-height: .82;
  letter-spacing: .01em; text-transform: uppercase;
  text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, #bdbdbd 38%, #4a4a4a 72%, #121212 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  user-select: none;
}
.site-footer__legal {
  width: 100%; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ============================================================================
   CART
   The cart lives in this browser until checkout. The button only exists
   while there is something in it.
   ========================================================================== */

.cartfab {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  display: grid; place-items: center;
  width: 60px; height: 60px;
  color: var(--on-brand);
  background: var(--brand);
  border: 1px solid var(--brand); border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  transition: background-color .16s ease, color .16s ease;
}
.cartfab svg { width: 24px; height: 24px; }
.cartfab:hover { color: var(--brand); background: var(--bg); }
.cartfab:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.cartfab__count {
  position: absolute; top: -9px; right: -9px;
  min-width: 24px; height: 24px; padding: 0 6px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  color: var(--brand); background: var(--bg);
  border: 1px solid var(--brand);
}
@keyframes cart-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  65%  { transform: scale(.96); }
  100% { transform: scale(1); }
}
.cartfab.is-bumped { animation: cart-bump .5s cubic-bezier(.2, .8, .3, 1); }

.cartdrawer { position: fixed; inset: 0; z-index: 95; }
.cartdrawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.cartdrawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(460px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg-alt);
  border-left: 1px solid var(--line-strong);
  box-shadow: -30px 0 60px rgba(0, 0, 0, .6);
  animation: cart-in .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes cart-in { from { transform: translateX(26px); opacity: 0; } }

.cartdrawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.cartdrawer__title { font-size: 1.9rem; }
.cartdrawer__x {
  width: 40px; height: 40px;
  font-size: 1.5rem; line-height: 1; color: var(--text);
  background: none; border: 1px solid var(--line-strong); border-radius: var(--radius);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.cartdrawer__x:hover { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }

.cartdrawer__body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.cartdrawer__empty { padding: 34px 0; color: var(--text-dim); text-align: center; }

.cartlist { display: grid; list-style: none; margin: 0; padding: 0; }
.cartitem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cartitem__img {
  width: 64px; aspect-ratio: 16 / 9; height: auto; object-fit: cover;
  background: var(--surface); border: 1px solid var(--line);
}
.cartitem__text { display: grid; gap: 2px; min-width: 0; }
.cartitem__name {
  font-family: var(--font-display); font-size: 1.05rem; line-height: 1.1;
  letter-spacing: .02em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cartitem__unit { font-size: .76rem; color: var(--text-faint); }
.cartitem__line { font-family: var(--font-display); font-size: 1.1rem; white-space: nowrap; }
.cartitem__x {
  width: 28px; height: 28px;
  font-size: 1.1rem; line-height: 1; color: var(--text-faint);
  background: none; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.cartitem__x:hover { color: #fff; border-color: var(--line-strong); }

.qty {
  display: flex; align-items: center; gap: 0;
  width: max-content;
  border: 1px solid var(--line-strong);
}
.qty__btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font: 500 1.05rem/1 var(--font-mono);
  color: var(--text-dim);
  background: transparent; border: 0; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.qty__btn:hover:not(:disabled) { color: var(--on-brand); background: var(--brand); }
.qty__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.qty__btn:disabled { opacity: .3; cursor: not-allowed; }
.qty__value { min-width: 30px; text-align: center; font-family: var(--font-mono); font-size: .9rem; font-weight: 700; }
.qty--sm .qty__btn { width: 28px; height: 28px; font-size: .9rem; }
.qty--sm .qty__value { min-width: 22px; font-size: .82rem; }
.qty__fixed { display: block; width: 1px; }

.cartdrawer__foot {
  display: grid; gap: 12px;
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.cartdrawer__error {
  display: grid; gap: 10px; justify-items: start;
  padding: 11px 13px;
  font-size: .86rem; line-height: 1.5; color: #ffd0d0;
  background: var(--danger-bg);
  border: 1px solid rgba(255, 110, 110, .35);
  border-left: 3px solid var(--danger);
}
.cartdrawer__fix { justify-self: stretch; text-align: center; }
.cartdrawer__total {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-faint);
}
.cartdrawer__total strong { font-family: var(--font-display); font-size: 2rem; font-weight: 400; letter-spacing: .02em; color: var(--text); }
.cartdrawer__clear {
  justify-self: center;
  font: inherit; font-size: .78rem; color: var(--text-faint);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.cartdrawer__clear:hover { color: #fff; }

body.has-cart-open { overflow: hidden; }

/* ============================================================================
   OVERLAY (back from the Cfx.re login, on the way to checkout)
   ========================================================================== */

.overlay {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 24px;
  background: rgba(0, 0, 0, .96);
}
.overlay[hidden] { display: none; }
.overlay__card {
  max-width: 420px; text-align: center;
  padding: 42px 36px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
.overlay__card h2 { margin-top: 22px; font-size: 1.9rem; }
.overlay__card p { margin-top: 10px; color: var(--text-dim); font-size: .93rem; }

.spinner {
  width: 40px; height: 40px; margin: 0 auto;
  border: 2px solid var(--line-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================================
   SUCCESS PAGE
   ========================================================================== */

.success { padding: clamp(72px, 7vw, 130px) 0 clamp(60px, 5vw, 96px); text-align: center; }
.success__mark {
  width: 76px; height: 76px; margin: 0 auto 26px;
  display: grid; place-items: center;
  font-size: 2rem;
  color: var(--on-brand); background: var(--brand);
}
.success h1 { font-size: clamp(3rem, 6vw, 5.4rem); }
.success__sub { max-width: 60ch; margin: 18px auto 0; color: var(--text-dim); }
.success__card {
  max-width: 1100px; margin: 42px auto 0; text-align: left;
}
.success__card h2 { margin-bottom: 18px; font-size: 1.6rem; text-align: center; }
.success__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

/* ============================================================================
   STAFF GATE
   ========================================================================== */

.gate {
  max-width: 540px; margin: 0 auto; padding: 44px 34px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
.gate__icon {
  width: 56px; height: 56px; margin: 0 auto 22px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='1'/%3E%3Cpath d='M8 10.5V7.6a4 4 0 0 1 8 0v2.9'/%3E%3C/svg%3E")
    center / 26px 26px no-repeat,
    var(--brand);
}
.gate__title { font-size: 2.2rem; }
.gate__body { margin: 12px auto 26px; max-width: 420px; color: var(--text-dim); font-size: .95rem; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */

/* tablets: the drops grid halves */
@media (max-width: 1100px) {
  .items--drops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- the phone header: brand + Menu, everything else in a sheet ------------ */
@media (max-width: 899px) {
  :root { --header-row: 62px; }

  .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    height: var(--header-row); min-height: 0;
    column-gap: 12px;
  }

  .navtoggle {
    display: inline-flex; align-items: center; gap: 10px;
    height: 40px; padding: 0 14px;
    font-family: var(--font);
    font-size: .7rem; font-weight: 700; line-height: 1;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    cursor: pointer;
  }
  .navtoggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .navtoggle__bars { position: relative; width: 16px; height: 10px; }
  .navtoggle__bars i {
    position: absolute; left: 0; right: 0; height: 2px;
    background: currentColor;
    transition: transform .2s ease, top .2s ease;
  }
  .navtoggle__bars i:first-child { top: 0; }
  .navtoggle__bars i:last-child { top: 8px; }
  .site-header.is-nav-open .navtoggle { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
  .site-header.is-nav-open .navtoggle__bars i:first-child { top: 4px; transform: rotate(45deg); }
  .site-header.is-nav-open .navtoggle__bars i:last-child { top: 4px; transform: rotate(-45deg); }

  /* the sheet: every group and every category, then the account buttons.
     The lists inside are in the flow, not absolutely positioned, so the
     sheet can scroll without clipping any of them. */
  .site-header__panel {
    display: none;
    position: fixed; top: calc(var(--header-row) + 1px); left: 0; right: 0; bottom: 0;
    z-index: 45;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 6px var(--gutter) calc(32px + env(safe-area-inset-bottom));
    background: var(--bg);
  }
  .site-header.is-nav-open .site-header__panel { display: block; }
  body.has-nav-open { overflow: hidden; }
  body.has-nav-open .cartfab { display: none; }

  .site-header__inner .nav { display: block; }

  /* Home and FAQ: big display links */
  .nav .menu__link {
    display: flex; width: 100%; height: auto;
    padding: 16px 0;
    font-family: var(--font-display); font-weight: 400;
    font-size: 2rem; line-height: 1; letter-spacing: .03em;
    color: var(--text);
    border: 0; border-bottom: 1px solid var(--line);
  }
  .nav .menu__link::after { content: "\2192"; position: static; margin-left: auto; height: auto; background: none; transform: none; font-family: var(--font); font-size: 1.1rem; color: var(--text-faint); }
  .nav .menu__link.is-active { color: #fff; }

  /* each group: a caption, then its categories two to a row */
  .nav .dropdown--nav {
    display: block;
    padding: 16px 0 12px;
    border-bottom: 1px solid var(--line);
  }
  .nav .menu__btn {
    height: auto; padding: 0 0 8px;
    font-family: var(--font-mono); font-size: .64rem; font-weight: 700;
    letter-spacing: .2em;
    color: var(--text-faint);
    border: 0; background: none;
    pointer-events: none;
  }
  .nav .menu__btn::after, .nav .menu__btn .dropdown__chevron { display: none; }
  .nav .menu__btn.is-active { color: #fff; }
  .nav .menu__icon { display: block; width: 15px; height: 15px; }
  .menu.is-open .menu__btn { background: none; }

  .nav .dropdown__menu--nav.menu__list,
  .nav .dropdown__menu--nav.menu__list[hidden] {
    position: static;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    min-width: 0; max-width: none;
    padding: 0;
    background: none; border: 0; box-shadow: none;
    transform: none !important;
  }
  .nav .dropdown__menu--nav .menu__item[hidden] { display: none !important; }
  .nav .dropdown__menu--nav .dropdown__item { padding: 9px 0; }
  .nav .dropdown__menu--nav .dropdown__item::after { content: none; }
  .nav .dropdown__menu--nav .dropdown__item:hover { background: none; color: #fff; }
  .nav .dropdown__menu--nav .dropdown__item.is-active { background: none; box-shadow: none; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
  .nav .dropdown__menu--nav .dropdown__label { font-size: .95rem; font-weight: 500; color: inherit; }
  .nav .dropdown__menu--nav .dropdown__item { color: var(--text-dim); }

  /* the actions: Shop first, then one full-width row each. justify-self,
     because Chrome now honours it on block boxes - the desktop 'end' was
     shrinking this list to half the sheet */
  .site-header__actions {
    display: grid; grid-template-columns: minmax(0, 1fr);
    justify-self: stretch;
    gap: 8px;
    margin-top: 22px;
  }
  .site-header__actions > * { min-width: 0; }
  .site-header__actions .btn { width: 100%; min-height: 50px; padding: 0 16px; }
  .site-header__actions > .btn--primary { order: -1; min-height: 54px; }
  .site-header__actions .dropdown__toggle { justify-content: flex-start; }
  .site-header__actions .dropdown__toggle .dropdown__chevron { margin-left: auto; }
  .site-header__actions .dropdown__menu {
    position: static;
    min-width: 0; margin-top: 6px;
    box-shadow: none;
  }
}

@media (max-width: 620px) {
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* a lone product on a phone gets the full width */
  .items[data-few="1"] { grid-template-columns: minmax(0, 1fr); }
  .items--drops { gap: 10px; }
  .item__body { padding: 11px 11px 12px; gap: 6px; }
  .item__name { font-size: 1.08rem; }
  .item__now { font-size: .98rem; }
  .item__flags { top: 7px; left: 7px; right: 7px; gap: 4px; }
  .item__flag { padding: 4px 6px; font-size: .52rem; }
  .item__foot { gap: 10px; }
  .item__foot .btn { min-height: 38px; padding: 0 8px; font-size: .62rem; letter-spacing: .1em; gap: 7px; }
  .item__foot .btn svg { display: none; }

  /* two across; an odd count lets the first tile run full width, landscape,
     so the grid never ends on a lone tile */
  .ctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ctile:first-child:nth-last-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

  .hero__actions { width: 100%; }
  .hero__actions .btn, .success__actions .btn { flex: 1 1 100%; }
  .hero__trust { gap: 8px 16px; }
  .btn--lg { min-height: 52px; padding: 0 22px; }

  .brand { gap: 10px; }
  .brand__logo { width: 36px; height: 36px; }
  .brand__title { font-size: 1.18rem; }

  .section__head h2 { gap: 14px; }
  .faq__answer { padding-right: 4px; }
  .shopbar__cats { gap: 6px; }
  .pill { height: 34px; padding: 0 11px; font-size: .62rem; letter-spacing: .1em; }

  .cartfab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .cartdrawer__head, .cartdrawer__foot { padding-inline: 18px; }
  .cartdrawer__body { padding-inline: 18px; }
  .cartitem { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; }
  .cartitem__img { display: none; }
}

@media (max-width: 380px) {
  .brand__title { font-size: 1.02rem; }
  .navtoggle__label { display: none; }
}

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