/* ==========================================================================
   Velvet Violence
   The concrete is not a background. It is the room.
   Light always falls from the top left: what is cut in has a dark upper-left
   wall and a lit lower-right lip; what is raised has it the other way round.
   ========================================================================== */

:root {
  /* concrete */
  --concrete-100: #c6c5c1;
  --concrete-200: #b6b5b1;
  --concrete-300: #7c7366;       /* the warm dusty slab the client chose */
  --concrete-400: #6a6256;
  --concrete-600: #62615d;
  --concrete-tile: url("../img/concrete-tile-6.webp");
  /* the slow mottling over the tile, as see-through black (darker spots) and
     white (lighter ones) — the same look the overlay blend gave, but with no
     blend mode: some phone browsers (in-app ones on iPhone) skip blend modes
     and showed the grey stain alone, flat, instead of the concrete */
  --concrete-stain: url("../img/concrete-stain-6a.webp");

  /* the only printed ink */
  --ink: #f6f0e4;
  --ink-muted: #e6dccb;
  --ink-rgb: 246 240 228;       /* the ink as numbers, for hairlines and hovers */
  --on-ink: #1d1811;            /* what is printed on an ink-filled button */

  /* lettering pressed into / out of the slab: face colours and how strongly
     the light (--hl) and the shadow (--sh) catch it */
  --emboss-face: #958b7c;
  --engrave-face: #5d5549;
  --hl: .6;
  --sh: 1.4;

  /* buttons that sit on the slab: the slab's own colour, a shade deeper,
     solid so no pore runs through the letters */
  --plate: color-mix(in srgb, var(--concrete-300) 84%, #000);
  --plate-hover: color-mix(in srgb, var(--concrete-300) 76%, #000);
  --plate-edge: 0 1px 0 rgb(255 255 255 / calc(.18 * var(--hl))) inset, 0 1px 2px rgb(0 0 0 / .22), 0 8px 18px rgb(0 0 0 / .12);

  --engrave-light: rgb(255 255 255 / calc(.55 * var(--hl)));
  --engrave-dark: rgb(0 0 0 / calc(.38 * var(--sh)));

  /* the collections */
  --original-red: #8e1616;

  --font-display: "Playfair Display", "Bodoni Moda", Georgia, serif;
  /* Space Mono carries the Latin marking; it has no Cyrillic, so JetBrains
     Mono answers for those glyphs at the same size behind it. */
  --font-mark: "Space Mono", "JetBrains Mono", ui-monospace, "Courier New", monospace;
  --font-sans: Inter, system-ui, -apple-system, sans-serif;

  --shadow-rest: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .42)) drop-shadow(0 10px 14px rgba(0, 0, 0, .24));
  --shadow-lift: drop-shadow(0 4px 4px rgba(0, 0, 0, .32)) drop-shadow(0 28px 34px rgba(0, 0, 0, .3));

  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(16px, 4vw, 56px);
}

/* --------------------------------------------------------------- base --- */

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

html, body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--concrete-300);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
}

/* While a closer look is open the floor holds still, and remembers exactly
   where it was standing. */
body.locked {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
}

.vv-filters { position: absolute; width: 0; height: 0; overflow: hidden; }

img { max-width: 100%; }

.skip {
  position: fixed; left: -9999px; top: 8px; z-index: 99;
  background: var(--ink); color: var(--on-ink);
  font-family: var(--font-mark); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; padding: 12px 18px;
}
.skip:focus { left: 8px; }
/* the anti-bot field in the checkout: off screen, never tabbed to */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------- floor --- */

/* One poured slab, matched to the client's reference photo: formwork
   concrete with pores, bugholes and faint board streaks. The tile is seamless
   and repeats down the page; a slow stain layer at another scale sits on top
   so the repeat can't be found. Both come from tools/concrete.html
   (variant 6).
   */
.floor {
  background-color: var(--concrete-300);
  background-image: var(--concrete-stain), var(--concrete-tile);
  background-size: 2300px 2300px, 720px 720px;
}

/* The closer look, the cart, the order sheets and the tags lie on the
   same sharp concrete as the floor — the smoothed-out version read as a
   blurred photo next to it. Text there sits on plates and paper anyway. */
.view,
.drawer-panel {
  background-color: var(--concrete-300);
  background-image: var(--concrete-stain), var(--concrete-tile);
  background-size: 2300px 2300px, 720px 720px;
}

.floor {
  position: relative;
  display: block;
  overflow: hidden;
}

/* The lamp over the room: it stays put while the floor moves under it, which
   is what stops a long page from looking like a repeating tile. */
.light {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 100% at 8% -15%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 58%),
    radial-gradient(150% 130% at 88% 115%, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 62%);
}

/* saw-cut between slabs */
.joint {
  position: relative; z-index: 2;
  height: 3px; margin: 0;
  background: var(--concrete-400);
  box-shadow: 0 -1px 0 var(--engrave-dark), 0 1px 0 var(--engrave-light);
  opacity: .55;
}

/* ---------------------------------------------------------- lettering --- */

/* big names never break; site.js sets them smaller if a column is too narrow */
.fit { white-space: nowrap; max-width: 100%; }

.emboss, .engrave {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
}

/* pushed OUT of the slab: lit on the upper-left, casting down to the right.
   This is the treatment on the WORLD WAR III reference. */
.emboss {
  color: var(--emboss-face);
  text-shadow:
    -1px -1px 0 rgb(255 255 255 / calc(.55 * var(--hl))),
    -2px -2px 2px rgb(255 255 255 / calc(.16 * var(--hl))),
     1px  1px 0 rgb(0 0 0 / calc(.28 * var(--sh))),
     2px  2px 3px rgb(0 0 0 / calc(.22 * var(--sh))),
     3px  4px 7px rgb(0 0 0 / calc(.12 * var(--sh)));
  filter: url(#rough-1);
}

/* Cut INTO the slab. The face of the letter sits in its own shadow, so it has
   to be a clear step darker than the floor — subtle colour alone reads as a
   ghost. The upper-left wall is dark, the lower-right lip catches the light. */
.engrave {
  color: var(--engrave-face);
  text-shadow:
    -1px -1px 0 rgb(0 0 0 / calc(.5 * var(--sh))),
    -2px -2px 3px rgb(0 0 0 / calc(.28 * var(--sh))),
     1px  1px 0 rgb(255 255 255 / calc(.7 * var(--hl))),
     2px  2px 3px rgb(255 255 255 / calc(.3 * var(--hl))),
     3px  4px 6px rgb(255 255 255 / calc(.12 * var(--hl)));
  filter: url(#rough-1);
}

/* the slab wears down as you go */
.wear-0 { filter: url(#rough-0); }
.wear-1 { filter: url(#rough-1); opacity: .94; }
.wear-2 { filter: url(#rough-2); opacity: .8; }
.wear-3 { filter: url(#rough-3); opacity: .6; }
.wear-4 { filter: url(#rough-4); opacity: .38; }
.wear-5 { filter: url(#rough-5); opacity: .2; }

/* ------------------------------------------------- printed marking UI --- */

/* The slab is full of pores now, and a pore under a thin stroke eats it —
   so the printed marking is set a touch heavier and larger than it would be
   on a clean floor. */
.label {
  font-family: var(--font-mark); font-weight: 700;
  font-size: 12px; line-height: 16px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}

.stamp {
  font-family: var(--font-mark); font-weight: 700;
  font-size: 11.5px; line-height: 15px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-muted);
  margin: 0;
}

.stamp-box {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--ink-muted);
  border-radius: 2px;
  transform: rotate(-2deg);
  opacity: .9;
}

/* --------------------------------------------------------------- hero --- */

.hero {
  position: relative; z-index: 2;
  min-height: min(100svh, 860px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(72px, 12vh, 140px) var(--gutter) clamp(56px, 10vh, 110px);
}

.wordmark {
  font-size: clamp(52px, 13.5vw, 186px);
  line-height: .86;
  letter-spacing: -.012em;
}

/* the WORLD WAR III marking, small, pressed out right under the name */
.hero-ww3 {
  margin-top: clamp(14px, 2.4vh, 26px);
  font-size: clamp(17px, 3.1vw, 36px);
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
}


/* a slot cut into the slab, the arrow sliding down inside it */
.scroll-cue {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(18px, 4.5vh, 44px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--ink); text-decoration: none;
}
.scroll-slot {
  position: relative; overflow: hidden;
  width: 34px; height: 76px; border-radius: 17px;
  background: rgb(0 0 0 / calc(.08 * var(--sh)));
  box-shadow:
    inset 2px 3px 5px rgb(0 0 0 / calc(.34 * var(--sh))),
    inset -1px -2px 2px rgb(255 255 255 / calc(.4 * var(--hl))),
    0 1px 0 rgb(255 255 255 / calc(.35 * var(--hl)));
}
.scroll-slot .icon {
  position: absolute; left: 50%; top: 8px;
  width: 16px; height: 32px; margin-left: -8px;
  stroke-width: 2.2;
  animation: slide-down 2.2s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes slide-down {
  0%   { transform: translateY(-38px); opacity: 0; }
  25%  { opacity: 1; }
  70%  { transform: translateY(28px); opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

/* --------------------------------------------------- the collections --- */

/* --u: one px of the 1440-wide floor the layout was drawn on. Everything on
   the stage is measured in it, so the arrangement scales as one picture and
   stops growing past 1680 px, where the collections sit centred. */
:root { --u: calc(min(100vw, 1680px) / 1440); }

.collection {
  position: relative; z-index: 2;
  padding: 0 var(--gutter);
  max-width: 1680px; margin: 0 auto;
}

/* Every collection's name sits in the same block: marking strip, the name
   pressed out of the slab exactly like the logo, then its colours. */
.collection-head {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-top: clamp(48px, 8vw, 110px);
}

.collection-head { position: relative; z-index: 1; }

/* the name, knocked a little off square, with a swipe of the collection's
   own paint dragged under it */
.collection-title {
  position: relative; isolation: isolate;
  font-size: clamp(38px, 8.6vw, 112px);
  line-height: .9;
  letter-spacing: -.005em;
  transform: rotate(-1.6deg);
  transform-origin: 0 100%;
}
.collection-title::before {
  content: "";
  position: absolute; z-index: -1;
  left: -1.5%; right: -5%; bottom: 6%; height: 34%;
  background: linear-gradient(90deg, transparent, var(--paint) 5%, var(--paint) 86%, transparent);
  border-radius: 45% 55% 50% 40% / 60% 45% 55% 40%;
  transform: rotate(-1.2deg) skewX(-14deg);
  opacity: .78;
}

/* ------------------------------------------------------------ marking --- */

.mark-index {
  flex: 0 0 auto;
  font-family: var(--font-mark); font-weight: 700;
  font-size: 12px; line-height: 1; letter-spacing: .12em;
  color: var(--ink);
  padding: 5px 7px 4px;
  border: 1.5px solid var(--ink);
}


/* The stage the clothes are dropped on. Positions are hand-set per piece:
   percentage across, pixels down. No grid, ever. */
/* pulled up under the name, so the clothes land right against the letters */
.stage {
  position: relative; z-index: 2;
  height: calc(var(--h, 900) * var(--u));
  margin-top: calc(-120 * var(--u));
}

.garment {
  position: absolute;
  left: var(--x);
  top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w, 300) * var(--u));
  display: block;
  margin: 0; padding: 0; border: 0; background: none;
  color: inherit; text-decoration: none;
  cursor: pointer;
  transform: translateX(-50%) rotate(var(--r, 0deg));
  transform-origin: 50% 50%;
  transition: transform .45s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

/* The shadow belongs to the picture alone. Filtering the whole button made
   the browser re-rasterise the label with it on every frame of the lift,
   and the label's own halo flickered. */
.garment img {
  display: block; width: 100%; height: auto;
  pointer-events: none;
  filter: var(--shadow-rest);
  transition: filter .45s var(--ease), opacity .4s ease;
}

.garment:hover,
.garment:focus-visible {
  transform: translateX(-50%) rotate(var(--r, 0deg)) translateY(-8px) scale(1.04);
}
.garment:hover img,
.garment:focus-visible img { filter: var(--shadow-lift); }

.garment:focus-visible { outline: 2px solid var(--ink); outline-offset: 12px; }

.garment.is-taken { opacity: 0; pointer-events: none; }

/* what the piece is, always printed under it */
.garment-name {
  position: absolute; left: 50%; bottom: -30px;
  transform: translateX(-50%) rotate(-2deg);
  white-space: nowrap;
  opacity: .92;
  transition: opacity .28s;
}
.garment:hover .garment-name,
.garment:focus-visible .garment-name { opacity: 1; }

/* a worn mark drifting between two collections */
.drift {
  position: relative; z-index: 2;
  display: block;
  margin: clamp(30px, 5vw, 70px) var(--gutter) clamp(20px, 4vw, 54px);
  text-align: var(--align, left);
  font-size: clamp(22px, 5.2vw, 68px);
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
}

/* ------------------------------------------------------------- footer --- */

.foot {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  padding: clamp(40px, 6vw, 90px) var(--gutter) clamp(40px, 6vw, 72px);
}

.foot-mark { font-size: clamp(20px, 3.2vw, 34px); }

/* three plates on the slab: an icon and one word */
.foot-plates {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; flex: 1 1 520px; max-width: 700px;
}
.plate {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 16px;
  color: var(--ink); text-decoration: none;
  background: var(--plate);
  border: 1px solid rgb(var(--ink-rgb) / .18);
  box-shadow: var(--plate-edge);
  transition: background-color .2s, transform .2s var(--ease);
}
.plate:hover { background: var(--plate-hover); transform: translateY(-2px); }
.plate:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.plate .icon { flex: 0 0 auto; width: 22px; height: 22px; }
.plate b {
  font-family: var(--font-mark); font-weight: 700;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
}

/* --------------------------------------------------------- cart mark --- */

/* The one permanent thing in the room. It stays above the closer look too,
   so the cart is never more than one press away, wherever you are. */
/* Language and cart share one dark plate in the top-right corner: solid, so
   it reads over light concrete, dark concrete and any garment scrolling by. */
.corner {
  position: fixed; z-index: 50;
  top: clamp(12px, 2vw, 24px); right: clamp(12px, 2.6vw, 38px);
  display: flex; align-items: center;
  padding: 0 6px;
  background: var(--plate); color: var(--ink);
  border: 1px solid rgb(var(--ink-rgb) / .18);
  box-shadow: var(--plate-edge);
}
/* a closer look has its own way back in that corner */
body.locked .corner--left { visibility: hidden; }
.corner--left { right: auto; left: clamp(12px, 2.6vw, 38px); }

.cart-mark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mark); font-weight: 700;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: inherit; background: none; border: 0; padding: 11px 10px;
  cursor: pointer;
}
.cart-mark .icon { width: 18px; height: 18px; }
.cart-mark b {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 5px;
  background: var(--ink); color: var(--on-ink);
  border-radius: 2px; font-size: 11px; letter-spacing: 0;
  transition: transform .3s var(--ease);
}
.cart-mark.bump b { transform: scale(1.35) rotate(-6deg); }
.cart-mark:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }

/* ------------------------------------------------------ language mark --- */

/* Opposite the cart: a globe and the language's own name; opens a list. */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mark); font-weight: 700;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: inherit; background: none; border: 0; padding: 11px 10px; cursor: pointer;
}
.lang-btn .icon { width: 18px; height: 18px; }
.lang-short { display: none; }
.lang-btn .icon:last-child { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.lang-btn[aria-expanded="true"] .icon:last-child { transform: rotate(180deg); }
.lang-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }

.lang-menu {
  position: absolute; top: calc(100% + 6px); left: -6px;
  min-width: 210px; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--plate);
  border: 1px solid rgb(var(--ink-rgb) / .22);
  box-shadow: var(--plate-edge), 0 16px 34px rgb(0 0 0 / .22);
  animation: menu-in .18s var(--ease);
}
.lang-menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.lang-menu button {
  display: grid; grid-template-columns: 1fr 18px; align-items: center; gap: 10px;
  padding: 11px 10px; cursor: pointer; text-align: left;
  color: var(--ink); background: none; border: 0;
  font-family: var(--font-sans); font-size: 15px;
}
.lang-menu button .icon { width: 16px; height: 16px; opacity: 0; }
.lang-menu button[aria-checked="true"] { font-weight: 500; }
.lang-menu button[aria-checked="true"] .icon { opacity: 1; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: var(--plate-hover); outline: none; }


/* ----------------------------------------------------------- controls --- */

.btn {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; border-radius: 0;
  font-family: var(--font-mark); font-weight: 700;
  font-size: 12px; line-height: 16px; letter-spacing: .16em;
  text-transform: uppercase;
  padding: 16px 26px; min-height: 50px;
  transition: background-color .2s, color .2s, transform .1s, border-color .2s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.btn-buy {
  background: var(--ink); color: var(--on-ink);
  border: 1.5px solid var(--ink);
}
.btn-buy:hover { background: var(--original-red); border-color: var(--original-red); color: #fff; }

.btn-cart {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .4), inset -1px -1px 1px rgba(255, 255, 255, .42);
}
.btn-cart:hover { background: rgb(var(--ink-rgb) / .08); }

.btn-ghost {
  background: none; border: 0; padding: 8px 0; min-height: 0;
  color: var(--ink); border-bottom: 1.5px solid var(--ink);
}
.btn-ghost:hover { color: var(--ink-muted); border-bottom-color: var(--ink-muted); }

.sizes { display: flex; gap: 8px; flex-wrap: wrap; }

.size {
  appearance: none; cursor: pointer;
  width: 46px; height: 46px; border-radius: 0;
  font-family: var(--font-mark); font-weight: 700;
  font-size: 12px; letter-spacing: .06em;
  color: var(--ink); background: transparent;
  border: 1.5px solid var(--ink);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .4), inset -1px -1px 1px rgba(255, 255, 255, .42);
}
.size[aria-pressed="true"] {
  background: var(--ink); color: var(--on-ink); box-shadow: none;
}
.size:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.field {
  display: flex; flex-direction: column; gap: 6px;
}
.field > span {
  font-family: var(--font-mark); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-muted);
}
/* Typed-into fields only: a radio or checkbox inside a .field must keep its
   own shape, not be dressed as a pressed-in text box. */
.field input:not([type="radio"]):not([type="checkbox"]),
.field select,
.field textarea {
  font-family: var(--font-mark); font-size: 13px; color: var(--ink);
  background: rgba(255, 255, 255, .1);
  border: 1.5px solid var(--ink);
  border-radius: 0; padding: 12px 14px; min-height: 46px;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .34), inset -1px -1px 1px rgba(255, 255, 255, .38);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* A field that needs attention is unmistakable: thick red edge, a red wash
   behind what you type, and the message on a red tag. The red is the
   brand's; white on it reads at 8:1. */
.field.bad input:not([type="radio"]):not([type="checkbox"]),
.field.bad .combo-input {
  border: 2px solid var(--original-red);
  background: rgb(142 22 22 / .1);
}
.field.bad > span:first-child { font-weight: 700; color: var(--ink); }
.field.bad > span:first-child::after { content: " ●"; color: var(--original-red); }
.field-error {
  font-family: var(--font-mark); font-size: 11px; letter-spacing: .08em;
}
.field-error:not(:empty) {
  align-self: flex-start;
  padding: 4px 8px;
  font-weight: 700; color: #fff; background: var(--original-red);
}
.field-error:not(:empty)::before { content: "! "; }

/* the list of what is missing, at the top of the form */
.form-alert {
  display: flex; flex-direction: column; gap: 5px;
  margin: 0 0 24px; padding: 14px 18px;
  color: #fff; background: var(--original-red);
  box-shadow: 0 8px 20px rgb(0 0 0 / .18);
  animation: shake .42s cubic-bezier(.36, .07, .19, .97);
}
.form-alert[hidden] { display: none; }
.form-alert b { font-family: var(--font-mark); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.form-alert span { font-size: 14.5px; line-height: 21px; }

/* ================================================== the closer look ===== */
/* Not a product card over a page: the same floor, with the piece pulled in. */

.view {
  position: fixed; inset: 0; z-index: 40;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.view.open { opacity: 1; visibility: visible; }

.view-inner {
  position: relative;
  min-height: 100%;
  padding: clamp(74px, 9vw, 104px) var(--gutter) clamp(50px, 8vw, 90px);
}

.view-back {
  position: absolute; z-index: 3;
  top: clamp(22px, 3.2vw, 38px); left: var(--gutter);
  display: inline-flex; align-items: center; gap: 10px;
}
.view-back .icon { width: 18px; height: 18px; stroke-width: 2; transition: transform .2s var(--ease); }
.view-back:hover .icon { transform: translateX(-3px); }

/* --- product: the gallery, and the ink beside it (below it on a phone) */

/* The gallery takes exactly the width its picture needs and the text column
   its own; the pair is centred on the page, so the margins left and right
   match and nothing hangs empty in between. */
.pv {
  --pv-gap: clamp(32px, 4vw, 64px);
  --pv-info: clamp(300px, 30vw, 420px);
  display: grid;
  grid-template-columns: auto var(--pv-info);
  justify-content: center;
  gap: var(--pv-gap);
  align-items: start;
  margin: 0 auto;
}

/* thumbnails down the left, the picture beside them */
.gallery {
  min-width: 0;
  display: grid; grid-template-columns: 84px auto; gap: 16px;
  align-items: start;
}
.gallery.is-single { grid-template-columns: minmax(0, 1fr); }
.gallery.is-single .gallery-thumbs,
.gallery.is-single .gallery-arrow,
.gallery.is-single .gallery-count { display: none; }

/* the picture stands in the middle of the room it has, not pressed
   against the thumbnails */
/* as big as the screen allows: never taller than the window, never so wide
   that the text column is squeezed */
.gallery { --pv-photo: min(76vh, 760px, calc(100vw - 2 * var(--gutter) - 100px - var(--pv-gap) - var(--pv-info))); }
.gallery-stage { position: relative; min-width: 0; width: var(--pv-photo); }

/* one square at a time, snapped; changing slides the next one in */
.gallery-track {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  aspect-ratio: 1 / 1;
  background: #f7f7f6;
  border: 1px solid rgba(0, 0, 0, .1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 16px 34px rgba(0, 0, 0, .16);
  outline: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { box-shadow: 0 0 0 2px var(--ink); }

.slide { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.slide-img { width: 100%; height: 100%; }
/* every picture is the same square, so it simply fills the frame */
.slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; display: grid; place-items: center;
  color: #1b1a17; background: rgba(247, 247, 246, .88);
  border: 1px solid rgba(0, 0, 0, .14); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  transition: opacity .2s, background-color .2s, transform .2s var(--ease);
}
.gallery-arrow.is-prev { left: 12px; }
.gallery-arrow.is-next { right: 12px; }
.gallery-arrow .icon { width: 20px; height: 20px; }
.gallery-arrow:hover:not(:disabled) { background: #fff; }
.gallery-arrow.is-prev:hover:not(:disabled) { transform: translate(-2px, -50%); }
.gallery-arrow.is-next:hover:not(:disabled) { transform: translate(2px, -50%); }
.gallery-arrow:disabled { opacity: 0; pointer-events: none; }
.gallery-arrow:focus-visible { outline: 2px solid #1b1a17; outline-offset: 2px; }

.gallery-count {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  padding: 5px 9px;
  font-family: var(--font-mark); font-weight: 700; font-size: 11px; letter-spacing: .16em;
  color: #1b1a17; background: rgba(247, 247, 246, .88);
  border: 1px solid rgba(0, 0, 0, .1);
}

.gallery-thumbs {
  display: flex; flex-direction: column; gap: 10px;
  max-height: var(--pv-photo, 76vh); overflow-y: auto; scrollbar-width: none;
  padding: 2px;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
/* a contact sheet: each frame numbered, the others in black and white until
   you point at them, the one on show in colour with a notch towards it */
.thumb {
  position: relative;
  flex: 0 0 auto; width: 100%; aspect-ratio: 1 / 1; padding: 0; cursor: pointer;
  background: #f7f7f6; border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transition: box-shadow .2s, transform .2s var(--ease);
}
.thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(.95); opacity: .75;
  transition: filter .25s, opacity .25s;
}
.thumb-n {
  position: absolute; left: 0; top: 0;
  padding: 3px 5px 2px;
  font-family: var(--font-mark); font-weight: 700; font-size: 9.5px; letter-spacing: .08em; line-height: 1;
  color: #f7f7f6; background: #1b1a17;
}
.thumb:hover img { filter: none; opacity: 1; }
.thumb:hover { transform: translateY(-1px); }
.thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--ink), 0 6px 14px rgba(0, 0, 0, .18); }
.thumb[aria-current="true"] img { filter: none; opacity: 1; }
.thumb[aria-current="true"] .thumb-n { background: var(--original-red); }
.thumb[aria-current="true"]::after {
  content: ""; position: absolute; top: 50%; right: -11px; margin-top: -6px;
  border: 6px solid transparent; border-left-color: var(--ink);
}
.thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.pv-info {
  display: flex; flex-direction: column; gap: 15px;
  position: sticky; top: clamp(74px, 9vw, 104px);
  padding-top: 6px;
}
.pv-name {
  margin: 0;
  font-family: var(--font-mark); font-weight: 700;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.12;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink);
}
.pv-price { font-family: var(--font-mark); font-weight: 700; font-size: 20px; line-height: 24px; }
.pv-text { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); max-width: 42ch; }
.pv-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

.perks { list-style: none; margin: 10px 0 0; padding: 14px 0 0; border-top: 1px solid rgb(var(--ink-rgb) / .22); display: flex; flex-direction: column; gap: 10px; }
.perks li { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 18px; color: var(--ink); }
.perks .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.pv-added { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pv-added[hidden] { display: none; }

.sizes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }

/* asks for a size until one is picked, then carries it */
.size-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px 4px;
  font-family: var(--font-mark); font-weight: 700; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); border: 1.5px dashed rgb(var(--ink-rgb) / .5);
  transition: background-color .2s, color .2s, border-color .2s;
}
.size-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--original-red); animation: tag-pulse 1.6s ease-in-out infinite; }
@keyframes tag-pulse { 50% { opacity: .25; } }
.size-tag.is-set { background: var(--ink); color: var(--on-ink); border: 1.5px solid var(--ink); }
.size-tag.is-set .size-tag-dot { animation: none; background: var(--on-ink); width: 9px; height: 5px; border-radius: 0; transform: rotate(-45deg) translateY(-1px); background: none; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; }

.size-block.is-missing .size-tag { color: var(--original-red); border-color: var(--original-red); border-style: solid; }
.size-block.is-missing .size { border-color: var(--original-red); }
.size-block.is-missing .sizes { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* ------------------------------------------------- cart & order sheets --- */

.sheet { max-width: 820px; margin: 0 auto; }

.sheet-title {
  font-size: clamp(30px, 6vw, 66px); line-height: .98;
  margin-bottom: clamp(20px, 3vw, 34px);
}

.lines { display: flex; flex-direction: column; gap: 2px; margin: 0 0 26px; padding: 0; list-style: none; }

.line {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgb(var(--ink-rgb) / .2);
  box-shadow: 0 1px 0 rgb(255 255 255 / calc(.3 * var(--hl)));
}
.line-thumb {
  display: block; cursor: pointer;
  width: 78px; height: 78px;
  background: #fff; padding: 6px;
  border: 1px solid rgba(0, 0, 0, .14);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.line-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.line-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.line-name { font-family: var(--font-mark); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.line-meta { font-family: var(--font-mark); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.line-end { display: flex; align-items: center; gap: 14px; }
.line-price { font-family: var(--font-mark); font-weight: 700; font-size: 14px; white-space: nowrap; }
.line-drop {
  background: none; border: 0; cursor: pointer; padding: 6px;
  font-family: var(--font-mark); font-size: 15px; line-height: 1; color: var(--ink-muted);
}
.line-drop:hover { color: var(--original-red); }
.line-drop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--ink); }
.qty button {
  width: 30px; height: 30px; cursor: pointer;
  background: none; border: 0; color: var(--ink);
  font-family: var(--font-mark); font-size: 14px; line-height: 1;
}
.qty button:hover { background: rgb(var(--ink-rgb) / .08); }
.qty button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.qty span { min-width: 26px; text-align: center; font-family: var(--font-mark); font-weight: 700; font-size: 12px; }

.total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin: 4px 0 28px;
  font-family: var(--font-mark); font-weight: 700;
  font-size: 18px; letter-spacing: .1em; text-transform: uppercase;
}

.sheet-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.form-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-bottom: 26px;
}
.form-grid .wide { grid-column: 1 / -1; }

.pay-choice { display: flex; flex-direction: column; gap: 10px; }
.pay-opt {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 13px 15px; border: 1.5px solid rgb(var(--ink-rgb) / .35);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .18), inset -1px -1px 1px rgba(255, 255, 255, .3);
}
.pay-opt:has(input:checked) { border-color: var(--ink); background: rgb(var(--ink-rgb) / .06); }
.pay-opt input {
  flex: 0 0 auto; width: 16px; height: 16px; min-height: 0;
  margin: 3px 0 0; padding: 0; border: 0; box-shadow: none;
  accent-color: var(--ink);
}
.pay-opt b { font-family: var(--font-mark); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; display: block; }
.pay-opt small { font-size: 12px; line-height: 17px; color: var(--ink-muted); display: block; margin-top: 3px; }

.note {
  font-size: 13px; line-height: 20px; color: var(--ink-muted);
  max-width: 56ch; margin: 22px 0 0;
  padding-top: 16px; border-top: 1px solid rgb(var(--ink-rgb) / .2);
}

/* --- after the order: thanks on the left, the stamped receipt on the right */

.done {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
  max-width: 1140px; margin: 0 auto;
  padding-top: clamp(8px, 3vw, 40px);
}

.done-side { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.done-kicker { color: var(--ink); }
.done-title {
  font-size: clamp(54px, 10vw, 132px); line-height: .88;
  margin: 12px 0 20px;
}
.done-lead { margin: 0 0 clamp(28px, 4vw, 42px); font-size: 17px; line-height: 26px; max-width: 38ch; color: var(--ink); }

.done-steps-head { margin-bottom: 10px; }
.done-steps {
  list-style: none; margin: 0 0 clamp(28px, 4vw, 40px); padding: 0;
  counter-reset: step; max-width: 46ch; width: 100%;
}
.done-steps li {
  counter-increment: step;
  position: relative;
  padding: 14px 0 14px 50px;
  font-size: 14.5px; line-height: 22px; color: var(--ink);
  border-top: 1px solid rgb(var(--ink-rgb) / .22);
}
.done-steps li:last-child { border-bottom: 1px solid rgb(var(--ink-rgb) / .22); }
.done-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 13px;
  width: 34px; height: 24px; display: grid; place-items: center;
  font-family: var(--font-mark); font-weight: 700; font-size: 11px; letter-spacing: .08em;
  color: var(--on-ink); background: var(--ink);
}
.done .sheet-actions a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.done-ask { margin-top: 18px; text-decoration: none; }

.done-keep { margin: 18px 0 0; font-size: 13px; line-height: 19px; color: var(--ink-muted); max-width: 44ch; }

/* The receipt is paper whatever the slab, so it keeps its own ink. */
.receipt {
  --paper: #f3f1ea; --paper-ink: #1b1a17; --paper-muted: #5f5c55;
  position: relative;
  transform: rotate(1.6deg);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)) drop-shadow(0 22px 30px rgba(0, 0, 0, .28));
  animation: receipt-drop .7s var(--ease) both;
}
.receipt-paper {
  background: var(--paper); color: var(--paper-ink);
  padding: 26px 24px 34px;
  font-family: var(--font-mark);
  /* torn off the roll along the bottom */
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x;
          mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x;
}
.receipt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.receipt-brand {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 17px; letter-spacing: .02em;
}
.receipt-small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-muted); }
.receipt-num { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.receipt-number { font-weight: 700; font-size: clamp(24px, 3.4vw, 30px); letter-spacing: .1em; }
.receipt-copy {
  flex: 0 0 auto; cursor: pointer;
  font-family: var(--font-mark); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-ink); background: none; border: 1.5px solid var(--paper-ink); padding: 6px 9px;
}
.receipt-copy:hover { background: var(--paper-ink); color: var(--paper); }
.receipt-copy:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 2px; }
.receipt-date { display: block; margin-top: 6px; }

