/* ==========================================================================
   Gibson Sisters Kitchen - site stylesheet (ported from the CX mockups v1,
   2026-11-03, assets/css/gsk.css). Mobile-first. No frameworks.
   Palette = brand guide "Garden Patch" values plus functional AA tokens.
   ========================================================================== */

/* ---------- 1. Design tokens ------------------------------------------- */
:root {
  /* Garden Patch palette — exact values from "Gibson Sisters Kitchen — Brand Guide" (Nov 3, 2026) */
  --brand-sage:        #B2AC88; /* Primary: nav, main CTAs, Bread & Rolls */
  --brand-rose:        #F2C1D1; /* The Cookie Jar */
  --brand-sky:         #AED9E0; /* General Store, Made Without Gluten Ingredients */
  --brand-lavender:    #DCD0FF; /* Specialty Bakes, seasonal accents */
  --brand-buttercream: #FFF4B3; /* The Coop, highlights */
  --brand-cream:       #FAF9F6; /* Page background */
  --brand-espresso:    #3E2723; /* All text */
  --brand-white:       #FFFFFF; /* Inside product cards only */
  --brand-sage-soft:   #EDEBE1; /* The no-photo tile: sage, softened */

  /* Functional tokens (NOT palette colors). Brand-guide values that failed
     WCAG AA were replaced; see HANDOFF.md "Contrast fixes". */
  --fn-danger:        #DC2626; /* brand guide value; 4.59:1 on cream, white text 4.83:1 */
  --fn-warning-text:  #92400E; /* replaces #D97706 (3.0:1 on cream, fails) — 6.73:1 */
  --fn-disabled-bg:   #E5E5E5;
  --fn-disabled-text: #4B5563; /* replaces #9CA3AF (2.0:1, fails) — 6.0:1 */
  --fn-field-border:  #857A73; /* replaces #D1D5DB (1.5:1, fails 1.4.11) — 4.18:1 on white */
  --fn-success-bg:    #E4E2D5; /* sage 30% on cream; espresso text 10.6:1 */
  --fn-focus:         #3E2723; /* espresso ring; sage ring is only 2.2:1 on cream */

  /* Category tints (badge background = 20% accent on white; border = accent) */
  --cat-bread:   var(--brand-sage);
  --cat-cookie:  var(--brand-rose);
  --cat-special: var(--brand-lavender);
  --cat-ngi:     var(--brand-sky);
  --cat-store:   var(--brand-sky);
  --cat-coop:    var(--brand-buttercream);
  --cat-season:  var(--brand-lavender);

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script:  "Dancing Script", "Brush Script MT", cursive;

  --text-hero:   clamp(2.25rem, 1.4rem + 4vw, 3.5rem); /* 36 → 56px */
  --text-h1:     clamp(2rem, 1.5rem + 2.4vw, 2.5rem);   /* 32 → 40px */
  --text-h2:     1.75rem;  /* 28px */
  --text-h3:     1.25rem;  /* 20px */
  --text-body:   1rem;     /* 16px */
  --text-small:  0.875rem; /* 14px */
  --text-script: 1.5rem;   /* 24px — never below 20px */
  --text-price:  1.125rem; /* 18px */

  --lh-body: 1.6;
  --lh-display: 1.2;

  /* Space (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;

  /* Radius */
  --radius-button: 6px;  /* brand guide UI Components (Usage Rules say 4px — flagged) */
  --radius-field:  6px;
  --radius-card:   10px;
  --radius-pill:   9999px;

  --tap: 44px;           /* minimum tap target */
  --maxw: 72rem;
  --shadow-card: 0 1px 2px rgba(62,39,35,.08), 0 4px 14px rgba(62,39,35,.06);
}

/* ---------- 2. Self-hosted fonts (SIL OFL 1.1) ------------------------- */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/dancing-script-latin-700-normal.woff2") format("woff2"); }

/* ---------- 3. Base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--brand-cream); color: var(--brand-espresso);
  font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body);
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, .display { overflow-wrap: break-word; font-family: var(--font-display); font-weight: 700; line-height: var(--lh-display); margin: 0 0 var(--space-4); }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-h3); line-height: 1.3; margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-4); }
a { color: var(--brand-espresso); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fn-focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--brand-cream); border-radius: 2px; }
.script { font-family: var(--font-script); font-weight: 700; font-size: var(--text-script); line-height: 1.3; }
.small { font-size: var(--text-small); }
.muted { opacity: 1; } /* never fade text — contrast */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-4); }
.section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.section--tint { background: var(--brand-white); }
.stack > * + * { margin-top: var(--space-4); }
.skip-link { position: absolute; left: var(--space-2); top: -100px; z-index: 100; background: var(--brand-espresso); color: var(--brand-cream); padding: var(--space-3) var(--space-4); border-radius: var(--radius-button); font-weight: 600; }
.skip-link:focus { top: var(--space-2); }
.eyebrow { font-weight: 600; font-size: var(--text-small); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 var(--space-2); }
.lede { font-size: 1.125rem; }

