/* ALLIN MAKI · the order file (order.html)
   Sits on top of tokens.css, base.css, components.css and sections.css, so the
   page shares the banner, masthead, buttons, type roles and footer with the
   landing page. Everything here is the form itself. Class names are prefixed
   of- where the site already uses the plain word. */

:root {
  --ink-muted: rgba(0,0,0,.62);            /* small labels: 5:1 on parchment, 4.6:1 on tint */
  --pass:      #2F6F5E;                    /* one status colour, one meaning: pass */
  --pass-tint: #E6EFEA;
  --warn:      #A8721E;
  --s-14: 14px;
  --foot-h: 68px;
}
@media (max-width: 767px) { :root { --foot-h: 100px; } }

[hidden] { display: none !important; }
.muted { color: var(--ink-a60); }
.of-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* the site's type roles at the form's density: a step heading is a section
   heading, not the hero */
.of-body .t-h1 { font-size: 34px; line-height: 1.04; letter-spacing: -0.02em; }
.of-body .t-h3 { font-size: 20px; font-weight: 400; line-height: 1.2; }
.of-body .t-p { font-size: 16px; line-height: 1.55; letter-spacing: 0.16px; }
.of-body .t-eyebrow { font-size: 13px; }
@media (min-width: 768px) {
  .of-body .t-h1 { font-size: 54px; line-height: 1.04; letter-spacing: -0.02em; }
  .of-body .t-h3 { font-size: 24px; }
  .of-body .t-p { font-size: 18px; }
  .of-body .t-eyebrow { font-size: 14px; }
}

/* the site's .btn stacks its children (place-items on a grid); the form's
   buttons carry an icon beside the label */
.of-nav .btn, .of-panel .btn { grid-auto-flow: column; gap: var(--s-8); margin-inline: 0; }
/* the action bar carries the button, so it is sized to the bar, not to a hero */
.of-nav .btn--primary { min-height: 46px; min-width: 156px; padding: var(--s-12) var(--s-24); }
.of-nav .btn--secondary { min-height: 46px; min-width: 96px; }
/* Not a faded accent pill. At forty per cent on the tinted bar it was pale
   fawn on pale fawn, which is the least legible state of the most important
   control on the site; and it meant the accent was on screen whether or not
   the button did anything. Outlined until it is live, filled the moment it is,
   so the whole bar changes at the hundred-piece mark. */
.btn[aria-disabled="true"] {
  cursor: not-allowed; background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink-a20); color: var(--ink-a60);
}
.of-nav .btn svg { width: 16px; height: 14px; min-width: 16px; }

/* ============================================================================
   The head: the site's banner and masthead, then the step rail under them
   ========================================================================== */
/* Brand and steps, nothing else. At rest a flat bar; the moment the page moves
   it lifts into a floating pill, so the form keeps the screen. */
.of-head {
  position: sticky; top: 0; z-index: 30;
  background: var(--tint); border-bottom: 1px solid var(--ink-a10);
  transition: background-color .3s ease, border-color .3s ease,
              padding-block-start .35s cubic-bezier(.2, .8, .2, 1);
}
.of-head__in {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-24);
  min-height: 56px; margin-inline: auto; background: transparent; border-radius: 0;
  transition: min-height .35s cubic-bezier(.2, .8, .2, 1),
              max-width .35s cubic-bezier(.2, .8, .2, 1),
              padding-inline .35s cubic-bezier(.2, .8, .2, 1),
              background-color .3s ease, box-shadow .3s ease, border-radius .3s ease;
}
/* min-height so the one link out of the order builder is a target and not
   a 16px sliver of wordmark. */
.of-head__brand { display: grid; align-items: center; color: var(--ink); min-height: 44px; }
.of-head__brand svg { display: block; }
.of-head.is-pill { background: transparent; border-bottom-color: transparent; padding-block-start: 10px; }
.of-head.is-pill .of-head__in {
  max-width: 960px; min-height: 50px; padding-inline: var(--s-24);
  border-radius: var(--r-pill);
  /* Solid, not glass. At 78 per cent over 960px whatever is under it ghosts
     through rather than being hidden, and on this page what is under it is
     always the working surface: a collection heading truncating mid-word, a
     row of size chips smeared, a row of prices half readable. The hairline is
     load-bearing rather than decoration, because a solid tint reads much
     heavier than glass and needs an edge to stay an object. */
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--ink-a10), 0 10px 30px rgba(70, 58, 0, .13);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
/* And nothing this page jumps to should land under it. The colour card solves
   this with --pill-h, which lives in landing.css and this page does not load,
   so the height is declared here. */
:root { --of-pill-h: 60px; }
.of-step, .cwgroup { scroll-margin-top: calc(var(--of-pill-h) + var(--s-16)); }
@media (prefers-reduced-motion: reduce) { .of-head, .of-head__in { transition: none; } }

.of-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));   /* four steps, four segments */ gap: var(--s-8); padding: 0; }
.of-rail li { display: grid; gap: 5px; align-content: center; }
.of-rail i { display: block; height: 2px; border-radius: var(--r-pill); background: var(--ink-a15); transition: background-color var(--t-hover); }
.of-rail li[data-state="done"] i,
.of-rail li[data-state="now"] i { background: var(--ink); }
.of-rail span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-rail li[data-state="now"] span { color: var(--ink); }
.of-ref { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-a60); white-space: nowrap; }
@media (max-width: 767px) { .of-rail span { display: none; } .of-ref { display: none; } }

/* ---- body -------------------------------------------------------------- */
.of-body { padding-block: var(--s-40) calc(var(--foot-h) + var(--s-24)); }
@media (min-width: 768px) { .of-body { padding-block: var(--s-56) var(--s-96); } }
/* One column that never grows past the screen: a wide child used to widen the
   whole step, which is how the sent screen slid sideways on a telephone. */
.of-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
.step-head { display: grid; gap: var(--s-12); max-width: 720px; }
.step-head .t-eyebrow { color: var(--ink-a60); }

/* ---- option cards: radio and checkbox, same shape ---------------------- */
.opts { display: grid; gap: var(--s-12); }
@media (min-width: 768px) { .opts--2 { grid-template-columns: 1fr 1fr; } .opts--3 { grid-template-columns: repeat(3, 1fr); } }
.opt { position: relative; display: grid; gap: var(--s-4); padding: var(--s-20) var(--s-24); border: 1px solid var(--ink-a15); border-radius: var(--r-16); background: var(--white); cursor: pointer; transition: border-color var(--t-hover), background-color var(--t-hover); }
.opt:hover { border-color: var(--ink-a40); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt b { font-weight: 700; font-size: 16px; }
.opt small { font-size: 14px; color: var(--ink-a60); line-height: 1.45; }
.opt .price { font-family: var(--font-mono); font-size: 13px; color: var(--ink); margin-top: var(--s-4); }
.opt:has(input:checked) { border-color: var(--ink); background: var(--tint-card); box-shadow: inset 0 0 0 1px var(--ink); }
.opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.opt__tick { position: absolute; top: var(--s-16); right: var(--s-16); width: 20px; height: 20px; border-radius: var(--r-pill); border: 1px solid var(--ink-a30); display: grid; place-items: center; }
.opt:has(input:checked) .opt__tick { background: var(--ink); border-color: var(--ink); color: var(--white); }
.opt__tick svg { width: 12px; height: 12px; opacity: 0; }
.opt:has(input:checked) .opt__tick svg { opacity: 1; }
.opt--pad { padding-right: var(--s-48); }
/* The postage estimate, under the country. It is a paragraph and not a
   panel on purpose: it is one sentence, it changes as the order changes,
   and half the time it is the sentence saying we cannot say yet. */
.post { margin-top: var(--s-16); font-size: 14px; line-height: 1.5; color: var(--ink-a60); }
.post b { color: var(--ink); font-weight: 700; }
/* A choice that is not open yet. It stays readable on purpose: a buyer who
   cannot pick private label still has to be able to read what it is and what
   it would cost, because that is the thing that makes them order 500. So the
   words keep their contrast, the box loses its hover and its pointer, and the
   reason sits under the price where the eye already is. */
.opt[data-locked="true"] { cursor: default; background: var(--tint-card); border-style: dashed; }
.opt[data-locked="true"]:hover { border-color: var(--ink-a15); }
.opt[data-locked="true"] .opt__tick { opacity: .35; }
.opt__locked { font-family: var(--font-mono); font-size: 13px; color: var(--ink); margin-top: var(--s-4); font-weight: 700; }

/* ---- text fields ------------------------------------------------------- */
.grid-flds { display: grid; gap: var(--s-20); }
@media (min-width: 768px) { .grid-flds--2 { grid-template-columns: 1fr 1fr; } }
.fld { display: grid; gap: var(--s-6); }
.fld > label { font-weight: 600; font-size: 15px; }
.fld > label small { font-weight: 400; color: var(--ink-a60); }
.fld input, .fld select, .fld textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--white);
  border: 1px solid var(--ink-a20); border-radius: var(--r-8);
  padding: var(--s-12) var(--s-16); min-height: 52px; width: 100%;
  transition: border-color var(--t-hover);
}
.fld textarea { min-height: 108px; resize: vertical; padding-top: var(--s-12); }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--ink-a40); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.fld [aria-invalid="true"] { border-color: #8A2E1E; box-shadow: inset 0 0 0 1px #8A2E1E; }
.fld .err { display: none; font-size: 14px; color: #8A2E1E; }
.fld:has([aria-invalid="true"]) .err { display: block; }
.fld .hint { font-size: 13px; color: var(--ink-a60); }
.fld input[type="file"] { padding: var(--s-10) var(--s-12); min-height: 48px; }
.fieldset { display: grid; gap: var(--s-16); border: 0; padding: 0; margin: 0; }
.fieldset > legend { padding: 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: -.01em; margin-bottom: var(--s-4); }
.sub { display: grid; gap: var(--s-16); padding: var(--s-20); border-radius: var(--r-16); background: var(--tint-card); border: 1px solid var(--ink-a10); }

/* ---- the standards for the country of import, said and not asked ------- */
/* A statement, not a choice, so it has none of the option cards' tick or
   black border: the card colour and the green of a pass say it is settled. */
.fit { display: grid; gap: var(--s-16); padding: var(--s-20); border: 1px solid var(--ink-a15); border-radius: var(--r-16); background: var(--tint-card); }
.fit__head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-12) var(--s-16); align-items: start; }
.fit__i { width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--pass-tint); color: var(--pass); }
.fit__i svg { width: 20px; height: 20px; }
.fit__h { font-weight: 700; font-size: 17px; line-height: 1.35; text-wrap: balance; }
.fit__p { font-size: 15px; line-height: 1.5; color: var(--ink-a60); }
.fit__h + .fit__p { margin-top: var(--s-4); }
.fit--empty .fit__p { align-self: center; }
.fit__papers, .fit__you { border-top: 1px solid var(--ink-a10); padding-top: var(--s-16); }
.fit__papers { display: grid; gap: var(--s-12); }
.fit__l { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-a60); }
.fit__docs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-12) var(--s-24); }
.fit__docs li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s-10); align-items: start; }
.fit__docs svg { width: 16px; height: 16px; margin-top: 3px; color: var(--pass); }
.fit__docs b { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; }
.fit__docs span { display: block; font-size: 14px; line-height: 1.45; color: var(--ink-a60); }
.fit__you { font-size: 14px; line-height: 1.45; color: var(--ink-a60); }
.fit--empty { background: var(--white); border-style: dashed; border-color: var(--ink-a20); }
.fit--empty .fit__i { background: var(--ink-a05); color: var(--ink-a40); }
/* a smaller shield on a telephone, so the words keep their width */
@media (max-width: 560px) {
  .fit__head { grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-12); }
  .fit__i { width: 32px; height: 32px; }
  .fit__i svg { width: 17px; height: 17px; }
}
@media (min-width: 768px) {
  .fit { padding: var(--s-24) var(--s-28); }
  .fit__docs { grid-template-columns: 1fr 1fr; }
}