.receipt-cut { border: 0; border-top: 1.5px dashed rgba(27, 26, 23, .35); margin: 18px 0; }

.receipt-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.receipt-items li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.receipt-thumb { width: 46px; height: 46px; display: block; background: #fff; padding: 4px; border: 1px solid rgba(27, 26, 23, .16); }
.receipt-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.receipt-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.receipt-item b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.receipt-item small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-muted); }
.receipt-price { font-weight: 700; font-size: 13px; white-space: nowrap; }

.receipt-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 12px; line-height: 18px; letter-spacing: .06em; padding: 3px 0;
}
.receipt-row > span:first-child { color: var(--paper-muted); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; flex: 0 0 auto; }
.receipt-row > span:last-child { text-align: right; overflow-wrap: anywhere; }
.receipt-row.is-total { font-weight: 700; font-size: 17px; padding-top: 8px; }
.receipt-row.is-total > span:first-child { color: var(--paper-ink); font-size: 12px; }

.receipt-sums { position: relative; }

.receipt-code { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 22px; }
.receipt-bars {
  display: block; width: 100%; height: 46px;
  background: repeating-linear-gradient(90deg,
    var(--paper-ink) 0 2px, transparent 2px 4px, var(--paper-ink) 4px 5px, transparent 5px 8px,
    var(--paper-ink) 8px 11px, transparent 11px 12px, var(--paper-ink) 12px 13px, transparent 13px 17px,
    var(--paper-ink) 17px 18px, transparent 18px 21px, var(--paper-ink) 21px 24px, transparent 24px 26px);
}

