/* ==========================================================================
   Components — every reusable UI piece
   ========================================================================== */

/* ── Type helpers ───────────────────────────────────────────────────────── */

.display {
  font-family: var(--font-display);
  font-weight: var(--wt-normal);
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
}

.display--xl { font-size: var(--fs-display-xl); }
.display--l  { font-size: var(--fs-display-l); }
.display--m  { font-size: var(--fs-display-m); }
.display--s  { font-size: var(--fs-display-s); }

/* The slogan is always italic display, lowercase, and lighter + smaller than
   whatever wordmark it sits beneath. */
.slogan {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--wt-light);
  text-transform: lowercase;
  letter-spacing: var(--track-tight);
  color: var(--accent);
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--wt-normal);
  letter-spacing: var(--track-caps-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.meta {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}

.caps {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.lede {
  font-size: clamp(var(--fs-body), 1.2vw, 1.0625rem);
  color: var(--fg-muted);
  max-width: 46ch;
}

.mono-ref {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--ivory);
  --btn-line: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 46px;
  padding: 0 var(--s-6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--wt-normal);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease);
}

.btn:hover:not(:disabled) { --btn-bg: var(--rouge); --btn-line: var(--rouge); }

.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-line: var(--line-strong);
}

.btn--ghost:hover:not(:disabled) {
  --btn-bg: transparent;
  --btn-fg: var(--rouge);
  --btn-line: var(--rouge);
}

.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding-inline: var(--s-4); font-size: var(--fs-2xs); }

/* Link with an underline that draws in from the left on hover. */
.link-draw {
  position: relative;
  display: inline-block;
  padding-block-end: 4px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.link-draw::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-mid) var(--ease);
}

.link-draw:hover::after,
.link-draw:focus-visible::after { transform: scaleX(1); }

.link-quiet {
  color: var(--fg-muted);
  transition: color var(--t-fast) var(--ease);
}

.link-quiet:hover { color: var(--accent); }

/* ── Icon buttons (header) ──────────────────────────────────────────────── */

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  color: currentColor;
  transition: opacity var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.icon-btn:hover { opacity: 0.62; }
.icon-btn svg { width: 22px; height: 22px; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  transition: opacity var(--t-fast) var(--ease);
}

.lang-toggle:hover { opacity: 0.62; }
.lang-toggle__sep { opacity: 0.4; }

/* Language selector. The panel is .menu-pop, borrowed wholesale from the
   account dropdown — same surface, same transition, same focus ring. */
.lang-select { position: relative; }

.menu-pop--lang {
  width: max-content;
  min-width: 180px;
}

.menu-pop--lang .menu-pop__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

/* The checked language is marked by weight and the accent, not by a tick —
   a tick column would misalign across four different word lengths. */
.menu-pop--lang .menu-pop__item[aria-checked="true"] {
  color: var(--rouge);
  font-weight: var(--wt-medium);
}

.lang-option__region {
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-caps);
  color: var(--ash);
}

/* Account chip: person glyph when signed out, avatar when signed in. */
.account-btn { position: relative; }

.avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--silk);
  color: var(--ink);
  font-size: var(--fs-2xs);
  font-weight: var(--wt-medium);
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 56px; height: 56px; font-size: var(--fs-body); }

/* ── Search overlay ─────────────────────────────────────────────────────────
   Overlays the header rather than pushing anything around. */

.search-panel {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: calc(var(--z-header) + 1);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-inline: var(--gutter);
  background: var(--ivory);
  border-bottom: 1px solid var(--silk);
  color: var(--ink);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--t-base) var(--ease),
    opacity var(--t-base) var(--ease),
    visibility var(--t-base);
}

.search-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.search-panel__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding-block: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  letter-spacing: var(--track-display);
}

.search-panel__input::placeholder { color: var(--ash); }

/* ── Drawer (nav menu) ──────────────────────────────────────────────────── */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}

.backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: calc(var(--z-drawer) + 1);
  width: min(440px, 88vw);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--ink);
  color: var(--ivory);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--t-base) var(--ease), visibility var(--t-base);
  overflow-y: auto;
}

.drawer.is-open { transform: translateX(0); visibility: visible; }

/* The bag: the same panel, mirrored. Backdrop, transition and focus trap are
   all inherited. This MUST live here rather than in layout.css — .drawer and
   .drawer--right have equal specificity, so whichever stylesheet loads last
   wins, and components.css loads after layout.css. Defined there, the base
   translateX(-100%) would silently win and the bag would fly in from the
   opposite side. */