/* ---------- 4. Header & nav ------------------------------------------- */
.site-header { background: var(--brand-cream); border-bottom: 1px solid rgba(62,39,35,.12); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 72px; }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; min-height: var(--tap); }
.brand img { width: 56px; height: 56px; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.1; }
@media (min-width: 26rem) { .brand__name { font-size: 1.125rem; } }
.brand__tag { display: none; font-family: var(--font-body); font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: var(--tap); min-height: var(--tap); padding: 0 var(--space-3); background: transparent; border: 1.5px solid var(--brand-espresso); border-radius: var(--radius-button); color: var(--brand-espresso); font: 600 15px/1 var(--font-body); text-decoration: none; cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; flex: none; }
.cart-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--brand-sage); font-size: 13px; }
.js .primary-nav { display: none; }
.primary-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--brand-cream); border-bottom: 1px solid rgba(62,39,35,.12); padding: var(--space-3) var(--space-4) var(--space-5); box-shadow: 0 10px 20px rgba(62,39,35,.08); }
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav a, .primary-nav .sub-toggle { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-2); font-weight: 600; text-decoration: none; width: 100%; background: none; border: 0; color: inherit; font: 600 1rem var(--font-body); cursor: pointer; text-align: left; }
.primary-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sub-toggle svg { width: 16px; margin-left: 6px; transition: transform .15s; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.subnav { padding-left: var(--space-4) !important; }
.js .subnav { display: none; }
.subnav.is-open { display: block; }
.subnav a { font-weight: 400; padding-top: 8px !important; padding-bottom: 8px !important; line-height: 1.3; }
.menu-toggle { display: none; }
.js .menu-toggle { display: inline-flex; }
html:not(.js) .js-only, .js .nojs-only { display: none !important; }
html:not(.js) .primary-nav .subnav { display: none; }

@media (min-width: 26rem) { .brand__tag { display: block; } }
@media (min-width: 60rem) {
  .menu-toggle, .js .menu-toggle { display: none; }
  .primary-nav { order: -1; }
  .primary-nav, .js .primary-nav, .primary-nav.is-open { display: block; position: static; padding: 0; box-shadow: none; border: 0; background: none; }
  .primary-nav > ul { display: flex; gap: var(--space-2); align-items: center; }
  .primary-nav > ul > li { position: relative; }
  .subnav { position: absolute; top: 100%; left: 0; min-width: 16rem; background: var(--brand-white); border: 1px solid rgba(62,39,35,.15); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-2) !important; z-index: 60; }
  .brand img { width: 64px; height: 64px; }
  .brand__name { font-size: 1.375rem; }
}

/* ---------- 5. Buttons ------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap); padding: 10px 24px; border-radius: var(--radius-button); font: 600 15px/1.2 var(--font-body); letter-spacing: .03em; text-decoration: none; cursor: pointer; border: 0; text-align: center; }
.btn--primary { background: var(--brand-sage); color: var(--brand-espresso); }
.btn--secondary { background: transparent; color: var(--brand-espresso); border: 1.5px solid var(--brand-espresso); }
.btn--danger { background: var(--fn-danger); color: var(--brand-white); }
.btn--venmo { background: var(--brand-espresso); color: var(--brand-cream); } /* see HANDOFF: Venmo button */
.btn:hover:not([disabled]) { filter: brightness(.9); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--fn-disabled-bg); color: var(--fn-disabled-text); border-color: transparent; cursor: not-allowed; filter: none; }
.btn--block { width: 100%; }
.btn--lg { min-height: 52px; font-size: 16px; padding: 12px 28px; }
.btn--caps { text-transform: uppercase; letter-spacing: .08em; }
.link-btn { background: none; border: 0; padding: 0 var(--space-2); min-height: var(--tap); min-width: var(--tap); font: 600 var(--text-small) var(--font-body); color: var(--brand-espresso); text-decoration: underline; cursor: pointer; }

/* ---------- 6. Badges & trust strip ----------------------------------- */
.badge { display: inline-block; align-self: flex-start; padding: 2px 8px; border-radius: var(--radius-pill); font: 600 11px/1.5 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-espresso); border: 1px solid var(--badge-accent, var(--brand-sage)); background: color-mix(in srgb, var(--badge-accent, var(--brand-sage)) 20%, white); }
.badge--bread   { --badge-accent: var(--cat-bread); }
.badge--cookie  { --badge-accent: var(--cat-cookie); }
.badge--special { --badge-accent: var(--cat-special); }
.badge--ngi     { --badge-accent: var(--cat-ngi); }
.badge--store   { --badge-accent: var(--cat-store); }
.badge--coop    { --badge-accent: var(--cat-coop); } /* decorative border is faint on white; text carries the meaning */
.badge--season  { --badge-accent: var(--cat-season); }
.trust { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 13px; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 16px; height: 16px; flex: none; }