/* the rubber stamp, in the brand's red, slammed onto the corner */
.receipt-stamp {
  position: absolute; left: 44%; top: 50%;
  padding: 8px 16px;
  font-family: var(--font-mark); font-weight: 700;
  font-size: clamp(17px, 2.2vw, 22px); letter-spacing: .22em; text-transform: uppercase;
  color: var(--original-red);
  border: 3px solid var(--original-red);
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px var(--original-red);
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-13deg);
  opacity: .82;
  mix-blend-mode: multiply;
  filter: url(#rough-1);
  pointer-events: none;
  animation: stamp-in .42s .55s cubic-bezier(.3, 1.4, .5, 1) both;
}

@keyframes receipt-drop {
  from { opacity: 0; transform: translateY(-28px) rotate(-5deg); }
  to   { opacity: 1; transform: rotate(1.6deg); }
}
@keyframes stamp-in {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-13deg) scale(1.9); }
  to   { opacity: .82; transform: translate(-50%, -50%) rotate(-13deg) scale(1); }
}

/* On a phone: the thanks and what happens next first, set tighter so it all
   sits higher; the receipt comes last, after everything. */
@media (max-width: 800px) {
  .done { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 0; }
  .done-title { margin: 6px 0 12px; }
  .done-lead { margin-bottom: 20px; }
  .receipt { margin: 0 6px; }
}