/* ---- the compliance panel: the edge, stated once ----------------------- */
.edge { border: 1px solid var(--ink-a15); border-radius: var(--r-16); background: var(--white); padding: var(--s-24); display: grid; gap: var(--s-16); }
.edge__head { display: grid; gap: var(--s-6); }
.edge__std { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.edge__note { font-size: 14px; color: var(--ink-a60); }
/* Flex rather than a column grid: grid-auto-flow:column cannot wrap, so the
   two halves of this line insisted on one 389px row and scrolled the whole
   order form sideways at 390. They sit side by side wherever there is room
   and stack where there is not. */
.pass-line { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: baseline; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
@media (min-width: 768px) { .pass-line { font-size: 26px; } }

/* a standard: the chip, and the info card that opens above it on hover,
   focus or tap */
.std { position: relative; display: inline-block; }
.of-chip { display: inline-flex; align-items: center; gap: var(--s-6); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; padding: var(--s-6) var(--s-10); border-radius: var(--r-4); background: var(--pass-tint); color: var(--pass); white-space: nowrap; cursor: help; transition: background-color var(--t-link); }
.of-chip i { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; flex-shrink: 0; }
.of-chip--warn { background: #F6EBD8; color: var(--warn); }
.of-chip--plain { background: var(--ink-a05); color: var(--ink-a70); }
.std:hover .of-chip, .std:focus-within .of-chip, .std[data-open="true"] .of-chip { background: var(--ink); color: var(--white); }
.of-tip {
  display: none; position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30;
  width: min(340px, calc(100vw - 2 * var(--gutter))); padding: var(--s-16) var(--s-20);
  border-radius: var(--r-16); background: var(--white); border: 1px solid var(--ink-a15);
  box-shadow: var(--shadow-card); text-align: left; white-space: normal; cursor: default;
  font-family: var(--font-body); letter-spacing: 0.14px;
}
.of-tip--right { left: auto; right: 0; }
.std:hover .of-tip, .std:focus-within .of-tip, .std[data-open="true"] .of-tip { display: grid; gap: var(--s-8); }
.of-tip__code { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.of-tip__name { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
.of-tip__body { font-size: 14px; line-height: 1.5; color: var(--ink-a70); }
.of-tip__status { display: inline-flex; align-items: center; gap: var(--s-6); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--pass); }
.of-tip__status i { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
.of-tip__status--warn { color: var(--warn); }
.of-tip__status--plain { color: var(--ink-a70); }

/* a single quiet compliance line under a step, never a panel */
.step-note { display: grid; grid-template-columns: auto 1fr; gap: var(--s-10); align-items: start; font-size: 14px; color: var(--ink-a70); padding-top: var(--s-4); }
.step-note svg { width: 16px; height: 16px; margin-top: 3px; color: var(--pass); flex-shrink: 0; }

/* ---- the same mix again ------------------------------------------------ */
/* Sits above the first step when the form was opened from a buyer's own order
   page. It says where the lines came from, so nobody wonders why a form they
   have not touched is already full. */
.of-again { margin: 0 0 var(--s-24); padding: var(--s-14) var(--s-16); font-size: 14px; line-height: 1.5;
  color: var(--ink-a70); background: var(--tint-card); border: 1px solid var(--ink-a15);
  border-radius: var(--r-16); }
.of-again b { color: var(--ink); font-weight: 600; }
.of-again[data-state="bad"] { border-color: var(--ink-a40); }
/* The offer to a buyer who came back: the way on reads as the thing to press,
   and the way out stays quiet next to it without hiding. */
.of-again__go { color: var(--ink); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; }
.of-again__no { margin-left: var(--s-10); padding: 0; border: 0; background: none;
  font: inherit; color: var(--ink-a70); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.of-again__no:hover { color: var(--ink); }

/* ---- size cards (step 2) ---------------------------------------------- */
.of-sizes { display: grid; gap: var(--s-12); }
@media (min-width: 640px) { .of-sizes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .of-sizes { grid-template-columns: repeat(3, 1fr); } }
.size-card { position: relative; display: grid; gap: var(--s-10); padding: var(--s-20); padding-right: var(--s-48); border: 1px solid var(--ink-a15); border-radius: var(--r-16); background: var(--white); cursor: pointer; transition: border-color var(--t-hover), background-color var(--t-hover); }
.size-card:hover { border-color: var(--ink-a40); }
.size-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.size-card:has(input:checked) { border-color: var(--ink); background: var(--tint-card); box-shadow: inset 0 0 0 1px var(--ink); }
.size-card:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.size-card__name { font-family: var(--font-display); font-weight: 400; font-size: 17px; letter-spacing: -.01em; line-height: 1.2; }
.size-card__cm { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.size-card__cm span { font-size: 15px; font-weight: 400; color: var(--ink-a60); margin-left: var(--s-6); font-family: var(--font-mono); letter-spacing: 0; }
.size-card__kv { display: flex; justify-content: space-between; gap: var(--s-12); font-size: 13px; }
.size-card__kv span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); align-self: center; }
.size-card__kv b { font-weight: 600; text-align: right; }
.size-card__lines { font-size: 13px; color: var(--ink-a60); line-height: 1.4; }
/* the "most popular" sticker: Apron's stamp, at pocket size */
.of-sticker { position: absolute; top: -12px; left: 14px; transform: rotate(-4deg); background: var(--accent); color: var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: var(--s-6) var(--s-10); border-radius: var(--r-pill); filter: drop-shadow(var(--shadow-drop)); pointer-events: none; }

/* ---- the tier ladder --------------------------------------------------- */
.ladder { display: grid; gap: var(--s-10); }
.ladder__bar { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--ink-a10); overflow: visible; }
.ladder__fill { position: absolute; inset: 0 auto 0 0; height: 8px; border-radius: var(--r-pill); background: var(--accent); transition: width var(--t-hover) var(--ease-io), background-color var(--t-hover); width: 0; }
.ladder__fill[data-met="true"] { background: var(--pass); }
.ladder__marks { position: relative; height: 18px; }
.ladder__mark { position: absolute; top: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-a60); white-space: nowrap; transform: translateX(-50%); }
.ladder__mark:first-child { transform: none; }
.ladder__mark:last-child { transform: translateX(-100%); }
.ladder__mark[data-on="true"] { color: var(--ink); font-weight: 500; }
.ladder__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-8); font-size: 14px; }

/* ---- the minimum and tier callout ------------------------------------- */
.moq {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-16) var(--s-24); align-items: center;
  padding: var(--s-24); border-radius: var(--r-16); background: var(--tint); border: 1px solid var(--ink-a10);
}
.moq[data-met="true"] { background: var(--pass-tint); border-color: rgba(47,111,94,.25); }
.moq__l { display: grid; gap: var(--s-6); }
.moq__l .t-eyebrow { color: var(--ink-a60); }
.moq__h { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -.015em; }
@media (min-width: 768px) { .moq__h { font-size: 28px; } }
.moq__sub { font-size: 14px; color: var(--ink-a70); }
.moq__save { font-size: 15px; color: var(--ink); }
.moq__save b { font-weight: 700; font-variant-numeric: tabular-nums; }
/* How much room is left in the last postal box. Quieter than the saving above
   it: useful, not a reason to buy. */
