/*
 * KARTEL: the Handlers design system in black, white and grey, set in Google
 * Sans Flex with the TRISTOPIC registers (see fonts.css):
 *
 *   display  Grotesk 700 @ 124 %, tight      titles, wordmark
 *   lead     Grotesk 300 @ 106 %             summaries
 *   body     Grotesk 400 @ 100 %
 *   ui       Grotesk 500 @ 100 %             buttons, pills
 *   label    Mono (600 @ 76 %), caps, +.16em  every label
 *
 * Emphasis is ink on paper, or paper on ink. KARTEL's own colour, Pantone 375 C
 * (--lime), is a second ink that marks only what is live: see "the second ink" at the end.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  --paper: #f4f4f2;
  --paper-2: #e9e9e6;
  --paper-3: #dcdcd8;
  --ink: #121214;
  --ink-2: #4a4a50;
  --steel: #62626a;
  --mute: #6e6e76;                                   /* text grey: 4.6:1 on the paper */
  --mute-soft: #8b8b93;                              /* disabled only (no contrast rule) */
  --line: #1212141f;
  --line-strong: #12121438;
  --lime: #96d700;                                   /* Pantone 375 C. A fill under ink (10.7:1), never text on the paper (1.6:1) */
  --font: 'Kartel Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Kartel Mono', 'Kartel Grotesk', system-ui, sans-serif;
  --tile: 'Kartel Tile', 'Kartel Grotesk', system-ui, sans-serif;
  --wd: 124;
  --wt: 700;
  --track-label: .16em;
  /* Heavy wide titles: the letters are already wide and bold, so tight tracking
     made neighbours collide. Near-neutral, one value for every display line. */
  --track-display: -.006em;
  --shell: clamp(1rem, 3.2vw, 2.5rem);
  --pill-h: 2.5rem;                                  /* every pill and round button */
  --edge: 10px;                                      /* floating chrome (nav, HUD) sits 10px from every screen edge */
  --logo-h: 40px;                                    /* the KARTEL lettering at the top: phones 40, iPad 48, desktop 60 (owner, 14 Oct) */
  --nav-h: calc(var(--edge) + var(--logo-h));
  --dock-h: calc(var(--pill-h) + .4rem + 7px + max(var(--edge), env(safe-area-inset-bottom)));   /* buttons, gap, legal row, edge */
  --row-pad: 1.25rem;                                /* text between dividers: same space above and below */
  --measure: 640px;                                  /* the pages' one column: titles, text, forms, tables */
  /* One spacing scale for the pages. */
  --space-2: 1rem;                                   /* paragraph to paragraph, heading to its text */
  --space-3: 1.5rem;                                 /* title to lead to date; text to a table, a form, questions */
  --space-4: 3rem;                                   /* section to section */
  --space-5: clamp(3rem, 6vw, 4.5rem);               /* the pill to the title; the header to the body */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --radius-media: 12px;
  --radius-field: 8px;
  --radius-card: 20px;
  --glass: color-mix(in srgb, var(--paper) 82%, transparent);
  color-scheme: light;
}
/* The logo's height: tablets (touch, 600px and up) 48px, computers (a mouse) 60px. */
@media (min-width: 600px) and (pointer: coarse) { :root { --logo-h: 48px; } }
@media (min-width: 600px) and (pointer: fine) { :root { --logo-h: 60px; } }

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); scroll-padding-block: calc(var(--nav-h) + 1rem) calc(var(--dock-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
/* Locked (menu, cart, pop-up): the page is pinned where it was (shop.js sets top to minus
   its scroll offset, and gives the offset back on unlock; overflow:hidden alone lets a finger
   drag the page on iPhone and iPad). The scrollbar goes, and the page and the centred nav
   make up its width (--sbw, measured by shop.js), so nothing shifts sideways. */
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; padding-right: var(--sbw, 0px); }
html:has(> body.is-locked) { overscroll-behavior: none; }   /* no rubber band behind a layer either */
body.is-locked .nav, body.is-locked .dock { padding-right: calc(var(--edge) + var(--sbw, 0px)); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 300; background: var(--ink); color: var(--paper); padding: .75rem 1rem; border-radius: 999px; transition: top .3s var(--ease); }
.skip:focus { top: 1rem; }
.shell { padding-inline: var(--shell); }

/* -------------------------------------------------------------------- type */
.product-name, .drawer-title {
  font-weight: var(--wt);
  font-stretch: calc(var(--wd) * 1%);
  font-variation-settings: "wdth" var(--wd);
}
@media (max-width: 599px) {
  .product-name { --wd: 108; }
}
/* The furniture register: weight and width are pinned in the face itself. */
.label {
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.35;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  height: 3.25rem;
  padding: 0 .5rem 0 1.5rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: transform .16s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-secondary { border: 1px solid var(--line-strong); color: var(--ink); }
.btn-block { width: 100%; justify-content: space-between; height: 3.5rem; }
.btn-solo { justify-content: center; padding-inline: 1.75rem; }   /* text only, no dot */
.btn-dot {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  transition: transform .35s var(--ease);
}
.btn-secondary .btn-dot { background: var(--paper-2); }
.btn-dot .icon { transition: transform .35s var(--ease); }

/*
 * Plus and minus: two exact 2px bars in a 14px box (bars on 6–8), so the
 * crossing sits exactly on whole pixels. Plain boxes are pixel-snapped by the browser; SVG strokes and
 * rotated bars are not, which is what made the old plus look uneven (one arm
 * sharp, the rotated one soft). Nothing here is ever rotated.
 */
.plus, .minus { position: relative; display: inline-block; flex: none; width: 14px; height: 14px; }
.plus::before, .plus::after, .minus::before { content: ""; position: absolute; background: currentColor; }
.plus::before, .minus::before { left: 0; top: 6px; width: 14px; height: 2px; }
.plus::after { left: 6px; top: 0; width: 2px; height: 14px; transition: transform .35s var(--ease); }
.btn.is-busy .btn-dot .plus { animation: spin .8s linear infinite; }
.btn:disabled { background: var(--paper-3); color: var(--steel); cursor: not-allowed; }
.btn:disabled .btn-dot { background: var(--paper-2); color: var(--mute-soft); }
.btn.is-busy .btn-dot .icon { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover .btn-dot { transform: translate(2px, -2px); }
  .btn:not(:disabled):hover .btn-dot .icon { transform: rotate(90deg); }
  .btn-secondary:hover { border-color: var(--ink); }
}

.icon-btn {
  display: grid;
  place-items: center;
  width: var(--pill-h);
  height: var(--pill-h);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.icon, .icon-btn svg { stroke-linecap: butt; stroke-linejoin: miter; }
/* The cart: the SLAPS bag, drawn on a 24 grid at 18px, so its 2-unit line lands at 1.5px like every other icon. */
.icon-btn svg.icon-bag { width: 18px; height: 18px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }

/* --------------------------------------------------------------------- nav */
/* The pills sit exactly --edge from the top edge and from the side edges. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: var(--edge) var(--edge) 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
/* The logo: the owner's lettering (Asset 1, as drawn) where the KARTEL pill was, --edge from the
   top, --logo-h tall (40 / 48 / 60px), and --nav-h follows it, so every page starts under it.
   It has no glass of its own, so on pages that scroll it stays at the top of the page and goes
   with it (text never runs behind it); on the homepage, which does not scroll, and over the
   open menu, it stays on the screen. */
body:not(.home) .nav { position: absolute; }
body.menu-open .nav { position: fixed; }
.nav-logo { display: block; height: var(--logo-h); border-radius: 8px; }
.nav-logo img { display: block; width: auto; height: 100%; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .45rem;
  height: calc(var(--pill-h) - .5rem);
  padding: 0 .75rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .nav-item:not([aria-pressed="true"]):hover { background: var(--paper-2); } }
.nav-item[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.nav-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink);
  font-size: .65rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.nav-count.has-items { background: var(--ink); color: var(--paper); }
/* Optical centre: the line box is trimmed to the digits' cap height and padded the
   same above and below (a font's line box sits the digits a little high). */
@supports (text-box: trim-both cap alphabetic) {
  .nav-count { display: inline-block; height: auto; padding: calc((1.25rem - 1cap) / 2) .3rem; line-height: 1; text-align: center; text-box: trim-both cap alphabetic; }
}
.nav-count.is-bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }

/* -------------------------------------------------------------- homepage */
main.home { min-height: 100svh; }
.stage { position: fixed; inset: 0; z-index: 0; touch-action: none; }
.stage canvas { display: block; width: 100%; height: 100%; outline: none; cursor: grab; }
/* With the sphere on, the plain grid leaves the screen but stays for screen readers
   (shop.js takes its links out of the tab order: the canvas has the keyboard). */
body.stage-on .index { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The fallback grid: same tile, same four corners, as real markup. */
.index { padding: calc(var(--nav-h) + 1.5rem) var(--shell) 8rem; }
.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 44vw), 1fr));
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
/*
 * Tile geometry, the same numbers as the sphere atlas (sphere.js, TILE):
 *   --m    ONE inset: from each gridline to the ink of the label in that corner,
 *          identical left, right, top and bottom
 *   1cap   the label's cap height
 *   photo  square, inset by m + cap + m on every side
 * Everything is in container units, so it scales with the tile, not the page.
 */
.tile {
  position: relative;
  aspect-ratio: 1;
  container-type: inline-size;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  transition: opacity .45s var(--ease);
}
.tile > a {
  position: absolute;
  inset: 0;
  display: block;
  --m: 4cqw;
  font-family: var(--tile);
  font-size: max(3.333cqw, 7px);   /* 8px on a 240px tile, never under 7px (sphere.js, TILE) */
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
}
.tile-media { position: absolute; inset: calc(2 * var(--m) + 1cap); background: var(--paper-2); overflow: hidden; }
.tile-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.tile-row {
  position: absolute;
  left: var(--m);
  /* tracking trails the last glyph: pull the row out by one gap so the ink, not the box, sits on --m */
  right: calc(var(--m) - var(--track-label));
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
}
.tile-top { top: var(--m); }
.tile-bottom { bottom: var(--m); }
.tile-corner {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-box: trim-both cap alphabetic;   /* measure from the letters, not the line box */
}
.tile-r { flex: none; }
.tile-r.is-out { color: var(--ink); }
.tile.is-faded { opacity: .15; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .tile a:hover .tile-media img { transform: scale(1.04); } }
.index-empty { padding: 4rem 0; }

/*
 * The dock: one object at the bottom of every page but checkout, --edge from the
 * screen edges:  view · Brands · ☰ · Filters · cart, and the legal row under it.
 * ☰ is the centre of the screen (the middle column); each side hangs from it.
 * Full (wide screens; shop.js measures): Brands and Filters are their chips.
 * Compact: two buttons of one width, the same 10px between all five; each swaps
 * the row, in place, for its chips. Printed after the menu, so while the menu is
 * open it stays above it and ☰ (now ×) closes it.
 */
.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 190;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pill-h) minmax(0, 1fr);
  grid-template-areas: "start menu end" "legal legal legal";
  align-items: center;
  gap: .4rem var(--edge);
  padding: 0 var(--edge) max(var(--edge), env(safe-area-inset-bottom));
  pointer-events: none;
  transition: translate .35s var(--ease), opacity .25s var(--ease);
}
.dock-side { display: flex; align-items: center; gap: var(--edge); min-width: 0; }
.dock-side-start { grid-area: start; justify-content: flex-end; }
.dock-side-end { grid-area: end; justify-content: flex-start; }
.dock-side > *, .dock-menu, .dock-legal { pointer-events: auto; }
.dock-menu { grid-area: menu; }
.dock-filter { position: relative; flex: 0 1 auto; display: flex; min-width: 0; }   /* hugs its pill; gives way only on a narrow screen */
.dock .icon-btn { flex: none; position: relative; box-shadow: 0 12px 32px -22px #00000059; }
/* Touch: each button answers 5px beyond its edge (50px targets, still apart at 10px gaps). */
.dock .icon-btn::after, .dock .nav-pick::after { content: ""; position: absolute; inset: -5px; }
.dock-cart { position: relative; }
.dock-count { position: absolute; top: -4px; right: -4px; min-width: 1.15rem; height: 1.15rem; font-size: .6rem; }
@supports (text-box: trim-both cap alphabetic) {
  .dock-count { height: auto; padding: calc((1.15rem - 1cap) / 2) .25rem; }
}
.dock-count:not(.has-items) { display: none; }

/* The view slot: on the homepage, sphere ⇄ grid (once the sphere runs); elsewhere a
   link back to the grid, showing the view you will land in. */
.dock-view { visibility: hidden; }
body.stage-on .dock-view, .dock-grid { visibility: visible; }
.dock-view svg[data-view-icon] { display: none; }
body[data-view="index"] .dock-view svg[data-view-icon="sphere"],
body[data-view="sphere"] .dock-view svg[data-view-icon="index"],
html[data-last-view="sphere"] .dock-grid svg[data-view-icon="sphere"],
html:not([data-last-view="sphere"]) .dock-grid svg[data-view-icon="index"] { display: block; }

/* The burger: two 2px bars that cross into an × while the menu is open. */
.burger { position: relative; width: 16px; height: 10px; }
.burger i { position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease); }
.burger i:first-child { top: 0; }
.burger i:last-child { top: 8px; }
body.menu-open .burger i:first-child { top: 4px; transform: rotate(45deg); }
body.menu-open .burger i:last-child { top: 4px; transform: rotate(-45deg); }
body.menu-open .dock-menu { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* While the menu is open the dock stays exactly as it is, whole and live: only ☰
   becomes ×. A pill tapped there closes the menu first, then opens its list. */
body.menu-open .nav { z-index: 185; }

/* The legal row: © KARTEL + Terms · Privacy · Cookies, straight on the page, centred under the buttons. */
.dock-legal { grid-area: legal; justify-self: center; min-width: 0; max-width: 100%; transition: opacity .3s var(--ease), translate .45s var(--ease); }
.links { display: flex; align-items: center; gap: .1rem; overflow-x: auto; scrollbar-width: none; font-size: .625rem; }
.links::-webkit-scrollbar { display: none; }
.links { gap: 1.1rem; line-height: 1; padding: 6px 5px 11px; margin: -6px -5px -11px; }   /* room for a focus ring and the tap areas, no shift */
/* Trimmed to cap height and baseline: the box IS the letters, so "--edge from the
   bottom" means the letters themselves sit 10px from the screen edge. */
.links-copy, .links a { flex: none; padding: 0; text-box: trim-both cap alphabetic; color: var(--ink-2); }
.links a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .25s var(--ease), text-decoration-color .25s var(--ease); }
.links a:hover, .links a[aria-current="page"] { color: var(--ink); text-decoration-color: currentColor; }
/* Each link is a 24px-tall tap (WCAG 2.5.8) without moving a letter: 6px into the gap
   above (the dock's pills are 6.4px up), 11px down to the screen edge. */
.links a { padding-block: 6px 11px; margin-block: -6px -11px; }
.links-withdraw .is-short { display: none; }
@media (max-width: 599px) {
  .links-withdraw .is-long { display: none; }
  .links-withdraw .is-short { display: inline; }
}
@media (max-width: 359px) { .links-copy { display: none; } }   /* the smallest phones: the links before the year */
/* It has no background, so text would scroll under it: on every page but the
   homepage it slips below the screen edge while you read down, and comes back when
   you scroll up or reach the top or the end (shop.js sets body.is-reading). */
body.is-reading:not(.menu-open) .dock-legal:not(:focus-within) { opacity: 0; translate: 0 calc(100% + var(--edge) + 4px); pointer-events: none; }
/* Pages end above the dock. */
body:not(.home) > main { padding-bottom: calc(var(--dock-h) + 4.5rem); }

/* Touch screens: while a field has the keyboard the dock steps away (shop.js). */
body.is-typing .dock { translate: 0 calc(100% + var(--edge)); opacity: 0; }
body.is-typing .dock * { pointer-events: none; }

/*
 * Brands and Filters: two pills of one width, mirrored about ☰, as wide as the
 * widest name either list can show, never changing with what is chosen (shop.js
 * sets --pick-w from the words themselves). Each
 * opens its list upward, centred over its own pill: a paper card of rows between
 * hairlines, the chosen one in ink. One list at a time.
 */
.nav-pick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: var(--pick-w, auto);
  max-width: 100%;
  min-width: 0;
  height: var(--pill-h);
  padding: 0 .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px -22px #00000059;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.nav-pick > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-pick .icon { flex: none; width: 12px; height: 12px; transition: rotate .35s var(--ease); }
.nav-pick[aria-expanded="true"] .icon { rotate: 180deg; }
.nav-pick:is(.is-active, [aria-expanded="true"]) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Tight (shop.js: a chosen name that would be cut beside ☰ on a phone, or any 320px
   screen before the script runs): a size down and no caret, so the words stay whole. */
.dock.is-tight .nav-pick { padding: 0 .5rem; font-size: .75rem; }
.dock.is-tight .nav-pick .icon { display: none; }
@media (max-width: 359px) {
  .nav-pick { padding: 0 .5rem; font-size: .75rem; }
  .nav-pick .icon { display: none; }
}

.pick-menu {
  position: absolute;
  bottom: calc(100% + var(--edge));
  left: 50%;
  translate: -50% 0;
  z-index: 1;
  display: grid;
  min-width: 100%;
  width: max-content;
  max-width: min(16rem, calc(100vw - 2 * var(--edge)));
  max-height: min(60vh, 22rem);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 24px 48px -28px #0000006b;
  animation: pick-in .3s var(--ease) both;
}
.pick-menu::-webkit-scrollbar { display: none; }
.pick-menu[hidden] { display: none; }
@keyframes pick-in { from { opacity: 0; translate: -50% 8px; } }
.pick-menu .nav-item { height: var(--pill-h); padding: 0 .9rem; border-radius: 0; justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; }
.pick-menu .nav-item + .nav-item { border-top: 1px solid var(--line); }

/* Phones: the legal row's gaps close just enough to fit (1.1rem from 393px up, 6px at
   358px). The same row in the menu closes the same way. */
@media (max-width: 480px) {
  .links { gap: clamp(6px, calc((100vw - 340px) / 3), 1.1rem); }
}
/* A phone's product page: Add to Cart sits on the dock's row, so the legal row is
   left to the menu there (the stack stays 126px, as before). */
@media (max-width: 699px) {
  body:has(main.page-product) .dock-legal { display: none; }
  body:has(main.page-product) .dock { row-gap: 0; }   /* ☰ back to 10px from the bottom */
}

/* --------------------------------------------------- the full-screen menu */
.menu { position: fixed; inset: 0; z-index: 180; background: var(--paper); }
.menu[hidden] { display: none; }
.menu-panel {
  height: 100%;
  overflow: auto;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: minmax(0, 1fr);   /* never wider than the screen */
  padding: calc(var(--nav-h) + var(--shell)) var(--shell) calc(var(--dock-h) + var(--space-3));   /* the bottom clears the dock */
  gap: 0;
  outline: none;
  overscroll-behavior: contain;
  animation: fade-in .35s var(--ease) both;
}
.menu.is-closing .menu-panel { animation: fade-out .25s var(--ease-io) forwards; }
.menu-main { align-self: center; display: grid; }   /* the projects and the service row, centred together */
.menu-list { display: grid; justify-items: stretch; text-align: center; }
.menu-list li { border-top: 1px solid var(--line); animation: menu-in .6s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 60ms); }
.menu-list li:last-child { border-bottom: 1px solid var(--line); }
@keyframes menu-in { from { opacity: 0; transform: translateY(14px); } }
/* Centred: the number sits above its word, both on the centre line. */
/* One size drives the menu, and rows follow it. The word is as large as the
   screen's height allows for the number of pages (--rows, set in footer.php)
   with the service row, the newsletter and the dock still in view, 24px clear
   above the dock (measured: a row is 1.36 words + 17px; the pill, the service
   row, the newsletter and the dock take 384px), but never more than 9.6% of the
   width or 80px, and never under 18px (the phones' floor): nine brands fit a
   1366 x 768 laptop at 19px. */
.menu { --menu-size: clamp(1.125rem, min(9.6vw, calc((100vh - 384px - 17px * var(--rows, 7)) / (1.36 * var(--rows, 7)))), 5rem); }
/* The height you can actually see: on iPhone and iPad 100vh is the screen with the browser's bars
   hidden, so with them showing the words came out too big and the list ran under the dock
   (owner, iPad, 14 Oct). svh is the screen with the bars showing. */
@supports (height: 100svh) {
  .menu { --menu-size: clamp(1.125rem, min(9.6vw, calc((100svh - 384px - 17px * var(--rows, 7)) / (1.36 * var(--rows, 7)))), 5rem); }
}
.menu-link { display: grid; justify-items: center; gap: .5rem; padding: calc(var(--menu-size) * .18) 0; color: var(--ink); }
.menu-num { color: var(--mute); line-height: 1; text-box: trim-both cap alphabetic; }
.menu-word {
  font-size: var(--menu-size);
  font-weight: 900;
  font-stretch: 124%;
  line-height: 1;
  letter-spacing: var(--track-display);
  transition: transform .45s var(--ease), color .25s var(--ease);
}
.menu-link[aria-current="page"] .menu-word { color: var(--steel); }
@media (hover: hover) and (pointer: fine) { .menu-link:hover .menu-word { transform: scale(1.03); } }
/* Under the projects: the service pages, small, centred, wrapping on phones. */
.menu-more { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem 1.4rem; margin: 0; padding: clamp(1rem, 2.5vh, 1.75rem) 0 0; list-style: none; font-size: .75rem; animation: menu-in .6s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 60ms); }
.menu-more a { display: inline-block; padding-block: .45rem; color: var(--ink-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .25s var(--ease), text-decoration-color .25s var(--ease); }
.menu-more a[aria-current="page"] { color: var(--ink); text-decoration-color: currentColor; }
/* @kartel.gr: two small marks at the end of the row (no extra line: the phone menu's fit is measured). */
.menu-more:has(.menu-social) { align-items: center; }
.menu-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; min-height: 1.75rem; padding: 0; }
.menu-social .icon-social { display: block; }
@media (hover: hover) and (pointer: fine) { .menu-more a:hover { color: var(--ink); text-decoration-color: currentColor; } }

/*
 * Phones (owner, 15 Oct, after slaps.cc): the same places with a hierarchy, one column.
 * Big rows: Brands (opens to the projects), About, Contact, Account. Small rows that
 * open: Support, Legal, Socials. One row open at a time; all shut when the menu does.
 * Tablets and computers keep the big words and the row above, untouched: there the
 * folds dissolve (display: contents) and the phone's rows are not shown.
 */
@media (min-width: 600px) {
  .menu-brands, .menu-brands > .menu-fold-panel, .menu-brands .menu-fold-inner { display: contents; }
  .menu-fold-btn, .menu-phone, .menu-all, .menu-count { display: none; }
}
@media (max-width: 599px) {
  .menu { --menu-size: 1.125rem; }
  .menu-panel { padding-bottom: calc(var(--dock-h) + .75rem); scroll-padding: calc(var(--nav-h) + var(--shell)) 0 calc(var(--dock-h) + .75rem); }
  .menu-main { align-self: start; display: block; }   /* top-aligned: a row that opens pushes down, nothing jumps */
  .menu-more { display: none; }
  .menu-letter { padding-top: 1.25rem; }
  .menu .kletter { gap: .5rem; }

  .menu-row { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 2.75rem; border-top: 1px solid var(--line); color: var(--ink); text-align: left; }
  .menu-row.is-big { min-height: 3.25rem; }
  .menu-phone > .menu-fold:last-child { border-bottom: 1px solid var(--line); }
  :is(.menu-brands > .menu-fold-btn, .menu-rows > li, .menu-phone > .menu-fold) { animation: menu-in .6s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 60ms); }
  .menu-row-word { font-size: clamp(1.375rem, 6.4vw, 1.75rem); font-weight: 900; font-stretch: 124%; line-height: 1; letter-spacing: var(--track-display); }
  .menu-row-count { align-self: flex-start; margin-top: .95rem; color: var(--mute); line-height: 1; }   /* on the word's cap line, like a footnote */
  .menu-row-label { color: var(--ink); font-size: .75rem; line-height: 1; }
  .menu-row > .icon { flex: none; margin-left: auto; }
  .menu-row[aria-current] .menu-row-word { background: var(--marker) 0% 76% / 100% .4em; }

  /* + turns into −: the upright bar lies down. */
  .menu-fold-mark { position: relative; flex: none; width: 14px; height: 14px; margin-left: auto; }
  .menu-fold-mark::before, .menu-fold-mark::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .4s var(--ease); }
  .menu-fold-mark::after { transform: rotate(90deg); }
  .menu-fold.is-open > .menu-fold-btn .menu-fold-mark::after { transform: rotate(0deg); }
  .menu-fold-btn:not(.is-big) .menu-fold-mark { width: 11px; height: 11px; }

  .menu-fold-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .42s var(--ease), visibility 0s linear .42s; }
  .menu-fold.is-open > .menu-fold-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .42s var(--ease), visibility 0s; }
  .menu-fold-inner { min-height: 0; overflow: hidden; }
  .menu-fold-inner :focus-visible { outline-offset: -2px; }   /* inside the clip */
  .menu-fold.is-open :is(.menu-list > li, .menu-all, .menu-sub > li) { animation: fold-in .45s var(--ease) both; animation-delay: calc(var(--i) * 28ms + 50ms); }

  /* The projects: number · name · how many pieces, then All pieces. */
  .menu-list { display: block; padding: .125rem 0 0; text-align: left; }
  .menu-list li, .menu-list li:last-child { border: 0; animation: none; }
  .menu-link { grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 0; min-height: 2.625rem; padding: 0; }
  .menu-word { font-weight: 900; font-stretch: 124%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .menu-count { justify-self: end; color: var(--mute); line-height: 1; }
  .menu-all { display: flex; align-items: center; min-height: 2.625rem; margin: .25rem 0 .625rem 2.25rem; border-top: 1px solid var(--line); color: var(--ink); }
  .menu-all-word { font-size: 1rem; font-weight: 600; }
  .menu-all .menu-count { margin-left: auto; }

  /* Support, Legal, Socials: one column of plain links. */
  .menu-sub { padding: 0 0 .625rem; }
  .menu-sub a { display: flex; align-items: center; gap: .625rem; min-height: 2.5rem; color: var(--ink-2); font-size: 1rem; font-weight: 500; line-height: 1.2; }
  .menu-sub a[aria-current] { color: var(--ink); }
  .menu-sub a[aria-current] .menu-sub-word { background: var(--marker) 0% 76% / 100% .4em; }
  .menu-sub .icon-social { flex: none; color: var(--ink); }
  .menu-sub-note { margin-left: auto; color: var(--mute); line-height: 1; }
  .menu-sub a > .icon { flex: none; width: 14px; height: 14px; color: var(--mute); }
  .menu-sub a > .menu-sub-word:last-child { margin-right: auto; }
}
@keyframes fold-in { from { opacity: 0; transform: translateY(-6px); } }

/* ------------------------------------------------------------ newsletter */
.kletter { display: grid; justify-items: center; gap: .85rem; width: min(440px, 100%); margin-inline: auto; text-align: center; }
.kletter-label { color: var(--ink); line-height: 1; text-box: trim-both cap alphabetic; }
.kletter-row { display: flex; align-items: center; gap: .25rem; width: 100%; padding: .25rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.kletter-row:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.kletter.is-invalid .kletter-row { border-color: var(--ink); border-style: dashed; }
.kletter-email { flex: 1; width: 0; min-width: 0; height: 2.75rem; padding: 0 .4rem 0 1rem; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--ink); outline: none; }
.kletter-email::placeholder { color: var(--mute); }
.kletter .kletter-send { height: 2.75rem; padding-inline: 1.25rem; }
.kletter-note { font-size: .8125rem; line-height: 1.4; color: var(--mute); }
.kletter-note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.kletter-status { font-size: .875rem; color: var(--ink); }
.kletter-status:empty { display: none; }
.kletter.is-sent .kletter-row { opacity: .45; pointer-events: none; }
.kletter-done { font-size: 1.0625rem; color: var(--ink); }
/* On the Newsletter page the lead already says it: the label stays for screen readers only. */
.doc-content .kletter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kletter-step p { color: var(--ink-2); }
/* In the menu: below the pages, above the legal row; it enters after the last page. */
.menu-letter { align-self: start; padding: clamp(1rem, 2.5vh, 2rem) 0 0; animation: menu-in .6s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 60ms); }

/* ------------------------------------------------------------ the pop-up */
.pop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: minmax(0, 1fr);   /* a definite row: the card scrolls inside it instead of growing past the screen */
  place-items: center;
  padding: calc(var(--nav-h) + var(--edge)) clamp(.5rem, 2.5vw, 2rem) clamp(.5rem, 2.5vw, 2rem);   /* the card stays clear of the close */
}
.pop[hidden] { display: none; }
.pop-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 52%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(.4);
  backdrop-filter: blur(18px) saturate(.4);
  animation: fade-in .45s var(--ease) both;
}
.pop-frame {
  position: relative;
  width: min(1180px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  outline: none;
}
/* The close sits exactly --edge from the top and the right of the screen, like
   the menu's close and the KARTEL pill: outside the card, so every row in the
   card runs edge to edge. (The card animates, not the frame, so "fixed" stays
   fixed to the screen.) */
.pop-close { position: fixed; top: var(--edge); right: var(--edge); z-index: 3; box-shadow: 0 12px 32px -22px #00000059; animation: fade-in .45s var(--ease) both; }
.pop.is-closing .pop-close { animation: fade-out .26s var(--ease-io) forwards; }
.pop-card {
  width: 100%;
  min-height: 0;
  animation: pop-in .55s var(--ease) both;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 40px 120px -40px #0000004d;
}
.pop.is-closing .pop-card { animation: pop-out .26s var(--ease-io) forwards; }
.pop.is-closing .pop-scrim { animation: fade-out .3s var(--ease-io) forwards; }
@keyframes pop-in { from { opacity: 0; transform: translateY(28px) scale(.97); filter: blur(8px); } }
@keyframes pop-out { to { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ------------------------------------------------- the product view */
/* ONE spacing value: photo to card edge = info to card edge = photo to info. */
.product {
  --card-pad: clamp(1rem, 2.2vw, 1.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: var(--card-pad);
  padding: var(--card-pad);
}
.product-media { min-width: 0; }
.product-stage {
  position: relative;
  aspect-ratio: 1;
  background: var(--paper-2) no-repeat center / contain;   /* the tile-size photo, already cached, shows while the large one loads */
  border-radius: var(--radius-media);
  overflow: hidden;
  touch-action: pan-y;
}
.product-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.product-img.is-on { opacity: 1; }
.product-stage { --crop: 14px; }
.crop { position: absolute; z-index: 2; width: var(--crop); height: var(--crop); border: 0 solid var(--ink); pointer-events: none; }
.crop-tl { top: var(--crop); left: var(--crop); border-width: 1px 0 0 1px; }
.crop-tr { top: var(--crop); right: var(--crop); border-width: 1px 1px 0 0; }
.crop-bl { bottom: var(--crop); left: var(--crop); border-width: 0 0 1px 1px; }
.crop-br { bottom: var(--crop); right: var(--crop); border-width: 0 1px 1px 0; }
/* The counter tucks into the bottom-right crop mark: the same distance from
   its vertical and its horizontal line, measured to the letters. */
.product-count {
  --count-gap: 8px;
  position: absolute;
  z-index: 2;
  right: calc(var(--crop) + 1px + var(--count-gap) - var(--track-label));   /* trailing tracking hangs past the ink */
  bottom: calc(var(--crop) + 1px + var(--count-gap));
  line-height: 1;
  text-box: trim-both cap alphabetic;
  color: var(--ink);
  pointer-events: none;
}
/* Exactly five slots under the photo: the first starts on its left edge, the fifth ends on its right. */
.product-thumbs {
  --thumb-gap: .625rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * var(--thumb-gap)) / 5);
  align-items: end;
  gap: var(--thumb-gap);
  margin-top: var(--thumb-gap);
  overflow-x: auto;
  scrollbar-width: none;
}
.product-thumbs::-webkit-scrollbar { display: none; }
.product-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-field);
  background: var(--paper-2);
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-thumb[aria-pressed="true"] { border-color: var(--ink); }
/* The size guide's thumbnail: a small table and SIZES, in the photos' grey square. */
.product-thumb.is-guide { display: grid; place-items: center; align-content: center; gap: .35rem; color: var(--steel); }
.product-thumb.is-guide .guide-glyph { width: 42%; height: auto; }
.guide-glyph-label { font-size: .5625rem; line-height: 1; text-box: trim-both cap alphabetic; color: var(--steel); }
.product-thumb.is-guide[aria-pressed="true"] { color: var(--ink); }

/*
 * The size guide, the gallery's last slide: SIZE GUIDE and the cm / in pill on top,
 * the table in the middle (the chosen size marked), the notes at the foot, clear of
 * the counter. Hidden slides take no clicks (visibility follows the fade).
 */
.product-guide-slide {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1rem, 5%, 1.75rem) clamp(1rem, 5%, 1.75rem) calc(var(--crop) + 1.75rem);
  background: var(--paper-2);
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
  outline: none;
}
.product-guide-slide.is-on { visibility: visible; transition-delay: 0s; }
.guide-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.guide-head > .label { color: var(--ink); line-height: 1; text-box: trim-both cap alphabetic; }
.unit-toggle { display: inline-flex; padding: 2px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); }
.unit-toggle button { height: 1.75rem; min-width: 2.75rem; padding: 0 .75rem; border-radius: 999px; color: var(--ink-2); line-height: 1; transition: background-color .2s var(--ease), color .2s var(--ease); }
.unit-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.guide-table { width: 100%; margin-block: auto; border-collapse: collapse; font-size: clamp(.8125rem, 1.25vw, 1rem); font-variant-numeric: tabular-nums; }
.guide-table th, .guide-table td { padding: clamp(.6rem, 1.5vw, .95rem) .5rem clamp(.6rem, 1.5vw, .95rem) 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; color: var(--ink-2); }
.guide-table thead th { padding-top: 0; border-bottom-color: var(--line-strong); font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--steel); }
.guide-table tbody th { font-weight: 600; color: var(--ink); }
.guide-table tr.is-current th, .guide-table tr.is-current td { color: var(--ink); font-weight: 600; }
.guide-table tr.is-current th { box-shadow: inset 2px 0 0 var(--ink); padding-left: .5rem; }
.guide-notes { display: grid; gap: .35rem; padding-right: 4.5rem; font-size: .8125rem; line-height: 1.4; color: var(--mute); }

.product-info { --info-gap: 1.25rem; display: flex; flex-direction: column; gap: var(--info-gap); min-width: 0; }
/* Divider rows stack directly on each other: the column gap must not add to their padding. */
.product-more-wrap { position: relative; border-top: 1px solid var(--line); }
/* Brand left, code right, both flush with the column edges; trimmed to the cap
   height so the letters themselves line up with the top of the photo. */
.product-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.product-meta > * { line-height: 1; text-box: trim-both cap alphabetic; }
.product-code { margin-right: calc(-1 * var(--track-label)); }   /* trailing tracking: ink on the edge */
.product-brand { color: var(--ink); }
.product-brand:hover { text-decoration: underline; text-underline-offset: 3px; }
.product-name {
  font-size: clamp(2rem, 3.4vw, 3.5rem);
  font-weight: 900;
  line-height: .94;
  letter-spacing: var(--track-display);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .75rem;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.product-price.is-out { font-weight: 700; font-stretch: 124%; text-transform: uppercase; letter-spacing: 0; }
.product-was { color: var(--mute); font-size: 1.1rem; }
.product-low { align-self: center; padding: .25rem .6rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); }
/* Optical centre: the box is the caps (trimmed), padded equally; the right padding
   gives back the letter-spacing that trails the last letter. */
@supports (text-box: trim-both cap alphabetic) {
  .product-low { padding: .5rem calc(.6rem - var(--track-label)) .5rem .6rem; line-height: 1; text-box: trim-both cap alphabetic; }
}
.product-summary { color: var(--ink-2); max-width: 46ch; font-size: 1.0625rem; line-height: 1.45; font-weight: 300; font-stretch: 106%; }
.product-summary p + p { margin-top: .6em; }

.product-buy { display: grid; gap: .9rem; }
.product-buy .btn { justify-content: center; padding-inline: 1.5rem; }
.product-sizes { border: 0; padding: 0; margin: 0; min-width: 0; }
.product-sizes legend { padding: 0; margin-bottom: .6rem; }
.size-grid { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: .5rem; }   /* every size on one row (up to six), never 5 + 1 */
.size { position: relative; }
.size input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.size span:not(.sr-only) {
  display: grid;
  place-items: center;
  height: 3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.size input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.size input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.size.is-out span:not(.sr-only) { color: var(--mute-soft); border-style: dashed; text-decoration: line-through; }
.size.is-out input { cursor: pointer; }
/* A sold-out size, chosen: stays dashed and struck, outlined in ink (the button becomes the alert). */
.size.is-out input:checked + span { background: var(--paper); color: var(--ink); border: 1px dashed var(--ink); }
@media (hover: hover) and (pointer: fine) { .size:not(.is-out):hover span:not(.sr-only) { border-color: var(--ink); } }
.product-sizes.is-missing .size-grid { animation: nudge .4s var(--ease); }
.product-sizes.is-missing legend { color: var(--ink); }
@keyframes nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* Under the button: "View cart" (after Added) or a short message, centred. */
.product-status { min-height: 1.35em; color: var(--ink); text-align: center; }
.product-status:empty { display: none; }   /* no blank line under the button until there is something to say */
.product-status a { display: inline-block; padding-block: .35rem; margin-block: -.35rem; text-decoration: underline; text-underline-offset: 3px; }

/* Size guide: the toggle sits on the SIZE line, flush right (its trailing tracking hangs past the edge). */
.product-sizes legend { display: flex; align-items: baseline; justify-content: space-between; width: 100%; }
.product-guide-link { margin-right: calc(-1 * var(--track-label)); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* "Pick a size first": under the sizes, above the button, with the checkout's "!" mark. */
.product-hint { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; color: var(--ink); line-height: 1; }
.product-hint[hidden] { display: none; }
.product-hint::before { content: "!"; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 3px; background: var(--ink); color: var(--paper); font-family: var(--font); font-size: .6875rem; font-weight: 700; letter-spacing: 0; }
/* Restock alert: an email field (and the newsletter tick) above the button. */
.product-notify { display: grid; gap: .75rem; }
.product-notify[hidden] { display: none; }
.product-notify-email { width: 100%; height: 3rem; padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-field); background: var(--paper); font: inherit; font-size: 1rem; color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.product-notify-email:hover { border-color: var(--ink-2); }
.product-notify-email:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.product-notify-letter { font-size: .9375rem; }

/*
 * Rows between dividers (Description, Shipping): every label is trimmed to its cap
 * height and baseline, then given the SAME space above and below, so the letters
 * sit centred between the lines.
 */
.product-info { container-type: inline-size; }
.product-more { border-bottom: 1px solid var(--line); }
.product-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--row-pad) 0;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.product-more summary::-webkit-details-marker { display: none; }
.product-more-title { text-box: trim-both cap alphabetic; }
.product-more[open] .plus::after { transform: scaleY(0); }   /* plus closes to a minus */
.product-more-body { padding-bottom: var(--row-pad); color: var(--ink-2); }
.product-more-body > p { max-width: 52ch; }
.product-more-body p + p { margin-top: .6em; }
/* Fit, Material, Code: a row each inside Description, under its text. */
.product-facts { display: grid; margin: 1rem 0 0; }
.product-more-body > .product-facts:first-child { margin-top: 0; }
.product-facts > div { display: grid; grid-template-columns: minmax(5.5rem, 32%) minmax(0, 1fr); align-items: baseline; gap: 1rem; padding-block: .9rem; border-top: 1px solid var(--line); }
.product-facts dt, .product-facts dd { margin: 0; line-height: 1.2; text-box: trim-both cap alphabetic; }
.product-facts dd { color: var(--ink); font-weight: 500; }

/*
 * The card never changes size (owner, 15 Oct). Side by side, its height is the photo
 * column's (or the info with both drop-downs shut, if that is taller), and the two
 * drop-downs open inside their own area under the button: it scrolls, without a bar,
 * a soft fade at its foot when there is more. The buy part above never moves.
 * The area counts only its shut rows plus a little room (flex-basis 0 + min-height),
 * so opening them adds nothing to the card. Tablets held upright: the card fills the
 * screen's height, so an opened drop-down has room.
 */
@media (min-width: 700px) {
  .product-more-wrap {
    flex: 1 1 0;
    --room: 3rem;   /* a little room for an opened drop-down when the info, not the photo, sets the height */
    min-height: calc(var(--rows, 2) * (2 * var(--row-pad) + 1rem + 1px) + var(--room));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .product-more-wrap::-webkit-scrollbar { display: none; }
  /* "Pick a size first" (and a restock form) take their room from this area, never from the card. */
  .product-info:has(.product-status:not(:empty)) .product-more-wrap { --room: 1.1rem; }
  .product-info:has(.product-hint:not([hidden])) .product-more-wrap { --room: 1.25rem; }
  .product-info:has(.product-notify:not([hidden])) .product-more-wrap { --room: -4rem; }
  .product-info:has(.product-notify:not([hidden])):has(.product-status:not(:empty)) .product-more-wrap { --room: -5.9rem; }
  /* Soft edges where the area has more to scroll to: 1.5rem at the top, 3rem at the foot. */
  .product-more-wrap { --fade-top: 0px; --fade-foot: 0px; -webkit-mask: linear-gradient(transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-foot)), transparent); mask: linear-gradient(transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-foot)), transparent); }
  .product-more-wrap.has-less { --fade-top: 1.5rem; }
  .product-more-wrap.has-more { --fade-foot: 3rem; }
}
@media (min-width: 700px) and (orientation: portrait) {
  .pop .product { min-height: calc(100svh - var(--nav-h) - var(--edge) - clamp(.5rem, 2.5vw, 2rem) - 2px); }
  .page-product .product { min-height: calc(100svh - var(--nav-h) - 4rem); }
}

/* Phones: Add to Cart is one centred pill stuck to the bottom of the screen,
   always (the form's own button hides). No strip behind it, like the dock. */
.product-bar { display: none; }
@media (max-width: 699px) {
  .product-buy [data-add] { display: none; }
  .product-bar {
    grid-column: 1 / -1;
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    margin: calc(-1 * var(--info-gap, 1.25rem)) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
    padding: var(--edge) var(--card-pad) max(var(--edge), env(safe-area-inset-bottom));
    background: var(--paper);   /* solid: no text shows through under the button */
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  /* "Size M added · View cart", "Pick a size first.": the form's line is under the strip. */
  .product-bar-status { color: var(--ink); text-align: center; line-height: 1; text-box: trim-both cap alphabetic; }
  .product-bar-status[hidden] { display: none; }
  .product-bar-status a { padding-block: .5rem; text-decoration: underline; text-underline-offset: 3px; }
  /* On the product's own page the strip reaches the screen's bottom edge and the dock's row sits on it. */
  .page-product .product-bar { padding-bottom: calc(var(--pill-h) + 2 * var(--edge)); }
}

/* Title and price: their own lines on wide screens; on phones one line,
   the title from the left edge, the price to the right edge. */
.product-head { display: contents; }

/* Below 700px the product view is one column and the pop-up a sheet from the
   bottom; tablets held upright keep the photo left and the info right. */
@media (max-width: 699px) {
  .product { grid-template-columns: 1fr; }
  .product-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .product-head .product-name { font-size: 1.375rem; line-height: 1.05; }
  .product-head .product-price { flex: none; font-size: 1.125rem; }
  .product-count { right: calc(var(--edge) - var(--track-label)); bottom: var(--edge); }
  .pop { padding: calc(var(--nav-h) + var(--edge)) 0 0; place-items: end center; }
  .pop-card { border-radius: var(--radius-card) var(--radius-card) 0 0; border-bottom: 0; }
}

/* The product's own page. */
.page-product { padding: calc(var(--nav-h) + 1.5rem) var(--shell) 4rem; }
.back-link { display: inline-flex; align-items: center; gap: .5rem; margin: 0 auto 1rem; color: var(--ink); }
.back-link .icon { transform: rotate(-135deg); }
.page-product > * { max-width: 1180px; margin-inline: auto; }
.page-product > .back-link { display: flex; }
.page-product-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); }

/* ------------------------------------------------------------------ pages */
/*
 * Every inner page: ONE centred column (--measure), one header, one spacing
 * scale. The header (title, lead, date) is always centred, on the same axis as
 * the KARTEL pill and the dock. Statement pages (About, Contact, 404) centre
 * their text too; guides and policies read from the column's left edge,
 * because centred paragraphs, lists and forms lose the eye at every line.
 * (.page-main, not .page: WordPress also puts .page on <body>.)
 */
.page-main { padding-top: calc(var(--nav-h) + var(--space-5)); }
.doc { max-width: var(--measure); margin-inline: auto; }
.doc-head { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
/* Title, lead and date are trimmed to their letters: every gap is measured ink to ink. */
.doc-title {
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  font-weight: 900;
  font-stretch: 124%;
  line-height: .92;
  letter-spacing: var(--track-display);
  text-wrap: balance;
  text-box: trim-both cap alphabetic;
}
.doc-lead {
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.4;
  font-weight: 300;
  font-stretch: 106%;
  color: var(--ink-2);
  text-wrap: balance;
  text-box: trim-both cap alphabetic;
}
.doc-date { line-height: 1; text-box: trim-both cap alphabetic; }
.doc-content { margin-top: var(--space-5); }
.doc.is-statement .doc-content { text-align: center; }
.doc.is-statement .kform { text-align: left; }
/* One button under the header (404, the empty cart). */
.doc-action { display: flex; justify-content: center; margin-top: var(--space-4); }
.page-list { display: grid; justify-items: center; gap: .5rem; margin-top: var(--space-4); }
.page-list a { text-decoration: underline; text-underline-offset: 3px; }

/* Sections are separated by space alone: no numbers, no rules. */
.doc-content > * + * { margin-top: var(--space-2); }
.doc-content h2 {
  margin-top: var(--space-4);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 800;
  font-stretch: 124%;
  line-height: 1.1;
  letter-spacing: var(--track-display);
  text-wrap: balance;
  scroll-margin-top: calc(var(--nav-h) + var(--space-3));
}
.doc-content > h2:first-child { margin-top: 0; }
.doc-content h3 { margin-top: var(--space-3); font-size: 1.0625rem; font-weight: 600; }
.doc-content p, .doc-content li { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.doc-content strong { color: var(--ink); font-weight: 600; }
.doc-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc-content ul, .doc-content ol { display: grid; gap: .45rem; }
.doc-content ul li { position: relative; padding-left: 1.25rem; }
.doc-content ul li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; background: var(--ink); }   /* square, like everything else */
.doc-content ol { counter-reset: li; }
.doc-content ol li { counter-increment: li; display: grid; grid-template-columns: 2rem 1fr; }
.doc-content ol li::before { content: counter(li, decimal-leading-zero); font-family: var(--mono); font-size: .6875rem; letter-spacing: var(--track-label); color: var(--mute); padding-top: .35em; }

/* Blocks inside a section (a table, a form, the questions) stand off the text by one step more. */
.doc-content > .wp-block-table, .doc-content > .kform, .doc-content > .wp-block-table + * { margin-top: var(--space-3); }
/* Size guide: how to measure, drawn ([kartel_measure]): a flat tee in ink lines on paper-2,
   its three measurements as dotted-end lines tagged A B C like the menu's numbers. */
.measure { width: min(360px, 100%); margin-inline: auto; }
.doc-content > .measure:first-child { margin-top: 0; }
.doc-content > .measure + * { margin-top: var(--space-4); }
.measure svg { width: 100%; height: auto; overflow: visible; }
.measure-body { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.measure-seam { fill: none; stroke: var(--ink); stroke-width: 1; stroke-opacity: .35; }
.measure-dim { fill: none; stroke: var(--ink); stroke-width: 1.25; }
.measure-dot { fill: var(--ink); }
.measure-tag circle { fill: var(--ink); }
.measure-tag text { fill: var(--paper); font-family: var(--mono); font-size: 10px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.doc-content > .kform + * { margin-top: var(--space-4); }
.doc-content > .kform:first-child { margin-top: 0; }

/* Fact tables (shipping rates, cookies): rows between dividers. */
.doc-content .wp-block-table { overflow-x: auto; }
/* WordPress's own table style draws a box and vertical lines: rows only, here. */
.doc-content .wp-block-table thead { border-bottom: 0; }
.doc-content table { width: 100%; border-collapse: collapse; }
.doc-content .wp-block-table th, .doc-content .wp-block-table td { padding: var(--row-pad) 1.25rem var(--row-pad) 0; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 1rem; line-height: 1.45; }
.doc-content tr > :last-child { padding-right: 0; }
.doc-content .wp-block-table thead th { padding-block: 0 1rem; border-bottom-color: var(--line-strong); font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--steel); }
.doc-content tbody tr:first-child > * { border-top: 1px solid var(--line); }
.doc-content thead + tbody tr:first-child > * { border-top: 0; }
.doc-content td:first-child { color: var(--ink); font-weight: 500; }
.doc-content td { color: var(--ink-2); }
/* Phones: a row stacks. Its first cell names it; every other cell is a label
   and value line, the label taken from the header row (data-label, doc.php). */
@media (max-width: 599px) {
  .doc-content .wp-block-table:has(thead) { overflow: visible; }
  .doc-content .wp-block-table:has(thead) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc-content .wp-block-table:has(thead) :is(table, tbody, tr, td) { display: block; }
  .doc-content .wp-block-table:has(thead) tr { padding-block: var(--row-pad); border-bottom: 1px solid var(--line); }
  .doc-content .wp-block-table:has(thead) tbody tr:first-child { border-top: 1px solid var(--line); }
  .doc-content .wp-block-table:has(thead) tbody td { padding: 0; border: 0; }
  .doc-content .wp-block-table:has(thead) td[data-label] { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); justify-items: start; align-items: start; gap: 1rem; margin-top: .5rem; }
  .doc-content .wp-block-table:has(thead) td[data-label]::before {
    content: attr(data-label);
    padding-top: .3em;
    font-family: var(--mono);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--steel);
    overflow-wrap: anywhere;
  }
  .doc-content .wp-block-table td:first-child { overflow-wrap: anywhere; }
}

/* Questions and answers: the product view's accordion rows, 2px plus included. */
.doc-content .wp-block-details { margin-top: 0; border-bottom: 1px solid var(--line); }
.doc-content > :not(.wp-block-details) + .wp-block-details { margin-top: var(--space-3); border-top: 1px solid var(--line); }
.doc-content > h2 + .wp-block-details { margin-top: var(--space-3); }
.doc-content .wp-block-details summary {
  position: relative;
  display: block;
  padding: var(--row-pad) 2.5rem var(--row-pad) 0;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.doc-content .wp-block-details summary::-webkit-details-marker { display: none; }
.doc-content .wp-block-details summary::before,
.doc-content .wp-block-details summary::after { content: ""; position: absolute; top: 50%; background: var(--ink); }
.doc-content .wp-block-details summary::before { right: 0; width: 14px; height: 2px; margin-top: -1px; }
.doc-content .wp-block-details summary::after { right: 6px; width: 2px; height: 14px; margin-top: -7px; transition: transform .35s var(--ease); }
.doc-content .wp-block-details[open] summary::after { transform: scaleY(0); }
.doc-content .wp-block-details > :not(summary) { margin: 0 0 var(--row-pad); }
.doc-content .wp-block-details > :not(summary) + :not(summary) { margin-top: -.25rem; }

/* Facts the owner still has to confirm: dashed, like a sold-out size. */
mark.tbc { padding: 0 .3em; border: 1px dashed var(--line-strong); border-radius: 4px; background: none; color: inherit; }

/* The statutory model withdrawal form, set apart (inside "Prefer email or post?"). */
.doc-content .doc-form { padding: var(--card-pad, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--paper-2); }
.doc-content .doc-form p { font-size: 1rem; }
.doc-content .doc-form p + p { margin-top: .75rem; }

/* ---------------------------------------------- order received, tracking */
/* WooCommerce's classic order screens (thank you, tracking, account orders) in the pages' column. */
.page-content > .woocommerce:has(> .korder) { margin-top: calc(var(--space-3) - var(--space-5)); }
.korder { max-width: var(--measure); margin-inline: auto; }
.korder-head { display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
.korder-facts { width: 100%; text-align: left; }
.korder-next { width: 100%; text-align: left; }
.korder-next h2, :is(.page-content, .acct-details) .woocommerce-order-details__title, :is(.page-content, .acct-details) .woocommerce-column__title, .page-content .ktrack-result h2 {
  margin: var(--space-4) 0 var(--space-3);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 800;
  font-stretch: 124%;
  line-height: 1.1;
  letter-spacing: var(--track-display);
}
.korder-next ol { counter-reset: step; display: grid; gap: .6rem; padding: 0; }
.korder-next li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; }
.korder-next li::before { content: counter(step, decimal-leading-zero); padding-top: .35em; font-family: var(--mono); font-size: .6875rem; letter-spacing: var(--track-label); color: var(--mute); }
.korder-next a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.korder .kletter { margin-top: var(--space-4); }
:is(.page-content, .acct-details) .woocommerce-order-details, :is(.page-content, .acct-details) .woocommerce-customer-details, .page-content .ktrack-result { max-width: var(--measure); margin-inline: auto; }
:is(.page-content, .acct-details) .woocommerce-table--order-details { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
:is(.page-content, .acct-details) .woocommerce-table--order-details th, :is(.page-content, .acct-details) .woocommerce-table--order-details td { padding: var(--row-pad) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 1rem; }
:is(.page-content, .acct-details) .woocommerce-table--order-details thead th { padding-top: 0; border-bottom-color: var(--line-strong); font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--steel); }
:is(.page-content, .acct-details) .woocommerce-table--order-details .product-total, :is(.page-content, .acct-details) .woocommerce-table--order-details tfoot td { text-align: right; }
:is(.page-content, .acct-details) .woocommerce-table--order-details .product-name a { color: var(--ink); font-weight: 600; text-decoration: none; }
:is(.page-content, .acct-details) .woocommerce-table--order-details .wc-item-meta { margin: .35rem 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: .6875rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--steel); }
:is(.page-content, .acct-details) .woocommerce-table--order-details .wc-item-meta p, :is(.page-content, .acct-details) .woocommerce-table--order-details .wc-item-meta li { display: inline; margin: 0; }
:is(.page-content, .acct-details) .woocommerce-table--order-details tfoot th { font-weight: 500; color: var(--ink-2); }
:is(.page-content, .acct-details) .woocommerce-table--order-details tfoot tr:last-child th, :is(.page-content, .acct-details) .woocommerce-table--order-details tfoot tr:last-child td { font-size: 1.25rem; font-weight: 600; color: var(--ink); }
:is(.page-content, .acct-details) .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); }
:is(.page-content, .acct-details) .woocommerce-customer-details address { font-style: normal; line-height: 1.6; color: var(--ink-2); }
:is(.page-content, .acct-details) .woocommerce-customer-details .woocommerce-column__title { margin-top: var(--space-4); }
/* Tracking: the result sentence, the notes. */
.page-content .ktrack-result .order-info { font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); text-align: center; }
.page-content .ktrack-result mark { background: none; color: var(--ink); font-weight: 600; }
.page-content .ktrack-result .notes { display: grid; gap: .75rem; padding: 0; list-style: none; }
.page-content .ktrack-result .notes .meta { font-family: var(--mono); font-size: .6875rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--steel); }
/* WooCommerce's own messages on these pages (order not found, and so on): ink on paper. */
.page-main .woocommerce-error, .page-main .woocommerce-message, .page-main .woocommerce-info, .page-main .woocommerce-notice--error {
  max-width: var(--measure);
  margin: 0 auto var(--space-3);
  padding: .9rem 1.1rem;
  list-style: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius-field);
  background: var(--paper);
  color: var(--ink);
  font-size: .9375rem;
}
.ktrack .kform-foot { margin-top: var(--space-3); }