.empty { font-size: 15px; line-height: 23px; color: var(--ink-muted); margin: 0 0 28px; max-width: 44ch; }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1080px) {
  .pv { --pv-info: 300px; }
}

/* Below this the floor stops being wide enough to scatter across, so the
   pieces fall into a staggered column instead. Still thrown down, still
   rotated — but nothing can ever reach past the edge. */
@media (max-width: 800px) {
  .stage {
    margin-top: -6px;
    height: auto !important;
    display: flex; flex-direction: column;
    gap: clamp(46px, 11vw, 80px);
    /* A turned piece needs slack at the sides or its corner is shaved off by
       the edge of the screen: side padding is that slack. */
    padding: clamp(34px, 8vw, 60px) 30px clamp(20px, 5vw, 40px);
  }
  .garment {
    position: relative;
    left: auto; top: auto;
    width: var(--mw, 74%);
    align-self: var(--side, center);
    transform: rotate(var(--r, 0deg));
  }
  .garment:hover,
  .garment:focus-visible { transform: rotate(var(--r, 0deg)) translateY(-6px) scale(1.03); }
  .garment-name { opacity: .9; bottom: -26px; }


  .pv { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .gallery { --pv-photo: auto; }
  .gallery-stage { width: auto; }
  /* the picture runs edge to edge (swipe it); thumbnails in a row under it */
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 calc(-1 * var(--gutter)); }
  .gallery-stage { max-width: none; justify-self: stretch; }
  .gallery-track { border-left: 0; border-right: 0; }
  .gallery-thumbs {
    order: 2; flex-direction: row; max-height: none;
    overflow-x: auto; overflow-y: hidden; padding: 2px var(--gutter) 4px;
  }
  .thumb { width: 60px; }
  .thumb[aria-current="true"]::after { display: none; }
  .gallery-arrow { width: 40px; height: 40px; }
  .pv-info { position: static; padding-top: 0; }
  /* buying stays under the thumb while you read and look */
  .pv-actions {
    position: sticky; bottom: 0; z-index: 4;
    flex-direction: row; gap: 8px;
    margin: 4px calc(-1 * var(--gutter)) 0;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--concrete-300);
    box-shadow: 0 -1px 0 rgb(var(--ink-rgb) / .2), 0 -12px 24px rgb(0 0 0 / .12);
    /* its own layer: Safari repaints a sticky bar late while scrolling */
    transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  }
  .pv-actions .btn { flex: 1 1 0; padding-left: 10px; padding-right: 10px; }

  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .line { grid-template-columns: 62px minmax(0, 1fr); row-gap: 10px; }
  .line-thumb { width: 62px; height: 62px; }
  .line-end { grid-column: 2; justify-content: space-between; }
}

@media (max-width: 720px) {
  .foot-plates { gap: 8px; flex-basis: 100%; }
  .plate { flex-direction: column; gap: 7px; padding: 14px 4px 12px; }
  .plate b { font-size: 10px; letter-spacing: .1em; }
}


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

/* Filters on live text are expensive on weak hardware; if the browser cannot
   do them the lettering simply stays crisp, which is still right. */
@supports not (filter: url(#rough-1)) {
  .emboss, .engrave, [class*="wear-"] { filter: none; }
}



/* ======================================================= cart drawer ===== */

.drawer {
  position: fixed; inset: 0; z-index: 70;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s .38s;
  --pad: clamp(18px, 5vw, 28px);
}
.drawer.open { visibility: visible; pointer-events: auto; transition: none; }

.drawer-scrim {
  position: absolute; inset: 0;
  background: rgb(0 0 0 / .46);
  opacity: 0; transition: opacity .32s ease;
}
.drawer.open .drawer-scrim { opacity: 1; }

.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(460px, 100%);
  display: flex; flex-direction: column;
  color: var(--ink);
  box-shadow: -1px 0 0 rgb(var(--ink-rgb) / .2), -28px 0 60px rgb(0 0 0 / .38);
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  outline: none;
}
.drawer.open .drawer-panel { transform: none; }

.drawer-head {
  display: flex; align-items: center; gap: 14px;
  padding: calc(18px + env(safe-area-inset-top)) var(--pad) 16px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / .22);
}
.drawer-title {
  margin: 0;
  font-family: var(--font-mark); font-weight: 700;
  font-size: 18px; letter-spacing: .14em; text-transform: uppercase;
}
.drawer-count { margin-right: auto; color: var(--ink-muted); }
.drawer-close {
  flex: 0 0 auto; width: 42px; height: 42px;
  background: none; color: var(--ink); cursor: pointer;
  border: 1.5px solid var(--ink);
  font-family: var(--font-mark); font-size: 14px; line-height: 1;
}
.drawer-close:hover { background: rgb(var(--ink-rgb) / .08); }
.drawer-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.drawer-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px var(--pad) 12px;
}
.drawer-body.is-empty { display: flex; flex-direction: column; align-items: flex-start; padding-top: 28px; }

/* how far to free delivery */
.ship { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 6px; }
.ship-text {
  font-family: var(--font-mark); font-weight: 700;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
}
.ship-bar { position: relative; height: 4px; background: rgb(var(--ink-rgb) / .16); overflow: hidden; }
.ship-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); transition: width .4s var(--ease); }

.drawer .lines { margin: 6px 0 0; }
.drawer .line { grid-template-columns: 72px minmax(0, 1fr); row-gap: 12px; }
.drawer .line-thumb { width: 72px; height: 72px; }
.drawer .line-end { grid-column: 2; justify-content: space-between; flex-wrap: wrap; row-gap: 8px; }
.drawer .line-drop {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 3px;
}
.qty button:disabled { opacity: .35; cursor: default; }

.drawer-foot {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px var(--pad) calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(var(--ink-rgb) / .22);
}
.drawer-foot .total { margin: 0; }
.drawer-foot .btn-buy { width: 100%; }
.drawer-note { margin: -4px 0 4px; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.drawer-more { align-self: center; }

/* ================================================== reading on concrete == */
/* Small printed marking sits on a pored slab, and a dark pore under a thin
   stroke eats the letter. A soft halo in the floor's own colour clears the
   pores from right behind the text without drawing a box around it. */
.label,
.stamp {
  text-shadow:
    0 0 2px var(--concrete-300),
    0 0 5px var(--concrete-300),
    0 0 11px var(--concrete-300);
}


/* ============================================================== icons ==== */
.vv-icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: square; stroke-linejoin: miter;
  overflow: visible;
}

/* ========================================================== checkout ===== */

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  max-width: 1180px; margin: 0 auto;
}
.co-main { min-width: 0; }

.co-sec { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.co-sec-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 0 14px; margin: 0;
  font-family: var(--font-mark); font-weight: 700;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
}
.co-sec-head .icon { width: 20px; height: 20px; }
.co-sec .form-grid { margin-bottom: 0; }
.co-details { margin-bottom: 26px; }
.co-details.is-saved { margin-bottom: 30px; }
.co-fields[hidden], .saved-card[hidden], .saved-head[hidden] { display: none; }

/* the details this browser remembered, as one card */
.saved-card {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px;
  padding: 18px 20px;
  border: 1.5px solid var(--ink);
  box-shadow: inset 1px 1px 2px rgb(0 0 0 / calc(.3 * var(--sh))), inset -1px -1px 1px rgb(255 255 255 / calc(.4 * var(--hl)));
}
.saved-row { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.saved-row .icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.saved-row div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.saved-row b { font-family: var(--font-mark); font-size: 13px; letter-spacing: .06em; overflow-wrap: anywhere; }
.saved-row small { font-size: 12.5px; line-height: 18px; color: var(--ink-muted); overflow-wrap: anywhere; }
.saved-ctl { grid-column: 1 / -1; display: flex; gap: 22px; padding-top: 12px; border-top: 1px solid rgb(var(--ink-rgb) / .2); }

.pay-opt { align-items: center; }
.pay-opt > .icon { flex: 0 0 auto; width: 26px; height: 26px; }

.co-note { margin: 0 0 22px; }
.co-note summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-mark); font-weight: 700; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.co-note summary::-webkit-details-marker { display: none; }
.co-note summary::before { content: "+ "; }
.co-note[open] summary::before { content: "− "; }
.co-note .form-grid { margin: 14px 0 0; }