/* ---------- 7. Hero --------------------------------------------------- */
.hero { padding: var(--space-6) 0 var(--space-7); }
.hero .wrap { display: grid; gap: var(--space-6); align-items: center; }
.hero h1 { font-size: var(--text-hero); max-width: 16ch; }
.hero__media { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; background: var(--brand-white); position: relative; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 52rem) { .hero .wrap { grid-template-columns: 1.05fr 1fr; } }

.drop-banner { background: var(--brand-lavender); }
.drop-banner .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.drop-banner .wrap { flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; }
.drop-banner .wrap > svg { width: 22px; height: 22px; flex: none; margin-top: 11px; }
.drop-banner__list { list-style: none; margin: 0; padding: 0; font-weight: 600; }
.drop-banner__list a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------- 8. Category tiles ----------------------------------------- */
.tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
.tile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); min-height: 9rem; border-radius: var(--radius-card); background: var(--tile-bg, var(--brand-sage)); text-decoration: none; height: 100%; }
.tile svg { width: 36px; height: 36px; }
.tile__name { font-weight: 600; font-size: 1.0625rem; line-height: 1.25; }
.tile__label { font-size: var(--text-small); }
.tile:hover { filter: brightness(.95); }
/* Columns sized to the tile count (a fixed five-column grid left empty slots). */
@media (min-width: 48rem) {
  .tiles { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .tiles--drops { grid-template-columns: repeat(auto-fit, minmax(13rem, 24rem)); }
}

/* ---------- 9. Product grid & card ------------------------------------ */
.grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
/* This Week's Specials: 2 per row on a phone, 4 on a desktop (the rule below). */
.grid--specials { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 36rem) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--brand-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; position: relative; }
.card__media { aspect-ratio: 4 / 3; background: var(--brand-cream); position: relative; display: grid; place-items: center; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
/* No photo yet: the seal and the name on soft sage, in the photo's frame. */
.card__media--tile { background: var(--brand-sage-soft); align-content: center; justify-items: center; gap: var(--space-2); padding: var(--space-4); text-align: center; }
.card__media--tile .card__tile-seal { width: 96px; height: 96px; object-fit: contain; }
.card__tile-name { font: 600 1.125rem/1.25 var(--font-display); color: var(--brand-espresso); max-width: 18ch; }
.card--soldout .card__media img { opacity: .6; filter: grayscale(.6); }
.card__media .ph-icon { width: 56px; height: 56px; opacity: 1; }
.card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.card__name { font: 600 1rem/1.35 var(--font-body); margin: 0; }
.card__desc { font-size: var(--text-small); margin: 0; }
.card__contains { font-size: var(--text-small); margin: 0; }
.card__contains strong { font-weight: 600; }
.card__ngi { font-size: var(--text-small); margin: 0; padding: var(--space-2) var(--space-3); background: color-mix(in srgb, var(--brand-sky) 25%, white); border-left: 3px solid var(--brand-sky); border-radius: 4px; }
.card__price { font: 700 var(--text-price)/1.2 var(--font-display); margin: 0; }
.card__buy { margin-top: auto; display: grid; gap: var(--space-2); }
.card__buy-row { display: flex; gap: var(--space-2); align-items: stretch; flex-wrap: wrap; }
.card__buy-row .btn { flex: 1 1 8rem; }
.low-stock { color: var(--fn-warning-text); font-weight: 600; font-size: 13px; margin: 0; }
.soldout-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(229,229,229,.82); }
.soldout-overlay span { background: var(--fn-disabled-bg); color: var(--fn-disabled-text); border: 1.5px solid var(--fn-disabled-text); font-weight: 600; letter-spacing: .12em; padding: 6px 14px; border-radius: var(--radius-pill); }
.photo-flag { position: absolute; left: 8px; bottom: 8px; }

/* Qty picker */
.qty { flex: none; display: inline-flex; align-items: stretch; border: 1px solid var(--fn-field-border); border-radius: var(--radius-button); background: var(--brand-white); }
.qty button { flex: none; width: var(--tap); min-width: var(--tap); min-height: var(--tap); background: none; border: 0; font: 600 20px/1 var(--font-body); color: var(--brand-espresso); cursor: pointer; }
.qty button[disabled] { color: var(--fn-disabled-text); background: none; cursor: not-allowed; }
.qty input[type=number] { flex: none; width: 3rem; min-height: var(--tap); padding: 0; border-radius: 0; text-align: center; border: 0; border-left: 1px solid var(--fn-field-border); border-right: 1px solid var(--fn-field-border); font: 600 16px var(--font-body); color: var(--brand-espresso); background: transparent; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- 10. Shop layout & filter --------------------------------- */
.shop { display: grid; gap: var(--space-5); }
.shop > *, .checkout > *, .two-col > * { min-width: 0; }
.filter fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.filter legend { font-weight: 600; margin-bottom: var(--space-2); }
.chips { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); scrollbar-width: thin; }
.chip { flex: none; position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1.5px solid var(--brand-espresso); background: var(--brand-white); font-weight: 600; font-size: 15px; white-space: nowrap; }
.chip span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--chip-accent, transparent); border: 1px solid rgba(62,39,35,.35); }
.chip input:checked + span { background: var(--brand-sage); }
.chip input:focus-visible + span { outline: 3px solid var(--fn-focus); outline-offset: 2px; }
.result-count { font-size: var(--text-small); margin: 0 0 var(--space-3); }
/* All products search; the cards it filters out are [hidden], which a card's display: flex would otherwise override. */
.shop-search { display: grid; gap: 6px; margin: 0 0 var(--space-3); max-width: 28rem; }
.shop-search label { font: 600 14px/1.4 var(--font-body); }
.shop-search[hidden], .card[hidden], .addon[hidden] { display: none; }
.no-match { margin: 0 0 var(--space-4); }
/* "Goes great with": on Bread & Rolls cards and in the cart. */
.addon { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px dashed rgba(62,39,35,.25); }
.addon__title { margin: 0; font: 600 var(--text-small) var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.addon--cart { margin: var(--space-4) 0 0; padding: var(--space-4); border: 1px dashed rgba(62,39,35,.35); border-radius: var(--radius-card); background: var(--brand-cream); }
.cat-heading { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 3px solid var(--heading-accent, var(--brand-sage)); }
.cat-heading h2 { margin: 0; font-size: 1.5rem; }
@media (min-width: 60rem) {
  .shop { grid-template-columns: 15rem 1fr; align-items: start; }
  .filter { position: sticky; top: 96px; }
  .chips { flex-direction: column; overflow: visible; }
  .chip span { width: 100%; border-radius: var(--radius-button); white-space: normal; line-height: 1.3; padding-top: 6px; padding-bottom: 6px; }
}

/* ---------- 11. Forms ------------------------------------------------- */
.field { display: grid; gap: 6px; margin-bottom: var(--space-4); }
.field label, .legend { font: 600 14px/1.4 var(--font-body); }
.req { font-weight: 600; }
.hint { font-size: 13px; margin: 0; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px 12px; border: 1px solid var(--fn-field-border); border-radius: var(--radius-field);
  background: var(--brand-white); color: var(--brand-espresso); font: 400 16px/1.4 var(--font-body);
}
textarea { min-height: 7rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--fn-focus); outline-offset: 1px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-sage) 45%, transparent); }
.field--error input, .field--error textarea, .field--error select { border: 2px solid var(--fn-danger); }
.error-msg { color: var(--fn-danger); font-size: 13px; font-weight: 600; margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.error-msg::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--fn-danger); color: #fff; font-size: 12px; line-height: 1; margin-top: 1px; }
.form-grid { display: grid; gap: 0 var(--space-4); }
@media (min-width: 40rem) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .span-2 { grid-column: 1 / -1; } }
fieldset.group { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
fieldset.group > legend { padding: 0; margin-bottom: var(--space-2); }
.honeypot { position: absolute; left: -9999px; }
.counter { font-size: 13px; text-align: right; margin: 0; }

/* Radio cards */
.radio-list { display: grid; gap: var(--space-2); }
.radio-list--2 { grid-template-columns: 1fr; }
@media (min-width: 30rem) { .radio-list--2 { grid-template-columns: 1fr 1fr; } }
.radio-card { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--fn-field-border); border-radius: var(--radius-card); background: var(--brand-white); cursor: pointer; }
.radio-card input { width: 22px; height: 22px; accent-color: var(--brand-espresso); flex: none; margin: 0; }
.radio-card:has(input:checked) { border: 2px solid var(--brand-espresso); background: color-mix(in srgb, var(--brand-sage) 22%, white); }
.radio-card:has(input:focus-visible) { outline: 3px solid var(--fn-focus); outline-offset: 2px; }
.radio-card__main { font-weight: 600; display: block; }
.radio-card__sub { font-size: 13px; display: block; }

/* Checkout steps */
.checkout { display: grid; gap: var(--space-5); }
@media (min-width: 60rem) { .checkout { grid-template-columns: 1fr 22rem; align-items: start; } .checkout > .steps-a { grid-column: 1; grid-row: 1; } .checkout > .steps-b { grid-column: 1; grid-row: 2; } .summary { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 96px; } }
.step { background: var(--brand-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-5) var(--space-4); margin-bottom: var(--space-4); }
@media (min-width: 40rem) { .step { padding: var(--space-5); } }
.step__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.step__num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-sage); font-weight: 600; flex: none; }
.step__head h2 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--text-h3); }
.cart-line { display: grid; grid-template-columns: 80px 1fr; align-items: start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid rgba(62,39,35,.12); }
.cart-line:last-child { border-bottom: 0; }
.cart-line__thumb { width: 80px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--brand-cream); display: grid; place-items: center; }
.cart-line__thumb svg { width: 30px; height: 30px; }
.cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__thumb--tile { background: var(--brand-sage-soft); }
.cart-line__thumb--tile img { width: 40px; height: 40px; object-fit: contain; }
.cart-line__name { font-weight: 600; margin: 0; }
.cart-line__meta { font-size: 13px; margin: 0; }
.cart-line__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.cart-line__price { font-weight: 600; }
.summary-box { background: var(--brand-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-5); }
.totals { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; }
.totals th { text-align: left; font-weight: 400; padding: 6px 0; }
.totals td { text-align: right; padding: 6px 0; font-weight: 600; }
.totals tr.total th, .totals tr.total td { border-top: 2px solid var(--brand-espresso); padding-top: var(--space-3); font-weight: 700; font-size: 1.125rem; }

/* Status / result lines */
.status { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); border: 1.5px solid; font-weight: 600; margin: 0 0 var(--space-4); }
.status svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.status p { margin: 0; }
.status small { display: block; font-weight: 400; font-size: 13px; }
.status--ok { background: var(--fn-success-bg); border-color: var(--brand-espresso); }
.status--fee { background: color-mix(in srgb, var(--brand-buttercream) 70%, white); border-color: var(--brand-espresso); }
.status--no { background: color-mix(in srgb, var(--brand-rose) 35%, white); border-color: var(--brand-espresso); }
.status--error { background: var(--brand-white); border-color: var(--fn-danger); }
.status--info { background: color-mix(in srgb, var(--brand-sky) 30%, white); border-color: var(--brand-espresso); }
.status--loading { background: var(--brand-white); border-color: var(--fn-field-border); border-style: dashed; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--fn-field-border); border-top-color: var(--brand-espresso); animation: spin 1s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } * { scroll-behavior: auto !important; transition: none !important; } }
.policy-line { font-size: var(--text-small); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--brand-sage); background: var(--brand-cream); margin: 0 0 var(--space-3); }

/* Confirmation / Venmo */
.confirm-head { text-align: center; padding: var(--space-6) 0 var(--space-4); }
.confirm-head .check { width: 64px; height: 64px; margin: 0 auto var(--space-3); }
.order-no { display: inline-block; font: 700 1.375rem/1.2 var(--font-body); letter-spacing: .04em; padding: var(--space-2) var(--space-4); background: var(--brand-buttercream); border: 1.5px dashed var(--brand-espresso); border-radius: var(--radius-button); }
.pay-panel { background: var(--brand-white); border: 2px solid var(--brand-espresso); border-radius: var(--radius-card); padding: var(--space-5) var(--space-4); }
.pay-grid { display: grid; gap: var(--space-5); align-items: center; }
.qr { width: 220px; max-width: 100%; margin: 0 auto; padding: 12px; background: #fff; border: 1px solid rgba(62,39,35,.2); border-radius: 8px; }
.pay-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); }
.pay-facts dt { font-weight: 400; }
.pay-facts dd { margin: 0; font-weight: 700; font-size: 1.125rem; }
.pay-desktop { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 48rem) {
  .pay-mobile { display: none; }
  .pay-desktop { display: block; }
  .pay-grid { grid-template-columns: 240px 1fr; }
}
.copy-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* ---------- 12. Content blocks --------------------------------------- */
.prose { max-width: 42rem; }
.prose h2 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: var(--space-2); }
blockquote.pull { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); border-left: 4px solid var(--brand-sage); background: var(--brand-white); border-radius: 0 var(--radius-card) var(--radius-card) 0; }
blockquote.pull p:last-child { margin: 0; }
.mission { background: var(--brand-white); border-radius: var(--radius-card); padding: var(--space-6) var(--space-5); text-align: left; }
.mission > * { max-width: 44rem; }
.mission p { font-size: 1.125rem; }
.timeline { border-left: 3px solid var(--brand-sage); padding-left: var(--space-5); margin: var(--space-5) 0; }
.timeline__year { display: inline-block; font: 700 1.25rem var(--font-display); background: var(--brand-buttercream); padding: 2px 10px; border-radius: var(--radius-button); margin-bottom: var(--space-3); }
.pillars { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
@media (min-width: 40rem) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { background: var(--brand-white); border-radius: var(--radius-card); padding: var(--space-5); border-top: 4px solid var(--pillar-accent, var(--brand-sage)); }
.people { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
@media (min-width: 52rem) { .people { grid-template-columns: repeat(4, 1fr); } }
.person { background: var(--brand-white); border-radius: var(--radius-card); padding: var(--space-4); text-align: center; }
.person__role { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: var(--space-2); }
.steps3 { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .steps3 { grid-template-columns: repeat(3, 1fr); } }
.steps3 li { counter-increment: s; background: var(--brand-white); border-radius: var(--radius-card); padding: var(--space-5); position: relative; }
.steps3 li::before { content: counter(s); display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-sage); font-weight: 700; margin-bottom: var(--space-3); }
.table-wrap { position: relative; overflow-x: auto; border-radius: var(--radius-card); background: var(--brand-white); box-shadow: var(--shadow-card); margin: var(--space-4) 0; }
table.data { width: 100%; border-collapse: collapse; min-width: 32rem; }
table.data caption { text-align: left; font-weight: 600; padding: var(--space-3) var(--space-4) 0; }
table.data th, table.data td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid rgba(62,39,35,.12); vertical-align: top; }
table.data thead th { background: color-mix(in srgb, var(--brand-sage) 30%, white); font-weight: 600; font-size: var(--text-small); letter-spacing: .04em; }
table.data a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
table.data td.num { text-align: right; white-space: nowrap; font-weight: 600; }
.disclosure-box { border: 2px solid var(--brand-espresso); background: var(--brand-white); border-radius: var(--radius-card); padding: var(--space-5); }
.disclosure-box p { font-weight: 600; }
.label-sample { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; background: var(--brand-white); border: 1.5px solid var(--brand-espresso); border-radius: 8px; padding: var(--space-4); white-space: pre-wrap; overflow-wrap: anywhere; }
.faq details { background: var(--brand-white); border-radius: var(--radius-card); margin-bottom: var(--space-2); }
.faq summary { min-height: var(--tap); padding: var(--space-3) var(--space-4); font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); }
.faq details > div { padding: 0 var(--space-4) var(--space-4); }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.info-list li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start; }
.info-list svg { width: 24px; height: 24px; }
.two-col { display: grid; gap: var(--space-6); }
@media (min-width: 56rem) { .two-col { grid-template-columns: 1fr 1fr; align-items: start; } }
.box { background: var(--brand-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-5) var(--space-4); }
@media (min-width: 40rem) { .box { padding: var(--space-5); } }

/* Gift boxes */
.tier-list { display: grid; gap: var(--space-3); }
@media (min-width: 52rem) { .tier-list { grid-template-columns: repeat(3, 1fr); } }
.tier { flex-direction: column; align-items: flex-start; }
.tier .tier__top { display: flex; align-items: center; gap: var(--space-3); width: 100%; }
.tier__price { font: 700 1.125rem var(--font-display); margin-left: auto; }
.giftbox { border: 1.5px solid var(--fn-field-border); border-radius: var(--radius-card); background: var(--brand-white); padding: var(--space-4); margin-bottom: var(--space-4); }
.giftbox > legend { font: 700 1.125rem var(--font-display); padding: 0 var(--space-2); }

/* 404 */
.notfound { text-align: center; padding: var(--space-8) 0; }
.notfound img { width: 140px; margin: 0 auto var(--space-4); }

/* ---------- 13. Footer ------------------------------------------------ */
.site-footer { background: var(--brand-sage); color: var(--brand-espresso); padding: var(--space-7) 0 var(--space-5); margin-top: var(--space-7); }
.footer-grid { display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-footer img.seal { width: 96px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-2); }
.footer-bottom { border-top: 1px solid rgba(62,39,35,.3); margin-top: var(--space-5); padding-top: var(--space-4); font-size: var(--text-small); }
.newsletter { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.newsletter input { flex: 1 1 12rem; }


/* ---------- 14. Site additions (not in the mockups) -------------------- */
/* Mockup-only review notes, state switches and the mock bar are NOT shipped
   (see docs/OPEN_ITEMS.md, "Mockup review notes"). Inline style attributes in
   the mockups are replaced by the classes below (the CSP allows 'self' only). */
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
main:focus { outline: none; }


.cart-btn { position: relative; }
.icon-btn .cart-word { font-weight: 600; }

/* Category accents (tiles, chips, badges, pillars, headings) */
.tile--bread   { --tile-bg: var(--cat-bread); }
.tile--cookie  { --tile-bg: var(--cat-cookie); }
.tile--special { --tile-bg: var(--cat-special); }
.tile--ngi     { --tile-bg: var(--cat-ngi); }
.tile--store   { --tile-bg: var(--cat-store); }
.tile--coop    { --tile-bg: var(--cat-coop); }
.tile--season  { --tile-bg: var(--cat-season); }
.chip--all     { --chip-accent: transparent; }
.chip--bread   { --chip-accent: var(--cat-bread); }
.chip--cookie  { --chip-accent: var(--cat-cookie); }
.chip--special { --chip-accent: var(--cat-special); }
.chip--ngi     { --chip-accent: var(--cat-ngi); }
.chip--store   { --chip-accent: var(--cat-store); }
.chip--coop    { --chip-accent: var(--cat-coop); }
.chip--catering{ --chip-accent: var(--brand-sage); }
.pillar--sage { --pillar-accent: var(--brand-sage); }
.pillar--rose { --pillar-accent: var(--brand-rose); }
.pillar--lavender { --pillar-accent: var(--brand-lavender); }
.pillar--sky { --pillar-accent: var(--brand-sky); }
/* Shop filter as links (one page per category, works without JavaScript) */
.chips a.chip { text-decoration: none; display: inline-flex; }
.chips a.chip span { pointer-events: none; }
.chips a.chip[aria-current="page"] span { background: var(--brand-sage); text-decoration: underline; text-underline-offset: 4px; }
.chips a.chip:focus-visible { outline: none; box-shadow: none; }
.chips a.chip:focus-visible span { outline: 3px solid var(--fn-focus); outline-offset: 2px; }
.chips { padding-top: 4px; padding-left: 4px; }

.card__media .ph-icon { color: var(--brand-espresso); }
.card__note { font-size: var(--text-small); margin: 0; }
.card__ingredients { font-size: var(--text-small); margin: 0; }
.card__ingredients summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; gap: var(--space-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Disclosure marker: summary is display:flex, which drops the native triangle,
   so a chevron is drawn (review round 3). */
.card__ingredients summary, .faq summary { list-style: none; }
.card__ingredients summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.card__ingredients summary::after, .faq summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.faq summary::after { margin-left: auto; }
.card__ingredients details[open] > summary::after, details[open].card__ingredients > summary::after, .faq details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.card__unavailable { font-size: var(--text-small); font-weight: 600; margin: 0; padding: var(--space-2) var(--space-3); background: var(--fn-disabled-bg); color: var(--fn-disabled-text); border-radius: 4px; }
.card__option { font-size: var(--text-small); margin: 0; font-weight: 600; }
.add-status { font-size: var(--text-small); margin: 0; min-height: 1.4em; }
.add-form { display: grid; gap: var(--space-2); }

/* Forms: choices (checkbox and radio rows) with 44px targets */
.choice { display: flex; align-items: flex-start; gap: var(--space-3); }
.choice input { width: 22px; height: 22px; margin: 11px 0 0; flex: none; accent-color: var(--brand-espresso); }
.choice label { display: block; min-height: var(--tap); padding: 12px 0; font-weight: 600; font-size: var(--text-small); line-height: 1.5; cursor: pointer; }
.field-hint, .note { font-size: 13px; }
.field-hint { margin: 0; }
.form-status { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); border: 1.5px solid var(--brand-espresso); font-weight: 600; margin: 0 0 var(--space-4); }
.form-status.ok { background: var(--fn-success-bg); }
.form-status.error { background: var(--brand-white); border-color: var(--fn-danger); }
.form-status ul { margin: var(--space-2) 0 0; padding-left: 1.1rem; font-weight: 400; }
.form-status h2 { font-family: var(--font-body); font-size: 1rem; margin: 0; }
.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.stack-sm > * + * { margin-top: var(--space-3); }

/* Utah disclosure (owner's verbatim lines) */
.disclosure { font-size: var(--text-small); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--brand-sage); background: var(--brand-white); border-radius: 0 var(--radius-card) var(--radius-card) 0; margin: 0 0 var(--space-4); }
.disclosure p { margin: 0 0 var(--space-2); }
.disclosure p:last-child { margin: 0; }
.disclosure a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Section helpers that replace inline styles */
.section--top { padding-top: var(--space-6); }
.section--flush-top { padding-top: var(--space-4); }
.section--flush-bottom { padding-bottom: var(--space-4); }
.wrap--narrow { max-width: 44rem; }
.wrap--text { max-width: 48rem; }
.wrap--menu { max-width: 56rem; }
.hero--single .wrap { grid-template-columns: 1fr; }
.hero--lavender { background: var(--brand-lavender); }
.hero--sage { background: color-mix(in srgb, var(--brand-sage) 35%, var(--brand-cream)); }
.hero__text { max-width: 44rem; }
.box--rose { border-top: 6px solid var(--brand-rose); }
.box--honest { border-left: 6px solid var(--brand-buttercream); }
.box + .box { margin-top: var(--space-5); }
.h-plain { font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; }
.center { text-align: center; }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.m-0 { margin: 0; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.table-wrap--flat { box-shadow: none; margin: 0; }
table.data.data--fit { min-width: 0; }
table.data th.th-row { font-weight: 600; }
table.data .num-head { text-align: right; }
.summary-box h2 { font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; }
.status__actions { margin-top: var(--space-2); }

/* Cart lines rendered by cart.mjs */
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line .recipient, .cart-line .gift { font-size: 13px; margin: var(--space-1) 0 0; }
.cart-line .recipient-status.error { color: var(--fn-danger); font-weight: 600; }
.cart-line p.error { color: var(--fn-danger); font-weight: 600; margin: 4px 0; }
.cart-line__thumb { color: var(--brand-espresso); }

/* Confirmation */
.order-no:focus-visible { outline-offset: 4px; }
/* The heading is focused on load for screen readers; no box is drawn around it. */
#order-heading:focus { outline: none; box-shadow: none; }
.pay-web { margin: var(--space-3) 0 0; }
.pay-panel[data-device="phone"] .pay-desktop { display: none; }
.pay-panel[data-device="desktop"] .pay-mobile { display: none; }
.pay-panel[data-device="desktop"] .pay-desktop { display: block; }
@media (min-width: 48rem) { .pay-panel[data-device="desktop"] .pay-grid { grid-template-columns: 240px 1fr; } }
.qr svg { width: 100%; height: auto; }
.break { overflow-wrap: anywhere; word-break: break-word; }

/* Gift boxes: per-box recipient fieldset */
.recipient-fields { border: 1.5px solid var(--fn-field-border); border-radius: var(--radius-card); background: var(--brand-white); padding: var(--space-4); margin: 0; min-width: 0; }
.recipient-fields > legend { font: 700 1.125rem var(--font-display); padding: 0 var(--space-2); }
/* A gift basket's choices: one group of radio buttons each (menu update, 2026-11-08). */
.choice-group { border: 0; padding: 0; margin: 0 0 var(--space-3); min-width: 0; }
.choice-group > legend { font-weight: 700; font-size: var(--text-small); padding: 0; margin-bottom: var(--space-1); }
/* The label is the tap target: it fills the row, so a short option ("Fudge") is still 44px wide. */
.choice-group .choice label { flex: 1; }
.card__choices, .cart-line__choices { font-size: var(--text-small); margin: 0 0 var(--space-3); padding-left: 1.25rem; }
.textarea-label { display: grid; gap: 6px; font: 600 14px/1.4 var(--font-body); }

/* Sticky mini-cart on phones */
.sticky-cart { position: sticky; bottom: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--brand-cream); border-top: 1px solid rgba(62,39,35,.2); box-shadow: 0 -4px 12px rgba(62,39,35,.08); }
@media (min-width: 60rem) { .sticky-cart { display: none; } }
.footer-seal { width: 96px; height: 96px; }
.notfound img { height: auto; }
@media print { .site-header, .site-footer, .sticky-cart { display: none; } }
.center-row { justify-content: center; }
.total-line { font-size: 1.125rem; margin: var(--space-4) 0; }
.cart-line__name { font-size: 1rem; }
.tap-link { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
@media (max-width: 51.99rem) { .hero__media.card__media { display: none; } }

/* Review round 3: tables stack on phones (no clipped third column). Each cell
   shows its column name from data-label; the header row stays for screen readers. */
@media (max-width: 39.99rem) {
  table.data:not(.data--fit) { min-width: 0; }
  table.data:not(.data--fit), table.data:not(.data--fit) caption, table.data:not(.data--fit) tbody,
  table.data:not(.data--fit) tr, table.data:not(.data--fit) th, table.data:not(.data--fit) td { display: block; width: 100%; }
  table.data:not(.data--fit) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.data:not(.data--fit) tr { border-bottom: 1px solid rgba(62,39,35,.12); padding: var(--space-2) 0; }
  table.data:not(.data--fit) th, table.data:not(.data--fit) td { border-bottom: 0; padding: var(--space-1) var(--space-4); }
  table.data td::before { content: attr(data-label); display: block; font-weight: 600; font-size: 13px; }
}

/* Review round 3: checkout errors inline under each field */
[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]) { border: 2px solid var(--fn-danger); }
.choice + .error-msg, .field .error-msg { margin: var(--space-1) 0 var(--space-3); }
.form-status li a { display: inline-flex; align-items: center; min-height: var(--tap); }
.add-status a { margin-left: var(--space-2); }