/* ----------------------------------------- account, signed in: the dashboard */
/*
 * The aadesigns dashboard in KARTEL's look. The tabs sit under the lettering: one
 * centred row, a hairline under it, the menu's lime marker under the tab you are
 * on (same weight on every tab, so nothing moves). Then the tab's cards: the icon
 * and title on the left behind a hairline, the content in the middle, the card's
 * button on the right; on phones the title and the button share the top line and
 * the content goes under them.
 */
.acct-main { --acct-w: 1080px; --acct-pad: clamp(1.25rem, 2.2vw, 1.75rem); padding-top: calc(var(--nav-h) + clamp(.75rem, 2vw, 1.5rem)); padding-bottom: calc(var(--dock-h) + var(--space-4)); }
.acct { max-width: var(--acct-w); margin-inline: auto; }

.acct-tabs { border-bottom: 1px solid var(--line); }
.acct-tabs-list { display: flex; justify-content: center; gap: clamp(1.25rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.acct-tabs-list::-webkit-scrollbar { display: none; }
.acct-tab { display: flex; align-items: center; flex: none; margin: 0; }
.acct-tab a { display: block; padding: 1rem 0; font-size: .9375rem; font-weight: 500; line-height: 1.2; color: var(--ink-2); white-space: nowrap; transition: color .25s var(--ease); }
.acct-tab a span { background: var(--marker) 0% 76% / 0% .4em; transition: background-size .5s var(--ease); }
.acct-tab a[aria-current] { color: var(--ink); }
.acct-tab a[aria-current] span { background-size: 100% .4em; }
.acct-tab.is-out { gap: clamp(1.25rem, 3vw, 2.5rem); }
.acct-tab.is-out::before { content: ""; width: 1px; height: 1rem; background: var(--line-strong); }
.acct-tab.is-out a { color: var(--mute); }
@media (hover: hover) and (pointer: fine) { .acct-tab a:hover { color: var(--ink); } .acct-tab a:hover span { background-size: 100% .4em; } }
/* Phones: the four tabs fit from 320px up; Sign out moves under the cards (.acct-out). */
.acct-out { display: none; }
@media (max-width: 599px) {
  .acct-tabs-list { gap: clamp(.9rem, 5vw, 1.5rem); }
  .acct-tab a { font-size: .875rem; }
  .acct-tab.is-out { display: none; }
  .acct-out { display: block; margin-top: var(--space-3); text-align: center; }
  .acct-out a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-size: .9375rem; color: var(--ink-2); }
}

.acct-body { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.acct-body > .woocommerce-notices-wrapper:empty { display: none; }
.acct-body :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) { margin: 0; padding: .9rem 1.1rem; list-style: none; border: 1px solid var(--ink); border-radius: var(--radius-field); background: var(--paper); color: var(--ink); font-size: .9375rem; }
.acct-body .woocommerce-notices-wrapper { display: grid; gap: .75rem; }
/* A notice with a button (WooCommerce's "Confirm your email address to link past orders"): the text, then the button on the right. */
.acct-body .woocommerce-info:has(.button) { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; line-height: 1.45; }
@media (max-width: 599px) { .acct-body .woocommerce-info:has(.button) { flex-direction: column-reverse; align-items: flex-start; } }
.acct-body :is(.woocommerce-info, .woocommerce-message) .button { display: inline-flex; align-items: center; justify-content: center; height: var(--pill-h); padding: 0 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .875rem; font-weight: 500; white-space: nowrap; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .acct-body :is(.woocommerce-info, .woocommerce-message) .button:hover { background: var(--lime); border-color: var(--lime); } }

/* A card. */
.acct-card {
  display: grid;
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr) auto;
  grid-template-areas: "head body action";
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 70px -56px #00000073;
}
.acct-card-head { grid-area: head; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: start; align-content: start; gap: .9rem; padding: var(--acct-pad); border-right: 1px solid var(--line); }
.acct-card-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--paper-2); color: var(--ink); }
.acct-card-titles { display: grid; gap: .35rem; padding-top: .55rem; }
.acct-card-title { font-size: 1.0625rem; font-weight: 800; font-stretch: 124%; line-height: 1.1; letter-spacing: var(--track-display); text-box: trim-both cap alphabetic; }
.acct-card-lead { font-size: .875rem; line-height: 1.4; color: var(--mute); }
.acct-card-body { grid-area: body; min-width: 0; padding: var(--acct-pad); }
.acct-card-action { grid-area: action; display: flex; align-items: flex-start; justify-content: flex-end; padding: var(--acct-pad) var(--acct-pad) 0 0; }
.acct-card-action form { margin: 0; }
@media (max-width: 899px) {
  .acct-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head action" "body body"; }
  .acct-card-head { padding-bottom: 0; border-right: 0; }
  .acct-card-body { padding-top: 1.25rem; }
}
/* A long card button (Sign out everywhere else) goes under the card's content. */
.acct-card.is-action-below { grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); grid-template-areas: "head body" "head action"; }
.acct-card.is-action-below .acct-card-action { justify-content: flex-start; padding: 0 var(--acct-pad) var(--acct-pad); }
@media (max-width: 899px) {
  .acct-card.is-action-below { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "action"; }
}
/* Two cards side by side (Addresses) take the stacked layout too. */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.acct-grid .acct-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head action" "body body"; }
.acct-grid .acct-card-head { padding-bottom: 0; border-right: 0; }
.acct-grid .acct-card-body { padding-top: 1.25rem; }

.acct-text { max-width: 60ch; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.acct-text.is-note { margin-top: .75rem; font-size: .875rem; color: var(--ink); }
.acct-hint { font-size: .8125rem; line-height: 1.4; color: var(--mute); }
.acct-link { font-size: .9375rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.acct-back a { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--ink-2); }
.acct-back a:hover { color: var(--ink); }
.acct-address { font-style: normal; line-height: 1.6; color: var(--ink-2); }

/* Small pill buttons (cards, rows). */
.btn-sm { height: var(--pill-h); padding: 0 1.1rem; gap: .5rem; justify-content: center; font-size: .875rem; }

/* Profile: the facts two by two, a hairline between the columns (one column on small phones). */
.acct-facts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: start; gap: 1.5rem 0; margin: 0; }
.acct-fact { display: grid; gap: .6rem; min-width: 0; padding: 0 clamp(1.25rem, 3vw, 2.5rem); border-left: 1px solid var(--line); }
.acct-fact:nth-child(odd) { padding-left: 0; border-left: 0; }
.acct-fact dt { line-height: 1; text-box: trim-both cap alphabetic; }
.acct-fact dd { margin: 0; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
@media (max-width: 459px) {
  .acct-facts { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .acct-fact { padding: 0; border-left: 0; }
}

/* The newsletter switch: a real button (role=switch), ink when on. */
.acct-switch-form { display: flex; align-items: center; gap: .75rem; margin: 0; }
.acct-switch-state { font-size: .875rem; color: var(--ink-2); white-space: nowrap; }
.acct-switch { position: relative; flex: none; width: 2.75rem; height: 1.5rem; border-radius: 999px; background: var(--paper-3); transition: background-color .25s var(--ease); }
.acct-switch-knob { position: absolute; top: .1875rem; left: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: 999px; background: var(--paper); box-shadow: 0 1px 2px #0000002e; transition: transform .3s var(--ease); }
.acct-switch[aria-checked="true"] { background: var(--ink); }
.acct-switch[aria-checked="true"] .acct-switch-knob { transform: translateX(1.25rem); }
.acct-switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Rows inside a card: alerts, devices, sign-in methods. */
.acct-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.acct-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin: 0; padding: 1rem 0; border-top: 1px solid var(--line); }
.acct-row:first-child { padding-top: 0; border-top: 0; }
.acct-row:last-child { padding-bottom: 0; }
.acct-row-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 10px; background: var(--paper-2); color: var(--ink); }
.acct-row-icon.is-google { background: #fff; border: 1px solid var(--line); }
.acct-row-main { display: grid; gap: .3rem; min-width: 0; }
.acct-row-title { font-weight: 600; line-height: 1.3; color: var(--ink); }
a.acct-row-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.acct-row-meta { font-size: .875rem; line-height: 1.35; color: var(--mute); }
.acct-row-action { display: flex; gap: .5rem; }
.acct-row-action form { margin: 0; }
.acct-badge { display: inline-block; margin-left: .4rem; padding: .25rem .5rem; border-radius: 999px; background: var(--lime); color: var(--ink); font-family: var(--mono); font-size: .625rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; vertical-align: .1em; }
@media (max-width: 459px) {
  .acct-row { grid-template-columns: auto minmax(0, 1fr); }
  .acct-row-action { grid-column: 2; }
}

/* Thumbnails (alerts, orders). */
.acct-thumbs { display: flex; gap: .4rem; }
.acct-thumb { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; overflow: hidden; border-radius: var(--radius-field); background: var(--paper-2); }
.acct-thumb img { width: 100%; height: 100%; object-fit: cover; }
.acct-thumb.is-more { font-family: var(--mono); font-size: .75rem; font-weight: 600; color: var(--steel); }

/* Nothing yet: a dashed box. */
.acct-empty { display: grid; justify-items: center; gap: .4rem; padding: clamp(1.5rem, 3vw, 2.25rem) 1rem; border: 1px dashed var(--line-strong); border-radius: 12px; text-align: center; }
.acct-empty-title { font-weight: 600; }
.acct-empty-text { max-width: 44ch; font-size: .9375rem; color: var(--mute); }
.acct-empty .btn { margin-top: .75rem; }

/* Orders: one card each, a row of facts (stacked two by two on phones). */
.acct-orders { display: grid; gap: clamp(.75rem, 1.5vw, 1rem); margin: 0; padding: 0; list-style: none; }
.acct-card.acct-order {
  grid-template-columns: minmax(6.5rem, auto) minmax(6.5rem, auto) auto minmax(0, 1fr) minmax(6.5rem, auto) auto;
  grid-template-areas: "id when status pieces total actions" "withdraw withdraw withdraw withdraw withdraw withdraw";
  align-items: center;
  gap: 0 clamp(1rem, 2.4vw, 2rem);
  padding: var(--acct-pad);
  margin: 0;
}
.acct-order.is-open { grid-template-areas: "id when status pieces total actions" "ship ship ship ship ship ship" "withdraw withdraw withdraw withdraw withdraw withdraw"; }
.acct-order > div { display: grid; gap: .55rem; min-width: 0; }
.acct-order .label { line-height: 1; text-box: trim-both cap alphabetic; }
.acct-order-id { grid-area: id; }
.acct-order-when { grid-area: when; }
.acct-order-status { grid-area: status; }
.acct-order-pieces { grid-area: pieces; }
.acct-order-total { grid-area: total; }
.acct-order-actions { grid-area: actions; display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.acct-order-no { font-size: 1.25rem; font-weight: 800; font-stretch: 124%; line-height: 1.1; letter-spacing: var(--track-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.acct-order-no span { background: var(--marker) 0% 76% / 100% .4em; }
.acct-order-when time, .acct-order-sum { font-weight: 500; font-variant-numeric: tabular-nums; }
.acct-order-sum { font-size: 1.0625rem; font-weight: 600; }
.acct-order-ship { grid-area: ship; margin-top: 1.25rem; }
.acct-order-withdraw { grid-area: withdraw; margin-top: var(--acct-pad); padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9375rem; }
.acct-order-withdraw a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.acct-order-withdraw a:hover { text-decoration-color: var(--lime); text-decoration-thickness: .4em; text-underline-offset: -.25em; text-decoration-skip-ink: none; }
.acct-status { display: inline-flex; align-items: center; justify-self: start; height: 1.75rem; padding: 0 .7rem; border-radius: 999px; font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap; }
.acct-status.is-solid { background: var(--ink); color: var(--paper); }
.acct-status.is-line { border: 1px solid var(--line-strong); color: var(--ink); }
.acct-status.is-quiet { background: var(--paper-2); color: var(--steel); }
@media (max-width: 899px) {
  .acct-card.acct-order { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id status" "when total" "pieces pieces" "actions actions" "withdraw withdraw"; gap: 1.25rem 1rem; }
  .acct-order.is-open { grid-template-areas: "id status" "when total" "actions actions" "ship ship" "withdraw withdraw"; }
  .acct-order-status, .acct-order-total { justify-items: end; text-align: right; }
  .acct-order-actions { justify-content: flex-start; }
  .acct-order-withdraw, .acct-order-ship { margin-top: 0; }
}
.acct-pages { display: flex; justify-content: center; gap: .75rem; }

/* One order: the team's updates, then WooCommerce's details in a card. */
.acct-notes { display: grid; gap: 1rem; margin: 0; list-style: none; }
.acct-notes li { display: grid; gap: .5rem; margin: 0; }
.acct-notes li + li { padding-top: 1rem; border-top: 1px solid var(--line); }
.acct-card.acct-details { display: block; padding: var(--acct-pad); }
.acct-details > :first-child, .acct-details .woocommerce-order-details > :first-child { margin-top: 0; }

/* Forms (Edit profile, addresses, password): WooCommerce's fields, the contact form's look. */
.acct-form-card .acct-card-body { padding-top: var(--acct-pad); }
.acct-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.acct-form .form-row { display: grid; gap: .6rem; align-content: start; grid-column: 1 / -1; margin: 0; }
.acct-form .form-row-first { grid-column: 1; }
.acct-form .form-row-last { grid-column: 2; }
.acct-form .form-row.hidden, .acct-form .form-row[style*="display: none"] { display: none; }
.acct-form .form-row-wide, .acct-form .acct-hint.form-row-wide { grid-column: 1 / -1; }
.acct-form label { font-family: var(--mono); font-size: .6875rem; font-weight: 600; line-height: 1; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); text-box: trim-both cap alphabetic; }
.acct-form label .required { border: 0; text-decoration: none; color: var(--ink); }
.acct-form label .optional { color: var(--mute); }
.acct-form .woocommerce-input-wrapper { display: block; }
.acct-form :is(.input-text, select, textarea) {
  width: 100%; min-height: 3rem; padding: .75rem .9rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-field); background: var(--paper);
  font: inherit; font-size: 1rem; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.acct-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%); background-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.acct-form :is(.input-text, select, textarea):hover { border-color: var(--ink-2); }
.acct-form :is(.input-text, select, textarea):focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.acct-form .woocommerce-invalid :is(.input-text, select) { border-color: var(--ink); border-style: dashed; }
.acct-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.5rem; }
.acct-form-foot form { margin: 0; }
.acct-card-body > .acct-form-foot:first-child { margin-top: 0; }
@media (max-width: 599px) {
  .acct-fields { grid-template-columns: minmax(0, 1fr); }
  .acct-form .form-row-first, .acct-form .form-row-last { grid-column: 1 / -1; }
  .acct-form-foot .btn:not(.btn-sm) { flex: 1 1 auto; }
}

/* WooCommerce's own buttons on the order pages. */
.page-content a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem; border-radius: 999px; background: var(--ink); color: var(--paper) !important; font-size: .9375rem; font-weight: 500; text-decoration: none !important; }

/* -------------------------------------------------------- a brand's page */
/* The zine: (cover) · logo or name · line · facts · pieces · story · more brands. */
.project-cover { max-width: 1180px; margin: 0 auto var(--space-5); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card); background: var(--paper-2); }
.project-cover-img { width: 100%; height: 100%; object-fit: cover; }
.project-logo { margin: 0; line-height: 0; }
.project-logo img { width: auto; height: auto; max-height: clamp(56px, 9vw, 104px); max-width: min(300px, 70vw); margin-inline: auto; }
/* Facts: centred, each a label over its value, rows between dividers like the specs. */
.project-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem clamp(1.5rem, 5vw, 3rem); width: 100%; max-width: var(--measure); margin: 0; padding-block: var(--row-pad); border-block: 1px solid var(--line); }
.project-facts > div { display: grid; justify-items: center; gap: .6rem; }
.project-facts dt, .project-facts dd { line-height: 1; text-box: trim-both cap alphabetic; }
.project-facts dd { margin: 0; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.project-facts a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Pieces: the homepage's tiles, centred, at most four across (two on phones). */
.project-pieces { margin-top: var(--space-5); }
.project-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 240px)); width: fit-content; max-width: 100%; margin-inline: auto; }
@media (max-width: 599px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } }
.project-story { max-width: var(--measure); margin: var(--space-5) auto 0; text-align: center; }

/* ------------------------------------------------------------ the loader */
/*
 * One tile in the middle of the paper, built like a product tile: four corner
 * labels at one inset, crop marks round a square box. A 4x4 grid assembles in
 * the box as the page really loads (fonts, then every product photo); at 100
 * the crop marks fly out to the screen corners (where the nav sits) and the
 * paper lifts: the small grid becomes the store's grid.
 * Later pages in the same visit only fade (html.is-quick). No JS, no loader.
 */
.loader { display: none; }
html.js .loader {
  --S: min(240px, 58vw);                /* tile edge */
  --m: calc(var(--S) * .04);            /* label inset, as on a product tile */
  --p: calc(var(--S) * .11);            /* photo-box inset */
  position: fixed;
  inset: 0;
  z-index: 400;
  display: block;
  background: var(--paper);
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
html.js.is-loaded .loader { opacity: 0; visibility: hidden; }
html.js.is-quick .loader-tile, html.js.is-quick .loader .crop { display: none; }
html.js.is-quick .loader { transition-duration: .25s, 0s; transition-delay: 0s, .25s; }
html.js:not(.is-loaded) body { overflow: hidden; }

.loader-tile { position: absolute; left: 50%; top: 50%; width: var(--S); height: var(--S); translate: -50% -50%; transition: opacity .25s var(--ease); }
.loader-row {
  position: absolute;
  left: var(--m);
  right: calc(var(--m) - var(--track-label));
  display: flex;
  justify-content: space-between;
  font-family: var(--tile);
  font-size: calc(var(--S) * .0333);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
  text-box: trim-both cap alphabetic;
  font-variant-numeric: tabular-nums;
}
.loader-top { top: var(--m); }
.loader-bottom { bottom: var(--m); }
.loader-grid {
  position: absolute;
  inset: var(--p);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  background: var(--paper-2);
}
.loader-grid i { border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); opacity: 0; scale: .6; transition: opacity .35s var(--ease), scale .45s var(--ease), background-color .35s var(--ease); }
.loader-grid i:nth-child(4n) { border-right: 0; }
.loader-grid i:nth-child(n+13) { border-bottom: 0; }
.loader-grid i.on { opacity: 1; scale: 1; }
.loader-grid i.hot { background: var(--ink); }

.loader .crop { position: absolute; width: 14px; height: 14px; transition: top .7s var(--ease-io), left .7s var(--ease-io), right .7s var(--ease-io), bottom .7s var(--ease-io); }
.loader .crop-tl { top: calc(50% - var(--S) / 2 + var(--p)); left: calc(50% - var(--S) / 2 + var(--p)); }
.loader .crop-tr { top: calc(50% - var(--S) / 2 + var(--p)); right: calc(50% - var(--S) / 2 + var(--p)); }
.loader .crop-bl { bottom: calc(50% - var(--S) / 2 + var(--p)); left: calc(50% - var(--S) / 2 + var(--p)); }
.loader .crop-br { bottom: calc(50% - var(--S) / 2 + var(--p)); right: calc(50% - var(--S) / 2 + var(--p)); }
html.js.is-leaving .loader-tile { opacity: 0; }
html.js.is-leaving .loader .crop-tl { top: var(--edge); left: var(--edge); }
html.js.is-leaving .loader .crop-tr { top: var(--edge); right: var(--edge); }
html.js.is-leaving .loader .crop-bl { bottom: var(--edge); left: var(--edge); }
html.js.is-leaving .loader .crop-br { bottom: var(--edge); right: var(--edge); }
@media (prefers-reduced-motion: reduce) {
  html.js .loader .crop { display: none; }
}

/* ----------------------------------------------------------------- forms */
.kform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.kform-field { display: grid; gap: .6rem; align-content: start; }
.kform-field.is-wide { grid-column: 1 / -1; }
.kform-field > .label { line-height: 1; text-box: trim-both cap alphabetic; color: var(--ink); }
.kform input[type="text"], .kform input[type="email"], .kform input[type="date"], .kform select, .kform textarea {
  width: 100%;
  min-height: 3rem;
  padding: .75rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--paper);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  appearance: none;
}
.kform textarea { min-height: 8.5rem; resize: vertical; line-height: 1.5; }
.kform select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.kform input:hover, .kform select:hover, .kform textarea:hover { border-color: var(--ink-2); }
.kform input:focus-visible, .kform select:focus-visible, .kform textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.kform .is-invalid input, .kform .is-invalid select, .kform .is-invalid textarea { border-color: var(--ink); border-style: dashed; }
.kform-hint { font-size: .875rem; color: var(--mute); }
.kform-error { min-height: 0; color: var(--ink); }
.kform-error:empty { display: none; }
.kform-check { position: relative; display: grid; grid-template-columns: 1.25rem 1fr; gap: .75rem; align-items: start; cursor: pointer; font-size: 1rem; color: var(--ink); }
.kform-check input { position: absolute; opacity: 0; width: 1.25rem; height: 1.25rem; margin: 0; }
.kform-box { width: 1.25rem; height: 1.25rem; margin-top: .1rem; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--paper); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.kform-check input:checked + .kform-box { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); }
.kform-check input:focus-visible + .kform-box { outline: 2px solid var(--ink); outline-offset: 2px; }
.kform-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kform-foot { display: grid; justify-items: center; gap: 1rem; margin-top: 1.5rem; text-align: center; }
.kform-send { width: 100%; height: 3.5rem; justify-content: center; padding-inline: 1.5rem; }
.kform-note { font-size: .875rem !important; color: var(--mute) !important; }
.kform-note a { color: var(--ink-2); }
.kform-status { margin-top: 1rem; color: var(--ink); text-align: center; }
.kform-status:empty { display: none; }
.kform.is-sent .kform-grid, .kform.is-sent .kform-note { opacity: .4; pointer-events: none; }
@media (max-width: 599px) { .kform-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------- sign in / create account */
/* The SLAPS auth card, in KARTEL: one centred card, three views swapping in place. */
.auth-main { min-height: 100svh; display: grid; place-items: center; padding: calc(var(--nav-h) + 1.5rem) var(--shell) calc(var(--pill-h) + 2 * var(--edge) + 2rem); }
.auth-main > .woocommerce { width: 100%; display: grid; justify-items: center; gap: 1rem; }
.auth { width: 100%; display: flex; justify-content: center; }
.auth-card {
  --card-pad: clamp(1rem, 4.5vw, 2rem);
  width: min(460px, 100%);
  padding: var(--card-pad);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 40px 120px -40px #0000004d;
  text-align: center;
}
.auth-view[hidden] { display: none; }
.auth-view { animation: fade-in .35s var(--ease) both; }
.auth-title { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2rem); font-weight: 900; font-stretch: 124%; line-height: 1; letter-spacing: var(--track-display); text-wrap: balance; }
.auth-sub { margin: .6rem auto 0; color: var(--ink-2); font-size: clamp(.875rem, .8rem + .3vw, 1rem); font-weight: 300; font-stretch: 106%; line-height: 1.4; text-wrap: balance; }
.auth-form { display: grid; gap: .9rem; margin-top: 1.5rem; text-align: left; }
.auth-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.auth-field { display: grid; gap: .55rem; margin: 0; }
.auth-field > .label { color: var(--ink); line-height: 1; text-box: trim-both cap alphabetic; }
.auth-form .input-text {
  width: 100%;
  min-height: 3rem;
  padding: .75rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--paper);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.auth-form .input-text:hover { border-color: var(--ink-2); }
.auth-form .input-text:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.auth-form .input-text::placeholder { color: var(--mute); }
/* Remember me (the words centred on their box) and Lost your password? (ending on the
   fields' right edge): one line each. Only if they cannot share a line does the link drop
   under it, still on the right. */
.auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.auth-remember { grid-template-columns: 1.25rem auto; align-items: center; gap: .6rem; font-size: .875rem; line-height: 1.2; white-space: nowrap; }
.auth-remember .kform-box { margin-top: 0; }
.auth-link { margin-left: auto; font-size: .875rem; line-height: 1.2; white-space: nowrap; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.auth-link:hover { color: var(--ink); }
.auth-submit { justify-content: center; height: 3.25rem; padding-inline: 1.5rem; margin-top: .25rem; }
.auth-note { color: var(--ink-2); font-size: .9375rem; }
.auth-switch { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-2); text-wrap: balance; }
.auth-switch a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth .woocommerce-password-strength { margin-top: .5rem; padding: .5rem .75rem; border-radius: var(--radius-field); font-size: .8125rem; background: var(--paper-2); color: var(--ink); }
.auth .woocommerce-password-hint { display: block; margin-top: .4rem; font-size: .8125rem; color: var(--mute); }
@media (max-width: 359px) { .auth-pair { grid-template-columns: 1fr; } }   /* names side by side from 360px: one row less */

/* WooCommerce's messages (wrong password, account created…) above the card, same width. */
.auth-main .woocommerce-notices-wrapper, .auth-main .woocommerce-error, .auth-main .woocommerce-message, .auth-main .woocommerce-info { width: min(460px, 100%); margin: 0; }
.auth-main .woocommerce-error, .auth-main .woocommerce-message, .auth-main .woocommerce-info {
  list-style: none;
  padding: .9rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-field);
  background: var(--paper);
  color: var(--ink);
  font-size: .9375rem;
  text-align: left;
}
.auth-main .woocommerce-error li + li { margin-top: .35rem; }
.auth .woocommerce-privacy-policy-text p { font-size: .8125rem; line-height: 1.45; color: var(--mute); }
.auth .woocommerce-privacy-policy-text a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.auth-hint { font-size: .8125rem; line-height: 1.3; color: var(--mute); }
.auth-alert { margin-top: 1.25rem; padding: .8rem 1rem; border: 1px solid var(--ink); border-radius: var(--radius-field); background: var(--paper); color: var(--ink); font-size: .9375rem; line-height: 1.45; text-align: left; }
/* Continue with Google: Google's own button rules (the standard G, a white pill with the 1px grey edge), KARTEL's type. */
.auth-alt { display: grid; gap: 1rem; margin-top: 1.25rem; }
.auth-alt + .auth-form { margin-top: 1rem; }
/* The three views differ in height: on a short screen one may scroll and the next not. The scrollbar's
   room is kept either way, so the card, the lettering and the dock never jump sideways (they all
   centre in the same width: measured, 15 Oct). Overlay scrollbars (Mac, iPad, phones) take no room. */
html:has(> body.is-auth:not(.is-locked)) { scrollbar-gutter: stable; }   /* off under a layer: the lock's own --sbw takes over, so the drawer still meets the window edge */
.gbtn { display: flex; align-items: center; justify-content: center; gap: .75rem; width: 100%; height: 3rem; padding: 0 1.25rem; border: 1px solid #747775; border-radius: 999px; background: #fff; color: #1f1f1f; font-size: .95rem; font-weight: 500; line-height: 1; transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
.gbtn-g { flex: none; }
@media (hover: hover) and (pointer: fine) { .gbtn:hover { background: #f7f8f8; box-shadow: 0 1px 3px #3c40434d; } }
.gbtn:active { background: #eceded; }
.auth-or { display: flex; align-items: center; gap: 1rem; font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--mute); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Empty notice holders take no room (the card is measured to fit the screen). */
.auth-main .woocommerce-notices-wrapper:empty { display: none; }

/* ---------------------------------------------------------- cart drawer */
.drawer { position: fixed; inset: 0; z-index: 220; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 22%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade-in .35s var(--ease) both; }
.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  /* The edge line is drawn inside the panel (no border), so the margin from the panel's edge
     is exactly --cart-pad on the left as on the right. */
  box-shadow: inset 1px 0 0 var(--line), -30px 0 80px -40px #00000059;
  animation: drawer-in .5s var(--ease) both;
  outline: none;
}
.drawer.is-closing .drawer-panel { animation: drawer-out .28s var(--ease-io) forwards; }
.drawer.is-closing .drawer-scrim { animation: fade-out .3s var(--ease-io) forwards; }
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes drawer-out { to { transform: translateX(100%); } }
/* One margin for the whole cart (owner, 14 Oct): the panel's sides, the space from each
   divider to the photo above and below it, and the footer's padding are all --cart-pad
   (24px; phones 20, the narrowest 16). The title's left edge and the close's right edge
   stand on the same lines as the photos and the prices. */
.drawer-panel { --cart-pad: 1.5rem; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--cart-pad); border-bottom: 1px solid var(--line); }
.drawer-title { display: flex; align-items: center; gap: .6rem; font-size: 1.6rem; letter-spacing: var(--track-display); line-height: 1; }
.drawer-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 0 var(--cart-pad); }
.drawer-empty { padding: 3rem 0; display: grid; gap: 1rem; justify-items: start; }
.drawer-foot { display: grid; gap: .75rem; padding: var(--cart-pad) var(--cart-pad) max(var(--cart-pad), env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.drawer-row { display: flex; align-items: baseline; justify-content: space-between; }
.drawer-total { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.drawer-note { color: var(--mute); }

/*
 * A cart line (owner, 14 Oct): the photo, and beside it one column exactly as
 * tall as the photo. Its first letters (the project) stand level with the photo's
 * top edge; the name and the price share one baseline; the quantity pill's bottom
 * is the photo's bottom, with Remove level with the pill's middle. Text is trimmed
 * to its letters, so every edge is measured ink to ink. A name too long for its
 * line wraps, the price stays on the first line, and the column grows.
 */
.line { --img: 5.5rem; display: grid; grid-template-columns: var(--img) minmax(0, 1fr); gap: 1rem; padding: var(--cart-pad) 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }   /* the footer's own line closes the list (no double line when it scrolls) */
.line-img { width: var(--img); aspect-ratio: 1; border-radius: var(--radius-field); background: var(--paper-2); overflow: hidden; }
.line-img img { width: 100%; height: 100%; object-fit: contain; }
.line-info { display: flex; flex-direction: column; min-width: 0; min-height: var(--img); }
.line-brand, .line-size { line-height: 1; text-box: trim-both cap alphabetic; }
.line-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-top: .55rem; }
.line-head:first-child { margin-top: 0; }
.line-name { min-width: 0; font-size: .9375rem; font-weight: 600; line-height: 1.2; text-box: trim-both cap alphabetic; }
.line-price { flex: none; font-size: .9375rem; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; text-box: trim-both cap alphabetic; }
.line-size { margin-top: .5rem; }
.line-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .625rem; }
/* The quantity: a compact pill, 30px tall; on touch screens each button still takes a finger. */
.line-qty { display: inline-flex; align-items: center; height: 1.875rem; border: 1px solid var(--line-strong); border-radius: 999px; }
.line-qty button { position: relative; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; }
.line-qty button:disabled { color: var(--mute-soft); cursor: not-allowed; }
.line-qty output { min-width: 1.25rem; font-size: .875rem; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; font-weight: 500; }
.line-qty .plus, .line-qty .minus { width: 10px; height: 10px; }
.line-qty .plus::before, .line-qty .minus::before { top: 4px; width: 10px; }
.line-qty .plus::after { left: 4px; height: 10px; }
@media (pointer: coarse) { .line-qty button::after { content: ""; position: absolute; inset: -8px -2px; } }
.line-remove { font-size: .75rem; line-height: 1; color: var(--steel); text-decoration: underline; text-underline-offset: 3px; }
.line.is-busy { opacity: .45; pointer-events: none; }
@media (max-width: 599px) { .drawer-panel { --cart-pad: 1.25rem; } }
/* The narrowest phones (360px): one step smaller and 16px margins, so "Knit Crewneck — Charcoal"
   (176px at 14px) keeps its line beside its price (measured: 179px free). */
@media (max-width: 379px) {
  .drawer-panel { --cart-pad: 1rem; }
  .line-name, .line-price { font-size: .875rem; }
}

/* ------------------------------------------- cart, checkout, account */
/* WooCommerce's own content, under the pages' centred title. */
.page-inner { max-width: 1100px; margin-inline: auto; }
.page-content { margin-top: var(--space-5); }
.page-content > * + * { margin-top: 1rem; }
.page-content ul { list-style: disc; padding-left: 1.25em; }
.page-content ol { list-style: decimal; padding-left: 1.25em; }
.page-content li + li { margin-top: .35rem; }
.page-content h2 { margin-top: 2.25rem; font-size: 1.5rem; line-height: 1.1; font-weight: 700; font-stretch: 124%; letter-spacing: var(--track-display); }
.page-content p, .page-content li { max-width: 68ch; }
/* The empty cart: a lead and one button, where the lead sits on every other page. */
.page-content .wp-block-woocommerce-empty-cart-block { margin-top: calc(var(--space-3) - var(--space-5)); text-align: center; }
.page-content .wp-block-woocommerce-empty-cart-block > * { max-width: var(--measure); margin-inline: auto; }
/* Short pages: the dock still sits on the bottom edge. */
body:not(.home) { display: flex; flex-direction: column; min-height: 100svh; }
body:not(.home) > main { flex: 1 0 auto; }
/* ------------------------------------------- cart + checkout (Woo blocks) */
/*
 * WooCommerce's own cart and checkout blocks, redrawn in KARTEL: ink on paper,
 * pill buttons, 8px fields, mono labels, no colour. Only the look changes;
 * every field, step and rule is WooCommerce's. Woo's own selectors are
 * specific, hence the .page-content prefix and the odd !important.
 */
.page-content a:not(.btn):not(.wc-block-components-button) { text-decoration: underline; text-underline-offset: 3px; }
.page-content .wc-block-cart, .page-content .wc-block-checkout { color: var(--ink); font-family: var(--font); }

/* Labels: column heads and small print take the mono label register. */
.page-content .wc-block-cart-items__header th,
.page-content .wc-block-cart__totals-title,
.page-content .wc-block-components-product-metadata,
.page-content .wc-block-components-product-details {
  font-family: var(--mono) !important;
  font-size: .6875rem !important;
  font-weight: 600 !important;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--steel) !important;
}
.page-content .wc-block-cart-items, .page-content .wc-block-cart-items td, .page-content .wc-block-cart-items th,
.page-content .wc-block-components-totals-wrapper, .page-content .wc-block-components-order-summary-item,
.page-content .wc-block-checkout__terms--with-separator { border-color: var(--line) !important; }

/* Lines: the drawer's look, a little larger. */
.page-content .wc-block-cart-item__image img, .page-content .wc-block-components-order-summary-item__image img { border-radius: var(--radius-field); background: var(--paper-2); }
.page-content .wc-block-components-product-name { font-size: 1rem !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--ink) !important; text-decoration: none !important; }
.page-content .wc-block-cart-item__prices, .page-content .wc-block-components-product-price,
.page-content .wc-block-cart-item__total, .page-content .wc-block-components-order-summary-item__total-price { font-size: .9375rem !important; font-variant-numeric: tabular-nums; color: var(--ink); }
.page-content .wc-block-cart-item__total { font-weight: 500; }
.page-content .wc-block-components-quantity-selector { height: 2.25rem; border-radius: 999px !important; overflow: hidden; }
.page-content .wc-block-components-quantity-selector::after { border: 1px solid var(--line-strong) !important; border-radius: 999px !important; opacity: 1 !important; }
.page-content .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { font-size: .9375rem !important; font-weight: 500; color: var(--ink) !important; background: none !important; box-shadow: none !important; }
.page-content .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { color: var(--ink) !important; opacity: 1; }
.page-content .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled { color: var(--mute-soft) !important; }
.page-content .wc-block-cart-item__remove-link { color: var(--steel) !important; }
.page-content .wc-block-components-order-summary-item__quantity { background: var(--ink) !important; color: var(--paper) !important; border: 0 !important; box-shadow: none !important; font-weight: 600; }

/* Totals and the order summary: a card, like the pop-up and the sign-in card. */
.page-content .wc-block-cart__sidebar, .page-content .wp-block-woocommerce-checkout-order-summary-block {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--paper);
}
.page-content .wc-block-cart__sidebar { align-self: flex-start; padding: 1.25rem 1.5rem 1.5rem !important; }
.page-content .wc-block-cart__payment-options:empty { display: none; }
.page-content .wc-block-components-totals-item { font-size: .9375rem; }
.page-content .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.page-content .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 1.25rem !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
.page-content .wc-block-components-totals-item__description { font-size: .8125rem !important; color: var(--mute) !important; }
/* Phones (Woo marks the layout .is-mobile / .is-small): the summary card sits on top and again above the
   button; both get the card's inner padding, and the inner box loses its own border. */
.page-content .wc-block-checkout:is(.is-mobile, .is-small) .wp-block-woocommerce-checkout-order-summary-block { padding: 0 1rem !important; }
.page-content .wc-block-checkout:is(.is-mobile, .is-small) .wc-block-components-checkout-order-summary__title { border-top: 0 !important; }
.page-content .checkout-order-summary-block-fill { border: 0 !important; }
.page-content .wc-block-components-checkout-order-summary__title-text { font-size: 1.25rem !important; font-weight: 800 !important; font-stretch: 124%; letter-spacing: var(--track-display); }