.co-remember { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin: 0 0 24px; max-width: 60ch; }
.co-remember input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.co-remember span { display: flex; flex-direction: column; gap: 3px; }
.co-remember b { font-family: var(--font-mark); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.co-remember small { font-size: 12.5px; line-height: 18px; color: var(--ink-muted); }

.co-actions .btn-buy { min-width: min(100%, 320px); }

/* the order as a slip of paper, pinned beside the form */
.co-slip {
  --paper: #f3f1ea; --paper-ink: #1b1a17; --paper-muted: #5f5c55;
  position: sticky; top: clamp(74px, 9vw, 104px);
  background: var(--paper); color: var(--paper-ink);
  padding: 22px 22px 20px;
  font-family: var(--font-mark);
  transform: rotate(.8deg);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .28), 0 20px 34px rgba(0, 0, 0, .24);
}
.co-slip > .receipt-small { display: block; margin-bottom: 16px; }
.co-safe {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0; padding-top: 14px; border-top: 1.5px dashed rgba(27, 26, 23, .3);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-muted);
}
.co-safe .icon { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .checkout { grid-template-columns: minmax(0, 1fr); }
  /* on a phone the order slip comes after the form, before paying */
  .co-slip { position: static; transform: none; }
}
@media (max-width: 560px) {
  .saved-card { grid-template-columns: minmax(0, 1fr); }
}


/* ======================================================= info pages ====== */
/* Delivery and contacts are garment tags: the same cream paper as the
   receipt, a punched hole at the top, lying straight on the concrete (a
   tilted card would soften every letter on it).
   Labels in the stamp face on the left, plain text on the right. */

.info { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; }

.tag {
  --paper: #f3f1ea; --paper-ink: #1b1a17; --paper-muted: #5f5c55;
  position: relative;
  padding: clamp(42px, 6vw, 58px) clamp(22px, 5vw, 48px) clamp(26px, 4vw, 38px);
  background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 18px 40px rgb(0 0 0 / .32), 0 4px 10px rgb(0 0 0 / .18);
}
/* the punched hole, and the string through it */
.tag::before {
  content: ""; position: absolute; top: 16px; left: 50%; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%;
  background: var(--concrete-300);
  box-shadow: inset 0 2px 3px rgb(0 0 0 / .45), 0 0 0 4px rgb(0 0 0 / .06);
}
.tag::after {
  content: ""; position: absolute; top: -34px; left: 50%; width: 2px; height: 52px; margin-left: -1px;
  background: linear-gradient(#1b1a17, #3b3833);
  transform: rotate(8deg); transform-origin: bottom center;
  border-radius: 1px;
}

.tag-top {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mark); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper-muted);
}
.tag-title {
  margin: 10px 0 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 7.4vw, 68px); line-height: .95; letter-spacing: -.01em; text-transform: uppercase;
  color: var(--paper-ink);
  overflow-wrap: anywhere;
}
.tag-lead { margin: 16px 0 0; font-size: 16px; line-height: 24px; max-width: 46ch; }

.tag-cut {
  margin: 24px 0 18px; border: 0; height: 0;
  border-top: 1.5px dashed rgb(27 26 23 / .35);
}
.tag-h {
  margin: 0 0 12px;
  font-family: var(--font-mark); font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-ink);
}

.tag-rows {
  display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr);
  gap: 10px 20px; margin: 0;
}
.tag-rows dt {
  font-family: var(--font-mark); font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-muted); padding-top: 3px;
}
.tag-rows dd { margin: 0; font-size: 15.5px; line-height: 22px; overflow-wrap: anywhere; }
.tag-rows a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--paper-ink); font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid var(--paper-ink); padding-bottom: 1px;
}
.tag-rows a .icon { width: 15px; height: 15px; stroke-width: 2; transition: transform .2s var(--ease); }
.tag-rows a:hover .icon { transform: translateX(3px); }
.tag-rows a:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 3px; }

.tag-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 12px; }
.tag-steps li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 22px; }
.tag-steps li::before {
  content: "0" counter(step);
  display: grid; place-items: center; height: 24px;
  font-family: var(--font-mark); font-weight: 700; font-size: 11.5px; letter-spacing: .06em;
  color: var(--paper); background: var(--paper-ink);
}

.tag-note { margin: 12px 0 0; font-size: 14px; line-height: 21px; color: var(--paper-muted); }
.tag-btn {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 16px;
  min-height: 48px; padding: 12px 22px;
  font-family: var(--font-mark); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper); background: var(--paper-ink); text-decoration: none;
  transition: background-color .2s;
}
.tag-btn:hover { background: var(--original-red); }
.tag-btn:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 3px; }

.tag-actions { margin-top: clamp(28px, 4vw, 40px); }

@media (max-width: 560px) {
  .tag-rows { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .tag-rows dd { margin-bottom: 10px; }
}

@media (max-width: 640px) {
  .info-cards, .info-cards.is-three { grid-template-columns: minmax(0, 1fr); }
  .corner .lang-cur, .corner .cart-mark > span { display: none; }
  .corner .lang-short { display: inline; }
}


/* ======================================================= Nova Poshta ===== */

.np { display: flex; flex-direction: column; gap: 16px; }
.np-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.np-type {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 16px; cursor: pointer;
  color: var(--ink); background: var(--plate);
  border: 1.5px solid rgb(var(--ink-rgb) / .2);
  box-shadow: var(--plate-edge);
  transition: border-color .2s, background-color .2s;
}
.np-type .icon { width: 26px; height: 26px; flex: 0 0 auto; }
.np-type span { display: flex; flex-direction: column; gap: 2px; }
.np-type b { font-family: var(--font-mark); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.np-type small { font-size: 12px; color: var(--ink); opacity: .7; }
.np-type:hover { background: var(--plate-hover); }
.np-type[aria-checked="true"] { border-color: var(--ink); box-shadow: var(--plate-edge), inset 0 0 0 1px var(--ink); }
.np-type:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.combo { position: relative; }
.combo-input {
  width: 100%;
  font-family: var(--font-mark); font-size: 13px; color: var(--ink);
  background: rgba(255, 255, 255, .1);
  border: 1.5px solid var(--ink);
  border-radius: 0; padding: 12px 38px 12px 14px; min-height: 46px;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .34), inset -1px -1px 1px rgba(255, 255, 255, .38);
}
.combo::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg);
  pointer-events: none;
}
.combo-input::placeholder { color: var(--ink); opacity: .5; }
.combo-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.combo.is-off { opacity: .5; }
.combo.is-off .combo-input { cursor: not-allowed; }
.field.bad .combo-input { border-color: var(--original-red); }

.combo-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 290px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: #f7f7f6; color: #1b1a17;
  border: 1px solid rgba(0, 0, 0, .16);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}
