/* ==========================================================================
   North Furnishings - About, Visit & contact, Cart and 404 (v2 "The Floor").
   Builds on the tokens and components in styles.css. Mobile first; every
   multi-column layout declares its narrow fallback first.
   ========================================================================== */

/* Dark scheme: white text on the stock dark vermillion (#d9513b) is 4.05:1, under AA
   for button labels. This darker step is 5.0:1. Proposed for styles.css; remove here then. */
@media (prefers-color-scheme: dark) {
  :root { --red: #c4432e; }
}

/* ---------- Shared page pieces ---------- */
/* Poster type: the condensed signage voice used for page titles and big moments. */
.poster {
  font-family: var(--font-display); font-stretch: 62%; font-weight: 900;
  text-transform: uppercase; line-height: 0.86; letter-spacing: -0.012em;
  color: var(--fg); text-wrap: balance; margin: 0;
}
.chip-wrap { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn--outline-light { background: transparent; color: var(--on-red); border-color: var(--on-red); }
.btn--outline-light:hover { background: var(--on-red); border-color: var(--on-red); color: #141413; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 519px) {
  .btn-row .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.ab-hero { padding-bottom: var(--s-6); }
.ab-hero .eyebrow { margin: var(--s-4) 0 var(--s-4); }
.ab-hero__title { font-size: clamp(2.9rem, 0.6rem + 6.5vw, 6.6rem); }

/* Story: photo bleeds off the left edge, the first sentence sits big beside it,
   the rest of the copy runs in two editorial columns underneath. */
.ab-story { padding-bottom: var(--section); }
.ab-story__grid { display: grid; gap: var(--s-6); }
.ab-portrait { margin: 0 calc(-1 * var(--gutter)); display: flex; flex-direction: column; }
.ab-portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 72%; background: var(--bg-2); }
.ab-portrait__tag {
  align-self: flex-start; position: relative; z-index: 1;
  margin: -1.4rem var(--gutter) 0 calc(var(--gutter) - 0.2rem);
  white-space: normal; font-size: clamp(1.05rem, 0.9rem + 0.55vw, 1.45rem); line-height: 1.05;
  transform: rotate(-2deg); transform-origin: 0.7rem 50%;
}
.ab-story__lead {
  font-family: var(--font-display); font-stretch: 72%; font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3.6rem); line-height: 1; letter-spacing: -0.015em;
  color: var(--fg); max-width: 20ch; margin: var(--s-4) 0 0; text-wrap: balance;
}
.ab-story__cols p { max-width: 62ch; color: var(--fg-2); }
.ab-story__cols p:last-child { margin-bottom: 0; }
@media (min-width: 720px) {
  .ab-portrait img { aspect-ratio: 4 / 3; }
  .ab-story__cols { columns: 2; column-gap: var(--s-6); }
  .ab-story__cols p { max-width: none; }
  .ab-story__cols p:first-child { margin-top: 0; }
}
@media (min-width: 1000px) {
  .ab-story__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-7); align-items: end; }
  .ab-portrait {
    grid-column: 1 / 8;
    margin: 0 0 0 calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter)));
  }
  .ab-portrait img { aspect-ratio: 1; max-height: 86vh; }
  .ab-portrait__tag { margin-left: max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter)); }
  .ab-story__lead { grid-column: 8 / 13; margin: 0 0 var(--s-8); }
  .ab-story__cols { grid-column: 5 / 13; column-gap: var(--s-7); }
}