/* Buttons: the KARTEL pill. */
.page-content .wc-block-components-button:not(.is-link),
.page-content .wp-element-button, .page-content .woocommerce-button, .page-content button.button {
  min-height: 3.5rem;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-family: var(--font) !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform .16s var(--ease), background-color .25s var(--ease);
}
.page-content .wc-block-components-button:not(.is-link):active:not(:disabled) { transform: scale(.98); }
.page-content .wc-block-components-button:not(.is-link):disabled,
.page-content .wc-block-components-button:not(.is-link)[aria-disabled="true"] { background: var(--paper-3) !important; color: var(--steel) !important; }
.page-content .wc-block-components-checkout-place-order-button { width: 100%; }
.page-content .wc-block-components-button.is-link,
.page-content .wc-block-components-checkout-return-to-cart-button,
.page-content .wc-block-components-address-form__address_2-toggle,
.page-content .wc-block-components-address-card__edit { color: var(--ink) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* Fields: KARTEL's 8px boxes, ink focus, dashed when something is wrong. */
.page-content .wc-block-components-text-input input,
.page-content .wc-blocks-components-select__select,
.page-content .wc-block-components-textarea,
.page-content .wc-block-checkout__add-note textarea {
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-field) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  box-shadow: none !important;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.page-content .wc-block-components-text-input input:hover, .page-content .wc-blocks-components-select__select:hover { border-color: var(--ink-2) !important; }
.page-content .wc-block-components-text-input input:focus, .page-content .wc-blocks-components-select__select:focus,
.page-content .wc-block-components-textarea:focus { outline: none !important; border-color: var(--ink) !important; box-shadow: 0 0 0 1px var(--ink) !important; }
.page-content .wc-block-components-text-input label, .page-content .wc-blocks-components-select__label { color: var(--steel) !important; font-family: var(--font) !important; }
/*
 * Something wrong: marks the site uses for nothing else (dashed already means sold
 * out, the plain square is a list bullet). The field gets a 2px ink frame on paper-2;
 * under it, an ink square with "!" and the sentence. While you fix it, the frame stays
 * and focus is an outline outside it.
 */
.page-content .wc-block-components-text-input.has-error input, .page-content .wc-blocks-components-select.has-error select { border-color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink) !important; background: var(--paper-2) !important; }
.page-content .has-error :is(input, select):focus { outline: 2px solid var(--ink) !important; outline-offset: 2px; }
.page-content .wc-block-components-validation-error { margin-top: .5rem; color: var(--ink) !important; font-size: .875rem !important; font-weight: 500; }
.page-content .wc-block-components-validation-error > p { display: flex; align-items: center; gap: .55rem; min-height: 0 !important; margin: 0; line-height: 1.35 !important; color: var(--ink) !important; }
.page-content .wc-block-components-validation-error svg { display: none !important; }
.page-content .wc-block-components-validation-error > p::before,
.page-content .wc-block-components-notice-banner.is-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 1rem; height: 1rem; background: var(--ink); color: var(--paper); font: 800 .6875rem/1 var(--font); }

/* Ticks and choices. */
.page-content .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { border: 1px solid var(--line-strong) !important; border-radius: 4px !important; background: var(--paper) !important; box-shadow: none !important; }
.page-content .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--ink) !important; border-color: var(--ink) !important; }
.page-content .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--paper) !important; }
.page-content .wc-block-components-checkbox__label { font-size: .9375rem; color: var(--ink); }
.page-content .wc-block-components-radio-control__input { border: 1px solid var(--line-strong) !important; box-shadow: none !important; }
.page-content .wc-block-components-radio-control__input:checked { border-color: var(--ink) !important; }
.page-content .wc-block-components-radio-control__input:checked::before { background: var(--ink) !important; }
.page-content .wc-block-components-radio-control__option, .page-content .wc-block-components-radio-control-accordion-option { border-color: var(--line) !important; box-shadow: none !important; }

/* Notices: ink on paper, never red (the only colour the site would have had). */
.page-content .wc-block-components-notice-banner {
  border: 1px solid var(--ink) !important;
  border-radius: var(--radius-field) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-size: .9375rem !important;
}
/* No round icons. A problem gets the 2px frame on paper-2 and the "!" square, like a field. */
.page-content .wc-block-components-notice-banner { align-items: center !important; gap: .75rem !important; padding: .9rem 1.1rem !important; }
.page-content .wc-block-components-notice-banner > svg { display: none !important; }
.page-content .wc-block-components-notice-banner.is-error { border-width: 2px !important; background: var(--paper-2) !important; }
.page-content .wc-block-components-notice-banner__content { color: var(--ink) !important; }

/* The cart page: WooCommerce pins a copy of its checkout button to the screen bottom
   once you scroll past it; it would sit over the dock. The one in the page is enough. */
.wc-block-cart__submit-container--sticky { display: none !important; }

/*
 * Checkout has no dock. On two columns, "Place order and pay" sits under the order
 * summary in the sticky column, with a small Back under it (checkout-pay.js, through
 * WooCommerce's own slot; it presses WooCommerce's button, hidden there). On one
 * column WooCommerce already puts the summary right above its button; Back follows.
 */
.kpay { display: none; }
.wc-block-components-sidebar-layout.is-large .kpay { display: grid; gap: 1rem; justify-items: center; margin-top: 1.25rem; }
.wc-block-components-sidebar-layout.is-large .wc-block-checkout__actions { display: none; }   /* "medium" (an iPad held upright) is still one column */
.kpay .kpay-btn { width: 100%; justify-content: center; }
.kpay-back { font-size: .8125rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.kpay-back:hover { color: var(--ink); }
.kpay-back-row { display: flex; justify-content: center; margin: 1.25rem 0 0; }
.wp-block-woocommerce-checkout:has(.wc-block-components-sidebar-layout.is-large) + .kpay-back-row { display: none; }

/* Step headings and small print. */
.page-content .wc-block-components-checkout-step__title, .page-content .wc-block-components-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  font-stretch: 124%;
  letter-spacing: var(--track-display);
  color: var(--ink);
}
.page-content .wc-block-components-checkout-step__description,
.page-content .wc-block-checkout__guest-checkout-notice { font-size: .875rem !important; color: var(--mute) !important; }
.page-content .wc-block-checkout__terms { font-size: .875rem !important; color: var(--ink-2); }
.page-content .wc-block-checkout__terms a { color: var(--ink); }

/* ------------------------------------------------------- the second ink */
/*
 * Pantone 375 C (--lime) is KARTEL's second ink, used the way a printer uses one
 * spot colour on a black zine: it marks only what is live, yours or just done.
 * Chosen by the owner on 11 Oct 2026 ("Signal"), reviewed by a five-seat council.
 *   - a fill under ink (10.7:1), or the ink on black (10.7:1); never on the paper (1.6:1)
 *   - solid: no tints, gradients, glows, or fades through olive
 *   - never on or around a product photo, a price, a sale or an error; not in checkout
 *   - one lime at rest per screen, and never the only signal
 * Every use is in this section: search for var(--lime).
 */
:root { --marker: linear-gradient(var(--lime), var(--lime)) no-repeat; }

/* Selected text: a highlighter. (iPhone and iPad Safari ignore ::selection: WebKit bug 273951.) */
::selection { background: var(--lime); color: var(--ink); }

/*
 * Keyboard focus: 2px lime, then the 2px ink ring, on the shape you would press. The
 * ink ring carries the contrast on the paper; the lime keeps it apart from black
 * buttons. A floating button keeps its shadow (--drop). No ring after a tap or a click
 * (html.is-pointer, shop.js), and none on a dialog focused by script (tabindex -1).
 */
.dock .icon-btn, .nav-pick, .pop-close { --drop: 0 12px 32px -22px #00000059; }
:where(a, button, summary, [tabindex]):not([tabindex="-1"]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--lime), var(--drop, 0 0 #0000); }
[tabindex="-1"]:focus { outline: none; }
.size input:focus-visible + span { box-shadow: 0 0 0 2px var(--lime); }
/* The logo: a ring a little outside the lettering. */
.nav-logo:focus-visible { outline-offset: 4px; }
/* The menu: round the word, not the full-width row. */
.menu-link:focus-visible { outline: none; box-shadow: none; }
.menu-link:focus-visible .menu-word { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--lime); }
/* The sphere fills the screen, so its focus is a frame --edge inside it. */
.stage canvas:focus-visible { outline: none; box-shadow: none; }
.stage:has(canvas:focus-visible)::after { content: ""; position: fixed; inset: var(--edge); border: 2px solid var(--ink); border-radius: var(--radius-card); box-shadow: inset 0 0 0 2px var(--lime); pointer-events: none; }
/* After a tap or a click: no rings at all. */
html.is-pointer :where(a, button, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--drop, none); }
html.is-pointer .size input:focus-visible + span, html.is-pointer .menu-link:focus-visible .menu-word { outline: none; box-shadow: none; }
html.is-pointer .stage::after { content: none; }

/* Just happened: the loader's last cell at Ready (the wave before it is ink), Added
   and Done. A hard cut to lime, never a fade through olive. */
.loader-grid i:last-child { transition: opacity .35s var(--ease), scale .45s var(--ease); }
.loader-grid i.hot:last-child { background: var(--lime); }
.btn:is([data-add], [data-bar-add]) { transition: transform .16s var(--ease), opacity .25s var(--ease); }
.btn.is-added { background: var(--lime); color: var(--ink); }

/* Yours: the bag in the dock (the cart's own title count stays ink). Not in checkout,
   where nothing should point away from paying; it comes back on the thank-you page. */
.dock-count.has-items { background: var(--lime); color: var(--ink); }
body.menu-open .dock-count.has-items { background: var(--ink); color: var(--paper); }   /* the menu's marker is the one lime there */
.korder-facts > div:first-child .spec-v { background: var(--marker) 0% 76% / 100% .4em; }   /* the order number, marked */

/*
 * The menu: a marker under the page you are on, and its number inverted, so the lime
 * is never the only cue and "here" never looks like "pointer". On desktop the marker
 * sweeps in under the pointer. (The owner's sprayed stroke will replace the flat band.)
 */
.menu-word { background: var(--marker) 0% 76% / 0% .4em; transition: transform .45s var(--ease), color .25s var(--ease), background-size .5s var(--ease); }
.menu-link[aria-current] .menu-word, .menu-link:focus-visible .menu-word { color: var(--ink); background-size: 100% .4em; }
.menu-link[aria-current] .menu-num { padding-left: var(--track-label); border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 .45em var(--ink); }

/*
 * Desktop pointer: round buttons, pills and chips fill lime under the pointer, a hard
 * cut (a fade would pass through olive). Add to Cart keeps its lime print instead (a
 * lime fill there means Added); a chosen chip stays black; the bag's count turns ink
 * so it does not vanish; checkout stays ink. Text links get the marker.
 */
@media (hover: hover) and (pointer: fine) {
  .menu-link:hover .menu-word { background-size: 100% .4em; }
  :is(.icon-btn, .nav-pick, .nav-item, .btn-primary, .btn-secondary) { transition-property: transform, opacity; }
  :is(.icon-btn, .nav-pick:not([aria-expanded="true"]), .nav-item:not([aria-pressed="true"]), .btn-secondary, .btn-primary:not([data-add], [data-bar-add])):not(:disabled, .is-added, .is-busy):hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
  .btn-primary:is([data-add], [data-bar-add]):not(:disabled, .is-added, .is-busy):hover { color: var(--lime); }
  .dock-cart:hover .dock-count.has-items { background: var(--ink); color: var(--paper); }
  :is(.icon-btn, .nav-pick, .nav-item, .btn-primary, .btn-secondary):focus-visible:hover { box-shadow: 0 0 0 2px var(--paper), var(--drop, 0 0 #0000); }
  body.woocommerce-checkout:not(.woocommerce-order-received) :is(.btn-primary, .btn-secondary):not(:disabled):hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  :is(.doc-content, .project-story, .project-facts, .product-status, .kletter-note) a:hover { text-decoration-color: var(--lime); text-decoration-thickness: .4em; text-underline-offset: -.25em; text-decoration-skip-ink: none; }
}
/*
 * Drop mode (kartel-core drops, shop.js). The tag sits 10px above ☰, the same place
 * on every page: an ink outline with the date, then the time left (once a minute);
 * at the release minute a lime fill, LIVE, the one lime on screen (the bag's count
 * turns ink; in the menu the project's word takes the marker, and the page you are
 * on keeps only its inverted number); SOLD OUT in ink until the end. The caps are
 * trimmed to their height, so the words sit in the optical middle of the pill.
 */
.drop-tag {
  grid-area: menu;
  justify-self: center;
  align-self: start;
  translate: 0 calc(-100% - var(--edge));
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .6rem calc(.85rem - var(--track-label)) .6rem .85rem;   /* the right gives back the trailing letter-spacing */
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 12px 32px -22px #00000059;
  pointer-events: auto;
}
.drop-tag > span { line-height: 1; text-box: trim-both cap alphabetic; }
.drop-tag[hidden] { display: none; }
.drop-tag[data-state="live"] { background: var(--lime); border-color: var(--lime); }
.drop-tag[data-state="sold"] { color: var(--ink-2); border-color: var(--line-strong); }
body.menu-open .drop-tag, .dock.is-picking .drop-tag { visibility: hidden; }
@media (max-width: 699px) { body:has(main.page-product) .drop-tag { display: none; } }   /* the strip is there */
@media (hover: hover) and (pointer: fine) { .drop-tag:not([data-state="live"]):hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }
html.drop-live .dock-count.has-items { background: var(--ink); color: var(--paper); }
html.drop-live .menu-link[aria-current]:not(.is-dropping) .menu-word { background-size: 0% .4em; }
.menu-link.is-dropping .menu-word { background-size: 100% .4em; }

/* More contrast asked for, or forced colours: selection goes back to ink on paper. */
@media (prefers-contrast: more), (forced-colors: active) {
  ::selection { background: var(--ink); color: var(--paper); }
}

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