/* ==========================================================================
   Fourfold — compact gear for desk, car, kitchen and bag
   Design tokens, then components. Single stylesheet, no build step.
   ========================================================================== */

:root {
  /* Ink */
  --ink:        #0D1424;
  --ink-2:      #475569;
  --ink-3:      #64748B;

  /* Brand blue — primary, CTAs, links */
  --ultra:      #2550EB;
  --ultra-deep: #1D4ED8;
  --ultra-wash: #EAF0FE;

  /* Amber — the fold highlight and accents */
  --butter:     #FCD34D;
  --butter-deep:#B45309;
  --butter-wash:#FEF6DE;

  /* Ground */
  --paper:      #FFFFFF;
  --mist:       #F8FAFD;
  --line:       #E2E8F0;
  --line-soft:  #EEF2F8;

  /* Ambient glows behind the hero */
  --glow-blue:   #93C5FD;
  --glow-indigo: #C7D2FE;
  --glow-amber:  #FDE68A;

  /* Type */
  --display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Space + shape */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw:   1200px;
  --radius: 16px;
  --radius-lg: 24px;

  /* Elevation */
  --lift-1: 0 1px 2px rgba(14, 21, 51, .06), 0 4px 14px rgba(14, 21, 51, .05);
  --lift-2: 0 2px 6px rgba(14, 21, 51, .07), 0 18px 44px rgba(14, 21, 51, .10);
  --lift-3: 0 30px 80px rgba(14, 21, 51, .18);

  /* Theme tokens (2026-10-07, dark mode): the light values are the colours these
     replaced, so the light theme looks exactly as before */
  --page:        #FFFFFF;   /* the page itself */
  --link:        #2550EB;   /* blue as text, outlines and focus rings (--ultra stays the fill) */
  --link-hover:  #1D4ED8;   /* blue text and outlines under the pointer */
  --on-ink:      #FFFFFF;   /* text on an ink-filled button or pill */
  --panel:       #0D1424;   /* the dark panels: promo bar, footer, label heads; dark in both themes */
  --on-panel:    #FFFFFF;   /* white text on those panels; softened in dark mode */
  --photo:       #F8FAFD;   /* the tile behind a product photo; stays light in both themes */
  --paper-rgb:   255, 255, 255;
  --mist-rgb:    248, 250, 253;
  --line-strong: #CBD5E1;
  --ultra-line:  #BFDBFE;
  --ultra-hover: #EFF6FF;
  --ok:          #047857;
  --ok-deep:     #065F46;
  --ok-wash:     #ECFDF5;
  --bad:         #B91C1C;
  --bad-deep:    #991B1B;
  --bad-wash:    #FEF2F2;
  --bad-line:    #FECACA;
  --bad-soft:    #FCA5A5;
  --butter-ink:  #6B4E06;
  --ink-fixed:   #0D1424;   /* text on butter: dark in both themes */
  --butter-ink-2:#4A3600;
  --orb-blue:    rgba(59, 130, 246, .5);
  --orb-indigo:  rgba(199, 210, 254, .60);
  --orb-amber:   rgba(253, 230, 138, .45);
  --sheen:       rgba(255, 255, 255, .34);
  --air-blue:    #2550EB;   /* the "email us" cards' airmail edge and stamp */
  --air-butter:  #FCD34D;
  --stamp-paper: #FFFFFF;
  --cover-blue:  #2550EB;   /* the spec leaflet's cover, in its place's color */
  --cover-butter:#FCD34D;
  --cover-on-blue:#FFFFFF;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Dark mode (2026-10-07) ----------
   <html data-theme="dark"> (set before the page draws, from the visitor's choice or their
   device: see the script in <head>) swaps the tokens above for these. Without JavaScript,
   the device's own setting picks. Printing is always light. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  --ink:        #CBD2E0;
  --ink-2:      #A5AFC5;
  --ink-3:      #8792AD;
  --ultra:      #3D63F5;
  --ultra-deep: #4466F2;
  --ultra-wash: #18244B;
  --butter:     #FCD34D;
  --butter-deep:#FBBF24;
  --butter-wash:#2B2414;
  --paper:      #131B2F;
  --mist:       #0F1628;
  --line:       #263250;
  --line-soft:  #1C263F;
  --glow-blue:   #1E3A8A;
  --glow-indigo: #312E81;
  --glow-amber:  #4A3511;
  --lift-1: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .25);
  --lift-2: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .35);
  --lift-3: 0 30px 80px rgba(0, 0, 0, .55);
  --page:        #0B1120;
  --link:        #93AAFF;
  --link-hover:  #B9C8FF;
  --on-ink:      #0D1424;
  --panel:       #182238;
  --on-panel:    #CBD2E0;
  --photo:       #CDD3DE;
  --paper-rgb:   19, 27, 47;
  --mist-rgb:    15, 22, 40;
  --line-strong: #36446A;
  --ultra-line:  #2E4180;
  --ultra-hover: #1B2A57;
  --ok:          #6EE7B7;
  --ok-deep:     #A7F3D0;
  --ok-wash:     #0E2A24;
  --bad:         #FCA5A5;
  --bad-deep:    #FECACA;
  --bad-wash:    #2A1519;
  --bad-line:    #5B2329;
  --bad-soft:    #F87171;
  --butter-ink:  #FCD34D;
  --butter-ink-2:#FDE68A;
  --ink-fixed:   #0D1424;
  --orb-blue:    rgba(59, 99, 245, .38);
  --orb-indigo:  rgba(99, 102, 241, .22);
  --orb-amber:   rgba(245, 158, 11, .12);
  --sheen:       rgba(255, 255, 255, .07);
  --air-blue:    #3D63F5;
  --air-butter:  #D9B544;
  --stamp-paper: #C9D0DD;
  --cover-blue:  #2C4BC9;
  --cover-butter:#C9A53E;
  --cover-on-blue:#E3E8F4;
  color-scheme: dark;
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ink:        #CBD2E0;
    --ink-2:      #A5AFC5;
    --ink-3:      #8792AD;
    --ultra:      #3D63F5;
    --ultra-deep: #4466F2;
    --ultra-wash: #18244B;
    --butter:     #FCD34D;
    --butter-deep:#FBBF24;
    --butter-wash:#2B2414;
    --paper:      #131B2F;
    --mist:       #0F1628;
    --line:       #263250;
    --line-soft:  #1C263F;
    --glow-blue:   #1E3A8A;
    --glow-indigo: #312E81;
    --glow-amber:  #4A3511;
    --lift-1: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .25);
    --lift-2: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .35);
    --lift-3: 0 30px 80px rgba(0, 0, 0, .55);
    --page:        #0B1120;
    --link:        #93AAFF;
    --link-hover:  #B9C8FF;
    --on-ink:      #0D1424;
    --panel:       #182238;
    --on-panel:    #CBD2E0;
    --photo:       #CDD3DE;
    --paper-rgb:   19, 27, 47;
    --mist-rgb:    15, 22, 40;
    --line-strong: #36446A;
    --ultra-line:  #2E4180;
    --ultra-hover: #1B2A57;
    --ok:          #6EE7B7;
    --ok-deep:     #A7F3D0;
    --ok-wash:     #0E2A24;
    --bad:         #FCA5A5;
    --bad-deep:    #FECACA;
    --bad-wash:    #2A1519;
    --bad-line:    #5B2329;
    --bad-soft:    #F87171;
    --butter-ink:  #FCD34D;
    --butter-ink-2:#FDE68A;
    --ink-fixed:   #0D1424;
    --orb-blue:    rgba(59, 99, 245, .38);
    --orb-indigo:  rgba(99, 102, 241, .22);
    --orb-amber:   rgba(245, 158, 11, .12);
    --sheen:       rgba(255, 255, 255, .07);
    --air-blue:    #3D63F5;
    --air-butter:  #D9B544;
    --stamp-paper: #C9D0DD;
    --cover-blue:  #2C4BC9;
    --cover-butter:#C9A53E;
    --cover-on-blue:#E3E8F4;
    color-scheme: dark;
  }
}


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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  /* On pages shorter than the window (an empty cart on a big monitor), keep the
     footer on the bottom edge instead of leaving a white strip under it. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }

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

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 .5em;
  font-weight: 700;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -.02em; }

p { margin: 0 0 1.1em; }

a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--panel); color: #fff;
  padding: .8rem 1.2rem; z-index: 999; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; top: 0; color: #fff; }

.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;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--mist { background: var(--mist); }
.section--ink { background: var(--panel); color: #C8CEE6; }
.section--ink h2, .section--ink h3 { color: var(--on-panel); }
/* ultramarine on near-black fails contrast — links go butter on dark ground */
.section--ink a { color: var(--butter); }
.section--ink a:hover { color: var(--on-panel); }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--link);
  margin: 0 0 1rem;
  display: block;
}
.section--ink .eyebrow { color: var(--butter); }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-2); max-width: 56ch; }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  padding: .95rem 1.6rem;
  border-radius: 100px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--ultra);
  color: #fff;
  box-shadow: 0 6px 20px rgba(35, 64, 232, .32);
}
.btn--primary:hover { background: var(--ultra-deep); color: #fff; box-shadow: 0 10px 28px rgba(35, 64, 232, .4); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn--butter {
  background: var(--butter);
  color: var(--ink-fixed);
  box-shadow: 0 6px 20px rgba(232, 168, 30, .3);
}
.btn--butter:hover { background: var(--butter-deep); color: var(--ink-fixed); }

.btn--outline {
  background: var(--paper);
  color: var(--link);
  border-color: var(--link);
}
.btn--outline:hover { background: var(--ultra-wash); color: var(--link-hover); border-color: var(--link-hover); }

.btn:disabled { cursor: default; }

.btn--block { width: 100%; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.05rem; }

/* ---------- Header ---------- */
.promo {
  background: var(--panel);
  color: var(--on-ink);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-align: center;
  padding: .55rem var(--gutter);
}
.promo strong { color: var(--butter); font-weight: 400; }

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(var(--paper-rgb), .97);
  border-bottom: 1px solid var(--line-soft);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.04em;
  color: var(--ink);
  text-decoration: none;
}
.logo:hover { color: var(--link); }
/* the logo mark: 26 × 26 with a 1px margin, like the SVG it replaced. In the logo's
   units the mark is 24 wide, each square 11, the gap 2, the corner radius 2.5 */
.logo__mark {
  --mark: 24px;
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--mark) * 2 / 24);
  width: var(--mark);
  height: var(--mark);
  padding: 1px;
  box-sizing: content-box;
  /* no baseline of its own, so it lines up with the wordmark exactly as the SVG did
     (otherwise the first square's bottom becomes the baseline and the footer grows 2px) */
  contain: layout;
}
.logo__mark i { display: block; border-radius: calc(var(--mark) * 2.5 / 24); background: #2340E8; }
.logo__mark i:nth-child(2), .logo__mark i:nth-child(3) { background: #FFC94D; }
/* in the header it unfolds as each page arrives, like the 404's "0", only quicker */
.header .logo__mark i { --depth: 55px; animation: tileUnfold .42s var(--ease) backwards; }
.header .logo__mark i:nth-child(1) { transform-origin: 100% 50%; animation-delay: .05s; }
.header .logo__mark i:nth-child(2) { transform-origin: 0 50%;    animation-delay: .11s; --from: 100deg; }
.header .logo__mark i:nth-child(3) { transform-origin: 100% 50%; animation-delay: .17s; }
.header .logo__mark i:nth-child(4) { transform-origin: 0 50%;    animation-delay: .23s; --from: 100deg; }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--link); }

.header__cta { display: flex; align-items: center; gap: .9rem; }

.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.15rem;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: border-color .18s var(--ease), color .18s;
}
.cart-btn:hover, .cart-btn[aria-current="page"] { border-color: var(--ink); color: var(--ink); }
.cart-btn svg { flex: none; }

.cart-btn__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 .4rem;
  border-radius: 100px;
  background: var(--butter);
  color: var(--ink-fixed);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
}
/* the class sets display, so [hidden] needs its own rule to win */
.cart-btn__count[hidden] { display: none; }

/* a quick pop when "Add to cart" leaves the customer on the page */
.cart-btn__count.is-bumped { animation: bump .5s var(--ease); }
@keyframes bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); background: var(--butter-deep); }
  100% { transform: scale(1); }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .5rem .7rem;
  cursor: pointer;
  color: var(--ink);
}

/* ==========================================================================
   HERO — the signature: a four-sided fold that turns through the four zones
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, var(--ultra-wash) 0%, transparent 58%),
    linear-gradient(180deg, var(--page) 0%, var(--mist) 100%);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}

/* faint blueprint grid — the one piece of ambience */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(90% 70% at 50% 30%, #000 0%, transparent 78%);
  opacity: .8;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__copy { max-width: 42ch; }

.hero h1 { margin-bottom: .35em; }

/* word-by-word reveal on load */
.reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) rotate(1.5deg);
  animation: word-in .45s var(--ease) forwards;
}
@keyframes word-in {
  to { opacity: 1; transform: none; }
}

/* the word "fold" gets the butter underline */
.mark-fold {
  position: relative;
  white-space: nowrap;
}
.mark-fold::after {
  content: "";
  position: absolute;
  left: -.04em; right: -.04em; bottom: .13em;
  height: .24em;
  background: var(--butter);
  border-radius: 3px;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  animation: swipe .45s var(--ease) .2s forwards;
}
@keyframes swipe { to { transform: scaleX(1); } }

.hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink-2);
  opacity: 0;
  animation: word-in .45s var(--ease) .1s forwards;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin: 1.9rem 0 1.6rem;
  opacity: 0;
  animation: word-in .45s var(--ease) .15s forwards;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  opacity: 0;
  animation: word-in .45s var(--ease) .2s forwards;
}
.trust li { margin: 0; display: flex; align-items: center; gap: .4rem; }
.trust svg { flex: none; color: var(--link); }

/* ---------- The fold ---------- */
.fold {
  position: relative;
  perspective: 1600px;
  opacity: 0;
  animation: word-in .5s var(--ease) .05s forwards;
}

.fold__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-inline: auto;
  transform-style: preserve-3d;
  --depth: 230px;   /* half the box: how far each face sits from the center */
}

.fold__face {
  position: absolute;
  inset: 0;
  margin: 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--lift-2);
  overflow: hidden;
  backface-visibility: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
}

/* Four faces of a box, turning right to left around a vertical axis: the face in
   view slides off to the left as the next one comes in from the right. Each face
   turns around the box's center on its own (--base is where it starts, --turn
   counts quarter-turns). The box itself never rotates: parked edge-on at a quarter
   turn, it would stop browsers from working out which face a click lands on.
   Perspective magnifies the front face by ~1.17x, so .fold__dots below carries
   enough top margin to stay clear of the overhang. */
.fold__face {
  transform: rotateY(calc((var(--base) - var(--turn, 0) * 90) * 1deg)) translateZ(var(--depth));
  /* site.js sets these per turn: slow and even on its own, quick when asked */
  transition: transform var(--turn-ms, .65s) var(--turn-ease, var(--ease));
}
/* the light on each face: site.js darkens it as the face turns away */
.fold__shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: #0B1220;
  opacity: 0;
  pointer-events: none;
}
.fold__face:nth-child(1) { --base: 0; }
.fold__face:nth-child(2) { --base: 90; }    /* waiting just off to the right */
.fold__face:nth-child(3) { --base: 180; }
.fold__face:nth-child(4) { --base: -90; }

/* each face links to its product; faces turned away can't catch a click */
.fold__face[aria-hidden="true"] { pointer-events: none; }
.fold__face:hover .fold__name, .fold__face:focus-visible .fold__name { color: var(--link); }
.fold__face:hover .fold__go { transform: translateX(3px); }
.fold__face:focus-visible { border-radius: var(--radius-lg); outline-offset: 4px; }

.fold__media {
  position: relative;
  overflow: hidden;
  background: var(--mist);
}
.fold__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.fold__tag {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  padding: .35rem .7rem;
  border-radius: 100px;
}

.fold__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.3rem 1.15rem;
  border-top: 1px solid var(--line-soft);
}
.fold__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -.02em;
}
.fold__meta { display: flex; align-items: baseline; gap: .75rem; min-width: 0; }
.fold__price { font-family: var(--mono); font-size: .95rem; color: var(--ink-2); }
.fold__go {
  flex: none;
  font-weight: 700;
  font-size: .9rem;
  color: var(--link);
  transition: transform .2s var(--ease);
}

/* zone dots */
.fold__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: clamp(3rem, 6vw, 4.25rem);
}
.fold__dot {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-3);
  padding: .4rem .85rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.fold__dot[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.fold__dot:hover { border-color: var(--ink-3); }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.crumbs {
  padding-block: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: .5rem; }
.crumbs li::after { content: "/"; color: var(--line); }
.crumbs li:last-child::after { content: none; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--link); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ==========================================================================
   Product detail
   ========================================================================== */

.pdp__was { font-family: var(--mono); font-size: 1rem; color: var(--ink-3); text-decoration: line-through; }
.pdp__save {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--butter-wash);
  color: var(--butter-deep);
  padding: .3rem .6rem;
  border-radius: 100px;
}

.pdp__buy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: .75rem;
}
/* space is reserved so the confirmation doesn't shove the page down */
.pdp__added {
  min-height: 1.65em;
  margin: .85rem 0 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.review-note {
  border: 2px dashed var(--butter-deep);
  background: var(--butter-wash);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  font-size: .9rem;
  color: var(--butter-ink);
  margin-bottom: 2rem;
}
.review-note strong { color: var(--butter-ink-2); }
.review-note code {
  font-family: var(--mono);
  font-size: .85em;
  background: rgba(0,0,0,.06);
  padding: .1em .4em;
  border-radius: 4px;
}

.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.review__stars { color: var(--butter-deep); letter-spacing: .1em; font-size: 1rem; }
.review__body { margin: 0; color: var(--ink-2); font-size: .96rem; }
.review__who {
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid var(--line-soft);
  font-size: .85rem;
}
.review__name { font-weight: 700; color: var(--ink); display: block; }
.review__meta { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 820px; }

.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--link);
  line-height: 1;
  transition: transform .25s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--link); }
.faq__answer { padding: 0 0 1.5rem; max-width: 68ch; color: var(--ink-2); margin: 0; }

/* ==========================================================================
   Promise band
   ========================================================================== */
.promise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.promise__item { display: flex; flex-direction: column; gap: .5rem; }
.promise__n {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--butter);
  line-height: 1;
  letter-spacing: -.04em;
}
.promise__t { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--on-panel); }
.promise__d { font-size: .92rem; color: #A7B0D0; margin: 0; }

.qty button:hover:not(:disabled) { background: var(--mist); }
@keyframes pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mist);
  min-height: 340px;
  display: grid;
  place-items: center;
}
.map-frame iframe { width: 100%; height: 380px; border: 0; display: block; }

.map-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--panel);
  color: #98A2C4;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .92rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer h4 {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-panel);
  font-weight: 400;
  margin-bottom: 1rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .55rem; }