/* Browse: signage-scale links with mono counts */
.ab-browse { padding-bottom: var(--section); }
.ab-index { display: grid; gap: var(--s-2); border-top: var(--rule); padding-top: var(--s-5); }
.ab-index a {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); min-height: 44px;
  color: var(--fg); text-decoration: none;
  font-family: var(--font-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.6rem, 1.1rem + 5.6vw, 7.2rem); line-height: 0.92; letter-spacing: -0.012em;
}
.ab-index__name {
  background: linear-gradient(var(--red), var(--red)) no-repeat 0 100% / 0 0.07em;
  transition: background-size 0.35s var(--ease), color 0.2s var(--ease);
}
.ab-index a:hover .ab-index__name, .ab-index a:focus-visible .ab-index__name { color: var(--red-ink); background-size: 100% 0.07em; }
.ab-index__n {
  font-family: var(--font-mono); font-stretch: 100%; font-weight: 500; text-transform: none;
  font-size: clamp(0.85rem, 0.75rem + 0.35vw, 1.1rem); line-height: 1; letter-spacing: 0.02em;
  color: var(--red-ink); padding-top: 0.45em; font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) {
  .ab-index { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); }
  .ab-index a { justify-content: flex-start; gap: 0.4rem; }
}

/* Review: one big quote, set off-axis */
.ab-quote__fig { display: grid; gap: var(--s-3); max-width: 62rem; }
.ab-quote__fig::before { height: auto; font-size: clamp(6rem, 4rem + 6vw, 11rem); line-height: 0.62; margin-bottom: calc(-1 * var(--s-3)); }
.ab-quote__fig blockquote p {
  font-stretch: 72%; font-weight: 800; font-size: clamp(1.7rem, 1.05rem + 2.7vw, 3.9rem);
  line-height: 1.02; letter-spacing: -0.012em; max-width: 24ch; text-wrap: balance;
}
.ab-quote__fig figcaption { margin-top: var(--s-3); color: var(--fg-2); }
@media (min-width: 1000px) {
  .ab-quote__fig { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-6); margin-left: 16%; }
  .ab-quote__fig::before { grid-row: 1 / 3; margin: 0; }
}

/* Closing colour band */
.ab-band { padding-block: var(--section); }
.ab-band__inner { display: grid; gap: var(--s-6); }
.ab-band__title { color: var(--on-red); font-size: clamp(2.3rem, 1.1rem + 4.2vw, 5.4rem); max-width: 20ch; line-height: 0.9; }
.ab-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.ab-band__count { margin: var(--s-4) 0 0; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.02em; color: var(--on-red); }
.ab-band :focus-visible { outline-color: var(--on-red); }
@media (max-width: 519px) { .ab-band__actions .btn { flex: 1 1 100%; } }
@media (min-width: 1000px) {
  .ab-band__inner { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: var(--s-8); }
  .ab-band__actions { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   VISIT & CONTACT
   ========================================================================== */
.vz-hero { padding-bottom: var(--section); }
.vz-hero__grid { display: grid; gap: var(--s-7); padding-top: var(--s-3); }
.vz-hero__title { font-size: clamp(3.3rem, 1rem + 9.6vw, 10rem); }
.vz-address {
  font-style: normal; font-family: var(--font-display); font-stretch: 72%; font-weight: 800;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1; letter-spacing: -0.012em; color: var(--fg);
  margin: var(--s-6) 0 var(--s-3);
}
.vz-hero__where { color: var(--fg-2); margin-bottom: var(--s-6); }
.vz-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 519px) { .vz-hero__actions .btn { flex: 1 1 100%; } }
@media (min-width: 1000px) {
  .vz-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--s-8); }
}