.drawer--right {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: translateX(100%);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-h);
  padding-inline: var(--s-6);
  border-bottom: 1px solid var(--ink-line);
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-6) var(--s-4);
}

.drawer__link {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 4.2vw, 1.75rem);
  letter-spacing: var(--track-display);
  padding-block: var(--s-3);
  color: var(--ivory);
  transition: color var(--t-fast) var(--ease), padding-inline-start var(--t-base) var(--ease);
}

.drawer__link:hover {
  color: var(--blush);
  padding-inline-start: var(--s-3);
}

.drawer__feature {
  position: relative;
  margin: var(--s-4) var(--s-6) var(--s-6);
  aspect-ratio: 3 / 4;
  max-height: 34svh;
  overflow: hidden;
}

.drawer__feature img { width: 100%; height: 100%; object-fit: cover; }

.drawer__feature-label {
  position: absolute;
  inset-block-end: var(--s-4);
  inset-inline-start: var(--s-4);
  color: var(--ivory);
}

/* ── Modal ──────────────────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--s-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}

.modal.is-open { opacity: 1; visibility: visible; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
}

.modal__card {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100svh - var(--s-6));
  overflow-y: auto;
  background: var(--ivory-warm);
  border: 1px solid var(--silk);
  padding: clamp(var(--s-6), 5vw, var(--s-7));
  text-align: center;
  transform: translateY(14px) scale(0.985);
  transition: transform var(--t-base) var(--ease);
}

.modal.is-open .modal__card { transform: translateY(0) scale(1); }

/* Script, and a size up from the old Bodoni setting: the script face has a much
   smaller x-height, so the original 1.125rem read noticeably smaller than the
   face it replaced. letter-spacing must stay 0 — see .hero__wordmark in
   layout.css for why. */
.modal__wordmark {
  font-family: var(--font-script);
  font-size: 2rem;
  letter-spacing: 0;
  line-height: 1.3;
  margin-block-end: var(--s-2);
}

.modal__close {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-end: var(--s-3);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--ash-strong);
  transition: color var(--t-fast) var(--ease);
}

.modal__close:hover { color: var(--rouge); }
.modal__close svg { width: 15px; height: 15px; }

.modal__fineprint {
  font-size: var(--fs-2xs);
  line-height: 1.6;
  color: var(--ash-strong);
  margin-block-start: var(--s-5);
}

.modal__fineprint a { text-decoration: underline; text-underline-offset: 2px; }

.modal__divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block: var(--s-4);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ash);
}

.modal__divider::before,
.modal__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--silk);
}

/* Google button — white background, hairline border, official multicolour G,
   exact label text, no recolouring. Do not restyle the mark. */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-5);
  background: #FFFFFF;
  border: 1px solid var(--silk);
  border-radius: var(--radius-sm);
  color: #1F1F1F;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--wt-medium);
  letter-spacing: 0.01em;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.btn-google:hover:not(:disabled) { border-color: var(--silk-deep); background: #FCFCFC; }
.btn-google:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-google svg { width: 18px; height: 18px; flex: none; }

/* Busy state swaps the label for a spinner and leaves the G in place. */
.btn-google.is-busy .btn-google__label { visibility: hidden; }

.btn-google.is-busy::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1.5px solid #5F6368;
  border-top-color: transparent;
  border-radius: var(--radius-pill);
  animation: spin 700ms linear infinite;
}

.btn-google { position: relative; }

/* ── Account dropdown ───────────────────────────────────────────────────── */

.menu-pop {
  position: absolute;
  inset-block-start: calc(100% + var(--s-2));
  inset-inline-end: 0;
  z-index: calc(var(--z-header) + 2);
  width: 232px;
  background: var(--ivory-warm);
  border: 1px solid var(--silk);
  color: var(--ink);
  text-align: start;
  padding: var(--s-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    visibility var(--t-fast);
}

.menu-pop.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.menu-pop__head {
  padding: var(--s-3) var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--silk);
  margin-block-end: var(--s-2);
}

.menu-pop__name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: var(--track-tight);
  line-height: 1.2;
}

.menu-pop__item {
  display: block;
  width: 100%;
  padding: var(--s-3);
  text-align: start;
  font-size: var(--fs-sm);
  color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.menu-pop__item:hover { background: var(--silk); }
.menu-pop__item--danger:hover { color: var(--rouge); }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-align: start;
  width: 100%;
}

.field__label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.input {
  width: 100%;
  min-height: 46px;
  padding: var(--s-3) var(--s-4);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast) var(--ease);
}

.input::placeholder { color: var(--fg-faint); }
.input:hover { border-color: var(--line-strong); }
.input:focus-visible { border-color: var(--focus); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--err); }