.moq__box { font-size: 15px; color: var(--ink-a60); }
.moq__box b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.moq__r { text-align: right; display: grid; gap: var(--s-2); }
.moq__n { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .moq__n { font-size: 56px; } }
.moq__nl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-a60); }
@media (max-width: 560px) { .moq { grid-template-columns: 1fr; } .moq__r { text-align: left; } }

/* ---- the "adding to" context bar --------------------------------------- */
.ctx {
  display: grid; gap: var(--s-8) var(--s-24); align-items: center;
  grid-template-columns: 1fr; padding: var(--s-14) var(--s-20);
  border: 1px solid var(--ink-a15); border-radius: var(--r-pill); background: var(--white);
}
@media (min-width: 900px) { .ctx { grid-template-columns: auto 1fr; padding-inline: var(--s-24); } }
.ctx__l { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--s-10); align-items: baseline; }
.ctx__lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.ctx__sz { font-weight: 700; }
.ctx__r { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-16); justify-content: flex-start; font-family: var(--font-mono); font-size: 13px; color: var(--ink-a70); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .ctx__r { justify-content: flex-end; } }
.ctx__r b { color: var(--ink); font-weight: 500; }
.ctx__fill { color: var(--warn); }

/* size switches inside step 3 */
.sztabs { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.sztab { display: inline-grid; grid-auto-flow: column; gap: var(--s-8); align-items: baseline; padding: var(--s-10) var(--s-16); border: 1px solid var(--ink-a20); border-radius: var(--r-pill); font-size: 15px; transition: background-color var(--t-hover), border-color var(--t-hover); }
.sztab:hover { background: var(--ink-a05); }
.sztab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.sztab em { font-family: var(--font-mono); font-style: normal; font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
/* The price, on the tab that picks the size. A buyer had to scroll to a
   collection heading to learn what a size cost, which is one scroll too many
   for the number the whole page is about. */
.sztab__pr { font-family: var(--font-mono); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.sztab__pr:empty { display: none; }

/* ---- colourway cards --------------------------------------------------- */
/* Four values, not one. A collection change has to read louder than the gap
   between two cards of the same family, and it was reading quieter: 32
   everywhere, against 16 between cards. */
.cwgroups { display: grid; gap: var(--s-32); }
.cwgroup { display: grid; gap: var(--s-12); }
@media (min-width: 900px) {
  .cwgroups { gap: var(--s-64); }
  .cwgroup { gap: var(--s-20); }
}
.cwgroup__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-8) var(--s-12); padding-bottom: var(--s-4); border-bottom: 1px solid var(--ink-a10); }
.cwgroup__h b { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
@media (min-width: 900px) { .cwgroup__h b { font-size: 24px; } }
.cwgroup__h span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
/* The running total sits next to the words it counts rather than 1,290px away
   at the far edge of the band, and it says nothing until there is something to
   say. */
.cwgroup__h em { font-style: normal; font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.cwgroup__h em[data-zero="true"] { display: none; }
/* Beside the count, not a thousand pixels away at the far edge of the rule,
   which is the fault the running total two lines above was moved to avoid. */
/* Named twice on purpose: .cwgroup__h span sets the whole label line at 11px
   in muted ink, and a price is not a label. */
.cwgroup__h .cwgroup__pr { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
/* two columns from the narrowest phone up, or step three runs to 24,000px */
.cws { display: grid; gap: var(--s-10); grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
@media (min-width: 640px) { .cws { gap: var(--s-16); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
.cw { display: grid; grid-template-rows: auto auto auto; border: 1px solid var(--ink-a15); border-radius: var(--r-16); background: var(--white); overflow: hidden; transition: border-color var(--t-hover); }
.cw[data-has="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* The twenty-eight tiles are the working surface and nothing happened when a
   cursor crossed them: .cw declared a border-color transition and no rule ever
   fired it. Scoped away from the card that already has pieces in it, whose
   border is ink and must not lighten. The scale is the colour card's own
   number, so the two grids of the same photographs behave the same way. */
@media (hover: hover) and (pointer: fine) {
  .cw:not([data-has="true"]):hover { border-color: var(--ink-a40); }
  .cw__photo img { transition: transform var(--t-hover) var(--ease-io); }
  .cw:hover .cw__photo img { transform: scale(1.035); }
}
.cw__photo { position: relative; aspect-ratio: 1; background: var(--c, var(--tint-card)); overflow: hidden; }
.cw__photo img { width: 100%; height: 100%; object-fit: cover; }
/* A cell with no product photograph shows the fleece and says so on a scrim
   along the bottom edge, the way the colour card does. It used to be a flat
   tint with a 44px disc in the middle of it, which at 210px square is what an
   image that failed to load looks like. */
.cw__ph-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw__ph {
  position: absolute; inset: 0; display: grid; align-content: end;
  padding: var(--s-20) var(--s-10) var(--s-6);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.5; color: rgba(255, 255, 255, .94);
  background: linear-gradient(to top, rgba(36, 30, 26, .78), rgba(36, 30, 26, .1) 70%, rgba(36, 30, 26, 0));
}
.cw__ph i { display: block; font-style: normal; color: rgba(255, 255, 255, .82); }
.cw__badge { position: absolute; top: var(--s-8); right: var(--s-8); font-family: var(--font-mono); font-size: 12px; font-weight: 500; padding: var(--s-4) var(--s-8); border-radius: var(--r-4); background: var(--ink); color: var(--white); font-variant-numeric: tabular-nums; }
/* A count appears when there is one. Twenty-eight zeros in a regular grid is
   not information, it is upholstery. */
.cw__badge[data-zero="true"] { display: none; }
.cw__meta { padding: var(--s-10) var(--s-10) var(--s-6); display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .cw__meta { padding: var(--s-12) var(--s-14) var(--s-8); } }
.cw__nm { font-weight: 700; font-size: 14px; line-height: 1.25; }
@media (min-width: 640px) { .cw__nm { font-size: 15px; } }
/* .cw__ln is gone from the markup: it printed the collection name on every
   card twelve pixels under a heading that says it. */
.cwgroup__lede {
  margin: 0; align-self: start; padding: var(--s-4) var(--s-8) 0 0;
  font-size: 15px; line-height: 1.5; color: var(--ink-a70); max-width: 46ch;
}
.cwgroup__lede[hidden] { display: none; }
.cw__ctl { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-4); align-items: center; padding: 0 var(--s-10) var(--s-10); }
@media (min-width: 640px) { .cw__ctl { grid-template-columns: 32px 1fr; gap: var(--s-6); padding: 0 var(--s-14) var(--s-14); } }
.cw__minus { width: 28px; height: 28px; border-radius: var(--r-pill); border: 1px solid var(--ink-a20); display: grid; place-items: center; transition: background-color var(--t-link); }
@media (min-width: 640px) { .cw__minus { width: 32px; height: 32px; } }
.cw__minus:hover { background: var(--ink-a05); }
/* Hidden, not ghosted, and still holding its 32px track so the add row does
   not shift under the cursor when the first piece lands. */
.cw__minus:disabled { visibility: hidden; pointer-events: none; }
/* 16, not 12. The symbol spans 16 of its 24 units, so this is a line 10.7px
   long and 2px thick: about the ink of the +1 beside it, which is what the
   two have to have if they are to read as one row of controls. */
.cw__minus svg { width: 16px; height: 16px; }
.cw__adds { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.of-add {
  min-height: 28px; border-radius: var(--r-4); border: 1px solid var(--ink-a15); background: var(--tint-card);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  transition: background-color var(--t-link), border-color var(--t-link);
}
@media (min-width: 640px) { .of-add { min-height: 32px; font-size: 12px; } }
/* The accent is what the cursor produces, not what the page is made of. It
   was filled on the +25 of every card, so the Small tab showed twenty-eight
   fawn chips on a minor increment, while the one control that moves a buyer
   forward sat at forty per cent opacity as pale fawn on a pale fawn bar. +25
   separates on weight and an edge instead. */
.of-add:hover { background: var(--accent); border-color: var(--accent); }
.of-add--big { font-weight: 700; border-color: var(--ink-a30); }
.of-add--big:hover { background: var(--accent); border-color: var(--accent); }
.cw__floor { grid-column: 1 / -1; font-size: 11px; line-height: 1.35; color: var(--warn); font-family: var(--font-mono); letter-spacing: .02em; }

/* ---- line list (step 3 tail and the file) ------------------------------ */
.of-lines { display: grid; }
.of-lines li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto auto; gap: var(--s-12); align-items: center; padding-block: var(--s-12); border-bottom: 1px solid var(--ink-a10); }
.of-lines li:last-child { border-bottom: 0; }
/* a size heading, carrying the carton count for that size, because a carton
   holds one size and a per-line carton figure would be meaningless */
.of-lines li.grp { grid-template-columns: 1fr auto; gap: var(--s-12); padding-block: var(--s-16) var(--s-8); border-bottom: 1px solid var(--ink-a20); }
.of-lines li.grp:first-child { padding-top: 0; }
.of-lines .grp b { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.of-lines .grp span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-a60); font-variant-numeric: tabular-nums; }
.of-lines .dot { width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--c); border: 1px solid var(--ink-a15); background-size: cover; background-position: center; }
.of-lines .nm { font-weight: 600; font-size: 15px; }
.of-lines .mt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.of-lines .qt { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.of-lines .qt small { display: block; font-size: 11px; color: var(--ink-muted); letter-spacing: .06em; text-transform: uppercase; }
.of-lines .rm { width: 32px; height: 32px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--ink-a40); transition: background-color var(--t-link), color var(--t-link); }
.of-lines .rm:hover { background: var(--ink-a05); color: var(--ink); }
.of-lines .rm svg { width: 12px; height: 12px; }
/* the same 32px the remove button takes, so a printed file and a live one
   line up column for column */
.of-lines .rm-gap { width: 32px; }

/* ---- what each line, and the file, comes to ---------------------------- */
.of-lines .amt { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.of-lines .amt small { display: block; font-size: 10px; color: var(--ink-muted); letter-spacing: .06em; text-transform: uppercase; }

.of-lines li.tot {
  grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  padding-block: var(--s-16) var(--s-8); border-bottom: 0;
  border-top: 1px solid var(--ink-a20);
}
.of-lines .tot b { display: grid; gap: 3px; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.of-lines .tot b small { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.of-lines .tot__v { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the fee row is bookkeeping, not the headline */
.of-lines li.tot--sub { padding-block: var(--s-12) 0; border-top: 1px solid var(--ink-a10); }
.of-lines .tot--sub b { font-family: var(--font-body); font-weight: 600; font-size: 14px; }
.of-lines .tot--sub .tot__v { font-family: var(--font-mono); font-weight: 400; font-size: 14px; }
.of-lines li.tot--sub + li.tot { border-top: 0; padding-top: var(--s-10); }

/* Five columns do not fit a phone. Two rows instead: the name on the first
   with the remove button, the count and the money on the second. Both of
   those sit in the same grid area at opposite ends of it, so neither one is
   sizing a column that squeezes the name above it. */
@media (max-width: 619px) {
  .of-lines li { grid-template-columns: 28px minmax(0, 1fr) 32px; row-gap: var(--s-6); column-gap: var(--s-10); }
  .of-lines li > .dot { grid-area: 1 / 1; }
  /* by class, not by position: a size heading and a total row are also an
     li whose second child is a span, and placing those put them in a column
     that does not exist on those rows */
  .of-lines .who { grid-area: 1 / 2; }
  .of-lines .rm, .of-lines .rm-gap { grid-area: 1 / 3; justify-self: end; }
  .of-lines .qt { grid-area: 2 / 2 / 3 / 4; justify-self: start; text-align: left; }
  .of-lines .amt { grid-area: 2 / 2 / 3 / 4; justify-self: end; font-size: 12.5px; }
  .of-lines .qt small { display: inline; margin-left: 5px; }
  /* the per-line "exw" goes: the total underneath already says it once */
  .of-lines .amt small { display: none; }
  /* the carton line is longer than the size it belongs to, so it goes under
     it rather than fighting it for the row */
  .of-lines li.grp { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  /* same for the totals: the label keeps the line, the money keeps the right */
  .of-lines li.tot { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); }
  .of-lines .tot__v { font-size: 19px; text-align: right; }
}
.of-empty { padding: var(--s-24); border: 1px dashed var(--ink-a20); border-radius: var(--r-16); font-size: 15px; color: var(--ink-a60); }

/* ---- the quotation order: the file the buyer keeps --------------------- */
/* One table read left to right: what it is, the code it goes by, how many,
   what one costs, what the line comes to. The columns are the same on every
   row and under the heading, so a figure lines up with the one above it. */
.of-lines--file li.fl,
.of-lines--file li.fl-head {
  grid-template-columns: 40px minmax(0, 1.5fr) minmax(0, 1fr) 72px 112px 104px;
  column-gap: var(--s-16);
}
.of-lines--file li.fl { padding-block: var(--s-16); }
.of-lines--file li.fl-head { padding-block: 0 var(--s-8); border-bottom: 0; }
.of-lines--file .fl-head span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
}
.of-lines--file .fl-head span:nth-child(n+4) { text-align: right; }
.of-lines--file li.fl-head + li.grp { padding-top: var(--s-12); }
.of-lines--file .dot { width: 40px; height: 40px; }
.of-lines--file .who { display: grid; gap: 2px; min-width: 0; }
.of-lines--file .sku { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-a70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-lines--file .qt { font-size: 15px; }
.of-lines--file .qt small { display: none; }
.of-lines--file .each { font-family: var(--font-mono); font-size: 13px; color: var(--ink-a70); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.of-lines--file .amt { font-size: 15px; color: var(--ink); }
.of-lines--file li.tot { padding-top: var(--s-20); }

/* A telephone: the name and the line total on the first row, the code under
   the name, then how many against what one costs. */
@media (max-width: 767px) {
  .of-lines--file li.fl-head { display: none; }
  .of-lines--file li.fl {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: "dot who amt" "dot sku sku" "dot qt each";
    row-gap: var(--s-4); column-gap: var(--s-12); align-items: start;
  }
  .of-lines--file li.fl > .dot { grid-area: dot; align-self: start; }
  .of-lines--file li.fl .who { grid-area: who; }
  .of-lines--file li.fl .sku { grid-area: sku; }
  .of-lines--file li.fl .qt { grid-area: qt; justify-self: start; text-align: left; font-size: 13px; margin-top: var(--s-4); }
  .of-lines--file li.fl .qt small { display: inline; margin-left: 5px; }
  .of-lines--file li.fl .each { grid-area: each; margin-top: var(--s-4); }
  .of-lines--file li.fl .amt { grid-area: amt; justify-self: end; font-size: 15px; }
}

/* ---- panels ------------------------------------------------------------ */
.of-panel { border: 1px solid var(--ink-a15); border-radius: var(--r-16); background: var(--white); padding: var(--s-24); display: grid; gap: var(--s-16); }
.of-panel--tint { background: var(--tint-card); }
.of-panel .rule-dotted { color: var(--ink-a30); }
.of-panel__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-8) var(--s-16); }

/* ---- the terms grid ---------------------------------------------------- */
.of-terms { display: grid; gap: 0 var(--s-32); }
@media (min-width: 768px) { .of-terms { grid-template-columns: 1fr 1fr; } }
/* Label and value share the row by what each needs, the way .specs__list
   rows do (components.css): a short label stays on one line and the value
   wraps beside it, balanced. As two shrinking flex items they both gave way,
   and PAYMENT 1 broke after PAYMENT at 390. */
.of-terms div {
  display: grid; grid-template-columns: auto minmax(min-content, max-content); column-gap: var(--s-16);
  padding-block: var(--s-10); border-bottom: 1px solid var(--ink-a10);
}
.of-terms span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); align-self: center; }
.of-terms b { font-family: var(--font-mono); font-size: 13px; font-weight: 400; text-align: right; text-wrap: balance; }

/* ---- the file screen --------------------------------------------------- */
.of-refbox { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--s-12); align-items: center; }
.of-refbox b { font-family: var(--font-mono); font-size: 20px; letter-spacing: .06em; padding: var(--s-8) var(--s-12); background: var(--tint); border-radius: var(--r-4); }
.of-next { display: grid; gap: var(--s-16); counter-reset: n; }
.of-next li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-16); align-items: start; }
.of-next li::before { counter-increment: n; content: counter(n); display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--tint); font-family: var(--font-mono); font-size: 13px; }
.of-payload { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; background: var(--ink); color: #E9E4DA; padding: var(--s-16); border-radius: var(--r-8); max-height: 340px; overflow: auto; }
.of-panel details > summary { cursor: pointer; font-weight: 600; font-size: 15px; padding-block: var(--s-8); }

/* ---- the sticky summary bar ------------------------------------------- */
.of-foot { position: sticky; bottom: 0; z-index: 20; background: var(--tint); border-top: 1px solid var(--ink-a10); }
.of-foot__in { display: grid; gap: var(--s-12); align-items: center; min-height: var(--foot-h); padding-block: var(--s-10); grid-template-columns: 1fr; }
@media (min-width: 900px) { .of-foot__in { grid-template-columns: 1fr auto; } }
.of-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12) var(--s-32); min-width: 0; }
/* Four numbers and three buttons will not fit a phone. Below 560 the bar
   keeps the two a buyer is actually watching. */
@media (max-width: 559px) { .of-sum__cell:nth-child(2), .of-sum__cell:nth-child(3) { display: none; } }
@media (min-width: 560px) { .of-sum { grid-template-columns: repeat(4, max-content); } }
.of-sum__cell { display: grid; gap: var(--s-2); }
.of-sum__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-a60); }
.of-sum__v { font-family: var(--font-mono); font-size: 16px; font-variant-numeric: tabular-nums; }
.of-sum__cell--big .of-sum__v { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
/* The zero state: no tier and no price yet, so those two cells stand down and
   the piece count takes the display treatment. Above 560 only, because below
   it the two middle cells are already hidden. */
@media (min-width: 560px) {
  .of-foot__in[data-empty="true"] .of-sum__cell:nth-child(3),
  .of-foot__in[data-empty="true"] .of-sum__cell:nth-child(4) { display: none; }
  .of-foot__in[data-empty="true"] .of-sum__cell:first-child .of-sum__v {
    font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em;
  }
}
.of-nav { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--s-12); align-items: center; justify-content: end; }
.of-nav__pos { font-family: var(--font-mono); font-size: 13px; color: var(--ink-a60); }
@media (max-width: 560px) { .of-nav { grid-auto-columns: auto; } .of-nav__pos { display: none; } }
/* On a telephone the bar is two rows: what is in the order beside the button
   that shows it, then back and forward. Three buttons in one row fitted no
   telephone: the labels broke over two lines, the main button hung off the
   right edge and the whole form slid sideways (measured on 16 September at
   320 to 430 pixels, English and Spanish). The nav lends its buttons to the
   bar's grid for this, so nothing moves in the markup. */
@media (max-width: 560px) {
  .of-foot__in {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "sum sum view" "back next next";
    gap: var(--s-10) var(--s-8);
  }
  .of-sum { grid-area: sum; column-gap: var(--s-16); }
  /* the two numbers on one line, however many lines a label takes */
  .of-sum__cell { align-content: end; }
  .of-sum__more { display: none; }
  .of-nav { display: contents; }
  .of-nav__view { grid-area: view; align-self: center; }
  .of-foot__in #back { grid-area: back; }
  .of-foot__in #next { grid-area: next; }
  .of-foot__in:has(#back[hidden]) #next { grid-column: 1 / -1; }
  .of-nav .btn { white-space: nowrap; min-height: 46px; }
  .of-nav .btn--secondary { min-width: 0; padding-inline: var(--s-16); }
  .of-nav .btn--primary { min-width: 0; padding-inline: var(--s-16); }
}
/* Narrower still, Back is its arrow alone, so the main button keeps its words
   on one line: "Enviar para cotización" did not fit beside it at 360. The
   word stays in the button for a screen reader. */
@media (max-width: 380px) {
  .of-foot__in #back { position: relative; width: 46px; padding: 0; gap: 0; }
  .of-foot__in #back .of-nav__lbl {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 340px) {
  .of-nav .btn { font-size: 14px; }
  .of-nav .btn--secondary { padding-inline: var(--s-12); }
}

/* ---- print: the file only --------------------------------------------- */
@media print {
  /* Everything that only works on a screen. .of-head is the one that was
     missing: it is the form's own sticky header, it is not .site-head, and it
     printed across the middle of the first page with the wordmark on it. */
  .of-head, .site-head, .mobile-menu, .footer, .of-foot, .noprint, .chakana,
  .of-sheet { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .of-body { padding: 0; }
  .of-panel { box-shadow: none; }
  /* A panel taller than a page cannot avoid a break, and asking it to is what
     moved the whole order file to page two and left page one nearly empty. So
     the rule belongs on the things that do fit on one page. */
  .opt, .cw, .of-terms > div, .of-lines > li, .of-next li { break-inside: avoid; box-shadow: none; }
  .of-payload { display: none; }
  .section { padding-inline: 0; }
  /* Two columns of label and value become one column of nonsense when the grid
     breaks across pages: the values slide up against the wrong labels. One
     column on paper, where there is no hurry. */
  .of-terms, .of-sum { grid-template-columns: 1fr !important; }
}

/* ===========================================================================
   ROUND 3 · four steps, a price on every card, and the order on top
   =========================================================================== */

/* ---- The View order button, in the head and in the sticky bar ------------- */
.of-head__end { display: flex; align-items: center; gap: var(--s-12); margin-left: auto; }
.of-view {
  display: inline-flex; align-items: center; gap: var(--s-8);
  padding: 9px var(--s-14) 9px var(--s-12); border-radius: var(--r-pill);
  border: 1px solid var(--ink-a15); background: var(--white);
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--t-link), background-color var(--t-link);
}
.of-view:hover { border-color: var(--ink-a40); }
.of-view svg { width: 15px; height: 15px; fill: var(--ink-a30); transition: fill var(--t-link); }
.of-view[data-any="true"] svg { fill: var(--accent); }
.of-view b {
  min-width: 22px; padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--ink-a05); font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  text-align: center;
}
.of-view[data-any="true"] b { background: var(--accent); }
@media (max-width: 900px) { .of-head__end .of-view { display: none; } }