/* The shop-door hours sign. Fixed off-black in both schemes; framed in dark mode. */
.vz-sign {
  background: #141413; color: #f3f3f0; border: 2px solid var(--fg);
  padding: var(--s-5) var(--s-5) var(--s-4);
}
.vz-sign__h {
  display: block; margin: 0 0 var(--s-4); padding-bottom: var(--s-3); border-bottom: 2px solid #3a3a37;
  font-family: var(--font-mono); font-stretch: 100%; font-size: var(--step--2); font-weight: 500; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase; color: #b4b4ac;
}
.vz-sign__rows { display: grid; gap: var(--s-1); margin: 0; }
.vz-sign__row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  margin-inline: calc(-1 * var(--s-3)); padding: 0.4rem var(--s-3) 0.3rem;
  font-family: var(--font-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.2rem); line-height: 0.95; letter-spacing: -0.005em;
}
.vz-sign__row dt, .vz-sign__row dd { margin: 0; }
.vz-sign__row dd { font-variant-numeric: tabular-nums; }
.vz-sign__row.is-closed dd { color: #b4b4ac; }
.vz-sign__row.is-today { background: #c4432e; color: #ffffff; }
.vz-sign__row.is-today dd { color: #ffffff; }
.vz-sign__today {
  display: block; margin-top: 0.3rem;
  font-family: var(--font-mono); font-stretch: 100%; font-size: 0.7rem; font-weight: 500; line-height: 1;
  letter-spacing: 0.14em;
}
.vz-sign__foot {
  margin: var(--s-4) 0 0; font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.1em; text-transform: uppercase; color: #b4b4ac;
}

/* Photo + map diptych, edge to edge */
.vz-map__grid { display: grid; }
.vz-map__photo { margin: 0; background: var(--bg-2); }
.vz-map__photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vz-map__panel {
  display: flex; flex-direction: column; gap: var(--s-5);
  background: var(--red); color: var(--on-red); padding: var(--s-7) var(--gutter);
}
.vz-map__title { color: var(--on-red); font-size: clamp(2.5rem, 1.3rem + 4.2vw, 5.6rem); }
.vz-map__frame {
  position: relative; flex: 1 1 auto; display: grid; place-items: center;
  min-height: 300px; padding: var(--s-5); border: 2px dashed var(--on-red); text-align: center;
}
.vz-map__frame:has(iframe) { border-style: solid; padding: 0; }
.vz-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg-2); }
.vz-map__card { display: grid; justify-items: center; gap: var(--s-4); }
.vz-map__pin { width: 64px; height: 64px; }
.vz-map__card p { margin: 0; max-width: 30ch; font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.5; }
.vz-map__card a, .vz-map__after a { color: var(--on-red); font-weight: 700; }
.vz-map__after { margin: 0; }
.vz-map__after a { display: inline-flex; align-items: center; min-height: 44px; }
.vz-map__panel :focus-visible { outline-color: var(--on-red); }
@media (min-width: 900px) {
  .vz-map__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: min(640px, 80vh); }
  .vz-map__photo img { aspect-ratio: auto; }
  .vz-map__panel { padding: var(--s-8) max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter)) var(--s-8) var(--s-7); }
}

/* Pickup, delivery & shipping: three hang tags on a rail */
.vz-delivery__title { font-size: var(--step-4); margin-bottom: var(--s-4); }
.vz-delivery__lede { margin-bottom: var(--s-7); }
.vz-tags { display: grid; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.vz-htag { position: relative; filter: drop-shadow(0 2px 0 var(--line)); }
.vz-htag__card {
  --notch: 1.4rem;
  position: relative; height: 100%;
  background: var(--tag); color: var(--fg-2);
  padding: calc(var(--s-7) + 0.25rem) var(--s-5) var(--s-6);
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%, 0 var(--notch));
}
.vz-htag__card::before { /* punched hole */
  content: ""; position: absolute; top: var(--s-4); left: 50%; width: 0.95rem; height: 0.95rem; margin-left: -0.475rem;
  border-radius: 50%; background: var(--bg-2); box-shadow: inset 0 0 0 2px var(--line);
}
.vz-htag__label {
  margin: 0 0 var(--s-3); font-family: var(--font-mono); font-stretch: 100%; font-size: var(--step--2); font-weight: 500;
  line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.vz-htag__key {
  margin: 0 0 var(--s-4); max-width: none;
  font-family: var(--font-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); line-height: 0.9; color: var(--fg);
}
.vz-htag__body { margin: 0; font-size: 0.98rem; }
.vz-htag--red { filter: none; }
.vz-htag--red .vz-htag__card { background: var(--red); color: var(--on-red); }
.vz-htag--red .vz-htag__card::before { box-shadow: none; }
.vz-htag--red .vz-htag__label, .vz-htag--red .vz-htag__key { color: var(--on-red); }
.vz-htag--red .vz-htag__key { font-size: clamp(4.5rem, 2.6rem + 6vw, 8.5rem); line-height: 0.82; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .vz-tags { max-width: 34rem; }
  .vz-htag:nth-child(odd) { transform: rotate(-1deg); }
  .vz-htag:nth-child(even) { transform: rotate(1deg); }
}
@media (min-width: 900px) {
  /* The rail and strings: tags hang at different drops and angles */
  .vz-tags {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 0.92fr);
    gap: var(--s-6); align-items: start; border-top: 3px solid var(--fg);
  }
  .vz-htag { --drop: 2.75rem; margin-top: var(--drop); transform-origin: 50% calc(-1 * var(--drop)); transform: rotate(var(--tilt, 0deg)); transition: transform 0.6s var(--ease); }
  .vz-htag::before { /* string from rail to hole */
    content: ""; position: absolute; z-index: 1; left: 50%; top: calc(-1 * var(--drop)); width: 2px; margin-left: -1px;
    height: calc(var(--drop) + var(--s-4) + 0.475rem); background: var(--fg);
  }
  .vz-htag:nth-child(1) { --drop: 2.5rem; --tilt: -2deg; }
  .vz-htag:nth-child(2) { --drop: 4.25rem; --tilt: 1.25deg; }
  .vz-htag:nth-child(3) { --drop: 3.25rem; --tilt: -0.75deg; }
  .vz-htag:hover { transform: rotate(0deg); }
}