/* Inline-submit field: input with an arrow button sitting inside its border. */
.field-inline {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border-bottom: 1px solid var(--on-ink-line);
  transition: border-color var(--t-fast) var(--ease);
}

.field-inline:focus-within { border-bottom-color: var(--blush); }

.field-inline .input {
  border: 0;
  border-radius: 0;
  padding-inline: 0;
  background: none;
}

.field-inline .input:focus-visible { outline: none; }

.field-inline__submit {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  color: currentColor;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}

.field-inline__submit:hover:not(:disabled) { transform: translateX(4px); }
.field-inline__submit:disabled { opacity: 0.4; cursor: not-allowed; }
.field-inline__submit svg { width: 20px; height: 20px; }

/* In flight: the arrow becomes a spinner. */
.field-inline__submit[data-loading] svg { display: none; }

.field-inline__submit[data-loading]::after {
  content: "";
  width: 15px;
  height: 15px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-pill);
  animation: spin 700ms linear infinite;
}

/* Form status line. Errors name what is wrong; they do not apologise. */
.form-msg {
  display: block;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  min-height: 1.4em;
  margin-block-start: var(--s-3);
}

.form-msg:empty { margin-block-start: 0; }
.form-msg[data-state="error"] { color: var(--err); }
.form-msg[data-state="ok"] { color: var(--ok); }
.on-ink .form-msg[data-state="error"] { color: #E9A9AF; }
.on-ink .form-msg[data-state="ok"] { color: #A9CDB8; }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  text-align: start;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.checkbox-row input {
  margin-block-start: 0.25em;
  accent-color: var(--rouge);
  width: 15px;
  height: 15px;
  flex: none;
}

/* ── Product card ───────────────────────────────────────────────────────── */

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block-end: var(--s-4);
  border: 1px solid transparent;
  transition:
    transform var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease);
}

/* No shadows anywhere — a hairline that darkens carries the lift instead. */
.product-card:hover,
.product-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--silk-deep);
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--silk);
}

.product-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__media img + img {
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

.product-card:hover .product-card__media img + img,
.product-card:focus-within .product-card__media img + img { opacity: 1; }

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-inline: var(--s-4);
}

.product-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  letter-spacing: var(--track-tight);
}

.product-card__price {
  font-size: var(--fs-sm);
  letter-spacing: var(--track-caps);
  color: var(--fg-muted);
}

.swatches {
  display: flex;
  gap: var(--s-2);
  margin-block-start: var(--s-1);
}

.swatch {
  width: 13px;
  height: 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--silk-deep);
  background: var(--sw, var(--silk));
}

/* ── Accordion ──────────────────────────────────────────────────────────── */

.acc__item { border-bottom: 1px solid var(--silk); }

.acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-5) 0;
  text-align: start;
  font-size: var(--fs-body);
  color: var(--fg);
  transition: color var(--t-fast) var(--ease);
}

.acc__trigger:hover { color: var(--rouge); }

.acc__icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform var(--t-base) var(--ease);
}

.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}

.acc__icon::after { transform: rotate(90deg); }

/* + becomes × */
.acc__trigger[aria-expanded="true"] .acc__icon { transform: rotate(135deg); }

/* Height animation via grid-template-rows, not max-height — this animates to
   the panel's true height with no magic number and no clipped overflow. */
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease);
}

/* Scoped to the item, NOT written as `.acc__trigger + .acc__panel`. The
   trigger is nested inside its <h3> for heading semantics, so it is not the
   panel's sibling and an adjacent-sibling selector silently never matches. */
.acc__item:has(.acc__trigger[aria-expanded="true"]) .acc__panel {
  grid-template-rows: 1fr;
}

.acc__panel > div { overflow: hidden; }

.acc__body {
  padding-block: 0 var(--s-5);
  padding-inline-end: var(--s-7);
  color: var(--fg-muted);
  max-width: 62ch;
}

/* ── Social icons ───────────────────────────────────────────────────────── */

.social-row { display: flex; gap: var(--s-4); }

.social-link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-pill);
  color: var(--ivory);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.social-link:hover { border-color: var(--blush); color: var(--blush); }
.social-link svg { width: 17px; height: 17px; }

/* ── Notices, badges, tables (shared with HQ) ───────────────────────────── */

.notice {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-inline-start: 2px solid var(--accent);
  background: var(--bg-raised);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  text-align: start;
}