.of-nav__view { display: none; }
@media (max-width: 900px) { .of-nav__view { display: inline-grid; } }

/* ---- The price on a colourway card ---------------------------------------- */
.cw__pr {
  display: block; margin-top: 3px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: -.01em;
  color: var(--ink-a70); white-space: nowrap;
}
.cw__pr i {
  font-style: normal; margin-left: 5px; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-a30);
}

/* ---- Which tier those numbers are ----------------------------------------- */
/* .of-priceline is gone: a full-width tinted bar saying in a sentence what the
   ladder under it draws, in a run of four blocks that all said the minimum. Its
   two facts sit on the ladder now. */
/* Not the faintest text on the page: it carries the two commercial facts about
   pricing, and at 11px tracked caps in --ink-a40 it measured about 2.8:1 and
   merged with the track under it. */
.ladder__note {
  flex: 1 0 100%; order: 3;
  font-size: 14px; line-height: 1.5; color: var(--ink-a70);
}

/* ---- The order, over the top ----------------------------------------------
   A real dialog rather than a drawer glued to the side: the buyer is checking
   one thing and going back, and covering the form entirely is the honest way
   to say so.
   --------------------------------------------------------------------------- */
.of-sheet { position: fixed; inset: 0; z-index: 90; display: grid; }
.of-sheet__scrim { position: absolute; inset: 0; background: rgba(36, 30, 26, .52); }
.of-sheet__panel {
  position: relative; z-index: 1;
  width: min(760px, 100%); max-height: 100%; margin: auto;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--paper); border-radius: var(--r-20);
  box-shadow: 0 30px 80px rgba(36, 30, 26, .34);
  animation: sheet-in .32s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px) scale(.99); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .of-sheet__panel { width: 100%; max-height: 92%; margin: auto 0 0; border-radius: var(--r-20) var(--r-20) 0 0; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
}