.vz-final {
  display: grid; gap: var(--s-4); margin-top: var(--s-8);
  background: var(--fg); color: var(--bg); border-left: 12px solid var(--red);
  padding: var(--s-6) var(--s-5);
}
.vz-final__big { color: var(--bg); font-size: clamp(2.8rem, 1.2rem + 6.2vw, 7.4rem); line-height: 0.86; }
.vz-final__text { margin: 0; color: var(--bg); }
.vz-final a { color: inherit; font-weight: 700; text-decoration-thickness: 2px; white-space: nowrap; }
.vz-final :focus-visible { outline-color: var(--red); }
.vz-pay { margin: var(--s-5) 0 0; max-width: 78ch; font-size: var(--step--1); color: var(--fg-2); }
.vz-pay__label {
  margin-right: 0.5em; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg);
}
@media (min-width: 900px) {
  .vz-final { grid-template-columns: auto minmax(0, 24rem); justify-content: space-between; align-items: end; gap: var(--s-7); padding: var(--s-7); }
}

/* Ask about a piece: call first, the form second */
.vz-ask__grid { display: grid; gap: var(--s-7); }
.vz-ask__title { font-size: var(--step-4); margin-bottom: var(--s-5); }
.vz-ask__call { margin: var(--s-5) 0 var(--s-3); }
.vz-ask__hours { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); }
.vz-ask .notice { margin-top: var(--s-6); max-width: 34rem; }
@media (max-width: 519px) { .vz-ask__call .btn { width: 100%; } }