.combo-list[hidden] { display: none; }
.combo-opt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; cursor: pointer; }
.combo-opt b { font-family: var(--font-mark); font-size: 12.5px; letter-spacing: .04em; }
.combo-opt small { font-size: 12.5px; line-height: 17px; color: #5f5c55; }
.combo-opt:hover, .combo-opt.is-active { background: #e9e7e1; }
.combo-note { padding: 12px; font-size: 13px; color: #5f5c55; }

/* where the order goes, on the slip */
.co-dest {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 14px 0 0; padding-top: 14px; border-top: 1.5px dashed rgba(27, 26, 23, .3);
}
.co-dest .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.co-dest span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.co-dest b { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.co-dest small { font-family: var(--font-sans); font-size: 12.5px; line-height: 17px; color: var(--paper-muted); overflow-wrap: anywhere; }

/* ========================================================== payment ====== */

.pay-order { color: var(--ink-muted); margin-bottom: 6px; display: block; }
.pay-page .sheet-title { margin-bottom: 18px; }

.pay-amount {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 0 0 18px; margin: 0 0 22px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / .22);
  max-width: 560px;
}
.pay-amount span { font-family: var(--font-mark); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.pay-amount b { font-family: var(--font-mark); font-weight: 700; font-size: clamp(30px, 4vw, 42px); line-height: 1; color: var(--ink); }

/* the provider's form sits in one clean panel */
.pay-box {
  max-width: 560px;
  padding: 22px 22px 18px;
  background: #f7f7f6; color: #1b1a17;
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 18px 36px rgba(0, 0, 0, .16);
}
.pay-box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pay-secure { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mark); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.pay-secure .icon { width: 18px; height: 18px; }
.pay-brand { font-family: var(--font-mark); font-weight: 700; font-size: 20px; letter-spacing: .01em; }

.pay-host { display: flex; flex-direction: column; gap: 14px; }
/* what monobank's page will accept — shown, chosen there */
.pay-accept { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pay-accept li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 11px;
  font-family: var(--font-mark); font-weight: 700; font-size: 11.5px; letter-spacing: .04em;
  background: #fff; border: 1px solid rgba(0, 0, 0, .14);
}
.pay-accept .icon { width: 16px; height: 16px; }
.pay-failed { margin: 0; }

/* back from monobank, waiting for its answer */
.pay-wait { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; }
.pay-wait p { margin: 0; font-family: var(--font-mark); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.pay-wait-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); animation: tag-pulse 1.1s ease-in-out infinite; }

.pay-box .pay-now { width: 100%; min-height: 56px; font-size: 13px; background: #1b1a17; border-color: #1b1a17; color: #f7f7f6; }
.pay-box .pay-now:hover { background: var(--original-red); border-color: var(--original-red); }
.pay-now.is-busy { opacity: .75; cursor: progress; }
.pay-fine { margin: 14px 0 0; font-size: 12.5px; line-height: 18px; color: #5f5c55; }


@media (max-width: 560px) {
  .np-types { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .np-type { padding: 12px; gap: 9px; }
}


/* ================================================= touch screens ======== */
/* A phone has no hover: a tap would leave the lift "stuck" on whatever was
   touched, and the grey tap flash reads as a glitch. On touch screens the
   floor stays still under the finger. */
@media (hover: none) {
  * { -webkit-tap-highlight-color: transparent; }
  .garment,
  .garment:hover,
  .garment:focus-visible { transition: none; }
  .garment:hover img,
  .garment:focus-visible img { filter: var(--shadow-rest); }
  .plate:hover,
  a.info-card:hover,
  .thumb:hover { transform: none; }
  .plate:hover { background: var(--plate); }
  .btn:active { transform: none; }
}
@media (hover: none) and (min-width: 801px) {
  .garment:hover,
  .garment:focus-visible { transform: translateX(-50%) rotate(var(--r, 0deg)); }
}
@media (hover: none) and (max-width: 800px) {
  .garment:hover,
  .garment:focus-visible { transform: rotate(var(--r, 0deg)); }
}

/* ============================================== sharp on phones ========= */
/* Phones (and other dense screens) draw SVG filters at one pixel per CSS
   pixel and stretch the result — the rough-edged lettering came out soft,
   "soapy". There the lettering drops the filter and keeps its relief from
   the shadows alone, which stay crisp at any density. */
@media (hover: none), (min-resolution: 1.5dppx) {
  .emboss, .engrave, [class*="wear-"], .receipt-stamp { filter: none; }
}
/* The slab tile is 1024 px; spread over 720 CSS px it is too thin for a 3×
   phone screen. On phones it is laid smaller, so every pixel of it counts. */
@media (max-width: 800px) {
  .floor {
    background-size: 1300px 1300px, 420px 420px;
  }
  /* both layers, as on the floor: one value would stretch the pore tile to
     1300 px too — three times the floor's — and every page but the floor
     looked blurred */
  .view, .drawer-panel { background-size: 1300px 1300px, 420px 420px; }
}

/* ============================================ product header ============ */
/* collection · name · price (+ pre-order) · one line of context */
.pv-kicker { color: var(--ink-muted); }
/* the price: a paper tag on the concrete, stamped */
.pv-tagwrap {
  position: relative; align-self: flex-start;
  margin: 10px 0 6px 2px;
  transform: rotate(-2.5deg);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)) drop-shadow(0 12px 18px rgba(0, 0, 0, .24));
}
.pv-pricetag {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 250px;              /* the same tag for ₴ and €: no jump on switching */
  align-items: center; text-align: center;   /* the price in the middle, whatever its length */
  padding: 16px 30px 14px 34px;
  background: #f3f1ea; color: #1b1a17;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
}
/* the hole for the string */
.pv-pricetag::before {
  content: ""; position: absolute; left: 13px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--concrete-300); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .45);
}
.pv-pt-fig { display: flex; align-items: flex-start; gap: 4px; line-height: .95; }
.pv-pt-num { font-family: var(--font-mark); font-weight: 700; font-size: clamp(40px, 4.4vw, 50px); letter-spacing: -.03em; }
.pv-pt-fig.is-short .pv-pt-num { font-size: clamp(52px, 5.6vw, 64px); }
.pv-pt-cur { font-family: var(--font-mark); font-weight: 700; font-size: 20px; margin-top: 4px; }
.pv-pt-who { font-family: var(--font-mark); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #5f5c55; }
.pv-pt-stamp {
  position: absolute; right: -18px; top: -14px;
  padding: 5px 9px 4px;
  font-family: var(--font-mark); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--original-red); border: 2px solid var(--original-red);
  box-shadow: inset 0 0 0 2px #f3f1ea, inset 0 0 0 3px var(--original-red);
  background: #f3f1ea;
  transform: rotate(10deg);
}
/* Ukraine | International — both prices, the one on the tag lit */
.pv-seg {
  align-self: flex-start;
  display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: 3px; gap: 3px;
  background: var(--plate);
  border: 1px solid rgb(var(--ink-rgb) / .18);
  box-shadow: var(--plate-edge);
}
.pv-seg-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-width: 128px; padding: 8px 14px 7px; cursor: pointer;
  border: 0; background: none; color: var(--ink); text-align: left;
  transition: background-color .15s, color .15s;
}
.pv-seg-opt span { font-family: var(--font-mark); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.pv-seg-opt b { font-family: var(--font-mark); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.pv-seg-opt:hover { background: var(--plate-hover); }
.pv-seg-opt[aria-checked="true"] { background: var(--ink); color: var(--on-ink); cursor: default; }
.pv-seg-opt[aria-checked="true"] span { opacity: .7; }
.pv-seg-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pv-info .pv-text { margin-top: 6px; padding-top: 16px; border-top: 1px solid rgb(var(--ink-rgb) / .22); }
.pv-facts { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin: 0; }
.pv-facts dt { font-family: var(--font-mark); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); padding-top: 2px; }
.pv-facts dd { margin: 0; font-size: 13.5px; line-height: 19px; color: var(--ink); }
.pv-intl { display: flex; flex-direction: column; gap: 12px; }
.pv-intl p { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--ink); max-width: 40ch; }
.pv-intl .btn { text-decoration: none; display: inline-flex; justify-content: center; }
.pv-actions[hidden] { display: none; }

/* a size that is out: struck through, not pressable */
.size.is-out { opacity: .38; cursor: not-allowed; text-decoration: line-through; box-shadow: none; }

.info-cards.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .info-cards.is-two { grid-template-columns: minmax(0, 1fr); } }

/* =============================================== abroad & pre-order ===== */
.co-country { margin-bottom: 16px; }
.co-country select { appearance: auto; padding-right: 14px; cursor: pointer; }
.co-dest-fields .form-grid { margin-bottom: 0; }
.co-intl-note { margin: 14px 0 0; padding: 12px 14px; font-size: 13.5px; line-height: 20px; color: var(--ink); border-left: 2px solid var(--ink); background: rgb(var(--ink-rgb) / .06); }
.pay-opt[hidden] { display: none; }


/* ======================================================= first paint ==== */
/* While the page is being put together the slab is already there, but what
   lies on it is not shown — no half-built floor, no jump of the scroll, no
   window sliding in. It all appears at once. If the script never finishes,
   the animation shows it anyway after 3 s. */
.vv-loading .floor > *,
.vv-loading .corner,
.vv-loading .view.open {
  opacity: 0;
  animation: vv-reveal 0s 3s forwards;
}
@keyframes vv-reveal { to { opacity: 1; } }
.floor > *, .corner { transition: opacity .35s ease; }

/* the loader: one even sheet of the slab's colour over everything while the
   page is put together — the concrete's layers arrive one by one behind it
   and nobody sees them change — then it melts away in one move into the
   finished page. VV and the running line show only if that takes longer
   than a blink; the fallback clears it all at 3 s. */