.of-sheet__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-16);
  padding: var(--s-24) var(--s-24) var(--s-16);
  border-bottom: 1px solid var(--ink-a10);
}
.of-sheet__head h2 { margin: var(--s-4) 0 0; }
.of-sheet__x {
  flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--ink-a15);
  background: var(--white); cursor: pointer;
}
.of-sheet__x svg { width: 14px; height: 14px; }

.of-sheet__body { overflow-y: auto; padding: var(--s-8) var(--s-24) var(--s-16); }
.of-sheet__empty { margin: var(--s-24) 0; color: var(--ink-a40); font-size: 15px; }
.of-sheetlines { list-style: none; margin: 0; padding: 0; }

.of-sl {
  display: grid; align-items: center; gap: var(--s-8) var(--s-12);
  grid-template-columns: 48px minmax(0, 1fr) auto;
  padding: var(--s-12) 0; border-bottom: 1px dotted var(--ink-a20);
}
@media (min-width: 620px) {
  .of-sl { grid-template-columns: 48px minmax(0, 1fr) auto 116px 108px 28px; }
}
.of-sl__sw {
  width: 48px; height: 48px; border-radius: var(--r-4); overflow: hidden;
  background: var(--ink-a10);
}
.of-sl__sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.of-sl__id { display: grid; gap: 2px; min-width: 0; }
.of-sl__id b { font-size: 15px; }
.of-sl__id em {
  font-style: normal; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .02em; color: var(--ink-a40);
}
.of-sl__ea {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-a70); white-space: nowrap;
}
.of-sl__ea i {
  font-style: normal; display: block; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-a30);
}
.of-sl__qty { display: inline-flex; align-items: center; gap: 2px; }
.of-sl__qty button {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--ink-a15);
  background: var(--white); cursor: pointer;
}
.of-sl__qty button svg { width: 14px; height: 14px; }  /* same reason, smaller button */
.of-sl__qty b {
  min-width: 46px; text-align: center;
  font-family: var(--font-mono); font-size: 14px; font-weight: 400;
}
.of-sl__tot {
  font-family: var(--font-mono); font-size: 12.5px; text-align: right; white-space: nowrap;
}
.of-sl__x {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: none; background: none; cursor: pointer; color: var(--ink-a30);
  border-radius: var(--r-pill);
}
.of-sl__x:hover { color: var(--ink); background: var(--ink-a05); }
.of-sl__x svg { width: 11px; height: 11px; }
/* On a phone the line stacks under its own thumbnail: identity, unit price,
   the stepper, then what the line comes to. The remove button keeps the
   third column to itself so it never lands under a thumb aiming at plus. */
@media (max-width: 619px) {
  .of-sl { grid-template-columns: 48px minmax(0, 1fr) 28px; gap: var(--s-6) var(--s-12); }
  .of-sl__sw { grid-column: 1; grid-row: 1; }
  .of-sl__id { grid-column: 2; grid-row: 1; }
  .of-sl__x { grid-column: 3; grid-row: 1; align-self: start; }
  .of-sl__ea { grid-column: 2 / -1; grid-row: 2; font-size: 11px; }
  .of-sl__ea i { display: inline; margin-left: 5px; }
  .of-sl__qty { grid-column: 2 / -1; grid-row: 3; }
  .of-sl__tot { grid-column: 2 / -1; grid-row: 4; text-align: left; }
}

.of-sheet__foot {
  padding: var(--s-16) var(--s-24) var(--s-24);
  border-top: 1px solid var(--ink-a10); background: var(--tint-card);
  border-radius: 0 0 var(--r-20) var(--r-20);
}
.of-sheet__sum {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12) var(--s-16); margin: 0;
}
@media (min-width: 620px) { .of-sheet__sum { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.of-sheet__sum > div { display: grid; gap: 3px; min-width: 0; }
.of-sheet__sum dt {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-a40);
}
.of-sheet__sum dd { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 16px; }
.of-sheet__big { grid-column: 1 / -1; }
.of-sheet__big dd { font-family: var(--font-mono); font-weight: 400; font-size: clamp(18px, 3vw, 24px); }
.of-sheet__fine { margin: var(--s-12) 0 var(--s-16); font-size: 12.5px; color: var(--ink-a40); }
.of-sheet__acts { display: flex; flex-wrap: wrap; gap: var(--s-10); align-items: center; }
.of-sheet__acts .btn { width: auto; }