.footer a { color: #98A2C4; text-decoration: none; }
.footer a:hover { color: var(--butter); }
.footer__logo { color: var(--on-panel); margin-bottom: .9rem; }
.footer__logo:hover { color: var(--on-panel); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-family: var(--mono);
  font-size: .74rem;
  color: #8D97B5;
}
.footer__promise {
  color: var(--butter);
  font-family: var(--mono);
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .8rem;
}

/* the email sign-up, across the top of the footer (2026-10-01) */
.footsign {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  align-items: center;
  gap: 1.25rem 2.5rem;
  margin-bottom: clamp(2.25rem, 5vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: rgba(255, 255, 255, .035);
  perspective: 900px;
}
.footsign__title {
  margin: 0 0 .35rem;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--on-panel);
}
.footsign__note { margin: 0; font-size: .85rem; line-height: 1.5; color: #98A2C4; }
.footsign__note a { color: #C7D0EE; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(199, 208, 238, .4); }
.footsign__note a:hover { color: var(--butter); }
.footsign__row { display: flex; gap: .6rem; }
.footsign__input {
  flex: 1;
  min-width: 0;
  padding: .85rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 100px;
  background: rgba(255, 255, 255, .06);
  font: inherit;
  font-size: .95rem;
  color: var(--on-panel);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.footsign__input::placeholder { color: #6E779B; }
.footsign__input:hover { border-color: rgba(255, 255, 255, .3); }
.footsign__input:focus { outline: none; border-color: var(--butter); background: rgba(255, 255, 255, .09); box-shadow: 0 0 0 3px rgba(252, 211, 77, .2); }
.footsign__input[aria-invalid="true"] { border-color: var(--bad-soft); }
.footsign__btn { flex: none; padding: .8rem 1.35rem; font-size: .95rem; box-shadow: none; }
.footsign__btn:focus-visible { outline: 2px solid var(--butter); outline-offset: 3px; }
.footsign__btn:disabled { opacity: .75; }
.footsign__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.footsign__err { margin: .55rem 0 0 1.2rem; font-size: .84rem; color: var(--bad-soft); }
.footsign__err[hidden], .footsign__done[hidden], .footsign__form[hidden] { display: none; }
.footsign__done { display: flex; align-items: flex-start; gap: 1rem; outline: none; }
.footsign__env { flex: none; color: var(--butter); }
.footsign__flap { transform-box: view-box; transform-origin: 20px 12px; }
.footsign__done.is-in .footsign__flap { animation: envFlap .5s cubic-bezier(.3, 1.4, .5, 1) .3s backwards; }
@keyframes envFlap { from { transform: scaleY(-1); } }
.footsign__doneTitle { margin: 0 0 .15rem; font-weight: 800; color: var(--on-panel); }
.footsign__doneText { margin: 0 0 .4rem; font-size: .88rem; line-height: 1.5; }
.footsign__doneText b { color: var(--on-panel); font-weight: 600; word-break: break-all; }
.footsign__again { padding: 0; border: 0; background: none; font: inherit; font-size: .85rem; color: #C7D0EE; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.footsign__again:hover { color: var(--butter); }
.footsign__again:focus-visible { outline: 2px solid var(--butter); outline-offset: 2px; }
.footsign.is-on .footsign__title::before {
  content: "";
  display: inline-block;
  width: .55em; height: .3em;
  margin: 0 .55em .18em .1em;
  border-left: 3px solid var(--butter);
  border-bottom: 3px solid var(--butter);
  transform: rotate(-45deg);
}
@media (max-width: 860px) {
  .footsign { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .footsign__row { flex-direction: column; }
  .footsign__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .footsign__done.is-in .footsign__flap { animation: none; }
}

/* ==========================================================================
   Sticky mobile CTA
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  align-items: center;
  gap: .9rem;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(var(--paper-rgb),.985);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(14,21,51,.08);
}
.sticky-cta__text { flex: 1; min-width: 0; }
.sticky-cta__thumb { display: none; }
.sticky-cta__label {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sticky-cta__price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.sticky-cta .btn { flex: none; padding: .8rem 1.4rem; }
/* product pages carry two buttons in the bar, so each gets tighter */
.sticky-cta--pair { gap: .5rem; }
.sticky-cta--pair .btn { padding: .75rem .95rem; font-size: .9rem; }
/* the cart page hides the bar when there's nothing to check out */
.sticky-cta[hidden] { display: none; }

/* ==========================================================================
   Prose (legal pages)
   ========================================================================== */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 2.5rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.8rem; }
.prose ul { padding-left: 1.3em; }
.prose__updated {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-3);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  /* With the card under the buttons, its 3D depth draws it up to 74px above its own
     box (mid-turn, a corner faces you), so the gap has to clear that or it covers
     the trust row */
  .hero__inner { grid-template-columns: 1fr; row-gap: 5.5rem; }
  .hero__copy { max-width: none; }
  /* Copy leads on narrow screens so the headline and the buy button are both
     above the fold. The card is the reward for the first scroll. */
  .fold__stage { max-width: 380px; --depth: 190px; }

  /* the nav is still showing here, so the cart button drops to icon + count */
  .cart-btn { padding: .62rem .85rem; }
  .cart-btn__label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  .nav { display: none; }
  .nav-toggle { display: block; }
  .nav.is-open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1rem;
  }
  .nav.is-open a { padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }

  .fold__stage { max-width: min(300px, 78vw); --depth: min(150px, 39vw); }
  .hero__inner { row-gap: 3.5rem; }   /* the smaller card reaches up to 45px */
  .footer__grid { grid-template-columns: 1fr; }

  /* sticky CTA appears, and the page gets room for it */
  .sticky-cta { display: flex; }
  body { padding-bottom: 78px; }
}

/* ==========================================================================
   Reduced motion — hold the fold still, no auto-advance
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal-word, .hero__sub, .hero__actions, .trust, .fold { opacity: 1; transform: none; }
  .mark-fold::after { transform: scaleX(1); }
}

@media print {
  .header, .sticky-cta, .promo, .footer { display: none; }
}

/* ==========================================================================
   Stitch UI layer
   The design from stitch_animated_ui_enhancement, ported to plain CSS so the
   site keeps working with no Tailwind, no CDN and no build step for styles.
   Everything here is opt-in polish on top of the components above.
   ========================================================================== */

h1, h2 { font-weight: 800; letter-spacing: -.035em; }
h1 { line-height: 1.02; }

/* ---------- Ambient background: drifting grid, dots and soft glows ---------- */

.ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ambient__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(37, 80, 235, .16) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .5;
}
.orb {
  position: absolute;
  border-radius: 50%;
}
.orb--blue   { width: 540px; height: 540px; top: -190px; left: 16%;  background: var(--glow-blue);   opacity: .35; }
.orb--indigo { width: 460px; height: 460px; top: 26%;   right: -120px; background: var(--glow-indigo); opacity: .45; }
.orb--amber  { width: 480px; height: 480px; bottom: -180px; left: 4%; background: var(--glow-amber);  opacity: .30; }

/* the hero's own content has to sit above the glows */
.hero__inner { position: relative; z-index: 1; }

/* ---------- Announcement bar ---------- */
.promo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: linear-gradient(90deg, #0D1424 0%, #16213C 50%, #0D1424 100%);
  color: #CBD5E1;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.promo strong { color: var(--butter); font-weight: 500; }
.promo__live {
  position: relative;
  display: inline-flex;
  width: 8px; height: 8px;
  flex: none;
}
.promo__live::before,
.promo__live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #34D399;
}
.promo__live::before { animation: ping 2s cubic-bezier(0, 0, .2, 1) infinite; }
.promo__live::after  { box-shadow: 0 0 8px #34D399; }
.promo__sep { color: #475569; }
.promo svg { color: var(--butter); flex: none; }

@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }

/* ---------- Header: floating pill navigation ---------- */
.header {
  background: rgba(var(--mist-rgb), .97);
  border-bottom: 1px solid rgba(226, 232, 240, .7);
}
.header__bar { min-height: 78px; }

.nav {
  gap: .25rem;
  padding: .4rem .5rem;
  background: rgba(var(--paper-rgb), .92);
  border: 1px solid var(--line);
  border-radius: 100px;
  box-shadow: 0 6px 20px -8px rgba(13, 20, 36, .18);
}
.nav a {
  padding: .5rem .95rem;
  border-radius: 100px;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav a:hover { background: var(--ultra-wash); color: var(--link); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--on-ink); }

.cart-btn {
  background: var(--paper);
  box-shadow: 0 6px 20px -8px rgba(13, 20, 36, .18);
}
.cart-btn:hover { border-color: var(--ultra-line); color: var(--link); }
.cart-btn__count { background: var(--ultra); color: #fff; }

/* ---------- Buttons: shimmer and magnetic pull ---------- */
/* The gradient spans the whole button, border included. Sized to the inside only, it repeated
   into the 2px transparent border and showed seams at the rounded ends. Set here, after the
   `background` shorthands above, which reset the origin. */
.btn--primary {
  background-image: linear-gradient(110deg, #2550EB 0%, #1D4ED8 55%, #3B82F6 100%);
  background-origin: border-box;
  box-shadow: 0 10px 28px -8px rgba(37, 80, 235, .55);
}
.btn--primary:hover {
  background-image: linear-gradient(110deg, #1D4ED8 0%, #2550EB 50%, #1D4ED8 100%);
  background-origin: border-box;
  box-shadow: 0 14px 34px -8px rgba(37, 80, 235, .65);
}
.btn--ghost {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: 0 6px 20px -10px rgba(13, 20, 36, .25);
}
.btn--ghost:hover { border-color: var(--ultra-line); color: var(--link); }

/* JS nudges this toward the pointer; harmless if the script never runs */
.magnetic { transition: transform .25s cubic-bezier(.25, 1, .5, 1); will-change: transform; }

/* ---------- The highlight drawn under "folds" ---------- */
.mark-fold::after {
  /* Plus Jakarta sits lower than the previous face, so the marker drops with it */
  bottom: .02em;
  height: .2em;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(251, 191, 36, .35);
  animation: highlightDraw .45s var(--ease) .2s forwards;
}
@keyframes highlightDraw {
  0%   { transform: scaleX(.1) rotate(-1deg); opacity: .2; }
  100% { transform: scaleX(1) rotate(-.5deg); opacity: .95; }
}

/* ---------- The fold card: deeper shadow and a sheen that follows the mouse ---------- */
.fold__face {
  border-radius: 26px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .35), 0 8px 20px -8px rgba(15, 23, 42, .18);
  border-color: rgba(226, 232, 240, .9);
}
.fold__tag {
  background: rgba(13, 20, 36, .72);
  border: 1px solid rgba(255, 255, 255, .14);
}

/* ---------- Zone pills under the card ---------- */
.fold__dot {
  background: var(--paper);
  font-weight: 600;
  box-shadow: 0 4px 12px -6px rgba(13, 20, 36, .25);
}
.fold__dot[aria-selected="true"] { box-shadow: 0 10px 25px -5px rgba(13, 20, 36, .35); }

/* the announcement bar has to survive a phone without turning into a tangle */
@media (max-width: 720px) {
  .promo {
    flex-wrap: wrap;
    row-gap: .1rem;
    column-gap: .45rem;
    font-size: .68rem;
    line-height: 1.5;
    padding-block: .5rem;
  }
  .promo__live, .promo__sep { display: none; }
}

/* ==========================================================================
   Hero showcase — the mockup's card, tabs, caption and zone strip
   ========================================================================== */
/* The card's height is set so the image area lands on the mockup's 1.12
   landscape ratio: image width (card - padding) / 1.12, plus the caption row. */
.fold__stage { max-width: 512px; aspect-ratio: 512 / 521; --depth: 256px; }

.fold__face {
  padding: 1rem;
  background: var(--paper);
  border: 1px solid #F1F5F9;
  border-radius: 26px;
  box-shadow: 0 25px 50px -12px rgba(100, 116, 139, .45);
  grid-template-rows: 1fr auto;
}
.fold__media {
  border-radius: 18px;
  background: linear-gradient(180deg, #0F172A 0%, #020617 100%);
}
.fold__media img { transition: transform .7s ease-out; }
.fold__face:hover .fold__media img { transform: scale(1.05); }

.fold__tag {
  top: 1rem; left: 1rem;
  padding: .32rem .9rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5);
}
.fold__live {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .75rem;
  border-radius: 100px;
  background: rgba(37, 80, 235, .95);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45);
}
.fold__live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6EE7B7;
}

.fold__label {
  border-top: 0;
  padding: 1rem .45rem .2rem;
  align-items: center;
}
.fold__name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.fold__price { font-family: var(--body); font-size: 1.1rem; font-weight: 700; color: var(--ink-3); }
.fold__go {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .65rem;
  border-radius: 10px;
  font-size: 1rem;
  transition: background-color .2s var(--ease);
}
.fold__go svg { transition: transform .2s var(--ease); }
.fold__face:hover .fold__go { background: var(--ultra-hover); }
.fold__face:hover .fold__go svg { transform: translateX(3px); }

/* tabs sit in their own floating pill */
.fold__tabs {
  width: fit-content;
  /* perspective draws the front card larger than its layout box, so the tabs
     need clearance or they sit under its bottom edge */
  margin: clamp(3.5rem, 6vw, 4.5rem) auto 0;
  display: flex;
  justify-content: center;
  gap: .4rem;
  padding: .375rem;
  background: rgba(var(--paper-rgb), .8);
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 100px;
  box-shadow: var(--lift-1);
}
.fold__dot {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: .5rem 1.2rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.fold__dot:hover { color: var(--ink); }
/* pointing at the selected tab must not turn its label ink-on-ink */
.fold__dot[aria-selected="true"]:hover { color: var(--on-ink); }

/* the tabs, with the stop / start button hanging off their right end, so the
   tabs themselves stay centered under the card */
.fold__controls { position: relative; width: fit-content; margin: clamp(3.5rem, 6vw, 4.5rem) auto 0; }
.fold__controls .fold__tabs { margin: 0; }
.fold__auto {
  position: absolute;
  top: 50%;
  left: calc(100% + .5rem);
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 50%;
  background: rgba(var(--paper-rgb), .94);
  box-shadow: var(--lift-1);
  color: var(--ink-3);
  cursor: pointer;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.fold__auto[hidden] { display: none; }
.fold__auto:hover { color: var(--ink); }
.fold__auto:active { transform: scale(.92); }
.fold__auto:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.fold__auto svg { fill: currentColor; }
.fold__auto-play,
.fold__auto.is-paused .fold__auto-pause { display: none; }
.fold__auto.is-paused .fold__auto-play { display: block; }

/* the dark pill behind the chosen tab: site.js moves it (and lights the labels)
   frame by frame with the arriving card, so no CSS transition of its own */
.fold__tabs { position: relative; }
.fold__tabs > .zpick__glider { transition: opacity .2s ease; }
.fold__tabs.has-glider .fold__dot {
  position: relative;
  z-index: 1;
  transition: color .2s var(--ease);
}
.fold__tabs.has-glider .fold__dot[aria-selected="true"] { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .fold__tabs > .zpick__glider, .fold__tabs.has-glider .fold__dot { transition: none; }
}
.fold__desc {
  max-width: 26rem;
  margin: .85rem auto 0;
  text-align: center;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-3);
  transition: opacity .3s var(--ease);
}

/* the eyebrow doubles as a zone switcher */
.eyebrow--zones { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; color: var(--ink-3); }
.eyebrow--zones span { color: var(--line-strong); }
.eyebrow__zone {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: inherit;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.eyebrow__zone:hover { color: var(--link); }
.eyebrow__zone[aria-current="true"] { color: var(--link); font-weight: 700; }

/* four zone cards under the hero */
.zonestrip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  padding-top: clamp(2rem, 4vw, 3.25rem);
}
.zonestrip__card {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(226, 232, 240, .8);
  border-radius: 18px;
  background: rgba(var(--paper-rgb), .7);
  text-decoration: none;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.zonestrip__card:hover { background: var(--paper); box-shadow: var(--lift-1); }
.zonestrip__card.is-current { border-color: var(--ultra-line); background: var(--paper); box-shadow: var(--lift-1); }
.zonestrip__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.zonestrip__n {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--link);
}
.zonestrip__badge {
  font-size: .6rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 6px;
  background: var(--ultra-hover);
  color: #1D4ED8;
}
.zonestrip__name { font-weight: 700; color: var(--ink); transition: color .2s var(--ease); }
.zonestrip__card:hover .zonestrip__name { color: var(--link); }
.zonestrip__line { font-size: .78rem; color: var(--ink-3); }

@media (max-width: 1000px) {
  .fold__stage { max-width: 440px; aspect-ratio: 440 / 455; --depth: 220px; }
  .zonestrip { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 720px) {
  .fold__stage { max-width: min(340px, 82vw); aspect-ratio: 340 / 358; --depth: min(170px, 41vw); }
  .fold__name { font-size: 1.25rem; }
  .fold__tabs { gap: .15rem; padding: .3rem; }
  .fold__dot { padding: .45rem .7rem; font-size: .62rem; letter-spacing: .1em; }
  .fold__auto { width: 2.4rem; height: 2.4rem; margin-top: -1.2rem; left: calc(100% + .4rem); }
}

/* the little count beside "The four zones", as in the design */

/* ==========================================================================
   Performance pass
   Blur is charged per pixel, every frame it is composited. On a large screen
   fifteen blurred surfaces and three 540px blurred circles is enough to drop
   frames while scrolling. Same look, far cheaper:
     - the glows are gradients now, not blurred circles
     - backdrop blur is kept only on the header, where the page scrolls under it
     - the background grid no longer animates its paint every frame
   ========================================================================== */
.orb { filter: none; }
.orb--blue   { background: radial-gradient(circle closest-side, var(--orb-blue), transparent 72%); opacity: .8; }
.orb--indigo { background: radial-gradient(circle closest-side, var(--orb-indigo), transparent 72%); opacity: .8; }
.orb--amber  { background: radial-gradient(circle closest-side, var(--orb-amber), transparent 72%); opacity: .75; }
/* the top glow follows the pointer (site.js): moved by transform alone, on its own layer */
.orb.can-follow { will-change: transform; }

.fold__tabs      { background: rgba(var(--paper-rgb), .94); }
.zonestrip__card { background: rgba(var(--paper-rgb), .78); }
.fold__tag       { background: rgba(0, 0, 0, .68); }
.fold__live      { }

/* ==========================================================================
   The wordmark folds
   "Four" and "fold" breathe like paper, a shine sweeps across, and the two
   halves fold apart from the crease when you point at them.
   ========================================================================== */
.logo__word {
  display: inline-flex;
  align-items: center;
  perspective: 800px;
}
.logo__syl {
  display: inline-flex;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.logo__syl--four { transform-origin: right center; }
.logo__syl--fold { transform-origin: left center; }
.logo__char {
  display: inline-block;
  color: var(--ink);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.logo__crease {
  width: 1.5px;
  align-self: stretch;
  margin-block: .18em;
  background: linear-gradient(to bottom, transparent, rgba(37, 80, 235, .35), transparent);
  opacity: 0;
  transition: opacity .3s var(--ease), box-shadow .3s var(--ease);
}
.logo:hover .logo__crease { opacity: .9; box-shadow: -2px 0 6px rgba(37, 80, 235, .35); }
.logo:hover .logo__syl--four { transform: rotateY(-18deg) skewY(-2deg) translateZ(3px); }
.logo:hover .logo__syl--fold { transform: rotateY(20deg) skewY(2deg) translateZ(4px); }
.logo:hover .logo__syl--fold .logo__char:nth-child(1) { transform: rotateY(-12deg) translateY(-1px); }
.logo:hover .logo__syl--fold .logo__char:nth-child(2) { transform: rotateX(10deg); }
.logo:hover .logo__syl--fold .logo__char:nth-child(3) { transform: rotateX(-12deg) translateY(1px); }
.logo:hover .logo__syl--fold .logo__char:nth-child(4) { transform: rotateY(14deg); }

/* zone cards lift and glow, and the bell rings */
.zonestrip__card:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -18px rgba(37, 80, 235, .45); border-color: var(--ultra-line); }
.zonestrip__card { transform: translateY(0); }
.promo:hover svg { animation: bellRing .7s ease-in-out; transform-origin: top center; }
@keyframes bellRing {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(12deg); } 40% { transform: rotate(-10deg); }
  60% { transform: rotate(6deg); }  80% { transform: rotate(-4deg); }
}

/* the wordmark's shine is dark-on-light; on the dark footer it needs the reverse */
.footer__logo .logo__char { color: var(--on-panel); }

/* ---------- Toast: confirms an add to cart, then gets out of the way ---------- */
.toast {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.25rem;
  border-radius: 100px;
  background: var(--panel);
  color: var(--on-ink);
  font-weight: 600;
  font-size: .92rem;
  box-shadow: 0 20px 40px -12px rgba(13, 20, 36, .5);
  transform: translateY(6rem);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.toast.is-shown { transform: translateY(0); opacity: 1; }
.toast__tick {
  display: grid;
  place-items: center;
  width: 1.65rem; height: 1.65rem;
  border-radius: 50%;
  background: #10B981;
  font-size: .85rem;
}
@media (max-width: 720px) { .toast { right: 1rem; left: 1rem; bottom: 5.5rem; justify-content: center; } }

/* ==========================================================================
   Shop — pick a zone: the other cards fold shut along their top edge and the
   zone's own unfold into place. Everything else here stays quiet around that.
   ========================================================================== */
.shophero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line-soft);
}
.shophero .orb--blue  { top: -300px; left: 42%; }
.shophero .orb--amber { bottom: -340px; left: -160px; }
.shophero__inner { position: relative; z-index: 1; }
.shophero__title {
  margin: 0 0 .9rem;
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: -.04em;
}
.shophero .lede { margin: 0; }

/* shop.html#desk lands on the picker, clear of the sticky header */
.shop__anchor { display: block; scroll-margin-top: 96px; }

.shopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}

/* the zone picker: the same floating pill as the home page's zone tabs */
.zpick {
  display: flex;
  gap: .3rem;
  max-width: 100%;
  padding: .375rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(var(--paper-rgb), .92);
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 100px;
  box-shadow: var(--lift-1);
}
.zpick::-webkit-scrollbar { display: none; }
.zpick__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .62rem 1.1rem;
  border: 0;
  border-radius: 100px;
  background: transparent;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.zpick__btn:hover { color: var(--ink); background: var(--mist); }
.zpick__btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 10px 25px -5px rgba(13, 20, 36, .35);
}
.zpick__btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.zpick__n {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 .3rem;
  border-radius: 100px;
  background: var(--ultra-wash);
  color: var(--link);
  font-size: .66rem;
  letter-spacing: 0;
}
.zpick__btn[aria-pressed="true"] .zpick__n { background: var(--butter); color: var(--ink-fixed); }
.zpick__caption {
  margin: .9rem 0 0 1.1rem;
  max-width: 62ch;
  min-height: 1.5em;
  font-size: .9rem;
  color: var(--ink-3);
}

.sortpick {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .375rem .375rem .375rem 1.1rem;
  background: rgba(var(--paper-rgb), .92);
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 100px;
  box-shadow: var(--lift-1);
}
.sortpick__label {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sortpick__select {
  appearance: none;
  -webkit-appearance: none;
  padding: .55rem 2.3rem .55rem .95rem;
  border: 0;
  border-radius: 100px;
  background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230D1424' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .85rem center;
  font-family: var(--body);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.sortpick__select:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---------- the grid ---------- */
.shopgrid { padding-block: clamp(1.6rem, 3.5vw, 2.4rem) clamp(3rem, 7vw, 5rem); }
/* The two offers (Complete the four, free shipping) have a line of their own that
   never changes with the zone; "Showing 3 for the desk" sits under them, just above
   the products, where its changing length can't push anything around. */
.shopgrid__top {
  display: grid;
  grid-template-columns: minmax(0, 32rem) auto;
  justify-content: space-between;
  align-items: center;
  gap: 1.1rem 2rem;
  margin-bottom: 1.25rem;
}
.shopgrid__top > .b4 { grid-column: 1; grid-row: 1; }
.shopgrid__top > .shipmeter { grid-column: 2; grid-row: 1; }
.shopgrid__top > .shopgrid__count { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
@media (max-width: 860px) {
  .shopgrid__top { grid-template-columns: minmax(0, 1fr); }
  .shopgrid__top > .shipmeter { grid-column: 1; grid-row: 2; }
  .shopgrid__top > .shopgrid__count { grid-row: 3; }
}
.shopgrid__count {
  margin: 0;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* the free-shipping meter follows the real cart and the checkout's own rule */
.shipmeter { display: flex; align-items: center; gap: .9rem; }
.shipmeter__text { margin: 0; font-size: .86rem; color: var(--ink-2); }
.shipmeter__text strong { color: var(--ink); }
.shipmeter__track {
  width: 150px;
  height: 6px;
  overflow: hidden;
  border-radius: 100px;
  background: var(--line-soft);
}
.shipmeter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ultra), #60A5FA);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.shipmeter.is-free .shipmeter__fill { background: #10B981; }

.pgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 1080px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: .6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  transform-origin: 50% 0;       /* the crease every fold turns on */
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  animation: unfold .42s var(--ease) calc(var(--i, 0) * 45ms) backwards;
}
/* after the first load, the script runs every fold itself */
.pgrid.is-live .pcard { animation: none; }
.pcard[hidden] { display: none; }
.pcard:hover {
  transform: translateY(-4px);
  border-color: var(--ultra-line);
  box-shadow: 0 24px 45px -20px rgba(13, 20, 36, .35);
}
@keyframes unfold {
  from { opacity: 0; transform: perspective(900px) rotateX(-78deg); }
  to   { opacity: 1; transform: none; }
}

/* a zone in the address: only that zone's cards are ever drawn */
html[data-shop-zone="desk"]    .pcard:not([data-zone="desk"]),
html[data-shop-zone="car"]     .pcard:not([data-zone="car"]),
html[data-shop-zone="kitchen"] .pcard:not([data-zone="kitchen"]),
html[data-shop-zone="bag"]     .pcard:not([data-zone="bag"]) { display: none; }

.pcard__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px;
  background: var(--photo);
}
.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__badge {
  position: absolute;
  top: .7rem; left: .7rem;
  padding: .3rem .62rem;
  border-radius: 100px;
  background: var(--butter);
  color: var(--ink-fixed);
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px -4px rgba(180, 83, 9, .5);
}
/* the product's standout fact, in the hero card's blue pill */
.pcard__spec {
  position: absolute;
  left: .7rem; bottom: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  max-width: calc(100% - 1.4rem);
  padding: .32rem .72rem;
  border-radius: 100px;
  background: rgba(37, 80, 235, .92);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45);
}
.pcard__spec i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #6EE7B7; }

.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 1rem .55rem .45rem; }
.pcard__zone {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--link);
}
.pcard__name { margin: .35rem 0 .3rem; font-size: 1.2rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.pcard__link { color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
/* the whole card is the link; Add to cart sits above it */
.pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pcard__link:focus-visible { outline: none; }
.pcard__link:focus-visible::after { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 22px; }
.pcard:hover .pcard__link { color: var(--link); }
.pcard__sub { margin: 0 0 1.1rem; font-size: .86rem; line-height: 1.45; color: var(--ink-3); }
.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: auto;
}
.pcard__price { font-size: 1.12rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.pcard__was { margin-left: .25rem; font-size: .82rem; font-weight: 500; color: var(--ink-3); }
.pcard__add {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .62rem 1rem;
  border: 0;
  border-radius: 100px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .15s var(--ease);
}
.pcard__add::before { content: "+"; font-size: 1.05rem; line-height: 0; }
.pcard__add:hover { background: var(--ultra); }
.pcard__add:active { transform: scale(.96); }
.pcard__add:disabled { background: #10B981; cursor: default; }
.pcard__add:disabled::before { content: none; }
.pcard__add:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---------- the ask, on the ink panel ---------- */
.shopask { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
/* ---------- The "email us" cards: airmail envelopes ----------
   "Still stuck?" on the home page and "Not sure which one you need?" here. A paper
   card with a striped airmail edge in the brand's blue and butter, and a postage
   stamp stuck on its corner carrying the promise (a person replies within 4 hours).
   It sits a little crooked and straightens when the card is pointed at. */
.airmail {
  position: relative;
  border: 6px solid transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    repeating-linear-gradient(-45deg,
      var(--air-blue) 0 14px, var(--paper) 14px 20px,
      var(--air-butter) 20px 34px, var(--paper) 34px 40px) border-box;
  box-shadow: 0 22px 44px -30px rgba(13, 20, 36, .45);
  color: var(--ink-2);
}
.mailstamp {
  --r: 3px;                                   /* the perforation's holes */
  position: absolute;
  top: -26px; right: 14px;
  width: 66px; height: 80px;
  padding: calc(2 * var(--r));
  box-sizing: border-box;
  background:
    radial-gradient(var(--r), #0000 97%, var(--stamp-paper)) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(var(--stamp-paper) 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  filter: drop-shadow(0 6px 8px rgba(13, 20, 36, .24));
  transform: rotate(7deg);
  transition: transform .45s var(--ease);
  pointer-events: none;
}
.airmail:hover .mailstamp,
.airmail:focus-within .mailstamp { transform: rotate(1deg) translateY(-2px); }
.mailstamp__face {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--air-blue);
}
/* the logo's four squares, its blue ones white on the blue stamp */
.mailstamp__mark { display: grid; grid-template-columns: repeat(2, 6px); gap: 2px; margin-bottom: 1px; }
.mailstamp__mark i { width: 6px; height: 6px; border-radius: 1.5px; background: rgba(255, 255, 255, .92); }
.mailstamp__mark i:nth-child(2), .mailstamp__mark i:nth-child(3) { background: var(--butter); }
.mailstamp__hrs { font: 800 1.3rem/1 var(--display); letter-spacing: -.04em; color: var(--butter); }
.mailstamp__say { font: 600 .5rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
@media (prefers-reduced-motion: reduce) { .mailstamp { transition: none; } }

.shopask__panel {
  display: flex;
  /* the words sit low, like an address, leaving the top corner to the stamp */
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 26px;
}
.shopask__panel h2 { margin: 0 0 .5rem; color: var(--ink); font-size: clamp(1.5rem, 2.6vw, 2rem); }
.shopask__panel p { margin: 0; max-width: 54ch; }
.shopask__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
/* the stamp's corner stays clear: the buttons stop short of it */
.shopask__panel .shopask__actions { margin-right: 4.5rem; }
.shopask__faq { color: var(--link); font-weight: 600; }
.shopask__faq:hover { color: var(--link-hover); }

@media (max-width: 720px) {
  .shopbar { flex-direction: column; align-items: stretch; }
  /* every zone stays in sight: two rows beat a hidden, swipe-only Bag */
  .zpick { flex-wrap: wrap; overflow: visible; border-radius: 22px; width: fit-content; }
  .zpick__btn { padding: .58rem .8rem; letter-spacing: .08em; }
  .sortpick { align-self: flex-start; }
  .zpick__caption { margin-left: .2rem; }
  .shipmeter__track { flex: 1; width: auto; }
}
@media (max-width: 560px) {
  .pgrid { gap: .75rem; }
  .pcard { padding: .45rem; border-radius: 18px; }
  .pcard__media { border-radius: 13px; }
  .pcard__body { padding: .8rem .35rem .3rem; }
  .pcard__name { font-size: 1rem; }
  .pcard__sub {
    font-size: .78rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .pcard__foot { flex-direction: column; align-items: stretch; gap: .6rem; }
  .pcard__badge { top: .5rem; left: .5rem; font-size: .54rem; }
  .pcard__spec { left: .5rem; bottom: .5rem; max-width: calc(100% - 1rem); font-size: .62rem; padding: .28rem .6rem; }
  .shopask__actions { align-items: stretch; width: 100%; }
  .shopask__panel .shopask__actions { margin-right: 0; }
  .shopask__panel h2 { padding-right: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard { animation: none; }
  .pcard:hover { transform: none; }
}

/* ==========================================================================
   Product page — the buy box sits on the same glow as the shop, and the specs
   come as a four-panel leaflet that unfolds out of its cover.
   ========================================================================== */
.pdphero {
  position: relative;
  overflow-x: clip;     /* the photo box's corner swings past its edges mid-turn; clip, not hidden, so the photo can still stick */
  padding-block: clamp(1.5rem, 3.5vw, 2.75rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-soft);
}
.pdphero .orb--blue  { top: -280px; left: 30%; }
.pdphero .orb--amber { bottom: -320px; right: -180px; left: auto; }
.pdphero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* the photo stays in view while the buy box scrolls past it */
.pdpphoto {
  position: sticky;
  top: 100px;
  margin: 0;
}
/* the stage holds the box of photos and the arrows over it; the thumbnails sit under it */
.pdpphoto__stage { position: relative; }
/* The photos are the faces of a box, like the home page's card: the one in view is
   a white card holding the photo, the next waits round the side, and site.js turns
   them a quarter turn at a time (right to left going on, left to right going back).
   At rest nothing is transformed, so the photo sits exactly where a flat one would. */
.pdpphoto__box {
  position: relative;
  aspect-ratio: 1 / 1;
  perspective: 1600px;
  transform-style: preserve-3d;
}
.pdpphoto__face {
  position: absolute;
  inset: 0;
  padding: .75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 30px 60px -30px rgba(13, 20, 36, .35);
  backface-visibility: hidden;
  visibility: hidden;
}
.pdpphoto__face.is-on, .pdpphoto__face.is-turning { visibility: visible; }
/* the frame keeps a zoomed photo inside its rounded corners */
.pdpphoto__frame {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: var(--mist);
}
.pdpphoto__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  background: var(--mist);
}
/* the light on each face: site.js darkens it as the face turns away */
.pdpphoto__shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: #0B1220;
  opacity: 0;
  pointer-events: none;
}
.pdpphoto .pcard__badge { top: 1.5rem; left: 1.5rem; font-size: .66rem; z-index: 3; }
.pdpphoto__spec { left: 1.5rem; bottom: 1.5rem; padding: .42rem .9rem; font-size: .8rem; z-index: 3; }

.pdpbuy__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0 0 .9rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pdpbuy__zone {
  padding: .32rem .75rem;
  border-radius: 100px;
  background: var(--ultra-wash);
  color: var(--link);
  font-weight: 700;
  text-decoration: none;
}
.pdpbuy__zone:hover { background: var(--ultra); color: #fff; }
.pdpbuy__name {
  margin: 0 0 .5rem;
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.pdpbuy__sub { margin: 0 0 1.3rem; font-size: 1.12rem; color: var(--ink-2); }
.pdpbuy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.2rem; }
.pdpbuy__now { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.pdpbuy__price .pdp__was { font-family: var(--body); font-size: 1.05rem; color: var(--ink-3); text-decoration: line-through; }
.pdpbuy__blurb { margin: 0 0 1.1rem; color: var(--ink-2); max-width: 52ch; }
.pdpbuy__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pdpbuy__points li { position: relative; padding-left: 2rem; font-size: .95rem; color: var(--ink); }
.pdpbuy__points li::before {
  content: "";
  position: absolute;
  left: 0; top: .1em;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: var(--ultra-wash);
}
.pdpbuy__points li::after {
  content: "";
  position: absolute;
  left: .47rem; top: calc(.1em + .3rem);
  width: .32rem; height: .6rem;
  border: solid var(--link);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* quantity: a stepper pill instead of a bare number box */
.pdpbuy__qty { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: 1.7rem 0 1rem; }
.stepper {
  display: inline-flex;
  align-items: center;
  padding: .25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  box-shadow: var(--lift-1);
}
.stepper__btn {
  width: 2.5rem; height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--mist);
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.stepper__btn:hover:not(:disabled) { background: var(--ultra-wash); color: var(--link); }
.stepper__btn:disabled { opacity: .35; cursor: default; }
.stepper__btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.stepper__input {
  width: 3rem;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* typing in the number: the whole pill lights up like the checkout fields, rather
   than a separate outline that overlaps the + and − buttons */
.stepper__input:focus { outline: none; }
.stepper:has(.stepper__input:focus) {
  border-color: var(--link);
  box-shadow: 0 0 0 4px rgba(37, 80, 235, .12);
}
.pdpbuy__total { font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--ink-3); }

.pdpbuy__meter {
  margin-top: .4rem;
  padding: .85rem 1.1rem;
  background: rgba(var(--paper-rgb), .85);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
}
.pdpbuy__meter .shipmeter__track { flex: 1; min-width: 80px; width: auto; }

.pdpfacts { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem; }
.pdpfacts li { display: flex; align-items: flex-start; gap: .85rem; font-size: .93rem; color: var(--ink); }
.pdpfacts svg { flex: none; margin-top: .15rem; color: var(--link); }
.pdpfacts strong { font-weight: 700; }
.pdpfacts small { display: block; margin-top: .12rem; font-size: .8rem; color: var(--ink-3); }
/* "Deliver to": the country the arrival date is worked out for */
.pdpdeliver {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .45rem;
  font-size: .8rem;
  color: var(--ink-3);
}
.pdpdeliver[hidden] { display: none; }
.pdpdeliver select,
.cartdeliver select {
  max-width: 14rem;
  padding: .3rem 1.8rem .3rem .65rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .7rem center;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.pdpdeliver select:focus-visible,
.cartdeliver select:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---------- the leaflet: a cover and four panels, each hinged on its left edge ---------- */
.leafsec { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(.5rem, 2vw, 1.5rem); }
.leaflet {
  --leaf-fold: perspective(1100px) rotateY(-92deg);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 4fr);
}
/* The cover is printed in its place's color: blue for the desk and the kitchen, butter
   for the car and the bag. A ruler runs down the fold. */
.leaflet__cover {
  --cover: var(--cover-blue);
  --cover-ink: var(--cover-on-blue);
  --cover-ink-2: rgba(255, 255, 255, .82);
  --cover-tag: var(--butter);
  --cover-rule: rgba(255, 255, 255, .5);
  --cover-line: rgba(255, 255, 255, .34);
  --cover-wash: rgba(255, 255, 255, .1);
  --ruler: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  padding-right: calc(clamp(1.5rem, 2.6vw, 2.1rem) + var(--ruler));
  background: var(--cover);
  color: var(--cover-ink-2);
  border-radius: 26px 0 0 26px;
  box-shadow: 0 24px 40px -28px rgba(13, 20, 36, .5);
}
.leaflet__cover[data-tone="butter"] {
  --cover: var(--cover-butter);
  --cover-ink: #0D1424;
  --cover-ink-2: #4A3600;
  --cover-tag: #1E3A8A;
  --cover-rule: rgba(13, 20, 36, .34);
  --cover-line: rgba(13, 20, 36, .3);
  --cover-wash: rgba(13, 20, 36, .07);
}
.leaflet.is-folded .leaflet__cover { border-radius: 26px; }
/* the ruler: a tick every 5px, a long one every 25px, starting a little below the top */
.leaflet__cover::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: var(--ruler);
  background:
    repeating-linear-gradient(180deg, var(--cover-rule) 0 1px, transparent 1px 25px) 100% 14px / 13px calc(100% - 28px) no-repeat,
    repeating-linear-gradient(180deg, var(--cover-rule) 0 1px, transparent 1px 5px) 100% 14px / 6px calc(100% - 28px) no-repeat;
  pointer-events: none;
}
.leaflet__eyebrow {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cover-tag);
}
.leaflet__title { margin: 0; color: var(--cover-ink); font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.12; letter-spacing: -.03em; }
.leaflet__note { margin: 0 0 1rem; font-size: .9rem; }
.leaflet__toggle {
  margin-top: auto;
  padding: .6rem 1.1rem;
  border: 1px solid var(--cover-line);
  border-radius: 100px;
  background: var(--cover-wash);
  color: var(--cover-ink);
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.leaflet__toggle:hover { background: var(--cover-line); }
.leaflet__toggle:focus-visible { outline: 2px solid var(--cover-ink); outline-offset: 2px; }
.leaflet__toggle[hidden] { display: none; }

.leaflet__panels { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.leaflet__panels[hidden] { display: none; }
.leaf {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 12.5rem;
  margin-left: -1px;
  padding: 1.4rem 1.3rem 1.15rem;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 40px -30px rgba(13, 20, 36, .45);
  transform-origin: 0 50%;
  /* unfolding: one after another, out of the cover */
  transition-property: transform, opacity, visibility;
  transition-duration: .5s, .3s, 0s;
  transition-timing-function: var(--ease), ease-out, linear;
  transition-delay: calc(var(--i) * 90ms), calc(var(--i) * 90ms), 0s;
}
.leaf:first-child { margin-left: 0; border-left-color: transparent; }
.leaf:last-child { border-radius: 0 26px 26px 0; }
/* each panel shaded toward its crease, alternating like a real zig-zag fold */
.leaf::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(13, 20, 36, .06), transparent 24%);
  pointer-events: none;
}
.leaf:nth-child(even)::before { background: linear-gradient(270deg, rgba(13, 20, 36, .045), transparent 30%); }
.leaflet.is-folded .leaf {
  transform: var(--leaf-fold);
  opacity: 0;
  visibility: hidden;
  /* folding: last panel first, back into the cover */
  transition-duration: .32s, .22s, 0s;
  transition-timing-function: cubic-bezier(.5, 0, .75, 0), ease-in, linear;
  transition-delay: calc((3 - var(--i)) * 60ms), calc((3 - var(--i)) * 60ms + 80ms), calc((3 - var(--i)) * 60ms + 320ms);
}
.leaflet.is-instant .leaf { transition: none; }
.leaf__k {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--link);
}
.leaf__v {
  margin: 0;
  font-size: clamp(1.08rem, 1.55vw, 1.32rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.leaf__n { margin-top: auto; font-family: var(--mono); font-size: .68rem; font-weight: 600; color: var(--ink-3); }

/* ---------- related ---------- */
.pdprel { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); }
.pdprel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 1.6rem;
}
.pdprel__head h2 { margin: 0; }
.pdprel__all { font-weight: 700; }
.pgrid--static .pcard { animation: none; }
.pgrid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 980px) {
  /* stacked: the cover on top, the panels hinge down from it */
  .leaflet { --leaf-fold: perspective(900px) rotateX(-92deg); grid-template-columns: 1fr; }
  .leaflet__cover {
    border-radius: 26px 26px 0 0;
    padding: clamp(1.5rem, 2.6vw, 2.1rem);
    padding-bottom: calc(clamp(1.5rem, 2.6vw, 2.1rem) + var(--ruler));
  }
  /* the fold is the cover's bottom edge now, and the ruler runs along it */
  .leaflet__cover::after {
    top: auto; left: 0;
    width: auto; height: var(--ruler);
    background:
      repeating-linear-gradient(90deg, var(--cover-rule) 0 1px, transparent 1px 25px) 14px 100% / calc(100% - 28px) 13px no-repeat,
      repeating-linear-gradient(90deg, var(--cover-rule) 0 1px, transparent 1px 5px) 14px 100% / calc(100% - 28px) 6px no-repeat;
  }
  .leaf { margin: -1px 0 0 -1px; transform-origin: 50% 0; min-height: 10rem; }
  .leaf:first-child { margin-left: 0; border-left-color: var(--line); border-top-color: transparent; }
  .leaf:nth-child(n+2) { border-top-color: transparent; }
  .leaf:first-child { border-radius: 0 0 0 26px; }
  .leaf:last-child { border-radius: 0 0 26px 0; }
  .leaf::before { background: linear-gradient(180deg, rgba(13, 20, 36, .06), transparent 24%); }
  .leaf:nth-child(even)::before { background: linear-gradient(180deg, rgba(13, 20, 36, .035), transparent 30%); }
}
@media (max-width: 900px) {
  .pdphero__grid { grid-template-columns: 1fr; }
  .pdpphoto { position: relative; top: auto; width: 100%; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 820px) { .pgrid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .leaflet__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leaf { min-height: 8.5rem; padding: 1.1rem 1rem 1rem; }
  .leaf:first-child, .leaf:last-child { border-radius: 0; }
  .leaf:nth-child(3) { border-radius: 0 0 0 26px; }
  .leaf:nth-child(4) { border-radius: 0 0 26px 0; }
  .leaf:nth-child(odd) { margin-left: 0; border-left-color: var(--line); }
  .pdpphoto__face { padding: .5rem; border-radius: 22px; }
  .pdpphoto__img, .pdpphoto__frame { border-radius: 16px; }
  .pdpphoto .pcard__badge { top: 1rem; left: 1rem; }
  .pdpphoto__spec { left: 1rem; bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .leaf, .leaflet.is-folded .leaf { transition-delay: 0s !important; }
}

/* ==========================================================================
   Cart — the logo's four squares stand for the four places and fill in as the
   cart covers them. Lines are cards; taking one out folds it away.
   ========================================================================== */
.carthero {
  position: relative;
  padding-block: clamp(2rem, 4.5vw, 3.25rem) clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--line-soft);
}
.carthero .orb--blue  { top: -300px; left: 48%; }
.carthero .orb--amber { bottom: -340px; left: -160px; }
.carthero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem 4rem;
}
.carthero__title {
  margin: 0 0 .9rem;
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: -.04em;
}
.carthero .lede { margin: 0; }

/* the mark: an ink square holding four tiles, like the logo */
.foldmark { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.foldmark__grid {
  list-style: none;
  margin: 0;
  padding: .6rem;
  display: grid;
  grid-template-columns: repeat(2, 7.25rem);
  gap: .6rem;
  background: var(--panel);
  border-radius: 26px;
  box-shadow: 0 30px 60px -30px rgba(13, 20, 36, .55);
}
.foldmark__tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1;
  padding: .75rem .8rem;
  border: 1.5px dashed rgba(255, 255, 255, .24);
  border-radius: 16px;
  color: rgba(255, 255, 255, .55);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.foldmark__name { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.foldmark__n { font-size: .78rem; font-weight: 600; }
.foldmark__tile.is-covered { border: 1.5px solid transparent; }
.foldmark__tile--blue.is-covered   { background: var(--ultra);  color: #fff; }
.foldmark__tile--butter.is-covered { background: var(--butter); color: var(--ink-fixed); }
.foldmark__caption { margin: 0; font-size: .88rem; font-weight: 600; color: var(--ink-2); text-align: center; }

/* ---------- lines and summary ---------- */
.cartbody { padding-block: clamp(1.75rem, 3.5vw, 2.5rem) clamp(3.5rem, 8vw, 6rem); }
.cartbody__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
.cartlines { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.cartlines[hidden] { display: none; }
.cartline {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto 5.5rem auto;
  align-items: center;
  gap: 1.1rem;
  padding: .7rem 1rem .7rem .7rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  transform-origin: 50% 0;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.cartline:hover { border-color: var(--ultra-line); box-shadow: 0 18px 36px -24px rgba(13, 20, 36, .35); }
.cartline__media img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 16px; background: var(--photo); }
.cartline__info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cartline__zone {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--link);
}
.cartline__name { font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.cartline__name:hover { color: var(--link); }
.cartline__name:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }
.cartline__sub {
  font-size: .84rem;
  line-height: 1.4;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartline__unit { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); }
.cartline__qty { box-shadow: none; }
.cartline__qty .stepper__btn { width: 2.1rem; height: 2.1rem; font-size: 1.1rem; }
.cartline__qty .stepper__input { width: 2.4rem; font-size: .98rem; }
.cartline__total { justify-self: end; font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.cartline__remove {
  padding: .5rem .65rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.cartline__remove:hover { color: var(--bad); background: var(--bad-wash); }
.cartline__remove:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* the places not covered yet: dashed, like the empty tiles above */
.cartsug {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  border: 1.5px dashed var(--line-strong);
  border-radius: 24px;
  background: rgba(var(--mist-rgb), .6);
}
.cartsug[hidden] { display: none; }
.cartsug__title { margin: 0 0 .3rem; font-size: 1.25rem; }
.cartsug__note { margin: 0 0 1.1rem; font-size: .9rem; color: var(--ink-3); }
.cartsug__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
}
.cartsug__item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .6rem .7rem .6rem .6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.cartsug__item img { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 12px; background: var(--mist); }
.cartsug__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cartsug__zone { font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--link); }
.cartsug__name { font-weight: 800; color: var(--ink); text-decoration: none; }
.cartsug__name:hover { color: var(--link); }
.cartsug__price { font-size: .85rem; font-weight: 700; color: var(--ink-2); }
.cartsug__item .pcard__add { padding: .55rem .85rem; font-size: .78rem; }

.cartsum {
  position: sticky;
  top: 100px;
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 30px 60px -34px rgba(13, 20, 36, .35);
}
.cartsum[hidden] { display: none; }
.cartsum__title { margin: 0 0 .8rem; font-size: 1.2rem; }
.cartsum__row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; font-size: .95rem; color: var(--ink-2); }
.cartsum__count { color: var(--ink-3); font-size: .85rem; }
.cartsum__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: .4rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink);
}
.cartsum__total span:last-child { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; }
.cartsum__meter { flex-direction: column; align-items: stretch; gap: .5rem; margin: 1rem 0 1.1rem; }
/* stacked: the bar must not take `flex: 1` from the phone rule, or it collapses to no height */
.cartsum__meter .shipmeter__track { flex: none; width: 100%; }
.cartsum__facts { margin-top: 1.3rem; }
.cartsum__back { display: inline-block; margin-top: 1.2rem; font-weight: 700; }

.cartempty {
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1.5px dashed var(--line-strong);
  border-radius: 24px;
}
.cartempty[hidden] { display: none; }
.cartempty h2 { margin: 0 0 .4rem; }
.cartempty p { margin: 0 0 1.2rem; color: var(--ink-2); }
.cartempty__zones { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.cartempty__zone {
  padding: .55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
}
.cartempty__zone:hover { border-color: var(--link); color: var(--link); }

@media (max-width: 980px) {
  .cartbody__grid { grid-template-columns: 1fr; }
  .cartsum { position: static; }
}
@media (max-width: 760px) {
  .carthero__grid { grid-template-columns: 1fr; }
  .foldmark { flex-direction: row; justify-content: flex-start; gap: 1rem; }
  .foldmark__grid { grid-template-columns: repeat(2, 4.6rem); gap: .4rem; padding: .45rem; border-radius: 20px; }
  .foldmark__tile { padding: .45rem .5rem; border-radius: 12px; }
  .foldmark__name { font-size: .56rem; letter-spacing: .08em; }
  .foldmark__n { font-size: .62rem; }
  .foldmark__caption { max-width: 11rem; text-align: left; }
  .cartline {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas: "media info total" "media qty remove";
    row-gap: .65rem;
    padding: .6rem .75rem .6rem .6rem;
  }
  .cartline__media { grid-area: media; align-self: start; }
  .cartline__media img { width: 72px; height: 72px; border-radius: 13px; }
  .cartline__info { grid-area: info; }
  .cartline__qty { grid-area: qty; justify-self: start; }
  .cartline__total { grid-area: total; align-self: start; }
  .cartline__remove { grid-area: remove; justify-self: end; }
  .cartsug__list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Checkout — a shipping label fills in as the address is typed, and gets its
   "Ready to ship" stamp once every required field checks out.
   ========================================================================== */
.cohero {
  position: relative;
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--line-soft);
}
.cohero .orb--blue  { top: -300px; left: 52%; }
.cohero .orb--amber { bottom: -340px; left: -160px; }
.cohero__inner { position: relative; z-index: 1; }
.cohero__title {
  margin: 0 0 .9rem;
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -.04em;
}
.cohero .lede { margin: 0; }

.costeps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 0 0 1.4rem;
  padding: 0;
}
.costeps__step, .costeps__step a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}
.costeps__step + .costeps__step::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  margin-right: .4rem;
  background: var(--line);
}
.costeps__dot {
  display: inline-grid;
  place-items: center;
  width: 1.55rem; height: 1.55rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: .68rem;
  letter-spacing: 0;
}
.costeps__step.is-done .costeps__dot { background: var(--ultra-wash); border-color: transparent; color: var(--link); }
.costeps__step.is-done a:hover { color: var(--link); }
.costeps__step.is-current { color: var(--ink); }
.costeps__step.is-current .costeps__dot { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.cobody { padding-block: clamp(1.75rem, 3.5vw, 2.5rem) clamp(3.5rem, 8vw, 6rem); }
.cobody__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

/* ---------- the form ---------- */
.coform {
  display: grid;
  gap: 1.4rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 30px 60px -40px rgba(13, 20, 36, .3);
}
.coform__group { display: grid; gap: 1rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.coform__group + .coform__group { padding-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.coform__legend {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 0;
  margin-bottom: .2rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.coform__n {
  display: inline-grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--mono);
  font-size: .78rem;
}
.coform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.cofield { display: grid; gap: .4rem; min-width: 0; }
.cofield label { font-size: .88rem; font-weight: 700; color: var(--ink); }
.cofield__opt { font-weight: 400; color: var(--ink-3); }
.cofield input {
  width: 100%;
  padding: .8rem 2.4rem .8rem .95rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--mist) no-repeat right .85rem center;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cofield input:hover { border-color: var(--line-strong); }
.cofield input:focus {
  outline: none;
  border-color: var(--link);
  background-color: var(--paper);
  box-shadow: 0 0 0 4px rgba(37, 80, 235, .12);
}
.cofield.is-good input {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.cofield.is-bad input { border-color: #DC2626; background-color: var(--bad-wash); }
.cofield.is-bad input:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
/* the country list, dressed like the text fields, with its own arrow */
.cofield select {
  width: 100%;
  padding: .8rem 2.4rem .8rem .95rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .95rem center;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cofield select:hover { border-color: var(--line-strong); }
.cofield select:focus {
  outline: none;
  border-color: var(--link);
  background-color: var(--paper);
  box-shadow: 0 0 0 4px rgba(37, 80, 235, .12);
}
.cofield.is-bad select { border-color: #DC2626; background-color: var(--bad-wash); }
.cofield__box select ~ .cofield__tick { display: none; }
.cofield__hint { font-size: .8rem; color: var(--ink-3); }
.cofield__error { font-size: .82rem; font-weight: 600; color: var(--bad); }
.cofield__error[hidden] { display: none; }

.coform__error {
  margin: 0;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: var(--bad-wash);
  border: 1px solid var(--bad-line);
  color: var(--bad-deep);
  font-size: .9rem;
  font-weight: 600;
}
.coform__error[hidden] { display: none; }
.coform__labelslot:empty { display: none; }
.coform__facts { margin-top: 0; }
.coform__owner { margin: 0; }

/* ---------- the shipping label ---------- */
.coside { display: grid; gap: 1.25rem; }
.colabel {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 2px 0 var(--ink), 0 26px 50px -30px rgba(13, 20, 36, .45);
}
.colabel__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .95rem;
  background: var(--panel);
  color: var(--on-panel);
}
.colabel__mark {
  display: grid;
  grid-template-columns: repeat(2, 8px);
  gap: 2px;
}
.colabel__mark i { width: 8px; height: 8px; border-radius: 2px; background: var(--ultra); }
.colabel__mark i:nth-child(2), .colabel__mark i:nth-child(3) { background: var(--butter); }
.colabel__brand { font-weight: 800; letter-spacing: -.02em; }
.colabel__tag {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--butter);
}
.colabel__k {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.colabel__to { padding: 1rem .95rem 1.05rem; min-height: 9.5rem; }
.colabel__addr { margin: 0; display: grid; gap: .1rem; font-size: .98rem; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.colabel__addr [hidden] { display: none; }
.colabel__name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.colabel__country { font-family: var(--mono); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.colabel__addr .is-empty { color: #A3AEC2; font-weight: 500; }
.colabel__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--ink);
}
.colabel__meta > div { padding: .75rem .95rem; font-size: .84rem; font-weight: 600; color: var(--ink); }
.colabel__meta > div + div { border-left: 2px solid var(--ink); }
/* decorative bars, not a real code — the tag above says it's a preview */
.colabel__code {
  height: 44px;
  margin: 0 .95rem .95rem;
  background:
    repeating-linear-gradient(90deg,
      var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px,
      var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 17px,
      var(--ink) 17px 18px, transparent 18px 20px);
  opacity: .85;
}
/* the stamp lands on the barcode, never on the address it's there to confirm */
.colabel__stamp {
  position: absolute;
  bottom: 1.35rem; right: 1.1rem;
  padding: .4rem .7rem;
  border: 3px solid var(--link);
  border-radius: 10px;
  background: rgba(var(--paper-rgb), .88);
  color: var(--link);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-11deg) scale(1.5);
  transition: opacity .2s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.colabel.is-ready .colabel__stamp { opacity: 1; transform: rotate(-11deg) scale(1); }

/* ---------- the order ---------- */
.cosum {
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 30px 60px -40px rgba(13, 20, 36, .3);
}
.cosum__title { margin: 0 0 .9rem; font-size: 1.15rem; }
.cosum__lines { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .75rem; }
.cosum__line { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: .8rem; }
.cosum__thumb { position: relative; }
.cosum__thumb img { display: block; width: 52px; height: 52px; object-fit: cover; border-radius: 12px; background: var(--photo); border: 1px solid var(--line-soft); }
.cosum__thumb b {
  position: absolute;
  top: -.4rem; right: -.4rem;
  display: grid;
  place-items: center;
  min-width: 1.3rem; height: 1.3rem;
  padding: 0 .3rem;
  border-radius: 100px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: .68rem;
  font-weight: 700;
}
.cosum__name { font-size: .92rem; font-weight: 700; color: var(--ink); }
.cosum__name small { display: block; font-size: .76rem; font-weight: 500; color: var(--ink-3); }
.cosum__amt { font-weight: 700; color: var(--ink); }
.cosum__empty { font-size: .92rem; color: var(--ink-2); }
.cosum__rows { padding-top: .6rem; border-top: 1px solid var(--line-soft); }
.cosum__row { display: flex; justify-content: space-between; padding: .35rem 0; font-size: .92rem; color: var(--ink-2); }
.cosum__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: .35rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink);
}
.cosum__total span:last-child { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.cosum__facts { margin-top: .4rem; }
.cosum__links { display: flex; gap: 1.2rem; margin: 1.1rem 0 0; font-weight: 700; font-size: .92rem; }

@media (max-width: 980px) {
  .cobody__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .coform__row { grid-template-columns: 1fr; }
  .costeps__step + .costeps__step::before { width: .8rem; }
  .colabel__meta { grid-template-columns: 1fr; }
  .colabel__meta > div + div { border-left: 0; border-top: 2px solid var(--ink); }
}

/* ==========================================================================
   Accounts — the header link, the account page, and the checkout additions.
   Orders are drawn as the same shipping label the checkout previews.
   ========================================================================== */
.header__cta { gap: .5rem; }
.acct-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .72rem 1rem;
  border: 1.5px solid transparent;
  border-radius: 100px;
  color: var(--ink-2);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.acct-btn:hover, .acct-btn[aria-current="page"] { color: var(--ink); border-color: var(--line); background: var(--paper); }
.acct-btn.is-signed-in { color: var(--ink); }
.acct-btn.is-signed-in svg { color: var(--link); }
.acct-btn svg { flex: none; }
.acct-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (max-width: 1000px) {
  .acct-btn { padding: .62rem .7rem; }
  .acct-btn__label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------- account page ---------- */
.accthero {
  position: relative;
  padding-block: clamp(2rem, 4.5vw, 3.25rem) clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line-soft);
}
.accthero .orb--blue  { top: -300px; left: 50%; }
.accthero .orb--amber { bottom: -340px; left: -160px; }
.accthero__inner { position: relative; z-index: 1; }
.accthero__title { margin: 0 0 .9rem; font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.03; letter-spacing: -.04em; }
.accthero__title:focus { outline: none; }
.accthero .lede { margin: 0; }
.accthero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}
.accthero__bar[hidden] { display: none; }
.zpick__btn[aria-selected="true"] {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 10px 25px -5px rgba(13, 20, 36, .35);
}
.zpick__btn[aria-selected="true"] .zpick__n { background: var(--butter); color: var(--ink-fixed); }
.acct-signout {
  padding: .6rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
  font-family: var(--body);
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
}
.acct-signout:hover { border-color: var(--ink); color: var(--ink); }
.acct-signout:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.acctbody { padding-block: clamp(1.75rem, 3.5vw, 2.5rem) clamp(3.5rem, 8vw, 6rem); }
.acct-loading { color: var(--ink-3); font-weight: 600; }
.acct-loading[hidden] { display: none; }

/* logged out: one card with a Log in row and a Create an account row (the .detailcard rows) */
.acctgate { max-width: 46rem; margin-inline: auto; }
.acctgate[hidden] { display: none; }
.acctform { gap: 1.05rem; }
.acctform[hidden] { display: none; }        /* .coform's display: grid would show it */
.acctform__title { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.acctform__note { margin: -.6rem 0 0; color: var(--ink-3); font-size: .92rem; }
.acctform__small { margin: 0; font-size: .82rem; color: var(--ink-3); }
.acctform__ok { margin: 0; padding: .75rem 1rem; border-radius: 14px; background: var(--ok-wash); color: var(--ok-deep); font-weight: 600; font-size: .9rem; }
.acctform__ok[hidden] { display: none; }

.pwbox { position: relative; }
.pwbox input { padding-right: 4.6rem; }
.pwbox__show {
  position: absolute;
  top: 50%; right: .45rem;
  transform: translateY(-50%);
  padding: .4rem .7rem;
  border: 0;
  border-radius: 10px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
}
.pwbox__show:hover { color: var(--link); }
.pwbox__show:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.cofield.is-bad .pwbox__show { background: var(--bad-wash); }

.acctpanel:focus { outline: none; }
.acctpanel__head { margin-bottom: 1.4rem; }
.acctpanel__head h2 { margin: 0 0 .35rem; font-size: 1.5rem; }
.acctpanel__head p { margin: 0; color: var(--ink-3); }

/* orders: a shipping label each */
.olist { display: grid; gap: 1.25rem; }
.olabel {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 2px 0 var(--ink), 0 26px 50px -34px rgba(13, 20, 36, .45);
}
.olabel__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .7rem;
  padding: .7rem 1rem;
  background: var(--panel);
  color: var(--on-panel);
}
.olabel__no { margin: 0; font-family: var(--mono); font-size: .86rem; font-weight: 700; letter-spacing: .06em; color: var(--on-panel); }
.olabel__date { margin-left: auto; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--butter); }
.olabel__body { padding: 1.1rem 1rem .6rem; }
.olabel__eta { margin: .9rem 0 0; font-size: .92rem; color: var(--ink-2); }
.olabel__items { list-style: none; margin: .9rem 0 0; padding: .8rem 0 0; border-top: 1px dashed var(--line); display: grid; gap: .6rem; }
.olabel__item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .75rem; font-size: .92rem; font-weight: 600; }
.olabel__item img, .olabel__noimg { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--mist); display: block; }
.olabel__item a { color: var(--ink); text-decoration: none; }
.olabel__item a:hover { color: var(--link); }
.olabel__item small { color: var(--ink-3); font-weight: 500; }
.olabel__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border-top: 2px solid var(--ink);
}
.olabel__foot > div { padding: .8rem 1rem; }
.olabel__foot p { margin: 0; font-size: .88rem; font-weight: 600; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.olabel__total { border-left: 2px solid var(--ink); text-align: right; min-width: 9rem; }
.olabel__total strong { display: block; font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; }
.olabel__total small { color: var(--ink-3); font-size: .78rem; }
.olabel__stamp { top: 3.6rem; bottom: auto; right: 1rem; opacity: 1; transform: rotate(-9deg); }
.olabel.is-closed { border-color: var(--ink-3); box-shadow: none; }
.olabel.is-closed .olabel__stamp { border-color: var(--ink-3); color: var(--ink-3); }

.otrack {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0 8.5rem 0 0;
  counter-reset: step;
}
.otrack__step {
  position: relative;
  padding-top: 1.35rem;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.otrack__step::before {
  content: "";
  position: absolute;
  top: .2rem; left: 0;
  width: .8rem; height: .8rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--paper);
  z-index: 1;
}
.otrack__step::after {
  content: "";
  position: absolute;
  top: .55rem; left: .8rem; right: 0;
  height: 2px;
  background: var(--line);
}
.otrack__step:last-child::after { display: none; }
.otrack__step.is-done { color: var(--ink); }
.otrack__step.is-done::before { background: var(--ultra); border-color: var(--link); }
.otrack__step.is-done::after { background: var(--ultra); }
.otrack__step.is-current { color: var(--link); }
.otrack__step.is-current::before { border-color: var(--link); box-shadow: 0 0 0 4px rgba(37, 80, 235, .15); }

/* addresses */
.addrlist { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.addrcard {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.addrcard.is-default { border: 2px solid var(--ink); }
.addrcard__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.addrcard__label { font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--link); }
.addrcard__default { padding: .2rem .55rem; border-radius: 100px; background: var(--butter); color: var(--ink-fixed); font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.addrcard__lines { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.addrcard__actions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; }
.addrcard__actions button {
  padding: .35rem .6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 700;
  color: var(--link);
  cursor: pointer;
}
.addrcard__actions button:hover { background: var(--ultra-wash); }
.addrcard__actions button.is-danger { color: var(--bad); }
.addrcard__actions button.is-danger:hover { background: var(--bad-wash); }
.addrcard__actions button:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.addrform { margin-top: 1.2rem; max-width: 720px; }
.addrform[hidden] { display: none; }
.addrform__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.checkline { display: flex; align-items: center; gap: .6rem; font-size: .92rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.checkline input { width: 1.1rem; height: 1.1rem; accent-color: var(--link); }
.checkline[hidden] { display: none; }

/* Account details: one card, three rows (name, password, delete). Each row is its
   own form; inside the card they lose their own card look and are split by rules.
   A row shows its title, a one-line summary and a button; the button opens the
   form underneath, and Cancel folds it away again. */
.detailcard {
  padding: 0 clamp(1.25rem, 3vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 30px 60px -40px rgba(13, 20, 36, .3);
  overflow: hidden;
  transform-origin: 50% 0;
}
.detailcard > .detailsec {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem 1.5rem;
  padding: clamp(1.1rem, 2.6vw, 1.5rem) 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.detailcard > .detailsec + .detailsec { border-top: 1px solid var(--line); }
.detailsec__head { display: grid; gap: .2rem; min-width: 0; }
.detailsec .acctform__title { font-size: 1.1rem; }
.detailsec__value { margin: 0; color: var(--ink-3); font-size: .92rem; overflow-wrap: anywhere; }
.detailsec__value.is-dots { letter-spacing: .18em; }
.detailsec__open {
  padding: .6rem 1.15rem;
  font-size: .9rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--ink);
}
.detailsec__open:hover { border-color: var(--link); color: var(--link); }
.detailsec__open[hidden] { display: none; }
.detailsec__open--main { background: var(--ultra); border-color: var(--link); color: #fff; box-shadow: 0 10px 24px -10px rgba(37, 80, 235, .55); }
.detailsec__open--main:hover { background: var(--ultra-deep); border-color: var(--link-hover); color: #fff; }
.detailsec__open--danger { border-color: var(--bad-line); color: var(--bad); }
.detailsec__open--danger:hover { border-color: #DC2626; background: #DC2626; color: #fff; }
/* the form (and the password's "changed" message) take the whole width under the row */
.detailsec__body, .detailsec > .acctform__ok { grid-column: 1 / -1; }
.detailsec__body { display: grid; gap: 1.05rem; max-width: 34rem; min-width: 0; transform-origin: 50% 0; }
.detailsec__body[hidden] { display: none; }
.detailsec__body .acctform__note { margin: 0; }
.detailsec__body .acctform__note[hidden] { display: none; }
.detailsec__do { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.detailsec__cancel {
  padding: .4rem .2rem;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
}
.detailsec__cancel:hover { color: var(--ink); text-decoration: underline; }
.detailsec__cancel:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 6px; }
/* the last row is the one that can't be undone: it sits on a pale red band */
.detailcard > .detailsec--danger {
  margin: 0 calc(-1 * clamp(1.25rem, 3vw, 2rem));
  padding-inline: clamp(1.25rem, 3vw, 2rem);
  background: var(--bad-wash);
  border-top-color: var(--bad-line);
}
.detailsec--danger .acctform__title { color: var(--bad); }
.acctdanger__btn { background: var(--paper); border: 2px solid #DC2626; color: var(--bad); }
.acctdanger__btn:hover { background: #DC2626; color: #fff; }

.acctempty {
  padding: 1.5rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: 20px;
  color: var(--ink-2);
}
.acctempty[hidden] { display: none; }
.acctempty h3 { margin: 0 0 .3rem; }
.acctempty p { margin: 0 0 1rem; }
.addrlist .acctempty p { margin: 0; }

/* ---------- checkout, signed in ---------- */
.cosignin {
  margin: 0;
  padding: .75rem 1rem;
  border-radius: 14px;
  background: var(--ultra-wash);
  color: var(--ink-2);
  font-size: .9rem;
}
.cosignin[hidden] { display: none; }
.cosignin a { font-weight: 700; }
/* "Save this address for later": a quiet card that turns blue once it's ticked */
.cosave {
  display: grid;
  gap: .3rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--mist);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.cosave[hidden] { display: none; }
.cosave:has(input:checked) { border-color: var(--link); background: var(--ultra-wash); }
.cosave:has(input:checked) .checkline input { animation: savePop .36s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes savePop { 50% { transform: scale(1.3); } }
.cosave__note { margin: 0 0 0 1.7rem; font-size: .8rem; line-height: 1.45; color: var(--ink-3); }
.cosave__note a { font-weight: 700; }
.cosaved__forget {
  justify-self: start;
  padding: .2rem 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: 600 .8rem/1.4 var(--body);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cosaved__forget:hover { color: var(--bad); }
.cosaved__forget:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }

.cosaved { display: grid; gap: .5rem; }
.cosaved[hidden] { display: none; }
.cosaved__title { margin: 0; font-size: .88rem; font-weight: 700; color: var(--ink); }
.cosaved__opt {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .75rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.cosaved__opt:hover { border-color: var(--line-strong); }
.cosaved__opt:has(input:checked) { border-color: var(--link); background: rgba(234, 240, 254, .5); }
.cosaved__opt input { margin-top: .2rem; accent-color: var(--link); }
.cosaved__opt span { display: grid; font-size: .86rem; color: var(--ink-3); }
.cosaved__opt b { font-size: .92rem; color: var(--ink); }
.cosaved__opt i { font-style: normal; margin-left: .35rem; padding: .1rem .45rem; border-radius: 100px; background: var(--butter); font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 560px) {
  .otrack { padding-right: 0; }
  .otrack__step { font-size: .52rem; letter-spacing: .04em; }
  .olabel__stamp { top: auto; bottom: 5.2rem; }
  .olabel__foot { grid-template-columns: 1fr; }
  .olabel__total { border-left: 0; border-top: 2px solid var(--ink); text-align: left; }
}

/* ---------- Continue with Google ---------- */
.cofield[hidden] { display: none; }
.acctgoogle {
  display: grid;
  justify-items: center;
  gap: .7rem;
  max-width: 460px;
  margin: 0 auto clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}
.acctgoogle[hidden] { display: none; }
.acctgoogle__btn { width: 100%; min-height: 44px; display: flex; justify-content: center; }
.acctgoogle__note { margin: 0; font-size: .84rem; color: var(--ink-3); }
.acctgoogle .coform__error { width: 100%; text-align: left; }
.acctgoogle__or {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  margin: .6rem 0 0;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.acctgoogle__or::before, .acctgoogle__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.acctgoogle__owner { max-width: 760px; margin: 0 auto 1.75rem; }
/* as the Google button appears, the note under it rises and "or use your email" draws
   its lines outwards from the middle */
.acctgoogle__note { animation: coRise .45s var(--ease) .15s backwards; }
.acctgoogle__or::before { transform-origin: 100% 50%; animation: orLine .6s var(--ease) .3s backwards; }
.acctgoogle__or::after  { transform-origin: 0 50%;    animation: orLine .6s var(--ease) .3s backwards; }
@keyframes orLine { from { transform: scaleX(0); } }
.acctgoogle__owner[hidden] { display: none; }
.acctnotice {
  margin: 0 0 1.4rem;
  padding: .85rem 1.1rem;
  border-radius: 14px;
  background: var(--ultra-wash);
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
}
.acctnotice[hidden] { display: none; }
.gbadge {
  display: inline-block;
  margin-left: .5rem;
  padding: .12rem .5rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  vertical-align: .1em;
}
.gbadge[hidden] { display: none; }

/* ==========================================================================
   Thank-you — the label from checkout, now printed: it unfolds as it arrives
   and gets its "Order placed" stamp. Everything around it stays quiet.
   ========================================================================== */
.tyhero {
  position: relative;
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--line-soft);
}
.tyhero .orb--blue  { top: -300px; left: 52%; }
.tyhero .orb--amber { bottom: -340px; left: -160px; }
.tyhero__inner { position: relative; z-index: 1; }
.tyhero__title { margin: 0 0 .9rem; font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.03; letter-spacing: -.04em; }
.tyhero .lede { margin: 0; }
.costeps__step.is-current.is-done .costeps__dot { background: var(--ultra); border-color: var(--link); color: #fff; }

.tybody { padding-block: clamp(1.75rem, 3.5vw, 2.5rem) clamp(2.5rem, 6vw, 4rem); }
.tybody__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
.tybody__grid[hidden], .tyempty[hidden] { display: none; }
.tymain { display: grid; gap: 1.5rem; min-width: 0; }

.tylabel {
  transform-origin: 50% 0;
  animation: unfold .5s var(--ease) both;
}
.tylabel .colabel__to { padding: 1.2rem 1.2rem 1.25rem; min-height: 0; }
.tylabel .colabel__addr { font-size: 1.05rem; }
.tylabel .colabel__name { font-size: 1.55rem; }
.tylabel .colabel__meta > div { padding: .85rem 1.2rem; }
.tylabel .colabel__code { height: 54px; margin: 0 1.2rem 1.2rem; }
.tylabel__no { margin: 0 0 0 auto; font-size: .72rem; }
.tylabel__no span { color: var(--on-panel); }
.tylabel .colabel__stamp { padding: .5rem .9rem; font-size: .92rem; bottom: 1.6rem; right: 1.4rem; }
.tylabel.is-stamped .colabel__stamp { animation: stampIn .42s cubic-bezier(.34, 1.56, .64, 1) .45s both; }
@keyframes stampIn {
  from { opacity: 0; transform: rotate(-11deg) scale(1.9); }
  to   { opacity: 1; transform: rotate(-11deg) scale(1); }
}

.typanel {
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 30px 60px -44px rgba(13, 20, 36, .3);
}
.typanel__title { margin: 0 0 1rem; font-size: 1.15rem; letter-spacing: -.02em; }
.typanel__note { margin: 1rem 0 0; font-size: .86rem; color: var(--ink-3); }
.tytrack { padding-right: 0; }
.typanel .map-frame { min-height: 0; }
.typanel .map-frame[hidden] { display: none; }
.typanel .map-actions { margin-top: 1rem; }
.tymap__owner { margin: 0; }
.tymap__owner[hidden] { display: none; }

.tyside { display: grid; gap: 1.25rem; min-width: 0; }
.tyreceipt__when { margin: -.5rem 0 1rem; font-size: .84rem; color: var(--ink-3); }
.tyreceipt__when:empty { display: none; }
.tyreceipt__email { margin: .9rem 0 0; font-size: .84rem; color: var(--ink-3); overflow-wrap: anywhere; }
.tyreceipt__email:empty { display: none; }
.tyfollow {
  display: grid;
  gap: .8rem;
  padding: 1.1rem 1.2rem;
  border-radius: 20px;
  background: var(--ultra-wash);
}
.tyfollow[hidden] { display: none; }
.tyfollow__text { margin: 0; font-size: .92rem; color: var(--ink); overflow-wrap: anywhere; }
.tyhelp { margin: 0; }
.tymore[hidden] { display: none; }
.tylinks { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.6rem 0 0; font-weight: 700; font-size: .92rem; }

@media (max-width: 980px) {
  .tybody__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tylabel .colabel__name { font-size: 1.3rem; }
  .tylabel .colabel__stamp { font-size: .78rem; }
  .tylabel__no { font-size: .64rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tylabel, .tylabel.is-stamped .colabel__stamp { animation: none; }
  .tylabel.is-stamped .colabel__stamp { opacity: 1; transform: rotate(-11deg); }
}

/* ==========================================================================
   Home, below the hero — the four places as the four squares of the logo,
   then the rest of the page in the shop's language.
   ========================================================================== */
.homefolds__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.homefolds__text h2 { margin: 0 0 1rem; }
.homefolds__text .lede { margin: 0 0 1.4rem; }
.homefolds__key {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.6rem;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.homefolds__key .colabel__mark { padding: 5px; border-radius: 6px; background: var(--ink); }

/* the mark: an ink square holding four tiles */
.foldgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.6rem, 1.2vw, .9rem);
  padding: clamp(.6rem, 1.2vw, .9rem);
  background: var(--panel);
  border-radius: clamp(22px, 3vw, 34px);
  box-shadow: 0 40px 80px -40px rgba(13, 20, 36, .55);
}
.fmtile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: clamp(12rem, 22vw, 16.5rem);
  padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: clamp(14px, 2vw, 22px);
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fmtile--blue   { background: var(--ultra);  color: #fff; }
.fmtile--butter { background: var(--butter); color: var(--ink-fixed); }
.fmtile:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .6); color: inherit; }
.fmtile--blue:hover { color: #fff; }
.fmtile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fmtile__n {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
}
.fmtile__name { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.fmtile__blurb { font-size: .9rem; line-height: 1.4; opacity: .85; max-width: 26ch; }
.fmtile__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .8rem; }
.fmtile__thumbs { display: flex; }
.fmtile__thumbs img {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mist);
  border: 2px solid currentColor;
  transition: transform .3s var(--ease);
}
.fmtile--butter .fmtile__thumbs img { border-color: var(--ink-fixed); }
.fmtile__thumbs img + img { margin-left: -12px; }
/* on hover the thumbnails fan out, like a hand of cards */
.fmtile:hover .fmtile__thumbs img:nth-child(2) { transform: translateX(8px); }
.fmtile:hover .fmtile__thumbs img:nth-child(3) { transform: translateX(16px); }
.fmtile__count { font-weight: 800; font-size: .92rem; white-space: nowrap; }
.fmtile__count span { display: inline-block; transition: transform .25s var(--ease); }
.fmtile:hover .fmtile__count span { transform: translateX(3px); }

/* starter picks: four across, one per place */
.homestart .pdprel__head .lede { margin: .5rem 0 0; }

/* the four promises, as stubs */
.promise { gap: clamp(1rem, 2vw, 1.4rem); }
.promise__item {
  position: relative;
  padding: 1.4rem 1.3rem 1.3rem;
  border: 1.5px dashed rgba(255, 255, 255, .22);
  border-radius: 20px;
  background: rgba(255, 255, 255, .03);
}
.promise__n { padding-bottom: .7rem; border-bottom: 1.5px dashed rgba(255, 255, 255, .18); }
.promise__t { margin-top: .3rem; }

/* reviews: paper cards with a quote mark */
.review { position: relative; border-radius: 22px; padding: 1.5rem 1.5rem 1.35rem; box-shadow: 0 24px 50px -40px rgba(13, 20, 36, .35); }
.review::before {
  content: "\201C";
  position: absolute;
  top: .4rem; right: 1.1rem;
  font-family: var(--display);
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ultra-wash);
  pointer-events: none;
}
.review__who { padding-top: .9rem; border-top: 1px dashed var(--line); }

/* FAQ: the questions beside an "ask us" card */
.homefaq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.homefaq__side h2 { margin: 0 0 1.4rem; }
.homefaq__ask {
  padding: 1.5rem;
  border-radius: 24px;
}
/* clear of the stamp in the corner (the card's look is .airmail's) */
.homefaq__ask h3 { margin: 0 0 .6rem; padding-right: 4.5rem; color: var(--ink); font-size: 1.25rem; }
.homefaq__ask p { margin: 0 0 1.1rem; font-size: .92rem; }
.homefaq .faq { max-width: none; display: grid; gap: .7rem; }
.homefaq .faq__item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  padding: 0 1.25rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.homefaq .faq__item[open] { border-color: var(--ultra-line); box-shadow: 0 20px 40px -32px rgba(13, 20, 36, .35); }
.homefaq .faq__item summary { padding: 1.1rem 0; align-items: center; }
.homefaq .faq__item summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  background: var(--ultra-wash);
  font-size: 1.15rem;
}
.homefaq .faq__item[open] summary::after { background: var(--ink); color: var(--on-ink); }
.homefaq .faq__item summary:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 8px; }
.homefaq .faq__answer { padding: 0 0 1.25rem; }

@media (max-width: 900px) {
  .homefolds__grid, .homefaq { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fmtile { min-height: 11rem; }
  .fmtile__blurb { display: none; }
  .fmtile__thumbs img { width: 32px; height: 32px; }
  .fmtile__foot { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   404 — the "0" is the logo, its four squares folded shut; they unfold as the
   page arrives. Below, the home page's logo grid points somewhere useful.
   ========================================================================== */
.errhero {
  position: relative;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.errhero .orb--blue  { top: -300px; left: 30%; }
.errhero .orb--amber { bottom: -340px; right: -160px; left: auto; }
.errhero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.errcode {
  display: flex;
  align-items: center;
  gap: .05em;
  margin: .2rem 0 1.2rem;
  font-size: clamp(6rem, 17vw, 11.5rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.06em;
  color: var(--ink);
  user-select: none;
}
/* exactly the header logo, scaled up: four squares, no frame. In the logo's own
   units the mark is 24 wide, each square 11, the gap 2, the corner radius 2.5 */
.errmark {
  --mark: .74em;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--mark) * 2 / 24);
  width: var(--mark);
  height: var(--mark);
  margin: 0 .05em;
}
.errmark i {
  display: block;
  border-radius: calc(var(--mark) * 2.5 / 24);
  background: #2340E8;                 /* the logo's own blue and yellow */
  /* backwards, not both: holding the last frame for good would pin the squares
     flat and cancel the lift below */
  animation: tileUnfold .5s var(--ease) backwards;
  transition: transform .35s var(--ease);
}
.errmark i:nth-child(2), .errmark i:nth-child(3) { background: #FFC94D; }
.errmark i:nth-child(1) { transform-origin: 100% 50%; animation-delay: .15s; }
.errmark i:nth-child(2) { transform-origin: 0 50%;    animation-delay: .24s; }
.errmark i:nth-child(3) { transform-origin: 100% 50%; animation-delay: .33s; }
.errmark i:nth-child(4) { transform-origin: 0 50%;    animation-delay: .42s; }
@keyframes tileUnfold {
  from { opacity: 0; transform: perspective(var(--depth, 300px)) rotateY(var(--from, -100deg)); }
  to   { opacity: 1; transform: none; }
}
.errmark i:nth-child(2), .errmark i:nth-child(4) { --from: 100deg; }
/* point at a square and it lifts, like a flap you could fold back */
.errmark i:nth-child(odd):hover  { transform: perspective(300px) rotateY(-38deg); }
.errmark i:nth-child(even):hover { transform: perspective(300px) rotateY(38deg); }
.errhero__title { margin: 0 0 .8rem; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.035em; }
.errhero .lede { margin: 0 auto; }
.errhero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.6rem; }

.errlinks { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.errlinks a {
  padding: .5rem .95rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
}
.errlinks a:hover { border-color: var(--link); color: var(--link); }
.errask { margin: 0; font-size: .92rem; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .errmark i { animation: none; }
  .errmark i:hover { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .header .logo__mark i { animation: none; }
}

/* ==========================================================================
   Motion layer (2026-09-27)
   One idea throughout: things arrive folded and open up. Only transform and
   opacity ever animate, nothing loops, and nothing you can click waits more
   than a moment. Reduced motion switches all of it off (end of this section).
   ========================================================================== */

/* ---------- Between pages: a quick cross-fade, and the product photo you
   clicked travels to its place on the next page (see PHOTO_HANDOVER_JS) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .16s ease-in both; }
::view-transition-new(root) { animation: vtIn .26s ease-out both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; } }
::view-transition-group(ff-photo) {
  z-index: 1;
  animation-duration: .44s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(ff-photo), ::view-transition-new(ff-photo) {
  animation-duration: .44s;
  height: 100%;
  object-fit: cover;
}
/* the header moves as itself instead of cross-fading (from a scrolled page it
   glides down as the promo line fades back in above it) */
.header { view-transition-name: ff-header; }
::view-transition-group(ff-header) {
  animation-duration: .36s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(ff-header) { animation: vtOut .12s ease-in both; }
::view-transition-new(ff-header) { animation: none; }
/* the card photo carries its corners with it (its frame used to do the rounding) */
.pcard__media img { border-radius: inherit; }

/* ---------- Waiting below the screen ---------- */
.rv-wait { opacity: 0; animation: none !important; }
.flipchar { display: inline-block; transform-origin: 50% 0; backface-visibility: hidden; }
@media print { .rv-wait { opacity: 1; } }

/* ---------- The photo that flies into the cart ---------- */
.flyer {
  position: fixed;
  z-index: 95;
  pointer-events: none;
  border-radius: 18px;
  background: var(--mist) center / cover no-repeat;
  box-shadow: 0 18px 40px -12px rgba(13, 20, 36, .45), 0 0 0 3px #fff;
  will-change: transform, opacity;
}
.cart-btn__count { transform-origin: 50% 50%; backface-visibility: hidden; }

/* ---------- The cart panel under the cart button ---------- */
.bagpop {
  --notch: 40px;
  position: absolute;
  top: calc(100% + 10px);
  right: 12px;
  z-index: 65;
  width: 372px;
  max-width: calc(100vw - 24px);
  padding: 1rem 1rem 1.05rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 70px -24px rgba(13, 20, 36, .42), 0 2px 8px rgba(13, 20, 36, .06);
  transform-origin: calc(100% - var(--notch) - 7px) 0;
  text-align: left;
}
.bagpop[hidden] { display: none; }
.bagpop::before {           /* the notch that points up at the cart button */
  content: "";
  position: absolute;
  top: -8px;
  right: var(--notch);
  width: 14px; height: 14px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 3px 0 0 0;
  transform: rotate(45deg);
}
.bagpop__head { display: flex; align-items: center; gap: .55rem; margin-bottom: .8rem; font-size: 1rem; }
.bagpop__head strong { flex: 1; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.bagpop__tick {
  display: grid; place-items: center;
  flex: none;
  width: 1.55rem; height: 1.55rem;
  border-radius: 50%;
  background: #10B981;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}
.bagpop__close {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  margin: -.3rem -.3rem -.3rem 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.bagpop__close:hover { background: var(--mist); color: var(--ink); }
.bagpop__close:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }

.bagpop__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.bagpop__line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .4rem;
  border-radius: 14px;
  transform-origin: 50% 0;
}
.bagpop__line.is-new { background: var(--butter-wash); }
.bagpop__line img, .bagpop__sug img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 10px; background: var(--mist); }
.bagpop__name { min-width: 0; display: grid; gap: .1rem; }
.bagpop__name a, .bagpop__sugtext a {
  overflow: hidden;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bagpop__name a:hover, .bagpop__sugtext a:hover { color: var(--link); }
.bagpop__name small {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--link);
}
.bagpop__qty { font-family: var(--mono); font-size: .78rem; color: var(--ink-2); white-space: nowrap; }
.bagpop__more { display: inline-block; margin: .35rem 0 0 .4rem; font-size: .84rem; font-weight: 600; color: var(--link); }

.bagpop__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--line);
  font-size: .9rem;
  color: var(--ink-2);
}
.bagpop__sum strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }

.bagpop__ship { margin-top: .55rem; }
.bagpop__ship p { margin: 0 0 .45rem; font-size: .86rem; color: var(--ink-2); }
.bagpop__ship strong { color: var(--ink); }
.bagpop__ship.is-free strong { color: var(--ok); }
.bagpop__track { display: block; height: 6px; overflow: hidden; border-radius: 100px; background: var(--line-soft); }
.bagpop__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ultra), #60A5FA);
  transform-origin: left;
  transition: transform .6s var(--ease);
}
.bagpop__ship.is-free .bagpop__fill { background: #10B981; }

.bagpop__places {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .8rem 0 0;
  font-size: .86rem;
  color: var(--ink-2);
}
.bagpop__mark { flex: none; display: grid; grid-template-columns: repeat(2, 9px); gap: 2px; }
.bagpop__sq { display: block; width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--line); }
.bagpop__sq--blue.is-on   { background: #2340E8; box-shadow: none; }
.bagpop__sq--butter.is-on { background: #FFC94D; box-shadow: none; }

.bagpop__sug {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  margin-top: .75rem;
  padding: .55rem;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--mist);
}
.bagpop__sug img { width: 44px; height: 44px; }
.bagpop__sugtext { min-width: 0; display: grid; font-size: .9rem; color: var(--ink-2); }
.bagpop__sugname { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.bagpop__sugname span { font-family: var(--mono); font-size: .8rem; color: var(--ink-2); }
.bagpop__sugtext small { margin-top: .1rem; font-size: .78rem; line-height: 1.35; color: var(--ink-3); }
.bagpop__add {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .8rem;
  border: 0;
  border-radius: 100px;
  background: var(--ink);
  color: var(--on-ink);
  font: 700 .82rem/1 var(--body);
  cursor: pointer;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.bagpop__add::before { content: "+"; font-size: 1rem; line-height: 0; }
.bagpop__add:hover { background: var(--ultra); }
.bagpop__add:active { transform: scale(.96); }
.bagpop__add:disabled { background: #10B981; }
.bagpop__add:disabled::before { content: none; }
.bagpop__add:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.bagpop__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .95rem; }
.bagpop__actions .btn { padding: .8rem 1rem; font-size: .95rem; }

@media (max-width: 720px) {
  .bagpop { left: 12px; width: auto; }
}

/* ---------- Product cards lean toward the pointer ---------- */
.pcard.is-tilting {
  transition: transform .14s linear, box-shadow .25s var(--ease), border-color .25s var(--ease);
  will-change: transform;
}
.pcard__sheen {
  position: absolute;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--sheen), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity .3s var(--ease);
}

/* ---------- The hero's box leans toward the pointer ---------- */
.fold__stage.can-tilt { transition: transform .5s var(--ease); }

/* ---------- Product photo: rest the pointer on it to look closer ---------- */
.pdpphoto.can-zoom .pdpphoto__box { cursor: zoom-in; }
.pdpphoto__img { transform-origin: 0 0; transition: transform .22s var(--ease); }
.pdpphoto.is-zooming .pdpphoto__img { transition: transform .1s linear; }
.pdpphoto .pcard__badge, .pdpphoto__spec { transition: opacity .2s var(--ease); }
.pdpphoto.is-zooming .pcard__badge, .pdpphoto.is-zooming .pdpphoto__spec { opacity: 0; }
.pdpphoto.can-zoom::after {
  content: "Point to zoom";
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  padding: .32rem .7rem;
  border-radius: 100px;
  background: rgba(13, 20, 36, .72);
  color: #fff;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 5;
  transition: opacity .2s var(--ease);
}
.pdpphoto.is-zooming::after, .pdpphoto.is-turning::after { opacity: 0; }

/* ---------- Product page, wide screens: the buy bar floats up once the
   buttons have scrolled away ---------- */
@media (min-width: 721px) {
  .sticky-cta--pair.can-float {
    display: flex;
    background: var(--paper);
    left: 50%;
    right: auto;
    bottom: 1.25rem;
    width: min(680px, calc(100% - 2 * var(--gutter)));
    padding: .6rem .6rem .6rem .7rem;
    gap: .8rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    box-shadow: 0 24px 60px -18px rgba(13, 20, 36, .4);
    transform: translate(-50%, calc(100% + 2rem));
    opacity: 0;
    visibility: hidden;
    transition: transform .45s var(--ease), opacity .3s var(--ease), visibility 0s linear .45s;
  }
  .sticky-cta--pair.can-float.is-up {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    transition: transform .45s var(--ease), opacity .3s var(--ease), visibility 0s;
  }
  .sticky-cta--pair.can-float .sticky-cta__thumb {
    display: block;
    flex: none;
    width: 46px; height: 46px;
    object-fit: cover;
    border-radius: 50%;
    background: var(--mist);
  }
  .sticky-cta--pair.can-float .btn { padding: .72rem 1.3rem; font-size: .92rem; }
}

/* ---------- Reduced motion: none of the above moves ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .rv-wait { opacity: 1; }
  .flyer { display: none; }
  .pcard__sheen { display: none; }
}

/* ==========================================================================
   Checkout motion (2026-09-27)
   The label is the star: it prints in as the page arrives, each line flips
   over as its field is filled, the line being typed lights up, and once the
   address is complete it's stamped and scanned. Placing the order lifts it
   off the page, and it carries on to the thank-you page as the same label.
   ========================================================================== */

/* ---------- arriving ---------- */
.copage .coform__group,
.copage .coform > .btn { animation: coRise .42s var(--ease) backwards; }
.copage .coform__group:nth-of-type(2) { animation-delay: .07s; }
.copage .coform > .btn { animation-delay: .12s; }
#co-label {
  transform-origin: 50% 0;
  animation: labelPrint .7s var(--ease) .1s backwards;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.copage .cosum { animation: coRise .5s var(--ease) .18s backwards; }
@keyframes coRise { from { opacity: 0; transform: translateY(18px); } }
@keyframes labelPrint {
  from { opacity: 0; transform: perspective(1100px) rotateX(-80deg) translateY(-8px); }
  45%  { opacity: 1; }
  to   { transform: none; }
}
.cosum__line { transform-origin: 50% 0; }

/* the steps: the line into "Address" draws itself; the line on to
   "Confirmation" fills once the address is complete */
.copage .costeps__step { position: relative; }
.copage .costeps__step + .costeps__step::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1.6rem; height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--ultra);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.copage .costeps__step:nth-child(2)::after { animation: stepLine .6s var(--ease) .25s forwards; }
.copage .costeps.is-ready .costeps__step:nth-child(3)::after { transform: scaleX(1); }
@keyframes stepLine { to { transform: scaleX(1); } }
.copage .costeps__step:nth-child(3) .costeps__dot { transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease); }
.copage .costeps.is-ready .costeps__step:nth-child(3) { color: var(--link); }
.copage .costeps.is-ready .costeps__step:nth-child(3) .costeps__dot { border-color: var(--link); background: var(--ultra-wash); color: var(--link); }

/* ---------- the fields ---------- */
.cofield__box { position: relative; display: block; }
/* the tick is its own element now, so it can pop in */
.cofield.is-good .cofield__box input { background-image: none; }
.cofield__tick {
  position: absolute;
  top: 50%; right: .85rem;
  width: 16px; height: 16px;
  margin-top: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat;
  opacity: 0;
  transform: scale(.2) rotate(-40deg);
  transition: opacity .15s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.cofield.is-good .cofield__tick { opacity: 1; transform: none; }
.cofield.is-bad .cofield__tick { opacity: 0; }

/* the section numbers become ticks when their fields are done */
.coform__n { transition: background-color .3s var(--ease); }
.coform__group.is-done .coform__n { background: #10B981; }

/* ---------- the label ---------- */
.colabel__addr { position: relative; z-index: 0; }
.colabel__addr > span { position: relative; justify-self: start; max-width: 100%; transform-origin: 0 0; }
/* the line the focused field fills: a marker stroke behind it */
.colabel__addr > span::before {
  content: "";
  position: absolute;
  inset: -.08em -.4rem;
  z-index: -1;
  border-radius: 6px;
  background: rgba(252, 211, 77, .42);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ease);
}
.colabel__addr > span.is-active::before { transform: scaleX(1); }

.colabel__code { position: relative; }
.colabel__scan {
  position: absolute;
  top: -7px; bottom: -7px; left: 0;
  width: 2px;
  border-radius: 2px;
  background: #EF4444;
  box-shadow: 0 0 10px 2px rgba(239, 68, 68, .6);
  opacity: 0;
  pointer-events: none;
}

/* placing the order: the label lifts off the page, ready to travel */
#co-label.is-sending {
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: 0 2px 0 var(--ink), 0 40px 60px -26px rgba(13, 20, 36, .5);
}

/* ...and arrives on the thank-you page as the same label (browsers with
   cross-document view transitions; PHOTO_HANDOVER_JS skips the thank-you
   label's own unfold when it has just traveled there) */
#co-label, #ty-label { view-transition-name: ff-label; }

/* a button that gets one shine once it's in view (the page's script adds .can-shine,
   then .is-shine) — the thank-you page's "Directions in Google Maps" */
.btn.can-shine { position: relative; overflow: hidden; }
.btn.can-shine::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 36%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.btn.can-shine.is-shine::after { animation: btnShine 1s cubic-bezier(.45, 0, .55, 1) .5s; }
/* the tracking page's "Remember this order" box pops when ticked, like checkout's */
.trackform__keep input:checked { animation: savePop .36s cubic-bezier(.3, 1.6, .5, 1); }

/* more (2026-09-30): "Continue to confirmation" gets one shine once it's in view
   (site.js adds .is-shine) */
.copage .coform .btn--primary { position: relative; overflow: hidden; }
.copage .coform .btn--primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 36%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.copage .coform .btn--primary.is-shine::after { animation: btnShine 1s cubic-bezier(.45, 0, .55, 1) .5s; }
@media (prefers-reduced-motion: reduce) {
  .copage .coform .btn--primary::after { display: none; }
}
::view-transition-group(ff-label) {
  z-index: 1;
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
/* the checkout's copy fades out early, so the two never read as a double print */
::view-transition-old(ff-label) { animation-duration: .2s; }
::view-transition-new(ff-label) { animation-duration: .45s; }
html.vt-label .tylabel { animation: none; }

@media (max-width: 560px) {
  .copage .costeps__step + .costeps__step::after { width: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  #co-label.is-sending { transform: none; }
  .copage .costeps__step:nth-child(2)::after { transform: scaleX(1); }
}

/* ==========================================================================
   Thank-you motion (2026-09-27)
   The label has arrived; as its "Order placed" stamp lands the logo's colors
   burst out from under it (once per order). Around it: the three steps tick
   over one after another, the receipt prints line by line, the delivery
   track draws itself when it comes into view.
   ========================================================================== */
.typage .costeps__step { position: relative; }
.typage .costeps__step + .costeps__step::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1.6rem; height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--ultra);
  transform: scaleX(0);
  transform-origin: left;
  animation: stepLine .4s var(--ease) forwards;
}
.typage .costeps__step:nth-child(2)::after { animation-delay: .22s; }
.typage .costeps__step:nth-child(3)::after { animation-delay: .5s; }
.typage .costeps__dot { animation: dotPop .46s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.typage .costeps__step:nth-child(1) .costeps__dot { animation-delay: .06s; }
.typage .costeps__step:nth-child(2) .costeps__dot { animation-delay: .36s; }
.typage .costeps__step:nth-child(3) .costeps__dot { animation-delay: .64s; }
@keyframes dotPop { from { opacity: 0; transform: scale(0) rotate(-120deg); } }

.typage .tyreceipt { animation: coRise .5s var(--ease) .15s backwards; }
.typage .tyhelp { animation: coRise .5s var(--ease) .3s backwards; }
.tyfollow { transform-origin: 50% 0; }
.cosum__total span:last-child { transform-origin: 100% 50%; }

/* the burst */
.tyburst { position: fixed; z-index: 90; width: 0; height: 0; pointer-events: none; }
.tyburst i { position: absolute; left: 0; top: 0; border-radius: 2px; will-change: transform, opacity; }

/* the delivery track draws itself: each dot pops, each line runs on, and the
   current step sends out a ring (twice, then it's still). The thank-you page and
   the account's order labels share it; --track-delay lets a label's track wait
   for the label to land first. */
.otrack.is-drawn .otrack__step { animation: trackText .4s var(--ease) backwards; animation-delay: calc(var(--track-delay, 0ms) + var(--k, 0) * 120ms); }
.otrack.is-drawn .otrack__step::before { animation: trackDot .44s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--track-delay, 0ms) + var(--k, 0) * 120ms + 60ms); }
.otrack.is-drawn .otrack__step::after { transform-origin: left; animation: trackLine .34s var(--ease) backwards; animation-delay: calc(var(--track-delay, 0ms) + var(--k, 0) * 120ms + 150ms); }
@keyframes trackText { from { opacity: 0; transform: translateY(6px); } }
@keyframes trackDot  { from { transform: scale(0); } }
@keyframes trackLine { from { transform: scaleX(0); } }
.otrack__ping {
  position: absolute;
  top: .2rem; left: 0;
  width: .8rem; height: .8rem;
  border-radius: 50%;
  background: rgba(37, 80, 235, .45);
  opacity: 0;
  pointer-events: none;
}
.otrack.is-drawn .otrack__ping { animation: trackPing 1.3s ease-out 2 backwards; animation-delay: calc(var(--track-delay, 0ms) + var(--k, 0) * 120ms + 520ms); }
@keyframes trackPing {
  from { opacity: .8; transform: scale(1); }
  to   { opacity: 0;  transform: scale(3); }
}

@media (max-width: 560px) {
  .typage .costeps__step + .costeps__step::after { width: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .typage .costeps__step + .costeps__step::after { transform: scaleX(1); }
  .otrack__ping { display: none; }
}

/* ==========================================================================
   Account motion (2026-09-27)
   Logged out, the two forms unfold side by side. Logged in, the greeting's
   name drops in letter by letter and the tabs rise; each tab's contents
   arrive in turn when it's chosen. Orders are shipping labels: each drops in
   when it's scrolled to, its stamp lands and its track draws. Addresses slide
   to their new places after a change, a new one pops in with a highlight,
   a removed one folds away. Counts flip over when they change.
   ========================================================================== */
.ol-wait { opacity: 0; }
@media print { .ol-wait { opacity: 1; } }
.olabel, .addrcard, .acctform, .addrform { transform-origin: 50% 0; }
.zpick__n { display: inline-grid; backface-visibility: hidden; }

/* the address you just saved (or made default) glows once */
.addrcard { position: relative; }
.addrcard.is-fresh::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 20px;
  box-shadow: 0 0 0 4px rgba(252, 211, 77, .85), 0 12px 30px -10px rgba(252, 211, 77, .6);
  opacity: 0;
  pointer-events: none;
  animation: freshGlow 1.8s ease-out;
}
@keyframes freshGlow { 15% { opacity: 1; } 60% { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ol-wait { opacity: 1; }
  .addrcard.is-fresh::after { animation: none; }
}

/* ==========================================================================
   Cart motion (2026-09-27)
   Arriving, the four squares unfold like the logo's, the lines drop in one by
   one and the summary rises with its total landing last. Quantities and
   amounts flip over as they change (up from above, down from below). A place
   the cart starts (or stops) covering turns its tile over; all four covered,
   the tiles hop in turn. Reaching free shipping puts a shine on the bar. A
   suggestion added here flies from its card into the new line.
   ========================================================================== */
.cartsum__count { display: inline-block; }
.cartsum__row .is-free { color: var(--ok); font-weight: 700; }
.foldmark__tile, .foldmark__n, .foldmark__caption { backface-visibility: hidden; }

/* the shine that runs along the free-shipping bar once it's full */
.shipmeter__track { position: relative; }
.shipmeter__track::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  transform: translateX(-110%);
  pointer-events: none;
}
.shipmeter.is-shine .shipmeter__track::after { animation: meterShine .9s cubic-bezier(.45, 0, .55, 1) .25s; }
@keyframes meterShine { to { transform: translateX(240%); } }

/* a suggestion's photo on its way into the cart */
.cartflyer { border-radius: 12px; }

/* more (2026-09-30): "Continue to checkout" gets one shine once it's in view (site.js
   adds .is-shine), and Remove's cross turns a quarter when pointed at */
.cartsum .btn--primary { position: relative; overflow: hidden; }
.cartsum .btn--primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 36%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.cartsum .btn--primary.is-shine::after { animation: btnShine 1s cubic-bezier(.45, 0, .55, 1) .5s; }
.cartline__remove span[aria-hidden] { display: inline-block; transition: transform .28s cubic-bezier(.3, 1.45, .5, 1); }
.cartline__remove:hover span[aria-hidden], .cartline__remove:focus-visible span[aria-hidden] { transform: rotate(90deg) scale(1.2); }

@media (prefers-reduced-motion: reduce) {
  .shipmeter.is-shine .shipmeter__track::after { animation: none; }
  .cartsum .btn--primary::after { display: none; }
  .cartline__remove span[aria-hidden] { transition: none; }
}

/* ==========================================================================
   Product page motion (2026-09-28)
   Arriving: the photo tips up into place (unless it has just traveled here
   from a card), its badges pop on; the buy box rises line by line; the price
   lands, the old price is struck through and "Save" is stamped; each bullet's
   tick pops in turn; the free-shipping bar fills; "Buy now" gets one shine.
   The arrival dates come in like a departure board. Changing the quantity
   flips the number and the running total; "Add to cart" flips to "Added".
   ========================================================================== */
html:not(.vt-photo) .pdpage .pdpphoto { transform-origin: 50% 0; animation: photoIn .62s var(--ease) backwards; }
@keyframes photoIn { from { opacity: 0; transform: perspective(1400px) rotateX(-16deg) translateY(26px) scale(.97); } }
.pdpage .pdpphoto .pcard__badge,
.pdpage .pdpphoto__spec { animation: pillPop .46s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.pdpage .pdpphoto .pcard__badge { animation-delay: .5s; }
.pdpage .pdpphoto__spec { animation-delay: .62s; }
.pdpage .pdpphoto.can-zoom::after { animation: fadeIn .4s ease .9s backwards; }
@keyframes pillPop { from { opacity: 0; transform: scale(.4); } }
@keyframes fadeIn { from { opacity: 0; } }

.pdpage .pdpbuy > * { animation: coRise .46s var(--ease) backwards; }
.pdpage .pdpbuy > :nth-child(2)  { animation-delay: .04s; }
.pdpage .pdpbuy > :nth-child(3)  { animation-delay: .08s; }
.pdpage .pdpbuy > :nth-child(4)  { animation-delay: .12s; }
.pdpage .pdpbuy > :nth-child(5)  { animation-delay: .16s; }
.pdpage .pdpbuy > :nth-child(6)  { animation-delay: .2s; }
.pdpage .pdpbuy > :nth-child(7)  { animation-delay: .24s; }
.pdpage .pdpbuy > :nth-child(8)  { animation-delay: .27s; }
.pdpage .pdpbuy > :nth-child(9)  { animation-delay: .3s; }
.pdpage .pdpbuy > :nth-child(10) { animation-delay: .33s; }
.pdpage .pdpbuy > :nth-child(11) { animation-delay: .36s; }

/* the price lands; the old one is struck through; the saving is stamped on */
.pdpage .pdpbuy__now { animation: pricePop .5s cubic-bezier(.3, 1.5, .5, 1) .24s backwards; transform-origin: 0 70%; }
@keyframes pricePop { from { opacity: 0; transform: scale(.6); } }
.pdpbuy__price .pdp__was { position: relative; text-decoration: none; }
.pdpbuy__price .pdp__was::after {
  content: "";
  position: absolute;
  left: -.12em; right: -.12em; top: 52%;
  height: 1.5px;
  background: currentColor;
  transform-origin: left;
}
.pdpage .pdpbuy__price .pdp__was::after { animation: strike .42s var(--ease) .5s backwards; }
@keyframes strike { from { transform: scaleX(0); } }
.pdpage .pdpbuy__price .pdp__save { display: inline-block; animation: saveStamp .46s cubic-bezier(.34, 1.56, .64, 1) .72s backwards; }
@keyframes saveStamp { from { opacity: 0; transform: rotate(-14deg) scale(1.7); } }

/* each bullet's tick pops in turn */
.pdpage .pdpbuy__points li::before { animation: tickPop .42s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.pdpage .pdpbuy__points li::after  { animation: tickDraw .36s var(--ease) backwards; }
.pdpage .pdpbuy__points li:nth-child(1)::before { animation-delay: .4s; }
.pdpage .pdpbuy__points li:nth-child(1)::after  { animation-delay: .5s; }
.pdpage .pdpbuy__points li:nth-child(2)::before { animation-delay: .5s; }
.pdpage .pdpbuy__points li:nth-child(2)::after  { animation-delay: .6s; }
.pdpage .pdpbuy__points li:nth-child(3)::before { animation-delay: .6s; }
.pdpage .pdpbuy__points li:nth-child(3)::after  { animation-delay: .7s; }
.pdpage .pdpbuy__points li:nth-child(4)::before { animation-delay: .7s; }
.pdpage .pdpbuy__points li:nth-child(4)::after  { animation-delay: .8s; }
@keyframes tickPop  { from { transform: scale(0); } }
@keyframes tickDraw { from { opacity: 0; transform: rotate(45deg) scale(.2); } }

/* words that move one by one (site.js splitWords) */
.wordbit { display: inline-block; }
/* the delivery / returns / reply icons wait, hidden, until site.js plays them */
.pdpfacts.is-waiting svg { opacity: 0; }

/* the free-shipping bar fills as the page arrives */
.pdpage .pdpbuy__meter .shipmeter__fill { animation: meterFill .8s var(--ease) .55s backwards; }
@keyframes meterFill { from { transform: scaleX(0); } }

/* "Buy now" gets one shine, once everything has landed */
.pdp__buy .btn--primary { position: relative; overflow: hidden; }
.pdp__buy .btn--primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 36%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.pdpage .pdp__buy .btn--primary::after { animation: btnShine 1s cubic-bezier(.45, 0, .55, 1) 1.1s; }
@keyframes btnShine { to { transform: translateX(330%) skewX(-18deg); } }

/* phones: the bottom bar slides up from the bottom edge as the page arrives */
@media (max-width: 720px) {
  .sticky-cta { animation: barUp .5s var(--ease) .35s backwards; }
}
@keyframes barUp { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  .pdp__buy .btn--primary::after { display: none; }
}

/* ==========================================================================
   Shop motion (2026-09-28)
   Arriving, the heading, picker and caption rise in turn and the free-shipping
   bar fills. The dark pill behind the chosen place slides to the next one (the
   account's tabs use the same picker); a pressed pill gives a little; the
   chosen place's count pops; "Showing 3 for the desk" flips over and the
   caption eases in. The cards' own fold is unchanged.
   ========================================================================== */
.shop .shophero__inner > .eyebrow,
.shop .shophero__title,
.shop .shophero .lede,
.shop .shopbar,
.shop .zpick__caption { animation: coRise .5s var(--ease) backwards; }
.shop .shophero__title { animation-delay: .05s; }
.shop .shophero .lede  { animation-delay: .1s; }
.shop .shopbar         { animation-delay: .15s; }
.shop .zpick__caption  { animation-delay: .22s; }
.shop .shopgrid .shipmeter__fill { animation: meterFill .8s var(--ease) .5s backwards; }
.shop .shopgrid__count { display: inline-block; }

/* the sliding pill */
.zpick.has-glider { position: relative; }
.zpick__glider {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  border-radius: 100px;
  background: var(--ink);
  box-shadow: 0 10px 25px -5px rgba(13, 20, 36, .35);
  pointer-events: none;
  transition: transform .38s var(--ease), width .38s var(--ease), height .38s var(--ease), opacity .2s ease;
}
.zpick.has-glider .zpick__btn {
  position: relative;
  z-index: 1;
  transition: color .38s var(--ease), background-color .2s var(--ease), transform .15s var(--ease);
}
.zpick.has-glider .zpick__btn[aria-pressed="true"],
.zpick.has-glider .zpick__btn[aria-selected="true"] { background: transparent; box-shadow: none; }
.zpick__btn:active { transform: scale(.95); }
.zpick__n { transition: background-color .38s var(--ease), color .38s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .zpick__glider { transition: none; }
  .zpick__btn:active { transform: none; }
}

/* ==========================================================================
   Home motion (2026-09-28)
   The hero looks exactly as designed; only its motion grows: the three ticks
   under the buttons draw themselves, "Go to shop" gets one shine, the box
   turns a little once a visit to show it's a box, and resting on a card in
   the strip turns the box to that product (script). The strip rises in.
   Further down: pointing at a place lights its square in the little logo,
   each section's label flips in as it arrives, FAQ answers glide open.
   ========================================================================== */
.trust svg path { stroke-dasharray: 17; animation: tickLine .42s var(--ease) backwards; }
.trust li:nth-child(1) svg path { animation-delay: .5s; }
.trust li:nth-child(2) svg path { animation-delay: .62s; }
.trust li:nth-child(3) svg path { animation-delay: .74s; }
@keyframes tickLine { from { stroke-dashoffset: 17; } }

.hero__actions .btn--primary { position: relative; overflow: hidden; }
.hero__actions .btn--primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
  animation: btnShine 1s cubic-bezier(.45, 0, .55, 1) 1.2s;
}

.zonestrip__card { animation: coRise .5s var(--ease) backwards; transition: background-color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.zonestrip__card:nth-child(1) { animation-delay: .28s; }
.zonestrip__card:nth-child(2) { animation-delay: .34s; }
.zonestrip__card:nth-child(3) { animation-delay: .4s; }
.zonestrip__card:nth-child(4) { animation-delay: .46s; }

/* the little logo beside "Each square of the logo is one of them" */
.homefolds__key .colabel__mark i { position: relative; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s var(--ease); }
.homefolds__key .colabel__mark i.is-lit { z-index: 1; transform: scale(1.55); box-shadow: 0 0 0 2px var(--ink); }

/* FAQ answers glide open and shut where the browser can animate a height */
@supports selector(::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    height: 0;
    overflow: clip;
    transition: height .36s var(--ease), content-visibility .36s allow-discrete;
  }
  .faq__item[open]::details-content { height: auto; }
}
.faq__item summary::after { transition: transform .32s cubic-bezier(.3, 1.5, .5, 1), background-color .25s var(--ease), color .25s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .hero__actions .btn--primary::after { display: none; }
  .homefolds__key .colabel__mark i.is-lit { transform: none; }
  @supports selector(::details-content) {
    .faq__item::details-content { transition: none; }
  }
}

/* ==========================================================================
   404 motion (2026-09-28)
   The two 4s swing open from the sides like the covers of a folded card while
   the zero's squares unfold; "Error 404" flips in; the words and buttons rise.
   The "404" leans toward the pointer, a square lifts when pointed at, and a
   click folds the zero shut and open again (script).
   ========================================================================== */
.errcode > .errcode__4 { animation: fourLeft .6s var(--ease) backwards; transform-origin: 100% 50%; }
.errcode > .errcode__4:last-child { animation-name: fourRight; animation-delay: .08s; transform-origin: 0 50%; }
@keyframes fourLeft  { from { opacity: 0; transform: perspective(700px) rotateY(-85deg); } }
@keyframes fourRight { from { opacity: 0; transform: perspective(700px) rotateY(85deg); } }
.errcode { transition: transform .5s var(--ease); }
.errcode.can-play { cursor: pointer; }
.errpage .errhero__title    { animation: coRise .5s var(--ease) .22s backwards; }
.errpage .errhero .lede     { animation: coRise .5s var(--ease) .3s backwards; }
.errpage .errhero__actions  { animation: coRise .5s var(--ease) .38s backwards; }
.errhero__actions .btn--primary { position: relative; overflow: hidden; }
.errhero__actions .btn--primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
  animation: btnShine 1s cubic-bezier(.45, 0, .55, 1) 1.3s;
}
@media (prefers-reduced-motion: reduce) {
  .errhero__actions .btn--primary::after { display: none; }
  .errcode { transition: none; }
}

/* ==========================================================================
   Privacy policy (2026-09-28)
   The words are the policy's own, untouched; around them: the site's hero
   ("Legal" and the date flip in), a contents list beside the text whose
   highlight slides to the section being read, a line along the header that
   fills as you read, and each section rising in with a blue mark drawing
   down beside its heading.
   ========================================================================== */
.privhero {
  position: relative;
  padding-block: clamp(2rem, 4.5vw, 3.25rem) clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--line-soft);
}
.privhero .orb--blue  { top: -300px; left: 50%; }
.privhero .orb--amber { bottom: -340px; left: -160px; }
.privhero__inner { position: relative; z-index: 1; }
.privhero__title { margin: 0 0 .9rem; font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.03; letter-spacing: -.04em; }
.privhero .prose__updated { margin: 0 0 1.1rem; padding: 0; border: 0; }
.privhero .lede { margin: 0; max-width: 62ch; }
.privhero__inner > * { animation: coRise .5s var(--ease) backwards; }
.privhero__inner > :nth-child(2) { animation-delay: .06s; }
.privhero__inner > :nth-child(3) { animation-delay: .12s; }
.privhero__inner > :nth-child(4) { animation-delay: .18s; }

.privbody { padding-block: clamp(2rem, 4vw, 3rem) clamp(3.5rem, 8vw, 6rem); }
.privbody__grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 72ch);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.privprose { max-width: none; }

/* contents */
.ptoc { position: sticky; top: 110px; animation: coRise .5s var(--ease) .25s backwards; }
.ptoc__title {
  margin: 0 0 .6rem .8rem;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ptoc__list { position: relative; display: grid; gap: .1rem; }
.ptoc__link {
  position: relative;
  z-index: 1;
  display: block;
  padding: .45rem .8rem;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .3s var(--ease), transform .2s var(--ease);
}
.ptoc__link:hover { color: var(--ink); transform: translateX(3px); }
.ptoc__link[aria-current] { color: var(--link); }
.ptoc__link:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.ptoc .zpick__glider { border-radius: 10px; background: var(--ultra-wash); box-shadow: none; }
.ptoc .zpick__glider::before {
  content: "";
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background: var(--ultra);
}

/* sections */
.privprose .psec { scroll-margin-top: 100px; }
.privprose .psec:first-child > h2 { margin-top: 0; }
.privprose .psec > h2 { position: relative; }
.privprose .psec > h2::before {
  content: "";
  position: absolute;
  left: -1.1rem; top: .15em; bottom: .15em;
  width: 3px;
  border-radius: 3px;
  background: var(--ultra);
  transform-origin: top;
  transition: transform .55s var(--ease) .25s;
}
.privprose .psec.rv-wait > h2::before { transform: scaleY(0); }

/* the reading line along the bottom of the header */
.readbar {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--ultra), #60A5FA);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .readbar { animation: readProgress linear both; animation-timeline: scroll(root block); }
}
@keyframes readProgress { to { transform: scaleX(1); } }

@media (max-width: 980px) {
  .privbody__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ptoc { position: static; }
  .ptoc__title { margin-left: 0; }
  .ptoc__list { display: flex; flex-wrap: wrap; gap: .4rem; }
  .ptoc__link { padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 100px; background: var(--paper); font-size: .8rem; }
  .ptoc__link[aria-current] { background: transparent; border-color: var(--ultra-line); }
  .ptoc__link:hover { transform: none; }
  .ptoc .zpick__glider { border-radius: 100px; }
  .ptoc .zpick__glider::before { display: none; }
  .privprose .psec > h2::before { left: -.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ptoc__link:hover { transform: none; }
}

/* ==========================================================================
   Footer motion (2026-09-28)
   As the footer comes into view: its logo's squares unfold like the header's
   and the word folds apart once at its crease; the column headings flip in;
   the clock by "Replies within" turns its hands once. Pointing at a link draws
   a line under it, and the four places show their square of the logo.
   "Back to top" glides up and the header's logo unfolds again (script).
   ========================================================================== */
.footer__logo .logo__mark i { --depth: 55px; }
.footer__logo.is-in .logo__mark i { animation: tileUnfold .42s var(--ease) backwards; }
.footer__logo.is-in .logo__mark i:nth-child(1) { transform-origin: 100% 50%; animation-delay: .15s; }
.footer__logo.is-in .logo__mark i:nth-child(2) { transform-origin: 0 50%;    animation-delay: .21s; --from: 100deg; }
.footer__logo.is-in .logo__mark i:nth-child(3) { transform-origin: 100% 50%; animation-delay: .27s; }
.footer__logo.is-in .logo__mark i:nth-child(4) { transform-origin: 0 50%;    animation-delay: .33s; --from: 100deg; }
.footer__logo.is-in .logo__syl--four { animation: sylFour .95s cubic-bezier(.34, 1.3, .64, 1) .55s; }
.footer__logo.is-in .logo__syl--fold { animation: sylFold .95s cubic-bezier(.34, 1.3, .64, 1) .55s; }
.footer__logo.is-in .logo__crease    { animation: creaseFlash .95s ease .55s; }
@keyframes sylFour { 45% { transform: rotateY(-18deg) skewY(-2deg) translateZ(3px); } }
@keyframes sylFold { 45% { transform: rotateY(20deg) skewY(2deg) translateZ(4px); } }
@keyframes creaseFlash { 45% { opacity: .9; } }

/* the clock turns its hands once as it arrives, and again when pointed at */
.footer__promise svg path { transform-box: view-box; transform-origin: 7px 7px; }
.footer__promise.is-in svg path { animation: clockSpin 1.1s cubic-bezier(.45, 0, .3, 1) .35s; }
.footer__promise:hover svg path { animation: clockSpinAgain 1.1s cubic-bezier(.45, 0, .3, 1); }
@keyframes clockSpin      { to { transform: rotate(360deg); } }
@keyframes clockSpinAgain { to { transform: rotate(360deg); } }

/* links: a line draws in underneath; the places show their square of the logo */
.footer ul a { position: relative; display: inline-block; transition: color .2s var(--ease), transform .25s var(--ease); }
.footer ul a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.footer ul a:hover::after, .footer ul a:focus-visible::after { transform: scaleX(1); }
.footer__zones a:hover, .footer__zones a:focus-visible { transform: translateX(4px); }
.footer__zones a::before {
  content: "";
  position: absolute;
  left: -16px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  border-radius: 2px;
  background: #2340E8;
  transform: scale(0) rotate(-90deg);
  transition: transform .32s cubic-bezier(.3, 1.6, .5, 1);
}
/* the places in a line: blue, butter, blue, butter (squares in the logo's 2x2 keep its diagonal) */
.footer__zones li:nth-child(2) a::before, .footer__zones li:nth-child(4) a::before { background: #FFC94D; }
.footer__zones a:hover::before, .footer__zones a:focus-visible::before { transform: none; }

/* back to top */
.footer__top {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .8rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 100px;
  background: transparent;
  font: inherit;
  color: #98A2C4;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.footer__top span { display: inline-block; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.footer__top:hover { color: var(--butter); border-color: rgba(252, 211, 77, .45); background: rgba(255, 255, 255, .04); }
.footer__top:hover span { transform: translateY(-3px); }
.footer__top:focus-visible { outline: 2px solid var(--butter); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .footer ul a:hover, .footer__zones a:hover { transform: none; }
  .footer__promise:hover svg path { animation: none; }
}

/* ==========================================================================
   Header motion (2026-09-28)
   A shadow once the page slides under it. On a mouse, a soft highlight slides
   between the menu's links. Pointing at the logo spreads its four squares a
   touch, as the word folds; the bag's handle lifts; the person nods. A name
   arriving in the account button flips in (script). On phones the menu opens
   as a card that unfolds, and the three lines turn into a cross.
   ========================================================================== */
.header { transition: box-shadow .3s var(--ease), border-color .3s var(--ease); }
.header.is-scrolled { box-shadow: 0 12px 30px -20px rgba(13, 20, 36, .35); border-bottom-color: transparent; }

/* the sliding highlight */
/* (never while it's the open phone menu, which is positioned under the header) */
.nav.has-glider:not(.is-open) { position: relative; }
.nav.has-glider a { position: relative; z-index: 1; }
.nav.has-glider a:hover:not([aria-current="page"]) { background: transparent; }
.nav__glider {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  border-radius: 100px;
  background: var(--ultra-wash);
  opacity: 0;
  pointer-events: none;
  transition: transform .32s var(--ease), width .32s var(--ease), opacity .2s ease;
}
.nav__glider.is-on { opacity: 1; }

/* the logo: the squares spread a touch as the word folds */
.logo__mark i { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.logo:hover .logo__mark i:nth-child(1) { transform: translate(-1.5px, -1.5px); }
.logo:hover .logo__mark i:nth-child(2) { transform: translate(1.5px, -1.5px); }
.logo:hover .logo__mark i:nth-child(3) { transform: translate(-1.5px, 1.5px); }
.logo:hover .logo__mark i:nth-child(4) { transform: translate(1.5px, 1.5px); }

/* the bag's handle lifts; the person nods */
.cart-btn svg path:last-child,
.acct-btn svg circle { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.cart-btn:hover svg path:last-child { transform: translateY(-2px); }
.acct-btn:hover svg circle { transform: translateY(-1.5px); }
[data-account-label] { display: inline-block; }

/* the menu button: three lines that turn into a cross */
.nav-toggle__icon { position: relative; display: block; width: 20px; height: 14px; }
.nav-toggle__icon i {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .32s var(--ease), opacity .2s ease;
}
.nav-toggle__icon i:nth-child(1) { top: 0; }
.nav-toggle__icon i:nth-child(2) { top: 6px; }
.nav-toggle__icon i:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon i:nth-child(2) { transform: scaleX(.2); opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* phones: the open menu is a card under the header, not a stretched pill */
@media (max-width: 720px) {
  .nav.is-open {
    position: absolute;
    top: calc(100% + 8px);
    left: 12px; right: 12px;
    gap: .15rem;
    padding: .5rem;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--paper);
    box-shadow: 0 30px 60px -24px rgba(13, 20, 36, .4);
  }
  .nav.is-open a { padding: .85rem 1rem; border-bottom: 0; border-radius: 14px; font-size: 1.05rem; }
  .nav__glider { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .logo:hover .logo__mark i:nth-child(n), .cart-btn:hover svg path:last-child, .acct-btn:hover svg circle { transform: none; }
  .nav__glider { transition: opacity .2s ease; }
}

/* ==========================================================================
   Canceling an order (2026-09-28)
   An unpaid order's label ends in a tear-off strip with "Cancel order"; it
   asks on the strip itself before anything happens. A paid one says to email.
   ========================================================================== */
.olabel__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  padding: .75rem 1rem;
  border-top: 2px dashed rgba(13, 20, 36, .22);
  background: var(--mist);
}
.olabel__actions.is-asking { background: var(--bad-wash); border-top-color: var(--bad-soft); }
.olabel__hint { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.olabel__hint strong { color: var(--ink); }
.olabel__hint a { font-weight: 700; }
.olabel__error { flex-basis: 100%; margin: 0; }
.olabel__cancel, .olabel__yes, .olabel__keep {
  padding: .5rem 1rem;
  border-radius: 100px;
  font: 700 .84rem/1.2 var(--body);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.olabel__cancel { border: 1.5px solid var(--bad-line); background: var(--paper); color: var(--bad); }
.olabel__cancel:hover { border-color: #DC2626; background: var(--bad-wash); }
.olabel__confirm { display: flex; flex-wrap: wrap; gap: .5rem; }
.olabel__yes { border: 1.5px solid #DC2626; background: #DC2626; color: #fff; }
.olabel__yes:hover { background: var(--bad); border-color: var(--bad); }
.olabel__yes:disabled { opacity: .7; cursor: default; }
.olabel__keep { border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); }
.olabel__keep:hover { border-color: var(--ink); }
.olabel__cancel:active, .olabel__yes:active, .olabel__keep:active { transform: scale(.96); }
.olabel__cancel:focus-visible, .olabel__yes:focus-visible, .olabel__keep:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.olabel:focus { outline: none; }
@media (max-width: 560px) {
  .olabel__actions { flex-direction: column; align-items: stretch; }
  .olabel__cancel { align-self: flex-start; }
}

/* ==========================================================================
   Removing finished orders from the history (2026-09-28)
   ========================================================================== */
.olist__tools { display: flex; justify-content: flex-end; margin: 0 0 1rem; transform-origin: 50% 0; }
.olist__tools[hidden] { display: none; }
.olist__tools.is-asking {
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  padding: .8rem 1rem;
  border: 1.5px dashed var(--bad-soft);
  border-radius: 16px;
  background: var(--bad-wash);
}
.olist__clear {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem .5rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
  font: 700 .84rem/1.2 var(--body);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.olist__clear:hover { border-color: var(--ink); color: var(--ink); }
.olist__clear:active { transform: scale(.96); }
.olist__clear:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.olist__n {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem; height: 1.4rem;
  padding: 0 .35rem;
  border-radius: 100px;
  background: var(--mist);
  font-family: var(--mono);
  font-size: .7rem;
}
.olist__undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: .7rem .8rem .7rem 1.1rem;
  border-radius: 16px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: .9rem;
  font-weight: 600;
  transform-origin: 50% 0;
}
.olist__undo[hidden] { display: none; }
.olist__undo button {
  padding: .45rem 1rem;
  border: 0;
  border-radius: 100px;
  background: var(--butter);
  color: var(--ink-fixed);
  font: 700 .84rem/1.2 var(--body);
  cursor: pointer;
}
.olist__undo button:hover { background: var(--paper); }
.olist__undo button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.olabel__remove {
  padding: .5rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
  font: 700 .84rem/1.2 var(--body);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.olabel__remove:hover { border-color: var(--ink); color: var(--ink); }
.olabel__remove:active { transform: scale(.96); }
.olabel__remove:disabled { opacity: .6; cursor: default; }
.olabel__remove:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (max-width: 560px) {
  .olist__tools { justify-content: stretch; }
  .olist__tools.is-asking { flex-direction: column; align-items: stretch; }
  .olabel__remove { align-self: flex-start; }
}

/* the Orders tab's number hides when nothing is in progress */
.zpick__n[hidden] { display: none; }

/* ==========================================================================
   Complete the four — something from each place in one order takes money
   off. The logo's four squares stand for the four places throughout: lit for
   the ones the cart covers (blue, butter / butter, blue, as in the logo).
   ========================================================================== */
.b4__mark {
  display: inline-grid;
  grid-template-columns: repeat(2, 8px);
  gap: 2px;
  flex: none;
  vertical-align: middle;
}
.b4__mark i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
  backface-visibility: hidden;
}
.b4__mark i.is-on { background: var(--ultra); box-shadow: none; }
.b4__mark i.is-on:nth-child(2), .b4__mark i.is-on:nth-child(3) { background: var(--butter); }

/* the strip on the home, shop and product pages */
.b4 {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .95rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.b4[hidden] { display: none; }
.b4 .b4__mark { grid-template-columns: repeat(2, 11px); gap: 3px; padding: 5px; border-radius: 7px; background: var(--ink); }
.b4 .b4__mark i { width: 11px; height: 11px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.b4 .b4__mark i.is-on { box-shadow: none; }
.b4__text { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.b4__text strong { color: var(--ink); }
.b4.is-complete { border-color: #A7F3D0; background: var(--ok-wash); }
.b4.is-complete .b4__text strong:last-child { color: var(--ok); }

.homefolds__bundle { margin: 0 0 1.6rem; max-width: 34rem; }
.shopgrid__bundle { flex: 0 1 30rem; }
.pdpbuy__bundle { margin-top: .9rem; }
@media (max-width: 980px) {
  .shopgrid__bundle { flex-basis: auto; }
}

/* the cart summary's line: progress, then the saving */
.cartsum__bundle {
  position: relative;
  overflow: hidden;
  margin: 0 -.6rem;
  padding: 0 .6rem;
  border-radius: 10px;
  transition: background-color .4s var(--ease);
}
.cartsum__bundle[hidden] { display: none; }
.cartsum__b4 { display: inline-flex; align-items: center; gap: .55rem; }
.cartsum__off { font-size: .85rem; font-weight: 600; color: var(--ink-3); backface-visibility: hidden; }
.cartsum__b4hint { margin: -.3rem 0 .45rem; padding-left: calc(18px + .55rem); font-size: .8rem; line-height: 1.4; color: var(--ink-3); }
.cartsum__b4hint[hidden] { display: none; }
.cartsum__bundle.is-complete { background: var(--ok-wash); }
.cartsum__bundle.is-complete .cartsum__b4 { color: var(--ok-deep); font-weight: 600; }
.cartsum__bundle.is-complete .cartsum__off { font-size: .95rem; font-weight: 800; color: var(--ok); }
.cartsum__bundle::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-120%);
  pointer-events: none;
}
.cartsum__bundle.is-shine::after { animation: b4Shine .9s cubic-bezier(.45, 0, .55, 1) .3s; }
@keyframes b4Shine { to { transform: translateX(260%); } }

/* "Finish your four": with one place left, the thing that covers it, in the summary (2026-10-01) */
.b4fin {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .1rem 0 .7rem;
  padding: .55rem .6rem .55rem .55rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: 16px;
  background: var(--paper);
  backface-visibility: hidden;
}
.b4fin[hidden] { display: none; }
.b4fin__media { flex: none; display: block; width: 52px; height: 52px; overflow: hidden; border-radius: 12px; background: var(--mist); }
.b4fin__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b4fin__info { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.b4fin__k { font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--link); }
.b4fin__name { font-weight: 800; color: var(--ink); text-decoration: none; }
.b4fin__name:hover { color: var(--link); }
.b4fin__say { display: inline-block; font-size: .78rem; color: var(--ink-3); backface-visibility: hidden; }
.b4fin__add {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .55rem .95rem;
  border: 0;
  border-radius: 100px;
  background: var(--ink);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: var(--on-ink);
  cursor: pointer;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.b4fin__add::before { content: "+"; font-size: 1.05rem; line-height: 0; }
.b4fin__add:hover { background: var(--ultra); }
.b4fin__add:active { transform: scale(.96); }
.b4fin__add:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* checkout and the thank-you receipt */
.cosum__save { color: var(--ok); font-weight: 700; }
.cosum__save > span:first-child { display: inline-flex; align-items: center; gap: .5rem; }
.cosum__b4hint {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: .5rem 0 .2rem;
  padding: .6rem .75rem;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.cosum__b4hint .b4__mark { margin-top: .2rem; }
.cosum__b4hint a { color: var(--link); font-weight: 700; white-space: nowrap; }

/* the header's cart panel */
.bagpop__save {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: .35rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ok);
}
.bagpop__save strong { font-weight: 800; }
.bagpop__places.is-complete { color: var(--ok-deep); }
.bagpop__places strong { color: var(--ink); }
.bagpop__places.is-complete strong { color: var(--ok); }
.bagpop__places.is-fresh .bagpop__sq { animation: b4Hop .46s cubic-bezier(.3, 1.3, .5, 1) backwards; }
.bagpop__places.is-fresh .bagpop__sq:nth-child(1) { animation-delay: .35s; }
.bagpop__places.is-fresh .bagpop__sq:nth-child(2) { animation-delay: .43s; }
.bagpop__places.is-fresh .bagpop__sq:nth-child(3) { animation-delay: .51s; }
.bagpop__places.is-fresh .bagpop__sq:nth-child(4) { animation-delay: .59s; }
.bagpop__save.is-fresh { animation: b4Unfold .48s var(--ease) .2s backwards; }
@keyframes b4Hop { 50% { transform: translateY(-4px) scale(1.25); } }
@keyframes b4Unfold { from { transform: perspective(400px) rotateX(-80deg); opacity: 0; } }

/* an order in the account that got the saving: a line under its items */
.olabel__saveline { color: var(--ok); }
.olabel__savemark { display: grid; place-items: center; width: 44px; height: 28px; }

@media (prefers-reduced-motion: reduce) {
  .b4__mark i, .b4, .cartsum__bundle { transition: none; }
  .cartsum__bundle.is-shine::after,
  .bagpop__places.is-fresh .bagpop__sq:nth-child(n),
  .bagpop__save.is-fresh { animation: none; }
}

/* ==========================================================================
   Order tracking — find an order by its number and email (or, signed in,
   just pick it), then follow it along the route from warehouse to door:
   the logo's four squares, packed as a parcel, travel to where it has got to.
   ========================================================================== */
.trackhero {
  position: relative;
  padding-block: clamp(2rem, 4.5vw, 3.25rem);
  border-bottom: 1px solid var(--line-soft);
}
.trackhero .orb--blue  { top: -300px; left: 40%; }
.trackhero .orb--amber { bottom: -340px; left: -160px; }
.trackhero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  align-items: start;
  gap: 2rem clamp(2rem, 6vw, 5rem);
}
.trackhero__text { padding-top: clamp(0rem, 3vw, 2.5rem); }
.trackhero__title {
  margin: 0 0 .9rem;
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: -.04em;
}
.trackhero .lede { margin: 0; max-width: 32rem; }

.trackfind { display: grid; gap: 1rem; }
.trackfind__title { margin: 0; font-size: 1.1rem; letter-spacing: -.02em; }
.trackform { gap: 1.05rem; }
.trackform__keep { margin-top: .1rem; }
.trackform__note { margin-top: -.75rem; }
.trackform .acctform__small[hidden] { display: none; }

.trackmine, .trackdev {
  display: grid;
  gap: .8rem;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 50px -40px rgba(13, 20, 36, .3);
}
.trackmine[hidden], .trackdev[hidden], .trackmine__none[hidden] { display: none; }
.trackmine__list, .trackdev__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.trackmine__none { margin: 0; font-size: .9rem; color: var(--ink-2); }
.trackmine__btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem .8rem;
  width: 100%;
  padding: .75rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .15s var(--ease);
}
.trackmine__btn:hover { border-color: var(--line-strong); }
.trackmine__btn:active { transform: scale(.98); }
.trackmine__btn[aria-pressed="true"] { border-color: var(--ink); background: var(--mist); }
.trackmine__btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.trackmine__no { font-family: var(--mono); font-size: .84rem; font-weight: 700; letter-spacing: .04em; }
.trackmine__state { font-size: .8rem; font-weight: 700; color: var(--link); }
.trackmine__bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.trackmine__bar i { display: block; height: 100%; background: var(--ultra); transform-origin: 0 50%; }

.trackdev__item { display: flex; align-items: center; gap: .5rem; }
.trackdev__go {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  min-width: 0;
  padding: .65rem .85rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.trackdev__go:hover { border-color: var(--line-strong); }
.trackdev__go[aria-pressed="true"] { border-color: var(--ink); background: var(--mist); }
.trackdev__go b { font-family: var(--mono); font-size: .82rem; letter-spacing: .04em; }
.trackdev__go small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--ink-3); }
.trackdev__forget {
  padding: .5rem .7rem;
  border: 0;
  border-radius: 10px;
  background: none;
  font: 600 .8rem/1 var(--body);
  color: var(--ink-3);
  cursor: pointer;
}
.trackdev__forget:hover { color: var(--bad); background: var(--bad-wash); }
.trackdev__go:focus-visible, .trackdev__forget:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---------- the order ---------- */
.trackresult { padding-block: clamp(1.75rem, 4vw, 3rem) clamp(3.5rem, 8vw, 6rem); scroll-margin-top: 90px; }
.trackresult[hidden] { display: none; }
.tcard {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 2px 0 var(--ink), 0 40px 70px -46px rgba(13, 20, 36, .5);
}
.tcard__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  padding: .85rem clamp(1rem, 3vw, 1.6rem);
  background: var(--panel);
  color: var(--on-panel);
}
.tcard__no { margin: 0; font-family: var(--mono); font-size: .95rem; font-weight: 700; letter-spacing: .06em; color: var(--on-panel); outline: none; }
.tcard__date { margin-left: auto; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--butter); }
.tcard__body { display: grid; gap: 1.8rem; padding: clamp(1.2rem, 3.2vw, 2.2rem) clamp(1rem, 3vw, 1.8rem); }

.tcard__now { position: relative; padding-right: 13rem; }
.tcard__state { margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; color: var(--ink); }
.tcard__eta { margin: .55rem 0 0; font-size: 1.05rem; color: var(--ink-2); }
.tcard__eta strong { color: var(--ink); }
.tcard__next { margin: .7rem 0 0; max-width: 40rem; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.tcard__stamp { top: .2rem; bottom: auto; right: 0; opacity: 1; transform: rotate(-9deg); font-size: .86rem; padding: .5rem .85rem; }
.tcard__stamp.is-closed { border-color: var(--ink-3); color: var(--ink-3); }

/* the route: five stops, the line between them, and the parcel */
.troute { position: relative; padding-top: 38px; }
.troute__line {
  position: absolute;
  top: calc(38px + 9px - 2px);
  left: 10%;
  right: 10%;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.troute__fill {
  position: absolute;
  inset: 0;
  background: var(--ultra);
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
}
.troute__stops { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.troute__stop { display: grid; justify-items: center; align-content: start; gap: .45rem; text-align: center; }
.troute__dot {
  width: 18px;
  height: 18px;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  box-sizing: border-box;
}
.troute__stop.is-done .troute__dot { border-color: var(--link); background: var(--ultra); }
.troute__stop.is-current .troute__dot { border-color: var(--link); background: var(--paper); box-shadow: 0 0 0 4px var(--ultra-wash); }
.troute__label {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.troute__stop.is-done .troute__label { color: var(--ink); }
.troute__stop.is-current .troute__label { color: var(--link); }
.troute__when { font-size: .74rem; color: var(--ink-3); }
.troute__parcel {
  position: absolute;
  top: 16px;
  left: calc(10% + var(--s) * 20%);
  display: grid;
  grid-template-columns: repeat(2, 9px);
  gap: 3px;
  padding: 5px;
  border-radius: 8px;
  background: var(--ink);
  box-shadow: 0 8px 16px -6px rgba(13, 20, 36, .5);
  transform: translate(-50%, -50%);
}
.troute__parcel i { display: block; width: 9px; height: 9px; border-radius: 2px; background: var(--ultra); }
.troute__parcel i:nth-child(2), .troute__parcel i:nth-child(3) { background: var(--butter); }
.troute.is-closed .troute__line { background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.troute.is-closed .troute__label { color: var(--ink-3); }

/* the carrier's number */
.tcard__carrier {
  display: grid;
  justify-items: start;
  gap: .7rem;
  padding: 1rem 1.1rem;
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  background: var(--mist);
}
.tcard__carrier .colabel__k { margin: 0; }
.tcard__code { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.tcard__code code { font-family: var(--mono); font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 700; letter-spacing: .06em; color: var(--ink); overflow-wrap: anywhere; }
.tcard__copy {
  padding: .4rem .85rem;
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  background: var(--paper);
  font: 700 .8rem/1.2 var(--body);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tcard__copy:hover { background: var(--ink); color: var(--on-ink); }
.tcard__copy:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.tcard__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.tcard__h { margin: 0; font-size: 1rem; letter-spacing: -.01em; }
.tcard__what .olabel__items { margin-top: .7rem; }
.tcard__sums { margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.tcard__side { display: grid; align-content: start; gap: 1rem; }
.tcard__to p { margin: 0; font-size: .92rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.tcard__private, .tcard__help { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
.tcard__help a { font-weight: 700; }
.tcard__all { justify-self: start; font-weight: 700; color: var(--link); }
.tcard.is-closed { border-color: var(--ink-3); box-shadow: 0 2px 0 var(--ink-3), 0 40px 70px -46px rgba(13, 20, 36, .35); }
.tcard.is-closed .tcard__head { background: var(--ink-2); }

/* the account's order labels point here */
.olabel__follow { margin-left: .45rem; font-weight: 700; color: var(--link); white-space: nowrap; }
.olabel__tracking { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; margin: .6rem 0 0; font-size: .86rem; color: var(--ink-2); }
.olabel__tracking .colabel__k { display: inline; margin: 0; }
.olabel__tracking b { font-family: var(--mono); letter-spacing: .04em; color: var(--ink); }
.olabel__tracking a { font-weight: 700; }

@media (max-width: 900px) {
  .trackhero__grid { grid-template-columns: 1fr; }
  .trackhero__text { padding-top: 0; }
  .tcard__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tcard__now { padding-right: 0; display: grid; }
  .tcard__stamp { position: static; justify-self: start; order: -1; margin: 0 0 .9rem .3rem; font-size: .72rem; }
  .troute { padding-top: 32px; }
  .troute__line { top: calc(32px + 7px - 2px); }
  .troute__dot { width: 14px; height: 14px; border-width: 2.5px; }
  .troute__label { font-size: .54rem; letter-spacing: .05em; }
  .troute__when { font-size: .64rem; }
  .troute__parcel { top: 13px; grid-template-columns: repeat(2, 7px); gap: 2px; padding: 4px; border-radius: 6px; }
  .troute__parcel i { width: 7px; height: 7px; }
  .tcard__date { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .trackmine__btn, .trackdev__go, .tcard__copy { transition: none; }
}

/* ==========================================================================
   Tracking page motion (2026-09-28)
   Arriving, the heading rises and the find panel unfolds. A field that looks
   right gets the checkout's tick; while it looks, a scan line runs across the
   form once. The result: the status flips in, stop labels lift as the parcel
   passes, the tracking number flips in, a delivered order's parcel spills the
   four squares. Transform and opacity only; nothing loops.
   ========================================================================== */
.trackpage .trackhero__text > .eyebrow,
.trackpage .trackhero__title,
.trackpage .trackhero .lede { animation: coRise .5s var(--ease) backwards; }
.trackpage .trackhero__title { animation-delay: .05s; }
.trackpage .trackhero .lede  { animation-delay: .1s; }
.trackpage .trackfind > * { animation: trackUnfold .5s var(--ease) backwards; transform-origin: 50% 0; }
.trackpage .trackfind > :nth-child(1) { animation-delay: .12s; }
.trackpage .trackfind > :nth-child(2) { animation-delay: .2s; }
.trackpage .trackfind > :nth-child(3) { animation-delay: .28s; }
@keyframes trackUnfold { from { transform: perspective(1000px) rotateX(-38deg) translateY(10px); opacity: 0; } }

.trackform { position: relative; overflow: hidden; }
.trackform::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--ultra), transparent);
  box-shadow: 0 0 14px 2px rgba(37, 80, 235, .45);
  opacity: 0; pointer-events: none;
}
.trackform.is-seeking::after { animation: trackScan .9s cubic-bezier(.45, 0, .55, 1); }
@keyframes trackScan {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(calc(var(--form-h, 560px))); opacity: 0; }
}
.trackform .cofield__box input { padding-right: 2.4rem; }

.tcard__state, .tcard__code code, .troute__label { display: inline-block; backface-visibility: hidden; }
.troute__bit { position: absolute; z-index: 3; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; }
.trackmine__btn { transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .15s var(--ease); }
.trackmine__btn:hover { transform: translateY(-1px); }
.tcard__follow span { display: inline-block; transition: transform .25s var(--ease); }
.tcard__follow:hover span { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .trackpage .trackhero__text > .eyebrow, .trackpage .trackhero__title, .trackpage .trackhero .lede,
  .trackpage .trackfind > *, .trackform.is-seeking::after { animation: none; }
  .trackmine__btn:hover, .tcard__follow:hover span { transform: none; }
}

/* ==========================================================================
   Account page, more motion (2026-09-28)
   A new password lights the logo's four squares as it gets stronger; email
   fields get the checkout's tick; "Password changed" draws its tick.
   ========================================================================== */
.pwmeter { display: flex; align-items: center; gap: .6rem; margin-top: .1rem; font-size: .8rem; font-weight: 600; color: var(--ink-3); }
.pwmeter[hidden] { display: none; }
.pwmeter__sq { display: inline-grid; grid-template-columns: repeat(2, 9px); gap: 2px; padding: 4px; border-radius: 6px; background: var(--ink); flex: none; }
.pwmeter__sq i { width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.pwmeter__sq i.is-on { background: var(--ultra); box-shadow: none; }
.pwmeter__sq i.is-on:nth-child(2), .pwmeter__sq i.is-on:nth-child(3) { background: var(--butter); }
.pwmeter__say { display: inline-block; }
.pwmeter.is-fine .pwmeter__say { color: var(--ok); }
.acctform .cofield__box input { padding-right: 2.4rem; }
.acctform__ok { display: flex; align-items: center; gap: .5rem; }
.okcheck { flex: none; }
.okcheck path { stroke-dasharray: 20; stroke-dashoffset: 0; }
.olabel__follow { display: inline-block; }
.addrcard__default { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .pwmeter__sq i { transition: none; }
}

/* ==========================================================================
   email.html — where the links in our emails land (2026-10-01): confirming a
   sign-up unfolds the logo's squares; unsubscribing leaves them folded flat.
   ========================================================================== */
.mailhero {
  position: relative;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--line-soft);
}
.mailhero .orb--blue  { top: -300px; left: 25%; }
.mailhero .orb--amber { bottom: -340px; right: -160px; left: auto; }
.mailhero__inner { position: relative; z-index: 1; display: flex; justify-content: center; }
.mailcard {
  width: 100%;
  max-width: 36rem;
  padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 5vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: var(--lift-2);
  text-align: center;
}
.mailmark {
  display: inline-grid;
  grid-template-columns: repeat(2, 26px);
  gap: 5px;
  margin-bottom: 1.25rem;
}
.mailmark i { width: 26px; height: 26px; border-radius: 6px; background: var(--ultra); transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.mailmark i:nth-child(2), .mailmark i:nth-child(3) { background: var(--butter); }
/* waiting for the API, nothing to do, or unsubscribed: the squares sit folded flat, outlined */
.mailcard.is-shut .mailmark i,
.mailcard.is-waiting .mailmark i { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.mailcard .eyebrow { display: block; margin-bottom: .6rem; }
.mailcard__title { margin: 0 0 .75rem; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.08; letter-spacing: -.035em; outline: none; }
.mailcard__text { margin: 0 auto; max-width: 30rem; font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); }
.mailcard__text:empty { display: none; }
.mailcard__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem 1rem; margin-top: 1.6rem; }
.mailcard__actions:empty { display: none; }
.mailcard__undo { padding: .4rem 0; border: 0; background: none; font: inherit; font-size: .9rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mailcard__undo:hover { color: var(--ink); }
.mailcard__undo:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.mailcard[data-state="confirmed"] .eyebrow { color: var(--ok); }
@media (prefers-reduced-motion: reduce) {
  .mailmark i { transition: none; }
}


/* ==========================================================================
   Product photos, more than one. The photos lie stacked in the frame; the next
   one unfolds over the last from the side it comes from, hinged on that edge
   (the same fold as the shop's cards and the spec leaflet). Arrows sit on the
   photo, the thumbnails under it; on a phone a sideways swipe turns them too.
   ========================================================================== */
.pdpphoto[data-gallery] .pdpphoto__box { touch-action: pan-y; }

.pdpphoto__step {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-top: -1.3rem;
  padding: 0;
  border: 1px solid rgba(13, 20, 36, .08);
  border-radius: 50%;
  background: rgba(var(--paper-rgb), .92);
  color: var(--ink);
  box-shadow: 0 6px 18px -8px rgba(13, 20, 36, .45);
  cursor: pointer;
  transition: opacity .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease);
}
.pdpphoto__step--prev { left: .75rem; }
.pdpphoto__step--next { right: .75rem; }
.pdpphoto__step:hover { background: var(--paper); transform: scale(1.06); }
.pdpphoto__step:active { transform: scale(.94); }
.pdpphoto__step:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* with a mouse they wait until the pointer is on the photo (zoomed or not) */
@media (hover: hover) and (pointer: fine) {
  .pdpphoto__step { opacity: 0; }
  .pdpphoto__stage:hover .pdpphoto__step,
  .pdpphoto__step:focus-visible { opacity: 1; }
}

.pdpthumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .9rem;
}
.pdpthumb {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--photo);
  cursor: pointer;
  opacity: .62;
  transition: opacity .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pdpthumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
.pdpthumb:hover { opacity: 1; transform: translateY(-2px); }
.pdpthumb.is-on {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--link);
}
.pdpthumb:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
/* the product's video: the last face of the box. CJ's clips are upright, so the clip
   keeps its own shape on a dark ground; no zoom and no "Point to zoom" on it */
.pdpphoto__video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 20px;
  background: #0B1220;
}
.pdpphoto.is-video::after { opacity: 0; }
.pdpphoto.is-video.can-zoom .pdpphoto__box { cursor: auto; }
/* its thumbnail carries a play mark */
.pdpthumb__play {
  position: absolute;
  inset: 0;
  width: 26px;
  height: 26px;
  margin: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(13, 20, 36, .72);
  color: #fff;
  pointer-events: none;
}
.pdpthumb__play svg { margin-left: 2px; }
@media (max-width: 600px) {
  .pdpphoto__step { width: 2.3rem; height: 2.3rem; margin-top: -1.15rem; }
  .pdpphoto__step--prev { left: .5rem; }
  .pdpphoto__step--next { right: .5rem; }
  .pdpthumbs { gap: .5rem; margin-top: .6rem; }
  .pdpthumb { width: 60px; height: 60px; border-radius: 12px; }
  .pdpthumb img { border-radius: 12px; }
  .pdpphoto__video { border-radius: 16px; }
  .pdpthumb__play { width: 22px; height: 22px; }
}

/* arriving: the thumbnails come up one after another, under the photo's own arrival */
.pdpage .pdpthumb { animation: thumbIn .46s var(--ease) backwards; animation-delay: calc(.5s + var(--i, 0) * 70ms); }
@keyframes thumbIn { from { opacity: 0; transform: translateY(10px) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  .pdpage .pdpthumb { animation: none; }
  .pdpthumb, .pdpphoto__step { transition: none; }
}

/* ==========================================================================
   Search — the header button opens a panel that drops from the top of the
   page. Its signature is the logo's 2×2 mark beside the box: one square per
   place (desk, car / kitchen, bag, in the logo's blue and butter), lit when
   that place has a match for what's typed.
   ========================================================================== */
.search-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .62rem .8rem .62rem .9rem;
  border: 1.5px solid transparent;
  border-radius: 100px;
  background: none;
  color: var(--ink-2);
  font: 700 .95rem var(--body);
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.search-btn:hover { color: var(--ink); border-color: var(--line); background: var(--paper); }
.search-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.search-btn svg { flex: none; }
.search-btn__key {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--mist);
  color: var(--ink-3);
  font: 600 .7rem var(--mono);
}
@media (hover: none) { .search-btn__key { display: none; } }
/* the word "Search" only fits beside the nav from about 1040px; 1180px leaves room for a
   signed-in customer's first name in place of "Log in" */
@media (max-width: 1180px) {
  .search-btn { padding: .62rem .7rem; }
  .search-btn__key { display: none; }
  .search-btn__label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
/* just above the phone layout the header holds the logo, the menu and four buttons
   (search, dark mode, account, cart), so everything sits a little closer together */
@media (min-width: 721px) and (max-width: 900px) {
  .header__bar { column-gap: .75rem; }
  .header__cta { gap: .15rem; }
  .search-btn, .acct-btn, .theme-btn { padding-inline: .45rem; }
  .theme-btn { width: 2.3rem; }
  .cart-btn { padding-inline: .6rem; }
  .nav a { padding-inline: .5rem; white-space: nowrap; }
}
/* below 1100px "Log in" shows as its icon (the dark-mode button needs the room) */
@media (max-width: 1100px) {
  .acct-btn { padding: .62rem .7rem; }
  .acct-btn__label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 400px) {
  .search-btn, .acct-btn { padding: .55rem .5rem; }
  .header__cta { gap: .2rem; }
}

/* the page behind stays put while searching */
html.is-searching { overflow: hidden; }

.search {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  max-width: none;
  max-height: 100dvh;
  margin: 0;
  padding: 0 var(--gutter);
  border: 0;
  background: transparent;
  overflow: visible;
}
.search::backdrop { background: rgba(13, 20, 36, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.search__panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem .5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--lift-3);
  transform-origin: 50% 0;
  display: flex;
  flex-direction: column;
  max-height: min(78dvh, 720px);
}

.search__form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .55rem .6rem .55rem .7rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--mist);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.search__form:focus-within { border-color: var(--link); background: var(--paper); }

/* the logo's mark: four places, lit where there's a match */
.search__mark { display: grid; grid-template-columns: repeat(2, 13px); gap: 3px; }
.search__mark i {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--line);
  transition: background-color .25s var(--ease), transform .35s var(--ease);
}
.search__mark i.is-on { transform: scale(1.12); }
.search__mark i.is-on:nth-child(1), .search__mark i.is-on:nth-child(4) { background: var(--ultra); }
.search__mark i.is-on:nth-child(2), .search__mark i.is-on:nth-child(3) { background: var(--butter); }

.search__input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 700 1.35rem/1.2 var(--display);
  letter-spacing: -.01em;
  padding: .35rem 0;
}
.search__input::placeholder { color: var(--ink-3); font-weight: 600; }
.search__input:focus { outline: none; }
.search__input::-webkit-search-cancel-button { display: none; }

.search__close {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-3);
  font: 600 .72rem var(--mono);
  padding: .4rem .55rem;
  cursor: pointer;
}
.search__close:hover { color: var(--ink); border-color: var(--ink-3); }
.search__close:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.search__zones { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 .2rem; }
.search__zone {
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
  color: var(--ink-2);
  font: 600 .72rem var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .42rem .75rem;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.search__zone b { font-weight: 600; color: var(--link); margin-left: .2rem; }
.search__zone:hover:not(:disabled) { border-color: var(--link); color: var(--link); }
.search__zone[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.search__zone[aria-pressed="true"] b { color: var(--butter); }
.search__zone:disabled { opacity: .4; cursor: default; }
.search__zone:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.search__status { margin: .7rem .15rem .5rem; font-size: .9rem; color: var(--ink-3); }
.search__status a { color: var(--link); font-weight: 600; }
.search__try {
  border: 0;
  padding: 0;
  background: none;
  color: var(--link);
  font: 600 .9rem var(--body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.search__results {
  list-style: none;
  margin: 0 -.5rem;
  padding: 0 0 .75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.search__hit {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .55rem .5rem;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background-color .15s var(--ease);
}
.search__hit:hover, .search__hit:focus-visible { background: var(--ultra-wash); outline: none; }
.search__hit img { width: 56px; height: 56px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--paper); object-fit: cover; }
.search__text { display: grid; min-width: 0; }
.search__name { color: var(--ink); font: 700 1rem/1.3 var(--display); }
.search__name mark { background: var(--butter-wash); color: inherit; border-radius: 3px; box-shadow: 0 -2px 0 var(--butter) inset; }
.search__sub { font-size: .85rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search__meta { display: grid; justify-items: end; gap: .15rem; }
.search__place { font: 600 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.search__price { font: 600 .95rem var(--mono); color: var(--ink); }

@media (max-width: 720px) {
  .search { padding: 0; }
  .search__panel { max-height: 88dvh; border-radius: 0 0 20px 20px; padding: .9rem .9rem .35rem; border-left: 0; border-right: 0; }
  .search__input { font-size: 1.12rem; }
  .search__form { gap: .7rem; }
  .search__hit { grid-template-columns: 48px 1fr auto; gap: .7rem; }
  .search__hit img { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .search__mark i { transition: none; }
}

/* ==========================================================================
   Options — colors and extras (2026-10-07). On a product page a color is a
   round button of the color alone; its name is in the legend above. The one
   chosen gets a ring and turns over once, like a card being folded open.
   Extras are pills with the difference in price. Cards show a dot per color.
   ========================================================================== */
.optpick { min-width: 0; margin: 1.35rem 0 1.15rem; padding: 0; border: 0; }
.optpick__legend {
  display: block;
  margin: 0 0 .7rem;
  padding: 0;
  font: 600 .68rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.optpick__legend b {
  display: inline-block;
  margin-left: .2rem;
  font: 700 .98rem/1 var(--body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.optpick__row { display: flex; flex-wrap: wrap; gap: .75rem .7rem; }

/* the radio itself stays over its button, invisible, so clicks, arrow keys and
   screen readers all work as in any radio group */
.optpick__swatch, .optpick__choice { position: relative; display: inline-flex; cursor: pointer; }
.optpick__swatch input, .optpick__choice input {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}

.optpick__swatch { width: 2.6rem; height: 2.6rem; }
.optpick__dot {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--sw);
  /* a soft shade at the bottom, so a swatch reads as a thing rather than a flat dot */
  background-image: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%, rgba(13, 20, 36, .14));
  box-shadow: inset 0 0 0 1px rgba(13, 20, 36, .12);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.optpick__swatch.is-light .optpick__dot { box-shadow: inset 0 0 0 1px rgba(13, 20, 36, .3); }
.optpick__swatch:hover .optpick__dot { transform: scale(1.07); }
.optpick__swatch input:checked + .optpick__dot {
  box-shadow: inset 0 0 0 1px rgba(13, 20, 36, .14), 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
  animation: swatchTurn .46s cubic-bezier(.3, 1.35, .5, 1);
}
.optpick__swatch input:focus-visible + .optpick__dot { outline: 2px solid var(--link); outline-offset: 7px; }
@keyframes swatchTurn {
  0%   { transform: perspective(160px) rotateY(-90deg) scale(.9); }
  100% { transform: none; }
}

.optpick__label {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .66rem 1.05rem;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
  color: var(--ink-2);
  font: 700 .9rem/1.2 var(--body);
  transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.optpick__label small { font: 700 .74rem/1 var(--mono); color: var(--link); }
.optpick__choice:hover .optpick__label { border-color: var(--line-strong); color: var(--ink); }
.optpick__choice input:checked + .optpick__label {
  border-color: var(--ink);
  background: var(--mist);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.optpick__choice input:focus-visible + .optpick__label { outline: 2px solid var(--link); outline-offset: 3px; }

/* cards: a dot per color (or how many versions), "from" when prices differ */
.pcard__dots {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0 0;
  font: 600 .64rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pcard__dotrow { display: inline-flex; padding-left: .2rem; }
.pcard__dotrow i {
  width: .78rem; height: .78rem;
  margin-left: -.2rem;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: 0 0 0 1.5px var(--paper), inset 0 0 0 1px rgba(13, 20, 36, .14);
}
.pcard__dotrow i.is-light { box-shadow: 0 0 0 1.5px var(--paper), inset 0 0 0 1px rgba(13, 20, 36, .3); }
.pcard__from { font-size: .72em; font-weight: 600; color: var(--ink-3); }

/* a line's choice wherever it's listed: the cart, its popover, checkout, orders */
.opttag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-2);
}
.opttag i {
  flex: none;
  width: .72rem; height: .72rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(13, 20, 36, .22);
}
.cartline__opt { display: block; margin-top: .1rem; }
.cosum__name .opttag, .olabel__item .opttag { display: flex; margin-top: .12rem; font-size: .76rem; }

@media (prefers-reduced-motion: reduce) {
  .optpick__swatch input:checked + .optpick__dot { animation: none; }
  .optpick__swatch:hover .optpick__dot { transform: none; }
}
@media (max-width: 720px) {
  .optpick__swatch { width: 2.75rem; height: 2.75rem; }     /* a fingertip's worth */
  .optpick__row { gap: .8rem .75rem; }
}

/* ==========================================================================
   Dark mode — the switch. A round button beside Search (sun or moon: what it
   switches to), and a "Dark mode" row with a little switch in the phone menu.
   While the colours change, everything cross-fades for a moment.
   ========================================================================== */
.theme-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.theme-btn:hover { color: var(--ink); border-color: var(--line); background: var(--paper); }
.theme-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.theme-btn svg { grid-area: 1 / 1; transition: transform .45s cubic-bezier(.3, 1.35, .5, 1), opacity .2s var(--ease); }
.theme-btn__sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="dark"] .theme-btn__moon { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="dark"] .theme-btn__sun { opacity: 1; transform: none; }

.nav__theme { display: none; }

html.is-theming, html.is-theming *, html.is-theming *::before, html.is-theming *::after {
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), fill .35s var(--ease) !important;
}

@media (max-width: 720px) {
  .header__cta .theme-btn { display: none; }          /* on phones it's in the menu */
  .nav.is-open .nav__theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .85rem 1rem;               /* lined up with the menu's links */
    border: 0;
    border-radius: 100px;
    background: none;
    color: var(--ink-2);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .nav__theme:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
  .nav__switch {
    position: relative;
    width: 2.6rem; height: 1.5rem;
    border-radius: 100px;
    background: var(--line-strong);
    transition: background-color .2s var(--ease);
  }
  .nav__switch i {
    position: absolute; top: .2rem; left: .2rem;
    width: 1.1rem; height: 1.1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .25s cubic-bezier(.3, 1.35, .5, 1);
  }
  .nav__theme[aria-pressed="true"] .nav__switch { background: var(--ultra); }
  .nav__theme[aria-pressed="true"] .nav__switch i { transform: translateX(1.1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-btn svg, .nav__switch, .nav__switch i { transition: none; }
}

/* Dark mode — colour swatches and dots get a faint light outline, so a black or
   dark-green one doesn't vanish into the dark card behind it */
:root[data-theme="dark"] .optpick__dot,
:root[data-theme="dark"] .optpick__swatch.is-light .optpick__dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
:root[data-theme="dark"] .optpick__swatch input:checked + .optpick__dot {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}
:root[data-theme="dark"] .pcard__dotrow i,
:root[data-theme="dark"] .pcard__dotrow i.is-light { box-shadow: 0 0 0 1.5px var(--paper), inset 0 0 0 1px rgba(255, 255, 255, .32); }
:root[data-theme="dark"] .opttag i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }


/* Dark mode — photos and videos a little dimmer, so their white backgrounds don't glare */
:root[data-theme="dark"] img, :root[data-theme="dark"] video { filter: brightness(.86); }
:root[data-theme="dark"] .zonestrip__badge { color: var(--link); }   /* its deep blue reads only on the light wash */

/* Dark mode — hover states. Under the pointer things get lighter than what they sit on,
   never darker; light buttons that turn blue get white text. */
:root[data-theme="dark"] .search-btn:hover,
:root[data-theme="dark"] .theme-btn:hover,
:root[data-theme="dark"] .acct-btn:hover,
:root[data-theme="dark"] .acct-btn[aria-current="page"],
:root[data-theme="dark"] .cart-btn:hover,
:root[data-theme="dark"] .zpick__btn:hover,
:root[data-theme="dark"] .qty button:hover:not(:disabled),
:root[data-theme="dark"] .bagpop__close:hover,
:root[data-theme="dark"] .pdpphoto__step:hover,
:root[data-theme="dark"] .olist__undo button:hover,
:root[data-theme="dark"] .zonestrip__card:hover { background: #1F2A44; border-color: #3A4A72; color: var(--ink); }
:root[data-theme="dark"] .pcard__add:hover,
:root[data-theme="dark"] .bagpop__add:hover,
:root[data-theme="dark"] .b4fin__add:hover { color: #fff; }
:root[data-theme="dark"] .btn--ghost:hover,
:root[data-theme="dark"] .acct-signout:hover,
:root[data-theme="dark"] .olist__clear:hover,
:root[data-theme="dark"] .olabel__remove:hover,
:root[data-theme="dark"] .olabel__keep:hover { border-color: var(--link); color: var(--ink); }
:root[data-theme="dark"] .pcard:hover,
:root[data-theme="dark"] .cartline:hover { border-color: #3A4A72; }

/* Dark mode — dropdowns: the shop's sort box gets a raised fill (lighter than the pill it
   sits in, not darker) and a hover; every dropdown's arrow is drawn in the light text color */
:root[data-theme="dark"] .sortpick { border-color: #34436A; }
:root[data-theme="dark"] .sortpick__select { background-color: #222D48; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23CBD2E0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .sortpick__select:hover { background-color: #2A3756; }
:root[data-theme="dark"] .cartdeliver select,
:root[data-theme="dark"] .pdpdeliver select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23CBD2E0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .cofield select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23CBD2E0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ===================================================================
   Payment page (pay.html): the checkout's card and label, PayPal's buttons
   =================================================================== */
.paybox { gap: 1.1rem; }
.paybox__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.paybox__title { margin: 0; font-size: 1.15rem; letter-spacing: -.01em; }
.paybox__total { margin: 0; color: var(--ink-2); font-size: .95rem; }
.paybox__total strong { color: var(--ink); font-size: 1.25rem; margin-left: .3rem; }
.paybox__total small { color: var(--ink-3); font-size: .8rem; }
/* room for both buttons from the start, so nothing jumps when PayPal's arrive */
/* PayPal's buttons are frames in a light page of their own: in dark mode the browser would paint
   them an opaque white box behind the rounded corners unless they share that light scheme */
.paybox__buttons { position: relative; display: grid; gap: 12px; min-height: 108px; color-scheme: light; }
.paybox__buttons.is-loading::before,
.paybox__buttons.is-loading::after {
  content: ""; display: block; height: 48px; border-radius: 999px;
  background: linear-gradient(90deg, var(--mist) 0%, var(--line) 50%, var(--mist) 100%) 0 0 / 200% 100%;
  animation: payWait 1.3s ease-in-out infinite;
}
@keyframes payWait { to { background-position: -200% 0; } }
.paybox__note { margin: 0; padding: .7rem .95rem; border-radius: 14px; background: var(--mist); color: var(--ink-2); font-size: .9rem; }
.paybox__note[hidden] { display: none; }
.paybox__fine { margin: 0; color: var(--ink-3); font-size: .84rem; line-height: 1.5; }
.paylabel .colabel__stamp { border-color: var(--butter-deep); color: var(--butter-deep); opacity: 1; transform: rotate(-11deg) scale(1); }
.paylabel.is-in .colabel__stamp { animation: stampIn .42s cubic-bezier(.34, 1.56, .64, 1) .5s both; }
.paypage .cosum__links a[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .paybox__buttons.is-loading::before, .paybox__buttons.is-loading::after { animation: none; }
  .paylabel.is-in .colabel__stamp { animation: none; }
}

/* "Pay now" on the account's order labels and the tracking card: only once payments are on */
.olabel__pay, .tcard__pay { display: none; }
html.pays .olabel__pay, html.pays .tcard__pay { display: inline-flex; }
.olabel__pay {
  align-items: center; padding: .5rem 1.1rem; border-radius: 100px; border: 1.5px solid var(--ultra); background: var(--ultra);
  color: #fff; font: 700 .84rem/1.2 var(--body); cursor: pointer;
  transition: background-color .2s var(--ease), transform .15s var(--ease);
}
.olabel__pay:hover { background: var(--ultra-deep); border-color: var(--ultra-deep); }
.olabel__pay:active { transform: scale(.96); }
.olabel__pay:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.olabel__pay:disabled { opacity: .7; cursor: default; }
.olabel__buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.tcard__pay { margin-top: .8rem; }
.tcard__payerr { margin: .6rem 0 0; color: var(--bad); font-size: .86rem; font-weight: 600; }
.tcard__payerr[hidden] { display: none; }

/* ===================================================================
   Opening soon (build.py OPEN_FOR_ORDERS = False): the parts that need the
   API step aside, and a short note stands in their place
   =================================================================== */
html.is-soon #order-form,
html.is-soon #acct-out,
html.is-soon #acct-in,
html.is-soon .trackfind,
html.is-soon .footsign__form,
html.is-soon .footsign__done { display: none !important; }
.soonnote {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; border-radius: 20px;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 24px 50px -40px rgba(13, 20, 36, .35);
}
.soonnote__mark { display: grid; grid-template-columns: repeat(2, 9px); gap: 3px; flex: none; margin-top: .3rem; }
.soonnote__mark i { width: 9px; height: 9px; border-radius: 2px; background: var(--ultra); }
.soonnote__mark i:nth-child(2), .soonnote__mark i:nth-child(3) { background: var(--butter); }
.soonnote__title { margin: 0 0 .25rem; font-weight: 800; color: var(--ink); }
.soonnote__text { margin: 0; color: var(--ink-2); font-size: .94rem; line-height: 1.55; }
.footsign .soonnote { background: transparent; box-shadow: none; }