.vv-loader {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  pointer-events: none;
  background: var(--concrete-300);
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility 0s .5s;
}
.vv-loading .vv-loader {
  opacity: 1; visibility: visible;
  transition: none;
  animation: vv-unload 0s 3s forwards;
}
.vv-loader-mark, .vv-loader-bar { opacity: 0; transition: opacity .3s ease; }
.vv-loading .vv-loader-mark, .vv-loading .vv-loader-bar { opacity: 1; transition: opacity .3s ease .25s; }
@keyframes vv-unload { to { opacity: 0; visibility: hidden; } }
.vv-loader-mark {
  font-family: var(--font-display); font-weight: 900; font-size: 72px; line-height: 1; letter-spacing: -.02em;
}
.vv-loader-bar {
  position: relative; width: 112px; height: 2px; overflow: hidden;
  background: rgb(0 0 0 / calc(.16 * var(--sh)));
  box-shadow: 0 1px 0 rgb(255 255 255 / calc(.4 * var(--hl)));
}
.vv-loader-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: var(--original-red);
  animation: vv-run 1.1s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes vv-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .vv-loader-bar::after { animation-duration: 2.4s; } }

/* ---------------------------------------------------------------- stock
   Sold out: a red stamp across the piece on the floor (the piece dims but
   still opens), a crossed-out size in the closer look, a flag in the cart. */
.garment.is-sold img { filter: var(--shadow-rest) grayscale(.55) brightness(.82); }
.sold-stamp {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%) rotate(-12deg);
  padding: 6px 14px 5px;
  font-family: var(--font-mark); font-weight: 700; font-size: clamp(13px, 1.5vw, 19px);
  letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: var(--original-red);
  box-shadow: 0 6px 16px rgb(0 0 0 / .35);
  pointer-events: none;
}
.size.is-out { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .45; cursor: not-allowed; }
.size.is-last { box-shadow: inset 0 -3px 0 var(--original-red); }
.sold-note { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; width: 100%; }
.sold-note b { font-family: var(--font-mark); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--original-red); padding: 6px 12px; }
.line.is-out .line-thumb img { filter: grayscale(1); opacity: .6; }
.line-out { align-self: flex-start; font-family: var(--font-mark); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--original-red); padding: 2px 6px; }
.co-error[hidden] { display: none; }
.co-error { margin: 0 0 12px; }

/* a picture still on its way: invisible until it's there, then it fades in
   (site.js, settle) — nothing pops */
img.img-wait { opacity: 0; }
.slide-img img, .thumb img { transition: opacity .35s ease; }

/* the plain list of pieces in index.html / the product page, for anything
   that reads the page without scripts — the floor replaces it */
.ssr { padding: 40px 6vw 80px; color: var(--ink); font-family: var(--font-mark); }
.ssr h2 { margin: 28px 0 10px; font-size: 20px; }
.ssr ul { margin: 0; padding-left: 18px; line-height: 1.9; }
.ssr a { color: inherit; }
.ssr img { display: block; max-width: min(420px, 100%); height: auto; margin: 16px 0; }

/* the captcha: takes no room until Cloudflare wants the visitor to tick it */
.captcha:empty { display: none; }
.captcha { flex: 1 0 100%; width: 100%; margin: 0 0 14px; min-height: 0; }
.captcha iframe { max-width: 100%; }

/* The name and the price tag: one under the other on a computer; on a
   phone the tag hangs right after the name, tied to it by a short string
   through its hole, and stretches to the right edge (the name wraps if
   long); its PRE-ORDER stamp is tucked in so the screen edge never cuts it. */
.pv-head { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
@media (max-width: 720px) {
  .pv-head { flex-direction: row; align-items: center; gap: 18px; }
  .pv-head .pv-name { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .pv-head .pv-tagwrap { flex: 1 1 auto; min-width: 0; margin: 14px 6px 4px 0; transform: rotate(-1.5deg); }
  .pv-head .pv-pricetag { width: 100%; min-width: 0; }
  /* the string: from the end of the name into the tag's hole */
  .pv-head .pv-tagwrap::before {
    content: ""; position: absolute; z-index: 1; left: -16px; top: 50%;
    width: 29px; height: 1.5px; margin-top: -1px;
    background: var(--ink); border-radius: 1px;
    transform: rotate(4deg); transform-origin: right center;
  }
  .pv-head .pv-pricetag { gap: 5px; padding: 12px 16px 11px 28px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
  .pv-head .pv-pricetag::before { left: 9px; width: 6px; height: 6px; margin-top: -3px; }
  .pv-head .pv-pt-num { font-size: clamp(28px, 9.5vw, 40px); }
  .pv-head .pv-pt-fig.is-short .pv-pt-num { font-size: clamp(36px, 12.5vw, 52px); }
  .pv-head .pv-pt-cur { font-size: clamp(14px, 4.4vw, 18px); margin-top: 3px; }
  .pv-head .pv-pt-who { font-size: clamp(8px, 2.5vw, 10px); letter-spacing: .12em; line-height: 1.25; }
  .pv-head .pv-pt-stamp { right: -4px; top: -15px; padding: 3px 6px 2px; font-size: 9px; letter-spacing: .14em; }
}
@media (max-width: 360px) {
  .pv-head .pv-name { font-size: 19px; }
}

/* on a phone the Ukraine | International switch sits in the middle */
@media (max-width: 720px) {
  .pv-seg { align-self: center; }
  .pv-seg-opt { align-items: center; text-align: center; }
}

/* ------------------------------------------------------------------ zoom
   A photo over the whole screen (site.js, openZoom): swipe between them,
   tap to zoom in and drag around. */
.zoom {
  position: fixed; inset: 0; z-index: 2000;
  background: rgb(12 11 10 / .96);
  opacity: 0; transition: opacity .2s ease;
  touch-action: pan-x pan-y pinch-zoom;
}
.zoom.open { opacity: 1; }
.zoom-track {
  position: absolute; inset: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.zoom-track::-webkit-scrollbar { display: none; }
.zoom-track.is-locked { overflow-x: hidden; }
.zoom-pane {
  flex: 0 0 100%; height: 100%;
  scroll-snap-align: center;
  display: grid; place-items: center;
  overflow: hidden; cursor: zoom-in;
}
.zoom-pane img {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  user-select: none; -webkit-user-select: none;
}
/* zoomed: the photo 2.5× the screen, and the pane scrolls around it */
.zoom-pane.is-in { overflow: auto; display: block; cursor: zoom-out; }
.zoom-pane.is-in img { max-width: none; max-height: none; width: 250%; }
@media (orientation: landscape) { .zoom-pane.is-in img { width: auto; height: 250%; } }
.zoom-close, .zoom-arrow {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0; cursor: pointer;
  color: #f6f0e4; background: rgb(0 0 0 / .45); border: 1px solid rgb(246 240 228 / .25);
  font-size: 20px; line-height: 1;
}
.zoom-close { top: max(14px, env(safe-area-inset-top)); right: 14px; }
.zoom-arrow { top: 50%; margin-top: -24px; }
.zoom-arrow.is-prev { left: 14px; }
.zoom-arrow.is-next { right: 14px; }
.zoom-arrow .icon { width: 22px; height: 22px; }
.zoom-arrow:disabled { opacity: .25; cursor: default; }
.zoom-close:focus-visible, .zoom-arrow:focus-visible { outline: 2px solid #f6f0e4; outline-offset: 2px; }
.zoom-count {
  position: absolute; z-index: 2; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  padding: 5px 12px; font-family: var(--font-mark); font-size: 12px; letter-spacing: .14em;
  color: #f6f0e4; background: rgb(0 0 0 / .45);
}
/* on a phone the arrows stay too, smaller, at the bottom corners, out of the photo's way */
@media (hover: none), (max-width: 720px) {
  .zoom-arrow { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); margin-top: 0; width: 44px; height: 44px; }
}
.slide-img { cursor: zoom-in; }

/* the floor behind an open closer look: hidden, so nothing of it can flash
   through when a phone's browser bar moves (site.js, openView) */
body.under-view .floor { visibility: hidden; }

/* the cart: an even sheet of the slab's colour, no texture — a calm
   surface for the list, the sums and the buttons */
.drawer-panel { background-image: none; }

/* ---------------------------------------------------- zoom on a computer
   A window in the middle of a dimmed page — the photo at a comfortable
   size, arrows beside it, ✕ at its corner; a click on the dim closes it.
   Zooming in shows the 2800 px version inside that window. */
@media (min-width: 721px) and (hover: hover) {
  .zoom { --zs: min(86vh, 78vw, 1000px); background: rgb(12 11 10 / .8); }
  .zoom-track {
    inset: auto; left: 50%; top: 50%;
    width: var(--zs); height: var(--zs);
    transform: translate(-50%, -50%);
    background: #f7f7f6;
    box-shadow: 0 30px 80px rgb(0 0 0 / .5);
  }
  .zoom-close { top: calc(50% - var(--zs) / 2); right: calc(50% - var(--zs) / 2 - 62px); }
  .zoom-arrow.is-prev { left: calc(50% - var(--zs) / 2 - 64px); }
  .zoom-arrow.is-next { right: calc(50% - var(--zs) / 2 - 64px); }
  .zoom-count { bottom: calc(50% - var(--zs) / 2 - 40px); }
}