.notice--warn { border-inline-start-color: var(--warn); background: var(--warn-dim); }
.notice strong { color: var(--fg); font-weight: var(--wt-medium); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px var(--s-3);
  border-radius: var(--radius-pill);
  background: var(--silk);
  color: var(--ink);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--ok      { background: var(--ok-dim);   color: var(--ok); }
.badge--warn    { background: var(--warn-dim); color: var(--warn); }
.badge--danger  { background: var(--err-dim);  color: var(--err); }
.badge--neutral { background: var(--silk);     color: var(--ash-strong); }

.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: clamp(var(--s-5), 3vw, var(--s-6));
}

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-5);
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--bg-raised);
}

.table {
  min-width: 720px;
  font-size: var(--fs-sm);
}

.table th,
.table td {
  padding: var(--s-3) var(--s-4);
  text-align: start;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table th {
  font-size: var(--fs-2xs);
  font-weight: var(--wt-normal);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  background: color-mix(in srgb, var(--line) 34%, transparent);
  position: sticky;
  inset-block-start: 0;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--t-fast) var(--ease); }
.table tbody tr:hover { background: color-mix(in srgb, var(--line) 24%, transparent); }

.table__empty {
  padding: var(--s-7) var(--s-4);
  text-align: center;
  color: var(--fg-muted);
}

/* ── Toast ──────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  inset-block-end: var(--s-5);
  inset-inline-start: 50%;
  z-index: var(--z-toast);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--ivory);
  border: 1px solid var(--ink-line);
  font-size: var(--fs-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    visibility var(--t-base);
}

.toast.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-block-end: var(--s-4);
}

.breadcrumb span[aria-hidden] { opacity: 0.45; }

/* ── Product detail page ────────────────────────────────────────────────── */

.pdp__price {
  font-size: 1.125rem;
  letter-spacing: var(--track-caps);
  color: var(--fg-muted);
  margin-block: var(--s-3) var(--s-4);
}

.pdp__form {
  display: grid;
  gap: var(--s-5);
  margin-block: var(--s-6);
  padding-block: var(--s-6);
  border-block: 1px solid var(--line);
}

.pdp__field { border: 0; padding: 0; margin: 0; }
.pdp__field legend { margin-block-end: var(--s-3); }

.pdp__actions {
  display: flex;
  gap: var(--s-3);
  align-items: stretch;
}

.pdp__qty {
  width: 80px;
  flex: none;
  text-align: center;
}

.pdp__detail {
  display: grid;
  gap: var(--s-3);
  color: var(--fg-muted);
  max-width: 52ch;
}

/* Colour and size pickers. The real <input> stays in the accessibility tree
   and drives the visual state — nothing here is a fake control. */
.swatch-row,
.size-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.swatch-pick,
.size-pick { cursor: pointer; }

.swatch-pick input,
.size-pick input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.swatch-pick .swatch {
  width: 26px;
  height: 26px;
  outline-offset: 3px;
  transition: outline-color var(--t-fast) var(--ease);
  outline: 1px solid transparent;
}

.swatch-pick input:checked + .swatch { outline-color: var(--accent); }
.swatch-pick input:focus-visible + .swatch { outline: 2px solid var(--focus); }

.size-pick span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 38px;
  padding-inline: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-caps);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.size-pick:hover span { border-color: var(--line-strong); }
.size-pick input:checked + span { border-color: var(--ink); color: var(--ink); }
.size-pick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Bag ────────────────────────────────────────────────────────────────── */

.cart-btn { position: relative; }

.cart-btn__count {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--rouge);
  color: var(--ivory);
  font-size: 0.625rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cart__body {
  overflow-y: auto;
  padding: var(--s-5) var(--s-6);
}

.cart__foot {
  padding: var(--s-5) var(--s-6) var(--s-6);
  border-top: 1px solid var(--line);
}

.cart__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  margin-block-end: var(--s-2);
}

.cart__total {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: var(--track-display);
}

.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.cart-item:last-child { border-bottom: 0; }

.cart-item__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--silk);
}

.cart-item__media img { width: 100%; height: 100%; object-fit: cover; }

.cart-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.cart-item__name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: var(--track-tight);
}

.cart-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-block-start: var(--s-2);
}

.qty-step {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.qty-step button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  color: inherit;
  transition: color var(--t-fast) var(--ease);
}

.qty-step button:hover:not(:disabled) { color: var(--accent); }
.qty-step button:disabled { opacity: 0.35; cursor: not-allowed; }

.qty-step output {
  min-width: 26px;
  text-align: center;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.cart-item__remove {
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast) var(--ease);
}

.cart-item__remove:hover { color: var(--accent); }

.cart__empty {
  display: grid;
  gap: var(--s-4);
  place-items: start;
  padding-block: var(--s-6);
  color: var(--fg-muted);
}