.vz-form { display: grid; gap: var(--s-5); background: var(--bg-2); border-top: 6px solid var(--fg); padding: var(--s-5) var(--s-4) var(--s-6); }
.form-row { display: grid; gap: var(--s-5); align-items: start; }
.field .opt { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg-2); }
.field-error[hidden], .field-hint[hidden] { display: none; }
.field-hint a { color: var(--fg); font-weight: 600; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--red-ink); box-shadow: inset 6px 0 0 var(--red); }
.vz-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.vz-form__foot .btn { min-width: 12rem; }
.form-fineprint { margin: 0; font-size: var(--step--1); color: var(--fg-2); }
.error-summary { padding: var(--s-5); border: 2px solid var(--red-ink); border-left-width: 10px; background: var(--tag); }
.error-summary h3 { font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: var(--step-2); margin-bottom: var(--s-3); }
.error-summary ul { margin: 0; padding-left: 1.2rem; }
.error-summary li + li { margin-top: var(--s-1); }
.error-summary a { color: var(--red-ink); font-weight: 600; }
.form-status { padding: var(--s-5); border: var(--rule); border-left-width: 10px; background: var(--tag); }
.form-status:empty { display: none; }
.form-status h3 { font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: var(--step-2); margin-bottom: var(--s-3); }
.form-status p:last-child { margin-bottom: 0; }
.form-status a { color: var(--fg); font-weight: 600; }
@media (min-width: 600px) {
  .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vz-form { padding: var(--s-6) var(--s-6) var(--s-7); }
}
@media (min-width: 1000px) {
  .vz-ask__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
  .vz-ask__intro { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}

/* ==========================================================================
   CART
   ========================================================================== */
.ct-head { padding-bottom: var(--s-6); }
.ct-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-5); }
.ct-head__title { font-size: clamp(3.4rem, 1.2rem + 8vw, 8rem); }
.ct-head__title:focus:not(:focus-visible) { outline: none; }
.ct-head__count {
  margin: 0 0 0.5rem; font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2);
}
.ct-head__count:empty { display: none; }
.ct-section { padding-bottom: var(--section); }
.ct-loading { margin: 0; padding: var(--s-6) 0; border-top: var(--rule); font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-2); }
.js .ct-loading { min-height: 18rem; } /* reserve height so the footer doesn't jump (CLS) */
@media (max-width: 999px) { .js .ct-loading { min-height: 40rem; } }

.ct-layout { display: grid; gap: var(--s-8); grid-template-areas: "main" "receipt" "steps"; }
.ct-layout[hidden], .ct-empty[hidden] { display: none; }
.ct-main { grid-area: main; min-width: 0; }
.ct-receipt-wrap { grid-area: receipt; min-width: 0; }
.ct-steps { grid-area: steps; min-width: 0; }
.ct-main > .notice { margin-bottom: var(--s-5); }
@media (min-width: 1000px) {
  .ct-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); grid-template-areas: "main receipt" "steps receipt"; column-gap: var(--s-9); row-gap: var(--s-8); align-items: start; }
  .ct-receipt-wrap { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

/* Cart lines */
.ct-lines { display: grid; gap: var(--s-7); margin: 0; padding: var(--s-6) 0 0; list-style: none; border-top: var(--rule); }
.ct-line { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.ct-line__media { display: flex; flex-direction: column; min-width: 0; }
.ct-line__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); text-decoration: none; }
.ct-line__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.ct-line:hover .ct-line__img img { transform: scale(1.04); }
.ct-line__noimg {
  display: grid; place-items: center; height: 100%; padding: var(--s-2); text-align: center;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; color: var(--fg-2);
}
.ct-line__price {
  position: relative; z-index: 1; align-self: flex-start; margin: -1rem 0 0 -0.15rem;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  transform-origin: 0.65rem 50%; transition: transform 0.5s var(--ease);
}
.ct-line:hover .ct-line__price { transform: rotate(-3deg); }
.ct-line__body { min-width: 0; }
.ct-line__maker { margin: 0 0 0.3rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.ct-line__name {
  margin: 0 0 var(--s-3); font-stretch: 72%; font-weight: 800;
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.2rem); line-height: 1; letter-spacing: -0.01em;
}
.ct-line__name a { text-decoration: none; }
.ct-line__name a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--red); }
.ct-line__spec { display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; margin: 0; font-family: var(--font-mono); font-size: var(--step--1); }
.ct-line__spec div { display: flex; gap: 0.45rem; }
.ct-line__spec dt { color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85em; padding-top: 0.12em; }
.ct-line__spec dd { margin: 0; color: var(--fg); }
.ct-line__note { margin: var(--s-3) 0 0; font-size: var(--step--1); color: var(--fg-2); }
.ct-flag {
  display: inline-block; margin-bottom: var(--s-2); padding: 0.25rem 0.55rem; background: var(--fg); color: var(--bg);
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.ct-line__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
.ct-line__buy { flex: 1 1 100%; }
.ct-line__remove {
  min-height: 44px; min-width: 44px; padding: 0 0.25rem; border: 0; background: none; color: var(--fg-2);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--line); text-underline-offset: 0.35em;
}
.ct-line__remove:hover { color: var(--red-ink); text-decoration-color: currentColor; }
.ct-line.is-unavailable .ct-line__img img { opacity: 0.5; filter: grayscale(1); }
.ct-line.is-unavailable .ct-line__price { text-decoration: line-through; text-decoration-thickness: 2px; }
.ct-keep { margin: var(--s-7) 0 0; }
@media (max-width: 419px) {
  .ct-line { grid-template-columns: 92px minmax(0, 1fr); gap: var(--s-3); }
  .ct-line__buy { padding-inline: 0.8rem; font-size: 0.92rem; gap: 0.45em; }
}
@media (min-width: 600px) {
  .ct-line { grid-template-columns: 176px minmax(0, 1fr); gap: var(--s-6); }
  .ct-line__buy { flex: 0 0 auto; }
}

/* The receipt: mono, dotted leaders, zig-zag torn edges top and bottom */
.ct-receipt-wrap { filter: drop-shadow(0 1px 0 var(--line)) drop-shadow(0 -1px 0 var(--line)) drop-shadow(1px 0 0 var(--line)) drop-shadow(-1px 0 0 var(--line)); }
.ct-receipt {
  --zz: 16px;
  background: var(--tag); color: var(--fg);
  font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.5;
  padding: calc(var(--s-6) + var(--zz) / 2) var(--s-5) calc(var(--s-6) + var(--zz) / 2);
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x;
}
.ct-receipt p { max-width: none; }
.ct-receipt__shop { margin: 0 0 var(--s-4); text-align: center; font-size: var(--step--2); line-height: 1.6; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.ct-receipt__title {
  margin: 0 0 var(--s-4); padding: var(--s-4) 0 0; border-top: 2px dashed var(--fg-2); text-align: center;
  font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.9rem, 1.6rem + 1vw, 2.4rem); line-height: 0.9;
}
.ct-leaders { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.ct-leaders > li, .ct-leaders > div { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.ct-leaders > li::after, .ct-leaders > div::after { /* the dotted leader */
  content: ""; order: 1; flex: 1 1 1.25rem; min-width: 1.25rem; border-bottom: 2px dotted currentColor; opacity: 0.45; transform: translateY(-0.28em);
}
.ct-leaders__k, .ct-leaders dt { order: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
.ct-leaders__v, .ct-leaders dd { order: 2; margin: 0; flex: none; text-align: right; color: var(--fg); font-variant-numeric: tabular-nums; }
.ct-leaders dt { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.92em; }
.ct-receipt__items { padding-bottom: var(--s-4); }
.ct-receipt__items .ct-leaders__k { max-width: 72%; }
.ct-receipt__total {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin: 0; padding: var(--s-4) 0; border-block: 2px dashed var(--fg-2);
}
.ct-receipt__total dt { font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.ct-receipt__total dd { margin: 0 0 0 auto; }
.ct-receipt .tag::before { background: var(--tag); }
.ct-receipt__notes { padding: var(--s-4) 0; }
.ct-receipt__cta { padding: var(--s-2) 0 var(--s-4); }
.ct-receipt__cta[hidden] { display: none; }
.ct-receipt__secure { margin: 0 0 var(--s-3); padding-top: var(--s-4); border-top: 2px dashed var(--fg-2); font-weight: 500; color: var(--fg); }
.ct-receipt__fine { margin: 0 0 var(--s-2); font-size: var(--step--2); line-height: 1.6; color: var(--fg-2); }
.ct-receipt__fine:last-child { margin-bottom: 0; }
.ct-receipt__fine a { color: var(--fg); font-weight: 500; }
.ct-receipt__k { color: var(--fg); text-transform: uppercase; letter-spacing: 0.06em; }
.ct-receipt__unavail { margin-top: var(--s-3); }

/* How checkout works: big condensed numerals */
.ct-steps { border-top: var(--rule); padding-top: var(--s-5); }
.ct-steps__title { font-size: var(--step-3); margin-bottom: var(--s-6); }
.ct-steps__list { counter-reset: step; display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.ct-steps__list li {
  counter-increment: step; position: relative; min-height: 3.6rem; padding-left: 4.4rem;
  max-width: 44rem; color: var(--fg-2);
}
.ct-steps__list li::before {
  content: counter(step); position: absolute; left: 0; top: 0.15rem;
  font-family: var(--font-display); font-stretch: 62%; font-weight: 900;
  font-size: 4.6rem; line-height: 0.74; color: var(--red-ink); font-variant-numeric: tabular-nums;
}
.ct-steps__list strong, .ct-steps__list em { color: var(--fg); }
.ct-steps__list a { color: var(--fg); font-weight: 600; white-space: nowrap; }
@media (min-width: 720px) {
  .ct-steps__list li { padding-left: 6rem; min-height: 4.6rem; font-size: 1.06rem; }
  .ct-steps__list li::before { font-size: 6rem; }
}

/* Empty cart */
.ct-empty { display: grid; gap: var(--s-7); padding-top: var(--s-6); border-top: var(--rule); }
.ct-empty__title { font-size: clamp(3rem, 1.2rem + 6.4vw, 7.4rem); color: var(--red-ink); margin-bottom: var(--s-5); }
.ct-empty__title:focus:not(:focus-visible) { outline: none; }
.ct-empty__text { color: var(--fg-2); margin-bottom: var(--s-6); max-width: 46ch; }
.ct-empty__browse { display: grid; gap: var(--s-6); }
.ct-label {
  margin: 0 0 var(--s-3); font-family: var(--font-mono); font-stretch: 100%; font-size: var(--step--2); font-weight: 500;
  line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2);
}
@media (min-width: 1000px) { .ct-empty { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; } }

/* ==========================================================================
   404
   ========================================================================== */
.nf404 { padding-block: var(--s-6) var(--section); }
.nf404__grid { display: grid; gap: var(--s-8); }
.nf404__title { font-size: clamp(4.2rem, 0.6rem + 20vw, 13rem); line-height: 0.82; margin-bottom: var(--s-5); }
.nf404__lede { font-size: var(--step-1); line-height: 1.4; max-width: 34ch; color: var(--fg-2); }
.nf404__label {
  display: block; margin: 0 0 var(--s-2); font-family: var(--font-mono); font-stretch: 100%; font-size: var(--step--2); font-weight: 500;
  line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg);
}
.nf404__search { margin: var(--s-6) 0 var(--s-6); max-width: 44rem; }
.nf404__row { display: flex; }
.nf404__row .search-field { flex: 1 1 auto; min-width: 0; }
.nf404__row .input { min-height: 64px; font-size: 1.15rem; border-right-width: 0; }
.nf404__row .search-field svg { width: 24px; height: 24px; }
.nf404__row .search-field .input { padding-left: 3.1rem; }
.nf404__row .btn { min-height: 64px; flex: none; }
@media (max-width: 519px) {
  .nf404__row .input { font-size: 1rem; padding-right: 0.6rem; }
  .nf404__row .btn { padding-inline: 1.1rem; }
}
.nf404__more { margin: var(--s-6) 0 0; color: var(--fg-2); }
.nf404__more a { color: var(--fg); font-weight: 600; }
.nf404__media { position: relative; display: flex; flex-direction: column; margin: 0; }
.nf404__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg-2); }
.nf404__tag { align-self: flex-start; position: relative; z-index: 1; margin: -2rem 0 0 -0.2rem; transform: rotate(-4deg); transform-origin: 1rem 50%; font-size: clamp(2.6rem, 2rem + 2vw, 4rem); }
.nf404__caption { margin-top: var(--s-4); font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.nf404__caption a { color: var(--fg); }
@media (min-width: 1000px) {
  .nf404__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; gap: var(--s-8); }
  .nf404__media { margin-top: var(--s-4); }
  .nf404__media img { aspect-ratio: 3 / 4; }
}