/* ==========================================================================
   DIRTY 30's — Leather & Lace
   Hester-style: white ground, generous whitespace, photography doing the
   talking, restrained sans-serif headings, two spot colours used sparingly.
   One stylesheet. No dependencies, no external fonts, no build step.
   ========================================================================== */

:root {
  --bg:         #ffffff;
  --bg-soft:    #f6f4f1;
  --ink:        #141414;
  --ink-soft:   #595650;
  --ink-faint:  #8c8880;
  --rule:       #e2dfd9;
  --red:        #CC0000;
  --navy:       #002D65;

  /* The two spot colours again, for the times they are used as *ink* -
     text, a border, a rule - rather than as a fill behind white type. A
     fill can stay the brand colour in both themes, because white on
     #CC0000 or #002D65 reads either way. Ink cannot: #CC0000 on a near
     black ground is 3.4:1, so dark mode lightens these and leaves the
     fills alone. */
  --red-ink:    var(--red);
  --navy-ink:   var(--navy);

  /* Faint washes behind the warning and notice panels. Alpha over a white
     ground is nearly invisible over a dark one, so these are tokens too. */
  --tint-red:   rgb(204 0 0 / 0.05);
  --tint-navy:  rgb(0 45 101 / 0.05);

  /* The <select> caret, which is a data URI and so cannot take a var()
     inside it - the whole image has to swap. */
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.4'/%3E%3C/svg%3E");

  /* The cart barrow is one dark colour in alpha, so dark mode inverts the
     file instead of shipping a light twin of it. */
  --icon-flip: none;

  --switch-edge:        rgb(20 20 20 / 0.3);
  --switch-track:       rgb(20 20 20 / 0.07);
  --switch-track-hover: rgb(20 20 20 / 0.13);

  --max:        72rem;
  --measure:    46rem;
  --gutter:     clamp(1.25rem, 5vw, 4rem);

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

/* Dark mode is a straight swap of the values above - every rule in this
   file already reads its colours through these tokens, so nothing below
   needs a second copy. The ground is warm (#13110f, not #000) to match the
   warm off-white it replaces, and the navy band keeps its brand colour in
   both themes.

   data-theme is set on <html> by theme.js before first paint. The media
   query is not used directly: the cookie has to be able to override the
   system, and a single attribute does both. */
:root[data-theme="dark"] {
  --bg:         #13110f;
  --bg-soft:    #1e1b18;
  --ink:        #f2efea;
  --ink-soft:   #b5b0a7;
  --ink-faint:  #918c83;
  --rule:       #332f2a;

  --red-ink:    #ff6161;
  --navy-ink:   #85aaea;
  --tint-red:   rgb(255 97 97 / 0.09);
  --tint-navy:  rgb(133 170 234 / 0.10);

  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f2efea' stroke-width='1.4'/%3E%3C/svg%3E");

  --icon-flip: brightness(0) invert(1);

  --switch-edge:        rgb(242 239 234 / 0.34);
  --switch-track:       rgb(242 239 234 / 0.1);
  --switch-track-hover: rgb(242 239 234 / 0.18);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

/* Off screen but still in the document, for headings that would only
   repeat what the control above them already says. Not display:none,
   which would take it out of the accessibility tree as well. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a { color: var(--navy-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--red-ink); }

:where(a, button, select, input, [tabindex]):focus-visible {
  outline: 2px solid var(--navy-ink);
  outline-offset: 3px;
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3rem, 9vw, 7rem); }

/* --- type ---------------------------------------------------------------- */

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.12; text-wrap: balance; }

.eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- masthead ------------------------------------------------------------ */

.masthead {
  position: relative;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem clamp(0.75rem, 2.5vw, 1.4rem);
  min-height: 4.5rem;
  padding-block: 0.9rem;
  /* keep the centred lockup clear of the controls in the corner, which are
     now a switch plus the cart rather than the cart alone */
  padding-right: clamp(6.5rem, 20vw, 7.5rem);
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
}
.masthead__star { width: clamp(28px, 5vw, 36px); flex: none; }
.masthead__words { display: flex; flex-direction: column; line-height: 1.15; }
.masthead__words b {
  font-size: clamp(0.92rem, 2.3vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.masthead__words span {
  font-size: clamp(0.58rem, 1.6vw, 0.68rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.masthead__product {
  font-size: clamp(0.78rem, 2vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .masthead__inner { gap: 0.2rem 0.75rem; }
}

/* --- the controls, pinned to the corner of the page ---------------------- */

/* The cart used to be pinned here by itself. The switch sits beside it, so
   the pinning moved up to a group and both are laid out inside it. */
.masthead__tools {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: var(--gutter);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1rem);
}

.cart-fab {
  position: relative;        /* the count badge hangs off this */
  padding: 0.3rem;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}
/* The wheelbarrow is a single-colour silhouette in alpha - #17120D at
   every opacity - so dark mode flips it rather than shipping a second
   file: brightness(0) flattens the colour to black, invert(1) takes it to
   white, and neither touches the alpha that does the drawing. */
.cart-fab img {
  width: clamp(2rem, 4.5vw, 2.5rem);
  height: auto;
  filter: var(--icon-flip);
}
.cart-fab__count {
  position: absolute;
  top: -0.3rem; right: -0.35rem;
  display: grid; place-items: center;
  min-width: 1.25rem; height: 1.25rem;
  padding-inline: 0.3rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font: 600 0.7rem/1 var(--sans);
  box-shadow: 0 0 0 2px var(--bg);
}
.cart-fab[data-empty="true"] .cart-fab__count { display: none; }

/* --- light / dark switch ------------------------------------------------- */

/* Hidden until theme.js has run. It sets data-theme on <html> as its first
   act, so with scripting off a switch that could not switch anything never
   appears at all. */
.theme-toggle { display: none; }

:root[data-theme] .theme-toggle {
  --tt-w:    3.05rem;
  --tt-h:    1.7rem;
  --tt-knob: 1.3rem;
  --tt-pad:  0.18rem;

  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle__track {
  position: relative;
  display: block;
  width: var(--tt-w);
  height: var(--tt-h);
  border: 1px solid var(--switch-edge);
  border-radius: 999px;
  background: var(--switch-track);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.theme-toggle:hover .theme-toggle__track {
  background: var(--switch-track-hover);
  border-color: var(--ink-faint);
}

.theme-toggle__knob {
  position: absolute;
  top: 50%;
  left: var(--tt-pad);
  display: grid;
  place-items: center;
  width: var(--tt-knob);
  height: var(--tt-knob);
  margin-top: calc(var(--tt-knob) / -2);
  border-radius: 999px;
  /* Ink knob, ground-coloured glyph - the same inversion the buttons use,
     so it lands right way up in both themes without a second rule. */
  background: var(--ink);
  color: var(--bg);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The track is border-box, so its two 1px borders come out of the travel. */
.theme-toggle[aria-checked="true"] .theme-toggle__knob {
  transform: translateX(calc(
    var(--tt-w) - var(--tt-knob) - (var(--tt-pad) * 2) - 2px));
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle__track, .theme-toggle__knob { transition: none; }
}

/* One glyph, carried inside the knob, naming the mode you are in. Two
   glyphs on the track would read better at a larger size, but at this one
   the knob covers whichever end is active - which is the half you most
   want to see. */
.theme-toggle__icon {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle__icon--moon { display: none; }
.theme-toggle[aria-checked="true"] .theme-toggle__icon--sun { display: none; }
.theme-toggle[aria-checked="true"] .theme-toggle__icon--moon { display: block; }

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

.hero {
  position: relative;
  min-height: clamp(24rem, 76vh, 44rem);
  display: grid;
  align-content: end;            /* button sits in the lower half */
  justify-items: center;
  padding: clamp(2.5rem, 8vw, 6rem) var(--gutter) clamp(3rem, 12vh, 7rem);
  background-color: #2b2420;
  background-image: url("/assets/img/hero-1600.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
@media (min-width: 1100px) { .hero { background-image: url("/assets/img/hero-2400.jpg"); } }
@media (max-width: 36rem)  { .hero { background-image: url("/assets/img/hero-900.jpg"); } }

/* A soft vignette at the foot so the button always has something to sit on. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(16 13 10 / 0) 45%, rgb(16 13 10 / 0.45));
}
.hero__cta { position: relative; }

/* --- product ------------------------------------------------------------- */

.product {
  display: grid;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 52rem) { .product { grid-template-columns: 1.1fr 1fr; } }

.gallery { display: grid; gap: 0.6rem; }
.gallery__main {
  display: block; width: 100%; padding: 0; border: 0;
  background: var(--bg-soft); cursor: zoom-in; font: inherit; line-height: 0;
}
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, 4.5rem); gap: 0.6rem; }
.gallery__thumbs button {
  padding: 0; border: 1px solid transparent; background: var(--bg-soft);
  cursor: pointer; line-height: 0;
}
.gallery__thumbs button.is-active { border-color: var(--ink); }
.gallery__thumbs button:not(.is-active) { opacity: 0.55; }

.media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-soft); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs .media { aspect-ratio: 1; }

/* Kept for the heading itself, which is .visually-hidden on the shop page -
   the <select> above it already names the product. Restore the class on
   its own if a product ever gets a page where the name has to show. */
.product__name {
  margin: 0.5rem 0 0;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* Description first, then price - so the margins run desc -> small gap ->
   price -> larger gap -> buy row. */
.product__desc  { margin: 0 0 1rem; color: var(--ink-soft); max-width: 42ch; }
.product__price { margin: 0 0 1.75rem; font-size: 1.15rem; color: var(--ink-soft); }

.field { display: grid; gap: 0.45rem; margin-bottom: 1.25rem; max-width: 22rem; }
.field label {
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint);
}
.field select {
  appearance: none;
  width: 100%;
  padding: 0.85rem 2.5rem 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 0.98rem/1.2 var(--sans);
  cursor: pointer;
  /* caret */
  background-image: var(--caret);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.7rem;
}
.field select:hover { border-color: var(--ink-faint); }

.buy-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; margin-bottom: 2rem; }

.qty { display: inline-flex; border: 1px solid var(--rule); }
.qty button {
  width: 2.6rem; border: 0; background: none; color: var(--ink);
  font: 400 1.1rem/1 var(--sans); cursor: pointer;
}
.qty button:hover { color: var(--red-ink); }
.qty input {
  width: 3rem; border: 0; border-inline: 1px solid var(--rule);
  background: none; color: var(--ink); text-align: center;
  font: 400 0.95rem/1 var(--mono); -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.9rem 2rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  /* var(--bg), not #fff: this is ink-coloured fill, so the type on it has
     to be the page ground or it disappears when the two swap. */
  color: var(--bg);
  font: 500 0.72rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn--block { width: 100%; }
/* One red for every primary action; stays red on hover rather than switching. */
.btn--red,
.btn--shop,
.btn[data-add-to-cart] {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.btn--red:hover,
.btn--shop:hover,
.btn[data-add-to-cart]:hover { background: #a80000; border-color: #a80000; color: #fff; }

/* The secondary route into Venmo, in the brand navy rather than the red kept
   for primary actions. Same treatment as the red: darkens on hover instead of
   switching colour. */
.btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--navy:hover { background: #001c42; border-color: #001c42; color: #fff; }

.btn--shop {
  padding: 1.05rem 2.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  box-shadow: 0 0.5rem 1.75rem rgb(0 0 0 / 0.3);
}
.btn--ghost { background: none; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: none; color: var(--red-ink); border-color: var(--red-ink); }

.specs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.specs li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--rule); font-size: 0.9rem;
}
.specs .k { color: var(--ink-faint); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; }
.specs .v { color: var(--ink-soft); text-align: right; }

/* --- lightbox ------------------------------------------------------------ */

.lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(10 10 10 / 0.94);
  opacity: 0; transition: opacity 0.18s ease; cursor: zoom-out;
}
.lightbox[data-open="true"] { opacity: 1; }
.lightbox[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }
.lightbox__img { max-width: 100%; max-height: 84vh; object-fit: contain; }
.lightbox__close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 0.75rem); right: 0.75rem;
  width: 2.6rem; height: 2.6rem; border: 1px solid rgb(255 255 255 / 0.3);
  background: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.lightbox__hint {
  margin: 0; color: rgb(255 255 255 / 0.55);
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
}

/* --- cart drawer --------------------------------------------------------- */

.drawer-overlay {
  position: fixed; inset: 0; z-index: 40; background: rgb(10 10 10 / 0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.drawer-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 50;
  display: flex; flex-direction: column;
  width: min(25rem, 100%); height: 100dvh;
  background: var(--bg);
  border-left: 1px solid var(--rule);
  box-shadow: -1.5rem 0 3rem rgb(0 0 0 / 0.08);
  transform: translateX(101%);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.drawer[data-open="true"] { transform: none; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-overlay { transition: none; } }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem var(--gutter); border-bottom: 1px solid var(--rule);
}
.drawer__head h2 { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }
.drawer__close { border: 0; background: none; color: var(--ink-faint); font-size: 1.5rem; line-height: 1; padding: 0.2rem 0.4rem; cursor: pointer; }
.drawer__close:hover { color: var(--red-ink); }
.drawer__body { flex: 1; overflow-y: auto; padding: 0.5rem var(--gutter); }
.drawer__empty { text-align: center; padding: 3rem 0; color: var(--ink-faint); font-size: 0.9rem; }

.line { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 0.85rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.line__media { aspect-ratio: 1; background: var(--bg-soft); }
.line__media img { width: 100%; height: 100%; object-fit: cover; }
.line__name { margin: 0 0 0.2rem; font-size: 0.92rem; font-weight: 500; }
.line__meta { margin: 0; font-size: 0.78rem; color: var(--ink-faint); }
.line__price { margin: 0; font-size: 0.9rem; white-space: nowrap; }
.line__remove { border: 0; background: none; padding: 0.2rem 0; color: var(--ink-faint); font-size: 0.72rem; cursor: pointer; text-decoration: underline; }
.line__remove:hover { color: var(--red-ink); }
.line .qty { margin-top: 0.5rem; }
.line .qty button { width: 1.9rem; }
.line .qty input { width: 2.3rem; font-size: 0.82rem; }

.drawer__foot { padding: 1.15rem var(--gutter); border-top: 1px solid var(--rule); }
.totals { display: grid; gap: 0.35rem; margin-bottom: 1rem; font-size: 0.9rem; }
.totals div { display: flex; justify-content: space-between; gap: 1rem; }
.totals .k { color: var(--ink-faint); }
.totals__sub { font-size: 1.05rem; font-weight: 500; }
.note { margin: 0.75rem 0 0; text-align: center; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-faint); }

.alert { margin: 0 0 0.9rem; padding: 0.6rem 0.8rem; border: 1px solid var(--red-ink); background: var(--tint-red); font-size: 0.85rem; }

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

/* The footer is the one dark band on the site. White at 72% on #002D65 gives
   a 7.7:1 contrast ratio, so the secondary lines stay readable rather than
   just looking faded. */
.site-footer {
  background: var(--navy);
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
  text-align: center;
  font-size: 0.82rem;
  color: rgb(255 255 255 / 0.72);
}
.site-footer p { margin: 0.45rem 0 0; }
.site-footer a { color: rgb(255 255 255 / 0.85); }
.site-footer a:hover { color: #fff; }

/* Tristar beside the wordmark, echoing the masthead lockup. The type size
   lives on the lockup so the star can be sized in em and track it: change the
   wordmark size and the star follows instead of drifting out of proportion. */
.site-footer__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0;
  font-size: clamp(0.76rem, 2vw, 0.88rem);
}
/* p.<class> throughout this block, because ".site-footer p" above is one
   class plus one element and beats a bare class selector. */
p.site-footer__copy { margin: 0 0 0.7rem; }
.site-footer__star { height: 1.7em; width: auto; flex: none; }
/* p.<class>, not just .<class>: ".site-footer p" above is one class plus one
   element, so a bare class selector loses to it and the generic paragraph
   margin-top survives - which then throws the star 3.6px high, because
   align-items centres the margin box, not the text. */
p.site-footer__brand {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}

/* Last line of the footer again, so it gets the gap that separates it
   from the block above rather than sitting inside that block. */
.social { display: flex; justify-content: center; gap: 1.4rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.social a { display: grid; place-items: center; color: rgb(255 255 255 / 0.72); }
.social a:hover { color: #fff; }
.social svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }

/* The Instagram glyph is drawn as strokes rather than a filled trace, so it
   carries the same optical weight as the YouTube mark beside it. Meta allows
   the glyph in any solid colour provided the geometry is untouched. */
.social .ig { fill: none; stroke: currentColor; stroke-width: 1.9; }
.social .ig__dot { fill: currentColor; stroke: none; }

/* --- simple pages (thanks / 404) ----------------------------------------- */

.plain { text-align: center; max-width: var(--measure); margin-inline: auto; }
.plain h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 0.75rem; }
.plain p { color: var(--ink-soft); }
.plain .btn { margin-top: 1.75rem; }

/* --- checkout, pay, admin ------------------------------------------------ */
/* Added with the Venmo rebuild. The Stripe version had no pages of its own
   for these: Stripe hosted the address form and the payment screen. */

/* Text inputs were never styled before, because the only form control on the
   old site was the variant <select>. Match it exactly. */
.field input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 0.98rem/1.2 var(--sans);
  -webkit-appearance: none;
  appearance: none;
}
.field input:hover { border-color: var(--ink-faint); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--red); }
.field__hint { font-size: 0.75rem; color: var(--ink-faint); }
.field__opt {
  font-weight: 400; letter-spacing: 0.08em; text-transform: none;
  color: var(--ink-faint);
}

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

.checkout h1,
.pay h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 1.5rem; }

/* The Venmo wordmark stands on its own line rather than running into the
   sentence, which is what their brand guidelines require. The margin below
   the eyebrow is the logo's clear space. */
.pay__title { display: grid; justify-items: start; gap: 0.55rem; }
.pay__title-pre { display: block; line-height: 1; }
.pay__title-mark {
  display: block;
  width: clamp(8.5rem, 30vw, 11rem);
  height: auto;
}
.checkout__cols { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 52rem) {
  .checkout__cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.co-form h2,
.co-review h2 {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.25rem;
}
.co-form__lead {
  margin: -0.5rem 0 1.5rem; max-width: 42ch;
  font-size: 0.9rem; color: var(--ink-soft);
}
.co-form .field { max-width: none; }
.co-form .btn--block { margin-top: 0.5rem; }

/* City / state / ZIP share a row once there is room for it. */
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 30rem) {
  .field-row { grid-template-columns: 1fr 6.5rem 8rem; }
}

.co-review {
  align-self: start;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bg-soft);
}
.co-line {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--rule);
  font-size: 0.9rem;
}
.co-line:last-of-type { border-bottom: 0; }
.co-line__name { color: var(--ink); }
.co-line__qty { color: var(--ink-faint); margin-left: 0.4rem; }
.co-line__price { white-space: nowrap; }
.co-review .totals { margin-top: 1rem; }
.totals__grand {
  padding-top: 0.5rem; border-top: 1px solid var(--rule);
  font-size: 1.05rem; font-weight: 500;
}
.totals__grand .k { color: var(--ink); }

/* --- pay ---------------------------------------------------------------- */

.pay { max-width: var(--measure); margin-inline: auto; }
.pay__ref { margin: 0 0 1.5rem; font-size: 0.9rem; color: var(--ink-faint); }
.pay__ref b { font-family: var(--mono); color: var(--ink); letter-spacing: 0.05em; }

.pay__amount {
  display: grid; gap: 0.3rem; justify-items: center; text-align: center;
  padding: clamp(1.5rem, 4vw, 2.25rem) 1rem;
  background: var(--bg-soft); margin-bottom: 1.75rem;
}
.pay__amount-k {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-faint);
}
.pay__amount-v {
  font-size: clamp(2.2rem, 8vw, 3.2rem); font-weight: 500;
  line-height: 1; letter-spacing: -0.01em;
}
.pay__amount-to { font-size: 0.9rem; color: var(--ink-soft); }
.pay__amount-to b { font-family: var(--mono); color: var(--ink); }

.pay__act { margin-bottom: 2rem; }
/* A full cart with a long address reaches a 69-module symbol, which at the
   old 16rem left only ~3.3 CSS px per module on a phone. */
.pay__qr {
  width: min(19rem, 82vw); margin: 0 auto 1rem;
  padding: 0.75rem; background: #fff; border: 1px solid var(--rule);
}
.pay__qr svg { display: block; width: 100%; height: auto; }
.pay__qr-cap {
  margin: 0 auto; max-width: 38ch; text-align: center;
  font-size: 0.85rem; color: var(--ink-soft);
}

.pay__copy { display: grid; gap: 0.5rem; margin-bottom: 1.75rem; }
.copyrow {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 0.75rem; align-items: center;
  padding: 0.7rem 0.85rem; border: 1px solid var(--rule);
}
.copyrow__k {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.copyrow__v {
  font: 400 0.82rem/1.45 var(--mono);
  overflow-wrap: anywhere; min-width: 0;
}
.copyrow__btn {
  border: 1px solid var(--ink); background: none; color: var(--ink);
  padding: 0.35rem 0.75rem; cursor: pointer;
  font: 500 0.68rem/1 var(--sans); letter-spacing: 0.14em;
  text-transform: uppercase; white-space: nowrap;
}
.copyrow__btn:hover { background: var(--ink); color: var(--bg); }
.copyrow__status {
  margin: 0; min-height: 1.2em;
  font-size: 0.78rem; color: var(--ink-faint);
}

/* The one thing on the page the customer must not casually undo. */
.pay__warn {
  padding: 0.9rem 1rem; margin-bottom: 1.75rem;
  border-left: 3px solid var(--red-ink); background: var(--tint-red);
}
.pay__warn p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.pay__warn b { color: var(--ink); }

/* --- admin -------------------------------------------------------------- */

.admin { max-width: var(--max); }
.admin h1 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin-bottom: 1.5rem; }
.admin__gate { max-width: 22rem; }
.admin__bar {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  justify-content: space-between; margin-bottom: 1.5rem;
}
.admin__count { margin: 0; font-size: 0.85rem; color: var(--ink-faint); }
.order {
  padding: 1.1rem 0; border-bottom: 1px solid var(--rule);
  display: grid; gap: 0.5rem;
}
.order__top {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem;
  align-items: baseline; justify-content: space-between;
}
.order__ref {
  font: 500 0.95rem/1 var(--mono); letter-spacing: 0.05em;
}
.order__when { font-size: 0.78rem; color: var(--ink-faint); }
.order__total { font-size: 1rem; font-weight: 500; white-space: nowrap; }
.order__items { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.order__addr {
  margin: 0; font: 400 0.85rem/1.55 var(--mono); color: var(--ink);
  overflow-wrap: anywhere;
}
.order__note {
  margin: 0; font-size: 0.75rem; color: var(--ink-faint);
  overflow-wrap: anywhere;
}

/* Shown inside Instagram/Facebook style browsers, which cannot hand a link
   to another app, and when the customer comes back from Venmo. */
.pay__inapp {
  padding: 0.9rem 1rem; margin-top: 1rem;
  border-left: 3px solid var(--navy-ink); background: var(--tint-navy);
}
.pay__inapp p { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--ink-soft); }
.pay__inapp p:last-child { margin-bottom: 0; }
.pay__inapp .note { text-align: left; }

.pay__help { margin-top: 1rem; }
.pay__help summary {
  cursor: pointer; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
  padding: 0.4rem 0;
}
.pay__help summary:hover { color: var(--ink); }
.pay__help p { margin: 0.75rem 0; font-size: 0.9rem; color: var(--ink-soft); }

/* The closing step is centred; .btn is inline-flex, so text-align carries it. */
.pay__finish { text-align: center; }
.pay__finish p { margin: 0 0 1.25rem; }
.pay__finish p:last-child { margin-bottom: 0; }

.pay__back {
  padding: 0.9rem 1rem; margin-bottom: 1.25rem;
  border-left: 3px solid var(--red-ink); background: var(--tint-red);
}
.pay__back p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.pay__back b { color: var(--ink); }

/* Copy buttons on each stored order. The address in the Venmo note comes back
   with "+" for every space, so this is what you actually paste into a
   shipping form. */
.order__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }