:root {
  --ink: #111111;          /* text, menu background */
  /* Palette, same names and values as the back office theme (admin.css).
     color-1 (blue): the main action on a screen (buttons), links, keyboard focus and the
     small radio dot. Chosen options (sizes, grinds, chips, cards, tabs) and progress use
     ink, as the theme's selected options do (neutral-10), so blue stays rare.
     color-4 (yellow): money saved, and only that: the offers ticker, sale labels, "Save" and
     "% off" badges, "You save", savings in Ways to Save, the welcome code. Not for
     navigation, progress or instructions. */
  --color-1: #2457f5;
  --color-1-transparent: #2457f533;
  --color-4: #fff0b8;
  --cte-accent: var(--color-1);
  --cte-accent-text: #ffffff; /* text on color-1 */
  --ink-muted: #666666;    /* secondary text: 4.5:1+ on white, panels and tiles */
  --line: #e4e4e4;
  --paper: #ffffff;
  --tile: #e6e6e6;         /* product image background */
  --open: #3a9d5d;         /* "open now" dot */
  --open-text: #2f7d4c;    /* green text, readable on white */
  --error: #c4231a;        /* wrong or missing input */
  --error-tint: #fdf0ef;
  --gutter: 16px;
  --font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* The colour at the phone's top and bottom edges (see .edge-top). */
  --edge: var(--paper);
  --edge-top-height: max(12px, env(safe-area-inset-top));
  --edge-bottom-height: max(12px, env(safe-area-inset-bottom));
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* iPhone Safari enlarges long lines of text on its own (the ticker's longest item came out
     bigger than the rest): keep every size as set. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--edge);
  scroll-behavior: smooth;
  scroll-padding-top: 65.5px;
  overflow-x: clip;
}

body {
  background: var(--edge);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: 3px;
}

.muted {
  color: var(--ink-muted);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  padding: 5px 8px;
  background: var(--ink);
  color: var(--paper);
}

.skip-link:focus {
  left: 8px;
}

/* Page entrance: a short fade up as soon as the page arrives, without waiting for the scripts. */

/* The page itself is paper; body's colour (the bottom edge's) only shows past the ends. */
main,
.footer {
  background: var(--paper);
}

main {
  animation: page-in 0.35s var(--ease) backwards; /* not "both": a held transform would turn main into the box that fixed bars (Add to Cart) pin to */
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Scroll reveal */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s var(--ease) calc(var(--i, 0) * 60ms),
    transform 0.5s var(--ease) calc(var(--i, 0) * 60ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Header ───────────────────────────────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(18.5px + env(safe-area-inset-top)) var(--gutter) 8px;
  background: var(--paper);
  transition: transform 0.45s var(--ease); /* only transforms: the header never changes height, so the page doesn't jump */
}

.header.is-hidden {
  transform: translateY(-100%);
}

.logo {
  display: block;
}

.logo-mark {
  display: block;
  width: 36px;
  height: auto;
  overflow: visible;
  transition: transform 0.6s var(--ease);
}

.header.is-scrolled .logo-mark {
  transform: scale(0.8);
  transform-origin: left center;
}

/* Hover or focus: the A and dot give way to a filled oval, cut into sixths, with one sixth lit. */
.logo-a,
.logo-fill,
.logo-sixth {
  transform-box: view-box;
  transform-origin: 23px 33px;
}

.logo-a {
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}

.logo-fill {
  fill: #111;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
}

.logo-sixth {
  fill: #b9b9b9;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s var(--ease) 0.15s, transform 0.5s var(--ease) 0.15s;
}

.logo-cuts line {
  fill: none;
  stroke: #fff;
  stroke-width: 1.2;
  /* Each cut (pathLength="1") draws out from the centre once the oval has filled. */
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.45s var(--ease) 0.2s;
}

.logo:hover .logo-a,
.logo:focus-visible .logo-a {
  opacity: 0;
  transform: scale(0.8);
}

.logo:hover .logo-fill,
.logo:focus-visible .logo-fill,
.logo:hover .logo-sixth,
.logo:focus-visible .logo-sixth {
  opacity: 1;
  transform: none;
}

.logo:hover .logo-cuts line,
.logo:focus-visible .logo-cuts line {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .logo-a,
  .logo-fill,
  .logo-sixth,
  .logo-cuts line {
    transition: none;
  }
}

.header-actions {
  display: flex;
  gap: 18.5px;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.header-actions button:hover {
  opacity: 0.6;
}

[data-cart-count] {
  display: inline-block;
}

[data-cart-count].bump {
  animation: bump 0.5s var(--ease);
}

@keyframes bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.6); }
  100% { transform: scale(1); }
}

/* ── Overlays ─────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  /* At least what's visible: after the keyboard closes, iPhone Safari can keep the page's frame a
     keyboard's height short, and a sheet sized to it stopped there (--vv-bottom: see app.js). */
  bottom: auto;
  height: max(100%, var(--vv-bottom, 0px));
  z-index: 50;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}

.overlay.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s var(--ease);
}

.close {
  width: 18px;
  height: 18px;
  transition: transform 0.4s var(--ease);
}

.close:hover {
  transform: rotate(90deg);
}

.close svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.45; /* about 1px at this size */
  fill: none;
}

/* The phone's edges: white, black on the home photo and the menu, white again in the cart and
   chat. Thin strips at the top and bottom, so Safari's status bar and controls take the colour. */
html:has(.header.on-hero),
html:has(#menu.is-open) {
  --edge: var(--ink);
}

html:has(.drawer.is-open) {
  --edge: var(--paper);
}

/* Safari takes the colour from the fixed element itself, so the strips carry it (and their
   ::after, as well). */
.edge-top,
.edge-bottom {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
  background: var(--edge);
}

.edge-top {
  top: 0;
  height: var(--edge-top-height);
}

.edge-bottom {
  bottom: 0;
  height: var(--edge-bottom-height);
}

.edge-top::after,
.edge-bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--edge);
}

/* Mouse-and-keyboard browsers have no status bar to colour. */
@media print, (hover: hover) and (pointer: fine) {
  .edge-top,
  .edge-bottom {
    display: none;
  }
}

/* Full-screen menu */

.menu {
  background: var(--ink);
  color: var(--paper);
  padding: calc(18.5px + env(safe-area-inset-top)) var(--gutter) calc(18.5px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.menu .close {
  position: absolute;
  top: calc(30px + env(safe-area-inset-top));
  right: var(--gutter);
}

.menu ul {
  font-size: clamp(18px, 4.9vw, 39px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.menu li {
  overflow: hidden;
}

.menu li > * {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.6s var(--ease);
}

.menu.is-open li > * {
  transform: none;
}

.menu li:nth-child(1) > * { transition-delay: 0.05s; }
.menu li:nth-child(2) > * { transition-delay: 0.1s; }
.menu li:nth-child(3) > * { transition-delay: 0.15s; }
.menu li:nth-child(4) > * { transition-delay: 0.2s; }
.menu-middle li > * { transition-delay: 0.24s !important; }
.menu-secondary li > * { transition-delay: 0.3s !important; }

/* Three groups, each set apart by a hairline: the shop, the company, then account and cart. */
.menu-primary li + li {
  margin-top: 0.08em;
}

.menu .menu-middle,
.menu .menu-secondary {
  margin-top: 19.5px;
  padding-top: 16.5px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.menu .menu-middle {
  font-size: clamp(14px, 3.78vw, 24px);
  line-height: 1.3;
}

.menu .menu-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 7.5px 19.5px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

/* Subscriptions: a button that opens its links underneath, one per line. */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font: inherit;
  color: inherit;
}

.menu-plus {
  position: relative;
  display: inline-block;
  flex: none;
  align-self: flex-start;
  top: -0.36em;
  margin: 0.12em 0 0 0.08em; /* small and raised to cap height, like a degree sign */
  width: 0.3em;
  height: 0.3em;
  transition: transform 0.5s var(--ease);
}

.menu-plus::before,
.menu-plus::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  margin-top: -0.5px;
  background: currentColor;
  transition: transform 0.5s var(--ease);
}

.menu-plus::after {
  transform: rotate(90deg);
}

/* Open: the plus turns a half turn as its upright folds flat into a minus. */
.menu-toggle[aria-expanded="true"] .menu-plus {
  transform: rotate(180deg);
}

.menu-toggle[aria-expanded="true"] .menu-plus::after {
  transform: rotate(0deg);
}

/* The links open underneath: the space grows, then each line rises in, like the menu itself. */
.menu li > .menu-sub {
  display: grid;
  grid-template-rows: 0fr;
  transform: none;
  transition: grid-template-rows 0.5s var(--ease);
  transition-delay: 0s;
}

.menu-toggle[aria-expanded="true"] + .menu-sub {
  grid-template-rows: 1fr;
}

.menu-sub > ul {
  min-height: 0;
  overflow: hidden;
  font-size: clamp(16px, 4.2vw, 24px);
  line-height: 1.3;
  letter-spacing: 0;
}

.menu-sub li:first-child {
  padding-top: 6px;
}

.menu-sub li:last-child {
  padding-bottom: 12px;
}

.menu-sub a {
  color: rgba(255, 255, 255, 0.6);
}

.menu .menu-sub li > * {
  transform: translateY(105%);
  transition: transform 0.45s var(--ease), color 0.2s var(--ease);
  transition-delay: 0s;
}

.menu.is-open .menu-toggle[aria-expanded="true"] + .menu-sub li > * {
  transform: none;
}

.menu.is-open .menu-toggle[aria-expanded="true"] + .menu-sub li:nth-child(1) > * { transition-delay: 0.08s, 0s; }
.menu.is-open .menu-toggle[aria-expanded="true"] + .menu-sub li:nth-child(2) > * { transition-delay: 0.13s, 0s; }
.menu.is-open .menu-toggle[aria-expanded="true"] + .menu-sub li:nth-child(3) > * { transition-delay: 0.18s, 0s; }

@keyframes menu-sub-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu li > .menu-sub,
  .menu .menu-sub li > *,
  .menu-plus,
  .menu-plus::after {
    transition: none;
  }
}

@media (hover: hover) {
  .menu a:hover,
  .menu button:hover {
    opacity: 0.6;
  }

  .menu .menu-sub a:hover {
    opacity: 1;
    color: var(--paper);
  }
}

/* Search: a line in the menu, after True Specialty; tapped, it opens into a field in place of
   the menu. */
.menu-search-open {
  font: inherit;
  color: inherit;
}

.menu-search-block {
  margin-right: 52px; /* clear of the close button */
}

.menu-search {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--paper);
  animation: menu-sub-in 0.3s var(--ease) both;
}

.menu-search[hidden] {
  display: none;
}

.menu-search input {
  flex: 1;
  min-width: 0;
  padding: 4px 0 8px;
  border: 0;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: max(16px, clamp(18px, 4.9vw, 39px)); /* 16px or more: no zoom on iPhone */
  line-height: 1.12;
  letter-spacing: -0.01em;
  -webkit-appearance: none;
  appearance: none;
}

.menu-search input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.menu-search input:focus {
  outline: none;
}

.menu-search input::-webkit-search-cancel-button {
  display: none;
}

.menu-search-cancel {
  flex: none;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

/* Quick picks (the field empty) and results, in place of the menu. */
.menu-results {
  animation: menu-sub-in 0.35s var(--ease) both;
}

.search-picks {
  display: grid;
  gap: 4px;
  font-size: clamp(18px, 4.9vw, 30px) !important;
  line-height: 1.25 !important;
}

.menu .search-picks li > *,
.menu .search-group li > * {
  transform: none;
  transition: none;
}

.search-group + .search-group {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.search-group h3 {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-size: 13px;
}

.menu .search-group ul {
  display: grid;
  gap: 10px;
  font-size: 17px;
  line-height: 1.3;
}

.search-group a {
  display: grid;
  gap: 2px;
}

.search-group small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.search-none {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
}

/* Cart drawer */

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.35);
}

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(100%, 460px);
  padding: calc(17px + env(safe-area-inset-top)) var(--gutter) calc(17px + env(safe-area-inset-bottom));
  background: var(--paper);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
}

.drawer.is-open .drawer-panel {
  transform: none;
}

.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px;
  font-size: 15px;
}

.drawer-head h2 {
  font: inherit;
}

.free-ship {
  font-size: 12.5px;
}

.free-ship .meter {
  height: 3px;
  margin: 5px 0 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.free-ship .meter span {
  display: block;
  height: 100%;
  background: var(--ink);
  transition: width 0.6s var(--ease);
}

.cart-lines {
  flex: 1;
  overflow-y: auto;
}

.cart-line {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 9px;
  padding: 10.5px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  animation: line-in 0.45s var(--ease);
}

@keyframes line-in {
  from { opacity: 0; transform: translateX(16px); }
}

.cart-thumb svg:not(.bag-svg) {
  display: block;
  width: 100%;
  background: var(--tile);
}

.cart-price {
  white-space: nowrap;
}

/* "You might like": one or two compact rows above the subtotal. */
.cart-suggest {
  padding: 10.5px 0;
  border-top: 1px solid var(--line);
}

.cart-suggest-title {
  margin-bottom: 7px;
  color: var(--ink-muted);
  font-size: 12.5px;
}

.cart-suggest ul {
  display: grid;
  gap: 7px;
  list-style: none;
}

.suggest {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10.5px;
  align-items: center;
  font-size: 13px;
  animation: line-in 0.45s var(--ease);
}

.suggest-thumb {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tile);
}

.suggest-info {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.suggest-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggest-info small {
  color: var(--ink-muted);
  font-size: 12px;
}

.suggest-add {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--ink);
  font-size: 13px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

/* Size: the pill opens the phone's own picker (a native select laid over it). */
.suggest-pick {
  position: relative;
  cursor: pointer;
}

.suggest-pick select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px; /* no zoom on iPhone */
  cursor: pointer;
}

/* The focus ring only for keyboard users on a computer, not after a tap or click. */
.suggest-pick {
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .suggest-pick:has(select:focus-visible) {
    outline: 2px solid var(--color-1);
    outline-offset: 2px;
  }
}

.suggest-add:active {
  background: var(--color-1);
  box-shadow: inset 0 0 0 1px var(--color-1);
  color: var(--cte-accent-text);
}

@media (hover: hover) {
  .suggest-add:hover {
    background: var(--color-1);
    box-shadow: inset 0 0 0 1px var(--color-1);
    color: var(--cte-accent-text);
  }
}

.cart-empty {
  padding: 21px 0;
}

.cart-empty a {
  display: inline-block;
  margin-top: 5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-ship-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}

.drawer-foot {
  padding-top: 10.5px;
  border-top: 1px solid var(--line);
}

.row {
  display: flex;
  justify-content: space-between;
  gap: 10.5px;
  margin-bottom: 9px;
}

/* ── Controls ─────────────────────────────────────────────── */

.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 10.5px 18px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-1);
  color: var(--cte-accent-text);
  text-align: center;
  isolation: isolate;
}

.button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

/* The fill slides in on hover with a mouse; on a touch screen only while pressed (a tap
   would otherwise leave it stuck on). */
@media (hover: hover) {
  .button:hover::after {
    transform: scaleX(1);
  }
}

.button:active::after {
  transform: scaleX(1);
  transition-duration: 0.2s;
}

/* Outline: white with an ink edge, filling blue on hover or when tapped. For the second action
   beside a main one (Buy once beside Subscribe), or a step that leads to the main action further
   down the page, so blue stays on the one thing to do. In the cart beside Apple Pay, Checkout
   takes this look too. */
.button.is-outline,
.drawer-foot:has([data-cart-express]:not([hidden])) [data-checkout-link] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: color 0.2s;
}

.button.is-outline::after,
.drawer-foot:has([data-cart-express]:not([hidden])) [data-checkout-link]::after {
  background: var(--color-1);
}

.button.is-outline:active,
.drawer-foot:has([data-cart-express]:not([hidden])) [data-checkout-link]:active {
  color: var(--cte-accent-text);
}

@media (hover: hover) {
  .button.is-outline:hover,
  .drawer-foot:has([data-cart-express]:not([hidden])) [data-checkout-link]:hover {
    color: var(--cte-accent-text);
  }
}

.button.is-disabled,
/* Not ready yet (e.g. no time chosen): a quiet grey button rather than a faded blue one. */
.button:disabled {
  background: var(--tile);
  color: var(--ink-muted);
  pointer-events: none;
}

.stepper {
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin-top: 5px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* − and + are part of the one box (as on the product page), not separate circles. */
.stepper button {
  width: 32px;
  height: 100%;
  border-radius: 8px;
  line-height: 1;
  color: var(--ink-muted);
  transition: color 0.2s;
}

.stepper button:hover {
  color: var(--ink);
}

.stepper span {
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pill {
  padding: 4px 9px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 12.5px;
  transition: background 0.25s, color 0.25s;
}

.pill:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Option chips (size, grind, bags, frequency) */

.options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 16px;
  border: 0;
}

.options legend {
  width: 100%;
  margin-bottom: 7px;
  color: var(--ink-muted);
}

.options label {
  cursor: pointer;
}

.options input,
.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.options span {
  display: inline-block;
  padding: 6px 10.5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}

.options label:hover span {
  border-color: var(--ink);
}

.options input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.options input:focus-visible + span,
.choice input:focus-visible + span {
  outline: 2px solid var(--color-1);
  outline-offset: 2px;
}

/* Larger stacked choices (subscription coffee, pickup location) */

.choice-list {
  display: grid;
  gap: 5px;
}

.choice {
  cursor: pointer;
}

.choice span {
  display: grid;
  gap: 1.5px;
  padding: 10.5px 12px;
  border: 1px solid var(--line);
  transition: border-color 0.25s, transform 0.25s var(--ease);
}

.choice em {
  font-style: normal;
  color: var(--ink-muted);
  font-size: 13px;
}

.choice:hover span {
  border-color: var(--ink-muted);
}

.choice input:checked + span {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* Open/closed dot */

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--ink-muted);
  vertical-align: 1px;
}

.dot.is-open {
  background: var(--open);
  box-shadow: 0 0 0 0 rgba(58, 157, 93, 0.6);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgba(58, 157, 93, 0); }
  100% { box-shadow: 0 0 0 0 rgba(58, 157, 93, 0); }
}

/* Forms */

.form {
  display: grid;
  gap: 12px;
}

.form label {
  display: grid;
  gap: 4px;
  color: var(--ink-muted);
  font-size: 13px;
}

.form input:not([type="radio"]),
.form select,
.form textarea {
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  transition: border-color 0.25s;
}

.form textarea {
  min-height: 120px;
  resize: vertical;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.form-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid--3 {
    grid-template-columns: 1.4fr 1fr 0.8fr;
  }
}

/* ── Page scaffolding ─────────────────────────────────────── */

.page {
  padding: 26px var(--gutter) 63px;
}

.page-head {
  max-width: 720px;
  margin-bottom: 31.5px;
}

.page-head h1 {
  font-size: clamp(22px, 4.9vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.page-head p {
  margin-top: 10.5px;
  max-width: 520px;
  color: var(--ink-muted);
}

/* ── Home: three screens. The photo fills the screen under a see-through header; then the
   statement on white; then the shop with the offers banner on top. Scrolling settles on each
   (proximity snapping), and a tap moves on (js: home). ── */

html:has(body[data-page="home"]) {
  scroll-padding-top: 0; /* each screen starts at the very top (the header hides going down) */
}

/* In the shop, the intro screens step aside and the shop starts under the header. */
html.home-shop body[data-page="home"] .hero,
html.home-shop body[data-page="home"] .brand-statement {
  display: none;
}

html.home-shop body[data-page="home"] main {
  padding-top: var(--header-offset, 72px);
}

/* Moving between the home screens: a quick fade out and back in (js: home). */
body[data-page="home"] main {
  transition: opacity 0.22s var(--ease);
}

body[data-page="home"] main.is-moving {
  opacity: 0;
}

/* The photo and statement screens stay put until tapped (js: home). */
html.home-intro,
html.home-intro body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* The home page runs edge to edge (viewport-fit=cover): the photo goes up behind the phone's
   status bar, and the header and overlays keep clear of it. */
body[data-page="home"] .header {
  position: fixed;
  left: 0;
  right: 0;
  padding-top: calc(18.5px + env(safe-area-inset-top));
  transition: transform 0.45s var(--ease), background 0.3s var(--ease);
}

/* Over the photo: no white bar; the cart and menu turn white (the logo has its own white oval). */
body[data-page="home"] .header.on-hero {
  background: transparent;
}

/* Over the photo the logo is white: a white outline and A, no white oval. */
.header.on-hero .logo-mark > ellipse:first-child {
  fill: none;
  stroke: #fff;
}

.header.on-hero .logo-a path {
  fill: #fff;
}

.header.on-hero .logo-mark {
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.25));
}

.header.on-hero .header-actions {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: var(--tile);
  overflow: hidden;
  cursor: pointer;
}

/* A soft shade along the top, so the white header and date read on bright photos. */
/* The photo runs into black at the top and bottom, so on a phone it carries on, unbroken, into
   the black status bar and Safari's bottom controls (the edge strips take the same black). The
   top shade also lets the white header read on bright photos. On a touch screen the very edges
   are solid black, under the strips (--hero-solid-*). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--ink) var(--hero-solid-top), rgb(17 17 17 / 0.55) calc(var(--hero-solid-top) + 56px), rgb(17 17 17 / 0) calc(var(--hero-solid-top) + 220px)),
    linear-gradient(to top, var(--ink) var(--hero-solid-bottom), rgb(17 17 17 / 0.45) calc(var(--hero-solid-bottom) + 48px), rgb(17 17 17 / 0) calc(var(--hero-solid-bottom) + 180px));
  pointer-events: none;
}

.hero {
  --hero-solid-top: 0px;
  --hero-solid-bottom: 0px;
}

@media (hover: none), (pointer: coarse) {
  .hero {
    --hero-solid-top: var(--edge-top-height);
    --hero-solid-bottom: var(--edge-bottom-height);
  }
}


body[data-page="home"] .brand-statement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 84px 48px;
  cursor: pointer;
}

body[data-page="home"] .brand-statement p {
  max-width: 30em;
}

/* A jump to #shop (from another page) lands with the banner just under the header. */
.shop {
  scroll-margin-top: var(--header-offset, 72px);
}

.statement-cta {
  width: auto;
  align-self: flex-start;
  min-width: 220px;
  margin-top: 26px;
}

.shop .ticker {
  margin-top: 0;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%; /* the beans and the stirring arm */
}

@media (min-width: 900px) {
  .hero-image {
    object-position: 50% 42%; /* the beans on the tray and the arm sweeping through them */
  }
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--ease);
}

.hero-video.is-ready {
  opacity: 1;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}

/* Brand statement, between the ticker and the shop: large type that rises in word by word,
   the way the menu's lines do. */
.brand-statement {
  padding: 42px var(--gutter) 21px;
}

.brand-statement p {
  max-width: 28em;
  font-size: clamp(14.5px, 1.82vw, 24.5px);
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.brand-statement p + p {
  margin-top: 0.7em;
}

/* Phones: a little smaller with more air between lines, so it doesn't feel bunched. */
@media (max-width: 599px) {
  .brand-statement {
    padding-top: 31.5px;
  }

  .brand-statement p {
    font-size: 17.5px;
    line-height: 1.42;
    letter-spacing: -0.005em;
  }
}

.brand-statement p a {
  color: var(--color-1);
  text-decoration: none;
}

/* Word-by-word rise (js wordReveals): each word in a clipped box. */
.is-split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.is-split .w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.7s var(--ease) calc(var(--w, 0) * 18ms);
}

.is-split.is-in .w > span {
  transform: none;
}

/* Ticker */

.ticker {
  text-transform: capitalize;
  margin: 12px 0 0;
  padding: 8px 0;
  background: var(--color-4);
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  animation: ticker 32s linear infinite;
}

.ticker-track span {
  padding-right: 31.5px;
}

.ticker-track span::after {
  content: "●";
  margin-left: 31.5px;
  font-size: 7px;
  vertical-align: 3px;
  color: var(--ink);
}

.ticker:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* ── Products ─────────────────────────────────────────────── */

.products {
  padding: 23.5px var(--gutter) 39.5px;
}

/* Above the shop: the kinds (by roast; for accessories, by kind) and the coffee finder; in
   Accessories or Limited Drop, the section's name first. */
.shop-head {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-bottom: 21px;
}

.shop-title {
  font: inherit;
  font-size: 16.5px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
}

.filters button {
  color: var(--ink-muted);
  transition: color 0.2s;
}

.filters button:hover,
.filters button[aria-pressed="true"] {
  color: var(--ink);
}

.filters button[aria-pressed="true"] {
  text-decoration: underline;
  text-decoration-color: var(--ink);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* A section with nothing in it yet (Limited Drop between drops). */
.shop-empty {
  display: grid;
  justify-items: start;
  gap: 7px;
  max-width: 440px;
  padding: 26px 0 42px;
  text-wrap: pretty;
}

.shop-empty span {
  color: var(--ink-muted);
}

.shop-empty .button {
  width: auto;
  margin-top: 9px;
  padding-inline: 18.5px;
}

.shop-empty .join-box {
  width: 100%;
  max-width: 360px;
  margin: 9px 0 0;
  animation: line-in 0.45s var(--ease);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 6px;
  row-gap: 38px;
}

@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1400px) {
  .product-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.product-card {
  position: relative;
}

.product-card[hidden] {
  display: none;
}

.product-image {
  position: relative;
  aspect-ratio: 1;
  background: var(--tile);
  overflow: hidden;
}

.product-image svg:not(.bag-svg) {
  display: block;
  width: 100%;
  height: 100%;
}

.bag-body,
.bag-shadow {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}

.product-card:hover .bag-body {
  transform: translateY(-14px) rotate(-3deg);
}

.product-card:hover .bag-shadow {
  transform: scaleX(0.8);
  opacity: 0.04;
}

.product-info {
  padding-top: 9px;
}

.product-name {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s var(--ease);
  display: inline;
}

.product-card:hover .product-name {
  background-size: 100% 1px;
}

.quick-add {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.product-card:hover .quick-add,
.quick-add:focus-visible {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .quick-add {
    opacity: 1;
    transform: none;
  }
}

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

.crumbs {
  display: flex;
  gap: 5px;
  margin-bottom: 13px;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.crumbs a {
  color: inherit;
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--ink);
}

.pdp {
  display: grid;
  gap: 21px;
}

@media (min-width: 900px) {
  .pdp {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 42px;
    align-items: start;
  }

  .pdp-gallery {
    position: sticky;
    top: 100px;
  }
}

.pdp-image {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--tile);
  overflow: hidden;
}

.pdp-image svg:not(.bag-svg),
.pdp-image img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.pdp-image .bag-body {
  animation: float 7s ease-in-out infinite;
}

.pdp-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* Labels from the back office; a sale label is filled. */
.label-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

.label-pill.is-sale {
  background: var(--color-4);
  box-shadow: none;
  color: var(--ink);
}

.label-pill.is-sold-out {
  box-shadow: inset 0 0 0 1px var(--error);
  color: var(--error);
}

.product-price.is-sold-out {
  color: var(--ink-muted);
}

.product-labels {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 72px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  pointer-events: none;
}

.price-was {
  color: var(--ink-muted);
  text-decoration-thickness: 1px;
}


.pdp-info h1 {
  margin-top: 9px;
  font-size: clamp(21px, 2.69vw, 35.5px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.pdp-about {
  margin-top: 10.5px;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.pdp-origin {
  margin-top: 5px;
  font-size: 15px;
  color: var(--ink-muted);
}

.pdp-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
  list-style: none;
}

.pdp-notes li {
  padding: 5px 9px;
  background: #f3f3f1;
  border-radius: 999px;
  font-size: 13px;
}

.pdp-about {
  margin-top: 12px;
  color: var(--ink-muted);
  max-width: 48ch;
}

/* Size: two cards with price and cups. */
.size-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 19.5px;
  border: 0;
}

.size-cards legend {
  margin-bottom: 7px;
  color: var(--ink-muted);
  font-size: 12.5px;
}

.size-cards label {
  position: relative;
  cursor: pointer;
}

.size-cards input {
  position: absolute;
  opacity: 0;
}

.size-cards label > span {
  display: grid;
  gap: 1.5px;
  height: 100%;
  padding: 9px 10.5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.size-cards strong {
  font-weight: 500;
  font-size: 15px;
}

.size-cards em {
  font-style: normal;
  font-size: 12px;
  color: var(--ink-muted);
}

.size-cards b {
  margin-top: 5px;
  font-weight: 500;
}

.size-cards i {
  position: absolute;
  top: 12px;
  right: 12px;
  font-style: normal;
  font-size: 9.5px;
  padding: 1.5px 5px;
  border-radius: 999px;
  background: var(--color-4);
  color: var(--ink);
}

.size-cards input:checked + span {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.size-cards input:focus-visible + span {
  outline: 2px solid var(--color-1);
  outline-offset: 2px;
}

.buy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18.5px;
}

/* Quantity and Add to Cart: one row of matching height, rounded like the size cards. */
.buy-row .stepper {
  flex: none;
  height: 48px;
  margin-top: 0;
  gap: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.buy-row .stepper button {
  width: 40px;
  height: 100%;
  border: 0;
  border-radius: 12px;
  font-size: 18px;
  color: var(--ink-muted);
  transition: color 0.2s;
}

.buy-row .stepper button:hover {
  color: var(--ink);
}

.buy-row .stepper span {
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
}

.buy-row .button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 500;
}

.buy-row .button:disabled {
  justify-content: center;
  background: var(--tile);
  color: var(--ink-muted);
  cursor: not-allowed;
}

.buy-row .button:disabled::after {
  display: none;
}

/* After adding: a tick and "Added" over the label for a moment. */
.buy-row .button.is-added {
  color: transparent;
}

.buy-row .button.is-added::after {
  transform: scaleX(1);
}

.buy-added {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--cte-accent-text);
  animation: flash 0.4s var(--ease);
}

.buy-added svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.buy-total {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.buy-total.flash {
  animation: flash 0.5s var(--ease);
}

@keyframes flash {
  from { opacity: 0; transform: translateY(6px); }
}

.pdp-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10.5px;
  margin-top: 9px;
  padding: 9px 10.5px;
  border-radius: 12px;
  background: #f3f3f1;
  color: var(--ink);
  text-decoration: none;
  font-size: 12.5px;
  transition: background 0.2s;
}

.pdp-sub strong {
  display: block;
  font-weight: 500;
  font-size: 13px;
}

.pdp-sub span:first-child {
  color: var(--ink-muted);
}

.pdp-sub span:first-child strong {
  color: var(--ink);
}

.pdp-sub:hover {
  background: var(--tile);
}

.pdp-perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10.5px;
  margin-top: 18.5px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 12px;
  color: var(--ink-muted);
}

.pdp-perks strong {
  display: block;
  margin-bottom: 1.5px;
  font-weight: 500;
  color: var(--ink);
}

/* The coffee: statement and origin facts. */
.pdp-origin-band {
  display: grid;
  gap: 21px;
  margin-top: 73.5px;
  padding-top: 21px;
  border-top: 1px solid var(--ink);
}

@media (min-width: 900px) {
  .pdp-origin-band {
    grid-template-columns: 1.15fr 1fr;
    gap: 42px;
  }
}

.pdp-statement {
  font-size: clamp(14.5px, 1.59vw, 21px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 24ch;
}

/* A paragraph rather than a line (a tea's description): the coffee statement's size, with a
   reading measure and line spacing. */
.pdp-statement.is-long {
  max-width: 40ch;
  line-height: 1.4;
  text-wrap: pretty;
}

.pdp-statement.is-long + .pdp-statement.is-long {
  margin-top: 12px;
}

.pdp-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  align-content: start;
}

.pdp-facts div {
  padding: 12px;
  background: #f3f3f1;
  border-radius: 12px;
}

.pdp-facts dt {
  font-size: 12px;
  color: var(--ink-muted);
}

.pdp-facts dd {
  margin-top: 4px;
  font-size: 15px;
}

/* How to brew: a dark band with big numbers. */
.pdp-brew {
  margin-top: 63px;
  padding: clamp(18.5px, 4.375vw, 37px);
  background: var(--ink);
  color: var(--paper);
  border-radius: 16px;
}

.pdp-brew .eyebrow {
  color: #a8a8a8;
}

.pdp-brew h2 {
  font-size: clamp(17px, 2.08vw, 27px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.pdp-brew dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 23.5px;
}

.pdp-brew dl div {
  padding-top: 9px;
  border-top: 1px solid #3a3a3a;
}

.pdp-brew dt {
  font-size: 12px;
  color: #a8a8a8;
}

.pdp-brew dd {
  margin-top: 4px;
  font-size: clamp(12px, 1.35vw, 17px);
  line-height: 1.15;
}

.pdp-tip {
  margin-top: 21px;
  max-width: 52ch;
  color: #cfcfcf;
}

@media (max-width: 700px) {
  .pdp-brew dl {
    grid-template-columns: 1fr 1fr;
  }

  .pdp-perks {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

.product-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Uploaded photos. A cut-out stands on the tile over the bag's shadow (the dark ellipse) and
   lifts and tilts on hover like the drawn bag; a full-tile photo zooms gently instead. */
.photo-art {
  position: relative;
  width: 100%;
  height: 100%;
}

/* The packaging photo in place of the old bag drawing: square like the drawing was, so it
   fits the same spots (cards, cart, subscription art) whatever their own height. */
.bag-art {
  aspect-ratio: 1 / 1;
  height: auto;
}

.photo-art:not(.is-cover) .product-photo {
  position: absolute;
  left: calc(50% - 36% * var(--art-scale, 1));
  bottom: 14%;
  width: calc(72% * var(--art-scale, 1));
  height: calc(72% * var(--art-scale, 1));
  object-fit: contain;
  object-position: 50% 100%;
}

/* The bag photo with its label (one SVG, see bag() in js/app.js), standing where a cut-out
   photo stands. */
.bag-svg {
  position: absolute;
  left: 14%;
  bottom: 14%;
  width: 72%;
  height: 72%;
  overflow: visible;
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--ease);
}

.bag-label text {
  font-family: inherit;
}

.photo-shadow {
  position: absolute;
  left: 50%;
  bottom: 12.5%;
  width: calc(60% * var(--shadow-scale, var(--art-scale, 1)));
  height: 3%;
  border-radius: 50%;
  background: #000;
  opacity: 0.08;
  transform: translateX(-50%);
}

.photo-art .product-photo,
.photo-shadow {
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}

.product-card:hover .bag-svg,
.product-card:hover .photo-art:not(.is-cover) .product-photo {
  transform: translateY(-14px) rotate(-3deg);
}

.product-card:hover .photo-shadow {
  transform: translateX(-50%) scaleX(0.8);
  opacity: 0.04;
}

.product-card:hover .photo-art.is-cover .product-photo {
  transform: scale(1.04);
}

.pdp-image .bag-svg,
.pdp-image .photo-art:not(.is-cover) .product-photo {
  animation: float 7s ease-in-out infinite;
}

.pdp-image .photo-shadow {
  animation: shadow-breathe 7s ease-in-out infinite;
}

@keyframes shadow-breathe {
  0%, 100% { transform: translateX(-50%); opacity: 0.08; }
  50% { transform: translateX(-50%) scaleX(0.82); opacity: 0.05; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-image .photo-art .product-photo,
  .pdp-image .bag-svg,
  .pdp-image .photo-shadow {
    animation: none;
  }
}

.related {
  margin-top: 63px;
}

.related h2,
.section-label {
  margin-bottom: 16px;
  font: inherit;
  color: var(--ink-muted);
}

/* ── Subscriptions ────────────────────────────────────────── */

.eyebrow {
  margin-bottom: 9px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Intro */

.sub-hero {
  display: grid;
  gap: 21px;
  align-items: center;
  margin-bottom: 47px;
}

@media (min-width: 900px) {
  .sub-hero {
    grid-template-columns: 1fr 1fr;
    gap: 37px;
    margin-bottom: 68px;
  }
}

.sub-hero h1 {
  font-size: clamp(24.5px, 4.9vw, 49px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

.sub-hero .lede {
  max-width: 440px;
  margin-top: 12px;
  color: var(--ink-muted);
  font-size: 15px;
}

.perks {
  display: grid;
  gap: 0;
  max-width: 440px;
  margin: 18.5px 0;
  border-top: 1px solid var(--line);
}

.perks li {
  display: flex;
  justify-content: space-between;
  gap: 10.5px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.perks strong {
  font-weight: 500;
}

.perks span {
  color: var(--ink-muted);
  text-align: right;
}

.sub-hero-cta {
  max-width: 440px;
}

.sub-hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 5 / 4;
  background: var(--tile);
  overflow: hidden;
}

.sub-hero-bag {
  width: 40%;
  margin: 0 -7%;
  animation: float 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -2s);
}

.sub-hero-bag:nth-child(2) {
  z-index: 1;
  width: 48%;
}

.sub-hero-bag svg:not(.bag-svg) {
  display: block;
  width: 100%;
}

/* Builder */

.sub-builder {
  display: grid;
  gap: 26px;
}

@media (min-width: 900px) {
  .sub-builder {
    grid-template-columns: 1.35fr 1fr;
    gap: 37px;
    align-items: start;
  }

  .sub-side {
    position: sticky;
    top: calc(var(--header-offset, 80px) + 16px);
  }
}

.sub-steps {
  display: grid;
  gap: 31.5px;
}

.sub-step h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10.5px;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.sub-step h2 span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
}

/* Selectable cards */

.pick-grid {
  display: grid;
  gap: 7px;
}

.pick-grid--two {
  grid-template-columns: 1fr 1fr;
}

.pick-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

/* Gift paid up front: the lengths open under the choice. */
.sub-months {
  margin-top: 7px;
  animation: sub-months-in 0.4s var(--ease);
}

@keyframes sub-months-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sub-months {
    animation: none;
  }
}

@media (min-width: 600px) {
  .pick-grid--coffee {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pick-card {
  display: block;
  cursor: pointer;
}

.pick-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pick-body {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.5px;
  height: 100%;
  padding: 9px 9px 10.5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden; /* the thumbnail follows the rounded corners */
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}

/* The selected ring, drawn above the contents so a thumbnail can't cover it. */
.pick-body::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  border: 2px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.25s;
}

.pick-card:hover .pick-body {
  border-color: var(--ink-muted);
}

.pick-card input:checked + .pick-body,
.pick-card input:checked + .pick-body::before {
  border-color: var(--ink);
}

.pick-card input:checked + .pick-body::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  z-index: 3;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
}

.pick-card input:focus-visible + .pick-body {
  outline: 2px solid var(--color-1);
  outline-offset: 2px;
}

.pick-body strong {
  font-weight: 500;
  font-size: 14px;
  padding-right: 16px;
}

.pick-body em {
  color: var(--ink-muted);
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.35;
}

.pick-body small {
  margin-top: 5px;
  font-size: 12.5px;
}

.pick-thumb {
  display: block;
  margin: -9px -9px 8px;
  aspect-ratio: 4 / 3;
  background: var(--tile);
  overflow: hidden;
}

/* The bag photo fills the thumbnail's height instead of its width, so it isn't cropped. */
.pick-thumb .bag-art {
  aspect-ratio: auto;
  height: 100%;
}

.pick-thumb svg:not(.bag-svg) {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.15) translateY(4%);
}

/* On phones, coffee cards sit side by side as a row with a thumbnail */
@media (max-width: 599px) {
  .pick-grid--coffee .pick-body {
    grid-template-columns: 76px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 9px;
    align-items: center;
  }

  .pick-grid--coffee .pick-thumb {
    grid-row: 1 / 4;
    margin: -9px 0 -10.5px -9px;
    height: calc(100% + 30px);
    aspect-ratio: auto;
  }

  .pick-grid--coffee .pick-body small {
    margin-top: 1.5px;
  }
}

.gift-fields {
  margin-top: 8px;
  padding: 12px;
  background: #f5f5f5;
  animation: flash 0.4s var(--ease);
}

.gift-hint {
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* Checkout: each gift sent straight to its recipient, or with the customer's delivery. */
.gift-sends {
  display: grid;
  gap: 21px;
  margin-top: 5px;
}

.gift-send {
  min-width: 0;
  border: 0;
}

.gift-send legend {
  margin-bottom: 4px;
  color: var(--ink-muted);
}

.gift-send-items {
  font-size: 13px;
}

.gift-send-items span {
  color: var(--ink-muted);
}

.gift-send .options {
  margin-top: 8px;
}

.gift-send [data-gift-address] {
  margin-top: 5px;
}

/* Summary panel */

.sub-panel {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden; /* the bag preview follows the rounded corners */
}

.sub-preview {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  aspect-ratio: 2.3 / 1;
  margin: -13px -13px 13px;
  background: var(--tile);
  overflow: hidden;
}

.sub-bag {
  width: calc(42% * var(--scale, 1));
  margin-bottom: -2%;
  animation: drop-in 0.6s var(--ease) both, float 6s ease-in-out infinite;
  transition: width 0.5s var(--ease);
}

.sub-bag svg:not(.bag-svg) {
  display: block;
  width: 100%;
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-30px); }
}

.sub-panel-title {
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 500;
}

.sub-lines div {
  display: flex;
  justify-content: space-between;
  gap: 10.5px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.sub-lines dt {
  color: var(--ink-muted);
}

.sub-lines dd {
  text-align: right;
}

.sub-total {
  margin: 10.5px 0;
}

.sub-price {
  font-size: 17.5px;
  letter-spacing: -0.01em;
}

.sub-price s {
  margin-right: 4px;
  color: var(--ink-muted);
  font-size: 14px;
}

.sub-price span {
  color: var(--ink-muted);
  font-size: 13px;
}

.sub-save {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-4);
  font-size: 12.5px;
}

/* Yellow marks savings and offers (as the ticker and the "Save" badges do). */
.save-chip {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-4);
  font-style: normal;
  font-size: 0.85em;
  font-weight: 500;
}

/* Phone bar with price and button, pinned while building */

.sub-bar {
  display: none;
}

@media (max-width: 899px) {
  /* Fixed rather than sticky: iPhone Safari can leave a sticky bar stranded mid-page during
     a fast scroll or when the gift fields open above it. The page keeps room for it below. */
  .sub-page {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  /* Only while the builder is on screen, and out of the footer's way. */
  .sub-bar.is-shown {
    transform: none;
  }

  body.footer-in-view .sub-bar.is-shown {
    transform: translateY(110%);
  }

  .sub-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    transform: translateY(110%);
    transition: transform 0.35s var(--ease);
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 8px var(--gutter) calc(8px + var(--edge-bottom-height));
    background: var(--paper);
    box-shadow: 0 -1px 0 var(--line);
  }

  .sub-bar p {
    display: grid;
    flex: none;
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.3;
  }

  .sub-bar strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
  }

  .sub-bar .button {
    flex: 1;
    padding-block: 9px;
  }

  /* The pinned bar carries the price and Add button on phones, and the hero already shows
     the bags, so the summary keeps just its lines. */
  .sub-panel .sub-preview,
  .sub-panel > .button {
    display: none;
  }
}

/* Questions */

.sub-faq {
  max-width: 820px;
  margin-top: 68px;
}

.sub-faq h2 {
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ── 404 ── */

.notfound {
  min-height: 50vh;
}

.notfound h1 {
  font-size: clamp(22px, 4.29vw, 39px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.notfound .lede {
  margin-top: 8px;
  color: var(--ink-muted);
}

.offline-retry {
  margin-top: 21px;
}

.notfound-links {
  display: grid;
  max-width: 420px;
  margin-top: 18.5px;
  border-top: 1px solid var(--line);
}

.notfound-links a {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.notfound-links a::after {
  content: "→";
}

/* ── Wholesale ────────────────────────────────────────────── */

.wholesale-page .sub-hero-cta {
  margin-top: 18.5px;
}

.ws-title {
  margin-bottom: 13px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ws-offer,
.ws-how {
  margin-bottom: 58px;
}

.ws-cards {
  display: grid;
  gap: 8px;
}

@media (min-width: 700px) {
  .ws-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .ws-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ws-cards li {
  padding: 14px;
  background: #f5f5f5;
}

.ws-cards span {
  color: var(--ink-muted);
  font-size: 12px;
}

.ws-cards h3 {
  margin: 18.5px 0 5px;
  font-size: 15.5px;
  font-weight: 500;
}

.ws-cards p {
  color: var(--ink-muted);
  font-size: 13px;
}

.ws-steps {
  display: grid;
  gap: 0;
  list-style: none;
  counter-reset: ws;
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
  .ws-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    border-top: 0;
  }

  .ws-steps li {
    border-top: 1px solid var(--ink);
  }
}

.ws-steps li {
  display: grid;
  gap: 2.5px;
  padding: 10.5px 0;
  border-bottom: 1px solid var(--line);
  counter-increment: ws;
}

@media (min-width: 900px) {
  .ws-steps li {
    border-bottom: 0;
  }
}

.ws-steps li::before {
  content: counter(ws, decimal-leading-zero);
  color: var(--ink-muted);
  font-size: 12px;
}

.ws-steps strong {
  font-weight: 500;
}

.ws-steps span {
  color: var(--ink-muted);
  font-size: 13px;
}

.ws-enquire {
  display: grid;
  gap: 21px;
}

@media (min-width: 900px) {
  .ws-enquire {
    grid-template-columns: 1fr 1.4fr;
    gap: 47px;
  }
}

.ws-enquire .muted a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ws-sent {
  align-self: start;
  padding: 18.5px;
  background: #f5f5f5;
}

.ws-sent h3 {
  margin-bottom: 4px;
  font-size: 17.5px;
  font-weight: 500;
}

/* ── Order ahead ──────────────────────────────────────────── */

.order-layout {
  display: grid;
  gap: 26px;
}

@media (min-width: 900px) {
  .order-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px); /* a portrait photo, kept to a sensible height */
    gap: 56px;
    align-items: start;
  }
}

.order-side .form {
  margin-top: 13px;
}

/* Selected location, shown beside the location choices */

.order-location .location-image {
  aspect-ratio: 4 / 5; /* the café photos are portrait: show (nearly) all of the room */
}

.order-location figcaption {
  margin-top: 2.5px;
}

.order-location h2 {
  font-size: 18.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.order-location address {
  color: var(--ink-muted);
}

.order-location.is-changing .location-image,
.order-location.is-changing figcaption {
  animation: flash 0.5s var(--ease);
}

/* Order Ahead: choosing a location */

.order-side-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10.5px;
}

.link-button {
  min-height: 36px;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.link-button:disabled {
  text-decoration: none;
  color: var(--ink-muted);
}

.location-choice span {
  position: relative;
  padding-right: 63px;
}

.badge {
  justify-self: start;
  margin-bottom: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 500;
}

.location-meta {
  position: absolute;
  top: 16px;
  right: 18px;
  display: grid;
  justify-items: end;
  gap: 2.5px;
  font-size: 12.5px;
}

.location-meta a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.order-cta {
  margin-top: 13px;
}

/* Bottom action bar on phones (Order Ahead, schedule step) */

.order-bar {
  display: none;
}

@media (max-width: 899px) {
  .order-bar,
  .order-bar.is-always {
    position: sticky;
    bottom: 0;
    z-index: 15;
    display: block;
    margin: 21px calc(var(--gutter) * -1) 0;
    padding: 8px var(--gutter) calc(8px + var(--edge-bottom-height));
    background: var(--paper);
    box-shadow: 0 -1px 0 var(--line);
  }

  .order-cta {
    display: none;
  }
}

.order-bar.is-always {
  display: block;
  margin-top: 21px;
}

/* Order flow: schedule */

.order-flow [data-schedule],
.pickup-summary {
  max-width: 760px;
}

.pickup-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 10.5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  transition: border-color 0.25s;
}

.pickup-pill:hover {
  border-color: var(--ink);
}

.flow-title {
  margin: 18.5px 0 4px;
  font-size: clamp(19.5px, 4.29vw, 34.5px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.days {
  display: flex;
  gap: 5px;
  margin: 16px calc(var(--gutter) * -1) 5px;
  padding: 0 var(--gutter) 2.5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.days::-webkit-scrollbar {
  display: none;
}

.day {
  display: grid;
  flex: none;
  min-width: 76px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  text-align: center;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}

.day:hover:not(:disabled) {
  border-color: var(--ink);
}

.day.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.day:disabled {
  color: var(--ink-muted);
  background: var(--tile);
  border-color: transparent;
  cursor: default;
}

/* Pickup times: a grid of times like the day buttons above, rather than one long list. */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.slot {
  display: block;
  cursor: pointer;
}

.slot input {
  position: absolute;
  opacity: 0;
}

.slot span {
  display: block;
  padding: 9px 4px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.slot:hover span {
  box-shadow: inset 0 0 0 1px var(--ink);
}

.slot input:checked + span {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}

.slot input:focus-visible + span {
  outline: 2px solid var(--color-1);
  outline-offset: 2px;
}

.slots-label {
  grid-column: 1 / -1;
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 13px;
}

.slots-label:first-child {
  margin-top: 0;
}

.slots > .muted {
  grid-column: 1 / -1;
  padding: 10.5px 0;
}

[data-continue] small {
  margin-left: 5px;
  opacity: 0.7;
  font-size: inherit;
}

/* Order flow: pickup or delivery sheet */

.order-side-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 10.5px;
}

.order-side-links a {
  display: inline-flex;
  align-items: center;
}

.pickup-pill {
  cursor: pointer;
}

.summary-where {
  display: grid;
  gap: 1.5px;
  min-height: 44px;
  text-align: left;
  font-size: 13px;
}

.summary-where strong {
  font-weight: 500;
}

.summary-where span {
  color: var(--ink-muted);
}

.summary-where strong span {
  color: var(--ink);
  font-size: 12px;
}

.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: calc(100svh - env(safe-area-inset-top) - 24px);
  overflow-y: auto;
  padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0; /* a sheet from the bottom edge: rounded where it meets the page */
  background: var(--paper);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease);
}

.sheet.is-open .sheet-panel {
  transform: none;
}

@media (min-width: 768px) {
  .sheet-panel {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: min(560px, calc(100% - 48px));
    max-height: 86vh;
    border-radius: 16px;
    transform: translate(-50%, -46%);
    opacity: 0;
    transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
  }

  .sheet.is-open .sheet-panel {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

.sheet .drawer-head h2 {
  font-size: 16.5px;
  font-weight: 500;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 13px;
  padding: 2.5px;
  border-radius: 999px;
  background: #f1f1f1;
}

.segmented button {
  min-height: 40px;
  border-radius: 999px;
  color: var(--ink-muted);
  transition: background 0.25s, color 0.25s;
}

.segmented button[aria-selected="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-fulfil-form] > .button {
  margin-top: 13px;
}

[data-fulfil-form] .forgot-sent {
  padding: 9px 10.5px;
  background: #f5f5f5;
  font-size: 13px;
}

.sub-error a {
  color: inherit;
  text-decoration: underline;
}

.sub-error {
  margin-top: 8px;
}

.delivery-terms {
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* Order flow: menu */

.pickup-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10.5px;
  padding: 9px 12px;
  background: #f5f5f5;
}

.pickup-summary p {
  display: grid;
  font-size: 13px;
}

.pickup-summary .pill {
  flex: none;
  white-space: nowrap;
}

.pickup-summary span {
  color: var(--ink-muted);
}

.menu-tabs {
  position: sticky;
  top: var(--header-offset, 80px);
  z-index: 10;
  display: flex;
  gap: 16px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 9px var(--gutter);
  overflow-x: auto;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
  white-space: nowrap;
  scrollbar-width: none;
  /* Follows the header up and down with a transform (moving "top" re-laid out the page on
     every scroll, which made scrolling judder on iPhones). */
  transition: transform 0.45s var(--ease);
}

.menu-tabs::-webkit-scrollbar {
  display: none;
}

body.header-hidden .menu-tabs {
  transform: translateY(calc(env(safe-area-inset-top) - var(--header-offset, 80px)));
}

.menu-tabs a {
  padding: 4px 0;
  color: var(--ink-muted);
  transition: color 0.2s;
}

.menu-tabs a.is-active {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--ink);
}

.drink-section {
  padding-top: 23.5px;
  scroll-margin-top: calc(var(--header-offset, 80px) + 60px);
}

.drink-section h2 {
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.drink-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18.5px 7px;
}

@media (min-width: 700px) {
  .drink-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .drink-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 26px 10.5px;
  }
}

.drink-card {
  display: grid;
  width: 100%;
  text-align: left;
}

.drink-image {
  position: relative;
  aspect-ratio: 1;
  margin-bottom: 7px;
  background: var(--tile);
  overflow: hidden;
}

.drink-image svg:not(.bag-svg) {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.6s var(--ease);
}

@media (hover: hover) {
  .drink-card:hover .drink-image svg:not(.bag-svg) {
    transform: translateY(-6px) scale(1.03);
  }
}

.drink-add {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  font-size: 16.5px;
  line-height: 1;
  transition: background 0.25s, color 0.25s;
}

@media (hover: hover) {
  .drink-card:hover .drink-add {
    background: var(--ink);
    color: var(--paper);
  }
}

.drink-card.is-added .drink-add {
  animation: bump 0.5s var(--ease);
  background: var(--ink);
  color: var(--paper);
}

.drink-name {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.diet {
  margin-left: 1.5px;
  padding: 1px 3.5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-muted);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-decoration: none;
  vertical-align: 2px;
}

.drink-note {
  color: var(--ink-muted);
  font-size: 12px;
}

.cafe-thumb {
  display: block;
  background: var(--tile);
}

.cafe-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.drink-price {
  color: var(--ink-muted);
  font-size: 13px;
}

/* Toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + var(--edge-bottom-height));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.toast button {
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ── Log in & account ─────────────────────────────────────── */

.auth-card {
  max-width: 460px;
}

.auth-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 13px;
}

.auth-tabs button {
  min-height: 44px;
  color: var(--ink-muted);
  font-size: 15px;
}

.auth-tabs button[aria-pressed="true"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}

.auth-hint {
  margin-top: 9px;
  font-size: 12.5px;
}

.auth-hint a,
.manage-link a,
.account-help a,
.sub-account-note a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sub-error {
  min-height: 1.2em;
  color: var(--error);
  font-size: 13px;
}

.manage-link {
  margin-top: 9px;
  font-size: 13px;
}

.sub-account-note {
  padding: 9px 10.5px;
  background: #f5f5f5;
  font-size: 13px;
}

.account-head p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

.sub-cards {
  display: grid;
  gap: 10.5px;
  max-width: 820px;
  margin-top: 5px;
}

.sub-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  animation: line-in 0.45s var(--ease);
}

.sub-card.is-cancelled {
  color: var(--ink-muted);
}

.sub-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10.5px;
}

.sub-card h3 {
  font-size: 16.5px;
  font-weight: 500;
}

.status-badge {
  flex: none;
  padding: 2.5px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
}

.is-paused .status-badge {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.is-cancelled .status-badge {
  background: var(--line);
  color: var(--ink-muted);
}

.sub-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 7px;
}

.sub-actions .pill {
  min-height: 40px;
}

.sub-actions .link-button {
  margin-left: auto;
  color: var(--ink-muted);
}

.sub-edit {
  padding-top: 2.5px;
  border-top: 1px solid var(--line);
}

.sub-edit .options {
  margin-top: 10.5px;
}

.sub-edit-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
}

.sub-edit-actions .button {
  width: auto;
  padding-inline: 18.5px;
}

.sub-error:empty {
  display: none;
}

.account-help {
  margin-top: 26px;
  font-size: 13px;
}

/* ── Locations ────────────────────────────────────────────── */

/* One row per location, divided by hairlines: name, address, today's status and links;
   the week's hours open underneath. */
.location-list {
  border-top: 1px solid var(--line);
}

.location {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
  .location {
    grid-template-columns: 1.1fr 1.3fr 1fr auto;
    align-items: baseline;
    gap: 6px 24px;
    padding: 20px 0;
  }

  .location-image,
  .location-hours {
    grid-column: 1 / -1;
  }
}

/* A photo of each location as a thumbnail beside its details (assets/<location id>.jpg,
   or a café photo until it has one). */
.location {
  grid-template-columns: 84px minmax(0, 1fr);
  column-gap: 14px;
}

.location > * {
  grid-column: 2;
}

.location > .location-image {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: start;
  aspect-ratio: 4 / 5;
  margin: 0;
  border-radius: 8px;
}

@media (min-width: 900px) {
  /* A fixed links column keeps every row's columns aligned (the Roastery has no Order Ahead). */
  .location {
    grid-template-columns: 120px minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr) 210px;
  }

  .location .location-links {
    justify-content: flex-end;
  }

  .location > * {
    grid-column: auto;
  }

  .location > .location-image {
    grid-row: 1 / span 2;
  }

  .location > .location-hours {
    grid-column: 2 / -1;
  }
}

.location-name .muted {
  font-size: 13px;
}

.location-hours summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
  list-style: none;
}

.location-hours summary::-webkit-details-marker {
  display: none;
}

.location-hours summary::after {
  content: "+";
}

.location-hours[open] summary::after {
  content: "−";
}

.location-hours .hours {
  max-width: 360px;
}

.location-image {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 10.5px;
  background: var(--tile);
  overflow: hidden;
}

.location-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.location:hover .location-image img {
  transform: scale(1.05);
}

.location h2 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.status {
  margin: 4px 0 8px;
  font-size: 13px;
}

.location .status {
  margin: 0;
}

.location address {
  color: var(--ink-muted);
}

.hours {
  margin-top: 10.5px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.hours div {
  display: flex;
  justify-content: space-between;
  padding: 4.5px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-muted);
}

.hours .is-today {
  color: var(--ink);
}

.location-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin-top: 6px;
  font-size: 14px;
}

@media (min-width: 900px) {
  .location .location-links {
    margin-top: 0;
  }
}

.location-links a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1.5px;
}

/* ── FAQ ──────────────────────────────────────────────────── */

.faq-list {
  max-width: 820px;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  font-size: 16.5px;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary i {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.faq-item summary i::before,
.faq-item summary i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}

.faq-item summary i::after {
  transform: rotate(90deg);
}

.faq-item[open] summary i::after {
  transform: rotate(0deg);
}

.faq-answer {
  padding-bottom: 14px;
  max-width: 62ch;
  color: #555;
  animation: flash 0.5s var(--ease);
}

/* AI question box */

/* !important so form input rules (width: 100%) never stretch it off screen */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* Asking your own question: looks like one more FAQ row */

.ask-row {
  display: flex;
  align-items: center;
  gap: 10.5px;
  border-bottom: 1px solid var(--line);
}

.ask-row input {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  background: transparent;
  font-size: 16.5px;
}

.ask-row input::placeholder {
  color: var(--ink-muted);
}

.ask-row input:focus {
  outline: none;
}

.ask-row:focus-within {
  border-bottom-color: var(--ink);
}

.ask-row button {
  padding: 4px 9px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 12.5px;
  transition: background 0.25s, color 0.25s;
}

.ask-row button:hover {
  background: var(--ink);
  color: var(--paper);
}

.ask-row button:disabled {
  opacity: 0.3;
}

.faq-item--asked {
  animation: line-in 0.45s var(--ease);
}

.faq-item--asked .faq-answer p {
  white-space: pre-wrap;
}

.faq-answer .is-error {
  color: var(--error);
}

.faq-answer .is-typing::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 8px;
  background: radial-gradient(circle, currentColor 3px, transparent 3.5px) 0 50% / 10px 8px repeat-x;
  animation: typing 1s steps(4) infinite;
  clip-path: inset(0 100% 0 0);
}

@keyframes typing {
  to { clip-path: inset(0 -10% 0 0); }
}

.ask-note {
  margin-top: 10.5px;
  font-size: 12.5px;
}

.ask-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ask-person {
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ── Contact ──────────────────────────────────────────────── */

.contact-layout {
  display: grid;
  gap: 37px;
  max-width: 640px;
}

.contact-chat {
  margin-top: 10.5px;
}

.contact-chat button {
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Checkout ─────────────────────────────────────────────── */

.checkout-layout {
  display: grid;
  gap: 31.5px;
}

@media (min-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1.3fr 1fr;
    gap: 47px;
    align-items: start;
  }

  .summary {
    position: sticky;
    top: 100px;
  }
}

.summary {
  padding: 16px;
  background: #f5f5f5;
}

@media (max-width: 899px) {
  /* Show what you're paying for before the form on small screens. */
  .summary {
    order: -1;
  }
}

.summary-lines {
  margin-bottom: 13px;
}

.summary-lines li {
  display: flex;
  justify-content: space-between;
  gap: 10.5px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.summary-lines em {
  display: block;
  font-style: normal;
  color: var(--ink-muted);
}

/* Quantity and remove, right in the checkout summary. */
.summary-edit {
  display: flex;
  align-items: center;
  gap: 10.5px;
  margin-top: 5px;
}

.summary-edit .stepper {
  margin-top: 0;
}

.summary-edit .link-button {
  font-size: 12.5px;
  color: var(--ink-muted);
}

.summary.is-paying .summary-edit {
  display: none;
}

.row.total {
  padding-top: 9px;
  border-top: 1px solid var(--ink);
  font-size: 16.5px;
}

.checkout-note {
  font-size: 12.5px;
  color: var(--ink-muted);
}

.confirmation,
.empty-state {
  max-width: 620px;
}

.confirmation h1 {
  margin: 4px 0 8px;
  font-size: clamp(22px, 4.29vw, 39px);
  text-wrap: balance;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.confirmation p + p {
  margin-top: 7px;
}

.confirmation pre {
  margin: 16px 0;
  padding: 13px;
  background: #f5f5f5;
  font: 12px/1.6 ui-monospace, Menlo, monospace;
  white-space: pre-wrap;
}

.account-setup {
  max-width: 420px;
  margin-top: 26px;
  padding-top: 18.5px;
  border-top: 1px solid var(--line);
}

.account-setup h2 {
  font-size: 17.5px;
  font-weight: 500;
}

.confirmation .account-setup .button {
  margin-top: 5px;
}

.account-setup-note {
  margin-top: 21px;
}

.account-setup-note a,
.account-setup-back a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.account-setup-back {
  margin-top: 16px;
}

.confirmation .button,
.empty-state .button {
  margin-top: 21px;
  max-width: 280px;
}

[hidden] {
  display: none !important;
}

/* ── Footer ───────────────────────────────────────────────── */

.footer {
  /* The bottom clears the accessibility button, pinned bottom-left over the last row. */
  padding: 31.5px var(--gutter) calc(66px + env(safe-area-inset-bottom));
  font-size: 13.5px;
  color: var(--ink-muted);
}

.subscribe {
  max-width: 520px;
  margin-bottom: 26px;
  color: var(--ink);
}

.subscribe label {
  display: block;
  margin-bottom: 2.5px;
  font-size: 14px;
}

.subscribe-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.25s;
}

.subscribe-row:focus-within {
  border-bottom-color: var(--ink);
}

.subscribe input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  font-size: 14px;
}

.subscribe input[type="email"]:focus {
  outline: none;
}

.subscribe input::placeholder {
  color: var(--ink-muted);
  font-size: 14px; /* the hint matches the line above; typed text stays 16px on phones (no zoom) */
}

/* The button sits on the field's underline. */
.subscribe button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 5px;
  margin-right: -5px;
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
}

.subscribe button svg {
  width: 20px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform 0.4s var(--ease);
}

.subscribe button:hover svg,
.subscribe button:focus-visible svg {
  transform: translateX(5px);
}

.subscribe button:disabled {
  opacity: 0.4;
}

.subscribe button:disabled svg {
  animation: nudge 0.9s var(--ease) infinite;
}

@keyframes nudge {
  50% { transform: translateX(5px); }
}

/* Error: the whole row (field and button) becomes the red box and shakes as one, so the
   button stays in line with the field. */
.subscribe-row:has([aria-invalid="true"]) {
  margin-inline: -8px;
  padding-inline: 8px;
  border-bottom-color: transparent;
  outline: 2px solid var(--error);
  background: var(--error-tint);
}

.subscribe-row:has(.is-shaking) {
  animation: field-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.subscribe input[aria-invalid="true"] {
  outline: none !important;
  background-color: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.subscribe input.is-shaking {
  animation: none;
}

.subscribe-status {
  min-height: 1.4em;
  margin-top: 5px;
  font-size: 12.5px;
}

.subscribe-status:empty {
  display: none;
}

.subscribe-status.is-error {
  color: var(--error);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin-bottom: 21px;
  color: var(--ink);
  font-size: 14px;
}

.footer-links a:hover {
  opacity: 0.6;
}

/* "Chat Us" sits in the menu. A dot on it, and on "Menu", when the roastery has replied. */
.menu-chat {
  font: inherit;
  color: inherit;
}

.menu-chat,
.menu-open {
  position: relative;
}

.menu-chat.has-new::after,
.menu-open.has-new::after {
  content: "";
  position: absolute;
  top: 0.15em;
  right: -9px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-1);
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 5px 10.5px;
}

@media (min-width: 768px) {
  .footer-base > :first-child {
    flex: 1;
  }

  .footer-legal {
    margin-right: 21px;
  }
}

/* Phones: the copyright on its own line, the two links below it. */
@media (max-width: 767px) {
  .footer-base > :first-child {
    flex-basis: 100%;
  }
}

.footer-base a:hover {
  color: var(--ink);
}

@media (min-width: 768px) {
  :root {
    --gutter: 31.5px;
  }
}

/* ── Phones ───────────────────────────────────────────────── */

/* Comfortable tap targets everywhere (44px), without changing the look. */
.header-actions button {
  min-height: 44px;
  padding-inline: 2.5px;
}

.close {
  box-sizing: content-box;
  padding: 13px;
  margin: -13px;
}

@media (max-width: 767px) {
  .header {
    padding-top: 12px;
  }

  .logo-mark {
    width: 32px;
  }

  .header-actions {
    gap: 12px;
  }

  .page {
    padding-top: 16px;
    padding-bottom: 47px;
  }

  .page-head {
    margin-bottom: 21px;
  }

  /* Home: let the first coffees peek above the fold. */
  .ticker {
    margin-top: 9px;
    padding: 7px 0;
    font-size: 13px;
  }

  .products {
    padding-top: 18.5px;
  }

  .shop-head {
    margin-bottom: 16px;
  }

  .filters button {
    min-height: 44px;
  }

  .product-grid {
    row-gap: 26px;
  }

  .product-info {
    padding-top: 7px;
    font-size: 13px;
  }

  .quick-add {
    top: 6px;
    right: 6px;
    min-height: 36px;
    padding: 5px 8px;
  }

  .stepper {
    height: 36px;
  }

  .stepper button {
    width: 36px;
  }

  /* Product page: shorter image, buy row pinned while reading. */
  .pdp {
    gap: 16px;
  }

  .pdp-image {
    aspect-ratio: 1;
  }

  .pdp-notes {
    margin-top: 10.5px;
  }

  .pdp-origin-band {
    margin-top: 47px;
  }

  .pdp-brew {
    margin-top: 37px;
    margin-inline: calc(var(--gutter) * -1);
    border-radius: 0;
  }

  .options {
    margin-top: 13px;
  }

  /* Fixed rather than sticky (iPhone Safari can strand a sticky bar mid-page); the page keeps
     room for it, and its section never moves in, so "fixed" stays tied to the screen. */
  .buy-row {
    position: fixed;
    left: 0;
    right: 0;
    /* Its bottom on the bottom of the screen: the frame's, or what's visible when that's lower
       (iPhone Safari can leave the frame a keyboard's height short after typing; see app.js). */
    top: max(100%, var(--vv-bottom, 0px));
    translate: 0 -100%;
    z-index: 15;
    margin: 0;
    padding: 8px var(--gutter) calc(8px + var(--edge-bottom-height));
    background: var(--paper);
    box-shadow: 0 -1px 0 var(--line);
    transition: transform 0.35s var(--ease);
  }

  /* Out of the footer's way. */
  body.footer-in-view .buy-row {
    transform: translateY(110%);
  }

  body[data-page="product"] main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .pdp-info[data-reveal] {
    transform: none;
  }

  .related {
    margin-top: 42px;
  }

  /* Subscriptions */
  .sub-hero {
    margin-bottom: 37px;
  }

  /* Small three-up cards: the border shows the choice, so skip the tick */
  .pick-grid--three {
    gap: 5px;
  }

  .pick-grid--three .pick-body {
    padding: 8px 7px 9px;
  }

  .pick-grid--three .pick-card input:checked + .pick-body::after {
    display: none;
  }

  .sub-bar .button {
    padding-inline: 8px;
    font-size: 13px;
    white-space: nowrap;
  }

  .pick-grid--three .pick-body strong {
    padding-right: 0;
    font-size: 13px;
  }

  .pick-grid--three .pick-body em {
    font-size: 12px;
  }

  .sub-preview {
    aspect-ratio: 2 / 1;
  }

  .sub-steps {
    gap: 26px;
  }

  .sub-faq {
    margin-top: 47px;
  }

  /* Locations */
  .location-image {
    aspect-ratio: 16 / 10;
  }

  .order-location h2 {
    font-size: 17px;
  }



  .location h2 {
    font-size: 17px;
  }

  /* Forms */
  .form {
    gap: 9px;
  }

  .form input:not([type="radio"]),
  .form select,
  .form textarea {
    padding: 7px 0;
  }

  .contact-layout,
  .checkout-layout,
  .order-layout {
    gap: 23.5px;
  }

  .summary {
    padding: 12px;
  }

  /* FAQ */
  .faq-item summary {
    padding: 12px 0;
    font-size: 15px;
  }

  .ask-row input {
    padding: 12px 0;
    font-size: 15px;
  }

  .ask-row button {
    min-height: 40px;
  }

  /* Footer: clear sections with room to breathe */
  .footer {
    margin-top: 37px;
    padding-top: 26px;
    padding-bottom: calc(66px + env(safe-area-inset-bottom)); /* clears the accessibility button */
    border-top: 1px solid var(--line);
  }

  .subscribe {
    margin-bottom: 0;
  }

  .subscribe label {
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.35;
  }

  .subscribe-row {
    gap: 9px;
  }

  .subscribe input[type="email"] {
    padding: 8px 0;
    font-size: 14px; /* 16px stops iPhones zooming in on tap */
  }

  .subscribe button {
    font-size: 13px;
  }

  .footer-links {
    gap: 0 20px;
    margin: 21px 0;
    font-size: 13px;
  }

  .footer-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    text-align: left;
  }

  .footer-base {
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 12px;
  }

  .footer-base a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -8px;
  }
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  html {
    scroll-behavior: auto;
  }

  main,
  [data-reveal] {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ── Checkout: café details and the payment step ─────────── */

.checkout-layout > [hidden] {
  display: none !important;
}

.cafe-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5px 10.5px;
  padding: 10.5px;
  background: #f3f3f1;
  border-radius: 12px;
}

.cafe-box .section-label {
  grid-column: 1 / -1;
  margin-bottom: 1.5px;
}

.cafe-box strong {
  display: block;
  font-weight: 500;
}

.cafe-box span {
  color: var(--ink-muted);
  font-size: 13px;
}

.cafe-box .cafe-bags {
  display: block;
  margin-top: 4px;
  color: var(--ink);
}

.cafe-box a {
  align-self: start;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Card payment at the bottom of the checkout form: Square's card fields in their own frame. */
.pay-inline {
  display: grid;
  gap: 7px;
}

.card-frame {
  min-height: 92px;
}

/* Apple Pay: the shop's own button shape, size and type, in black with the Apple mark. */
.wallet-button {
  gap: 0.28em;
  background: #000;
  color: #fff;
}

.wallet-button::after {
  background: #333;
}

.wallet-button .apple-logo {
  width: 0.92em;
  height: 1.13em;
  margin: -0.18em 0 0 0.12em;
  fill: currentColor;
}

.express {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.express-cart {
  margin: 8px 0 0;
}

.express-error:empty {
  display: none;
}

#express-google {
  min-height: 48px;
}

.pay-or {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-size: 12.5px;
}

.pay-or::before,
.pay-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.ext {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.2em;
  vertical-align: 0.08em;
}


/* ── Wholesale portal (trade.html) ───────────────────────── */

.trade-login-link {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-muted);
}

.trade-login-link a,
.trade-pay a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.trade-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10.5px;
  margin-bottom: 26px;
  padding: 12px 13px;
  background: #f3f3f1;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s;
}

.trade-banner:hover {
  background: var(--tile);
}

.trade-banner strong {
  display: block;
  font-weight: 500;
}

.trade-banner span:first-child {
  color: var(--ink-muted);
}

.trade-banner span:first-child strong {
  color: var(--ink);
}

.trade-tabs {
  display: inline-flex;
  max-width: 100%;
  margin-bottom: 21px;
  overflow-x: auto;
  scrollbar-width: none;
}

.trade-tabs button {
  flex: none;
  padding: 0 13px;
  white-space: nowrap;
}

.trade-layout {
  display: grid;
  gap: 26px;
}

@media (min-width: 1000px) {
  .trade-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
    align-items: start;
  }

  .trade-summary {
    position: sticky;
    top: 100px;
  }
}

/* Pick coffees first on phones; the order total follows the list. */
.summary.trade-summary {
  order: 0;
}

.trade-prices-note {
  margin-bottom: 8px;
}

.trade-list {
  list-style: none;
  border-top: 1px solid var(--line);
}

.trade-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 110px 110px 140px;
  gap: 10.5px;
  align-items: center;
  padding: 10.5px 0;
  border-bottom: 1px solid var(--line);
}

.trade-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.trade-name strong {
  display: block;
  font-weight: 500;
}

.trade-name small {
  color: var(--ink-muted);
  font-size: 12.5px;
}

.trade-qty,
.trade-grind {
  display: grid;
  gap: 2.5px;
  font-size: 12px;
  color: var(--ink-muted);
}

.trade-qty input,
.trade-grind select {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}

.trade-qty input:focus,
.trade-grind select:focus {
  outline: none;
  border-color: var(--ink);
}

.trade-summary .form {
  margin: 10.5px 0;
}

.trade-summary .button {
  width: 100%;
}

.trade-fulfil {
  margin-top: 12px;
}

.trade-orders {
  list-style: none;
  display: grid;
  gap: 10.5px;
}

.trade-pay {
  margin-top: 7px;
}

.trade-pay.is-overdue {
  color: var(--error);
}

.trade-details {
  max-width: 640px;
}

@media (max-width: 767px) {
  .trade-item {
    grid-template-columns: 14px 1fr 1fr;
    gap: 7px 8px;
  }

  .trade-name {
    grid-column: 2 / -1;
  }

  .trade-qty:first-of-type {
    grid-column: 2;
  }

  .trade-grind {
    grid-column: 2 / -1;
  }
}

/* ── Wrong or missing input: red box, one short shake ───────── */

/* !important: every field style (underlined, boxed, focused) gives way to the error box. */
[aria-invalid="true"] {
  border-color: var(--error) !important;
  outline: 2px solid var(--error) !important;
  outline-offset: 0 !important;
  background-color: var(--error-tint) !important;
  padding-left: 7px !important;
  padding-right: 7px !important;
}

.is-shaking {
  animation: field-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes field-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .is-shaking {
    animation: none;
  }
}

/* ── Cookie consent ──────────────────────────────────────────── */

.cookie-banner {
  position: fixed;
  left: var(--gutter);
  bottom: calc(var(--gutter) + var(--edge-bottom-height));
  z-index: 45;
  width: min(420px, calc(100% - 2 * var(--gutter)));
  padding: 16px;
  border-radius: 16px; /* rounded like the buttons inside it */
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}

.cookie-banner.is-in {
  opacity: 1;
  transform: none;
}

.cookie-banner h2 {
  margin-bottom: 5px;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.cookie-banner > p {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.cookie-banner > p a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-choices {
  margin-top: 10.5px;
  border-top: 1px solid var(--line);
}

.cookie-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10.5px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.cookie-option strong {
  display: block;
  font-weight: 500;
}

.cookie-option small {
  display: block;
  color: var(--ink-muted);
  font-size: 12px;
}

/* Switches: the real checkbox sits invisibly on top of the drawn track. */
.cookie-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cookie-option i {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--tile);
  transition: background 0.3s var(--ease);
}

.cookie-option i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s var(--ease);
}

.cookie-option input:checked + i {
  background: var(--ink);
}

.cookie-option input:checked + i::after {
  transform: translateX(16px);
}

.cookie-option input:disabled + i {
  opacity: 0.45;
}

.cookie-option:has(input:disabled) {
  cursor: default;
}

.cookie-option input:focus-visible + i {
  outline: 2px solid var(--color-1);
  outline-offset: 2px;
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  margin-top: 13px;
}

.cookie-btn {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px; /* as the shop's other buttons */
  box-shadow: inset 0 0 0 1px var(--ink);
  font-size: 13px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.cookie-btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.cookie-btn.is-primary {
  background: var(--color-1);
  box-shadow: inset 0 0 0 1px var(--color-1);
  color: var(--cte-accent-text);
}

.cookie-btn.is-primary:hover {
  background: var(--ink);
}

.cookie-actions .link-button {
  margin-left: 2.5px;
}

/* Welcome offer: the cookie card's surface, with an email field and the code. */
/* The email offer steps aside while the cart, menu or any sheet is open (and comes back after). */
body.is-locked .welcome-card {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.welcome-card h2 {
  padding-right: 24px; /* clear of the close button */
}

.welcome-card p {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
  text-wrap: pretty;
}

.welcome-close {
  position: absolute;
  top: 17.5px;
  right: 17.5px;
  width: 22px;
  height: 22px;
}

.welcome-form {
  display: flex;
  gap: 5px;
  margin-top: 10.5px;
}

.welcome-form input:not(.visually-hidden) {
  flex: 1;
  min-width: 0;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  font-size: 14px;
}

.welcome-form input:focus {
  border-bottom-color: var(--ink);
  outline: none;
}

.welcome-form input[aria-invalid="true"] {
  border-bottom-color: var(--error);
}

.welcome-card .welcome-status {
  margin-top: 5px;
  font-size: 12.5px;
}

.welcome-status:empty {
  display: none;
}

.welcome-card .welcome-status.is-error {
  color: var(--error);
}

.welcome-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10.5px;
  padding: 5px 5px 5px 10.5px;
  background: var(--color-4);
}

.welcome-code strong {
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  user-select: all;
}

/* Explicit in every state: iPhones keep a tapped button in :hover, which would turn its
   text white on this white button. */
.welcome-code .cookie-btn,
.welcome-code .cookie-btn:hover {
  background: var(--paper);
  color: var(--ink);
}

/* After choosing: a check draws in beside a one-line summary. */
.cookie-banner.is-done {
  padding: 12px 13px;
  overflow: hidden;
  cursor: pointer;
}

.cookie-done {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  animation: cookie-fade 0.35s var(--ease) both;
}

.cookie-done p {
  font-size: 13px;
  line-height: 1.4;
}

.cookie-done small {
  display: block;
  margin-top: 1.5px;
  color: var(--ink-muted);
  font-size: 12px;
}

.cookie-check {
  flex: none;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cookie-check circle,
.cookie-check path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: cookie-draw 0.5s var(--ease) forwards;
}

.cookie-check circle {
  transform: rotate(-90deg);
  transform-origin: center;
}

.cookie-check path {
  animation-delay: 0.3s;
  stroke-width: 2;
}

@keyframes cookie-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes cookie-fade {
  from { opacity: 0; transform: translateY(6px); }
}

/* Phones: a full-width sheet along the bottom, buttons sharing the row. */
@media (max-width: 600px) {
  .cookie-banner {
    left: 10px;
    right: 10px;
    bottom: calc(10px + var(--edge-bottom-height));
    width: auto;
    padding: 13px;
  }

  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cookie-btn {
    padding: 0 8px;
  }

  .cookie-actions .link-button {
    grid-column: 1 / -1;
    justify-self: center;
    margin: 0;
  }
}

/* Cookie policy page */

.cookie-policy {
  display: grid;
  gap: 26px;
  max-width: 820px;
}

.cookie-policy h2 {
  margin-bottom: 5px;
  font-size: 17px;
  font-weight: 500;
}

.cookie-policy h3 {
  margin-bottom: 4px;
  font-size: 15.5px;
  font-weight: 500;
}

.policy-part {
  margin-top: 16px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 21.5px !important;
}

.cookie-policy .policy-intro {
  margin-top: -21px;
}

.policy-list {
  display: grid;
  gap: 7px;
  max-width: 680px;
  margin-top: 2.5px;
  padding-left: 12px;
  color: var(--ink-muted);
}

.policy-list strong,
.cookie-policy p a,
.policy-list a {
  color: var(--ink);
  font-weight: 500;
}

.cookie-policy p a,
.policy-list a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-policy p {
  max-width: 640px;
  color: var(--ink-muted);
}

.cookie-table {
  width: 100%;
  margin-top: 10.5px;
  border-collapse: collapse;
  font-size: 13px;
}

.cookie-table th {
  color: var(--ink-muted);
  font-weight: 400;
  text-align: left;
}

.cookie-table th,
.cookie-table td {
  padding: 8px 10.5px 8px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.cookie-table code {
  font-size: 12.5px;
}

.cookie-policy-button {
  width: auto;
  justify-self: start;
  padding: 10.5px 18.5px;
}

@media (max-width: 640px) {
  .cookie-table thead {
    display: none;
  }

  .cookie-table tr {
    display: grid;
    gap: 1.5px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }

  .cookie-table td {
    padding: 0;
    border: 0;
  }

  .cookie-table td:last-child {
    color: var(--ink-muted);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner,
  .cookie-option i,
  .cookie-option i::after {
    transition: none;
  }

  .cookie-done,
  .cookie-check circle,
  .cookie-check path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ── Delete account / close wholesale account ────────────────── */

.danger-zone {
  max-width: 560px;
  margin-top: 37px;
  border-top: 1px solid var(--line);
}

.danger-zone summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  color: var(--ink-muted);
  cursor: pointer;
  list-style: none;
}

.danger-zone summary::-webkit-details-marker {
  display: none;
}

.danger-zone summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 2.5px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.3s var(--ease);
}

.danger-zone[open] summary::after {
  transform: rotate(225deg) translateY(-3px);
}

.danger-zone summary:hover {
  color: var(--ink);
}

.danger-zone .form {
  display: grid;
  gap: 10.5px;
  padding-bottom: 16px;
}

.danger-zone .form > p:first-child {
  color: var(--ink-muted);
}

.button-danger {
  width: auto;
  justify-self: start;
  padding-inline: 18.5px;
  background: var(--error);
}

.button-danger::after {
  background: #9e1c14;
}

.deleted-state h1 {
  margin-bottom: 8px;
  font-size: clamp(19.5px, 2.45vw, 29.5px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ── Café menu items: photos and sold out (edited in the back office) ── */

.drink-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

@media (hover: hover) {
  .drink-card:hover .drink-image img {
    transform: scale(1.04);
  }
}

.drink-card.is-sold-out {
  cursor: default;
}

.drink-card.is-sold-out .drink-image > :not(.sold-out) {
  opacity: 0.45;
}

.sold-out {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 12px;
}


/* Checkout: courier (within 10 miles of the roastery) or shipped. */
.delivery-zone {
  margin-top: 2.5px;
  padding: 8px 9px;
  border-left: 3px solid var(--ink);
  background: #f6f6f6;
  color: var(--ink-muted);
  font-size: 13px;
}

.delivery-zone strong {
  display: block;
  color: var(--ink);
  font-weight: 500;
}

.delivery-zone p {
  margin: 0;
}

/* Delivery: the address, then one card per way to get it (local courier, shipping, pickup). */
.delivery-choice {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  border: 0;
}

.delivery-choice legend {
  margin-bottom: 7px;
  color: var(--ink-muted);
}

.zone-note {
  color: var(--ink-muted);
  font-size: 13px;
}

.zone-note strong {
  color: var(--ink);
  font-weight: 500;
}

/* Within the delivery area: courier or post, each with its price (a radio card per choice). */
.delivery-zone:has(.delivery-options) {
  padding: 0;
  border: 0;
  background: none;
}

.delivery-options {
  display: grid;
  gap: 8px;
  border: 0;
}

.delivery-options .delivery-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 4px 12px;
  padding: 13px 14px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.delivery-options .delivery-option:has(input:checked) {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.delivery-option input {
  margin-top: 3px;
  accent-color: var(--ink);
}

.delivery-option-text {
  display: grid;
  gap: 2px;
}

.delivery-option-text strong {
  font-weight: 500;
  font-size: 14px;
}

.delivery-option-text small {
  color: var(--ink-muted);
  font-size: 12.5px;
  line-height: 1.4;
  text-wrap: pretty;
}

.delivery-option-price {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Titles: every word capitalised (headings, form group titles, section labels). */
h1,
h2,
h3,
h4,
legend,
.section-label {
  text-transform: capitalize;
}

/* Account: past orders, below subscriptions. */
.account-orders {
  margin-top: 31.5px;
}

.account-order p + p {
  margin-top: 5px;
}

.account-order a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.account-gift {
  font-size: 13px;
}

/* A coffee that's sold out: shown in the shop, can't be added. */
.sold-out-text {
  color: var(--ink-muted);
}

/* Checkout: discount code. */
.promo-form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 8px;
}

.promo-form input {
  flex: 1;
  min-width: 0;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  font-size: 14px;
  text-transform: uppercase;
}

.promo-form input::placeholder {
  text-transform: none;
}

.promo-form input:focus {
  border-bottom-color: var(--ink);
  outline: none;
}

.promo-form input[aria-invalid="true"] {
  border-bottom-color: var(--error);
}

.promo-row .link-button {
  margin-left: 5px;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.promo-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-muted);
}

.promo-note a {
  color: var(--ink);
}

/* Room between the code box and the total. */
.promo-form + .row.total,
.promo-note + .row.total,
.sub-error + .row.total {
  margin-top: 20px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Fields stay at 16px on phones and tablets: smaller text makes iPhones zoom in on focus. */
@media (max-width: 899px) {
  input:not([type="radio"]):not([type="checkbox"]),
  select,
  textarea {
    font-size: 16px !important; /* beats each form's own size, on purpose */
  }
}

/* True Specialty® page: a few large lines carry each section (they rise in word by word);
   the longer text sits beneath in calmer type, and the five commitments open on demand. */
.ts-page {
  display: grid;
  gap: 73.5px;
  padding-bottom: 0;
}

.ts-hero {
  display: grid;
  gap: 21px;
  align-items: end;
}

@media (min-width: 900px) {
  .ts-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 37px;
  }
}

.ts-hero h1 {
  font-size: clamp(26.5px, 4.2vw, 49px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

.ts-sub {
  margin-top: 10.5px;
  color: var(--ink-muted);
  font-size: clamp(12px, 1.4vw, 14.5px);
}

.ts-hero-text {
  max-width: 30em;
  margin-top: 21px;
  font-size: 15px;
  line-height: 1.6;
}

.ts-hero-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--tile);
}

.ts-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 55%;
  transform: scale(1.06);
  transition: transform 1.6s var(--ease);
}

.ts-hero-image.is-visible img {
  transform: none;
}

.ts-label {
  margin-bottom: 7.5px;
  color: var(--ink-muted);
  font-size: 13px;
}

.ts-page h2 {
  font-size: clamp(18px, 2.24vw, 29.5px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.ts-big {
  max-width: 22em;
  font-size: clamp(15.5px, 1.96vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h2 + .ts-big {
  margin-top: 21px;
}

.ts-small {
  display: grid;
  gap: 7.5px;
  max-width: 34em;
  margin-top: 16px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* The sixth sense: a circle cut in six, one part lit in turn. */
.ts-sense,
.ts-roast {
  display: grid;
  gap: 26px;
  align-items: center;
}

@media (min-width: 900px) {
  .ts-sense,
  .ts-roast {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 52.5px;
  }
}

.ts-sense-art {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background: var(--tile);
}

.ts-sense-art svg {
  width: 62%;
  overflow: visible;
}

.ts-sense-art .sector {
  fill: var(--paper);
  animation: sixth 6s var(--ease) infinite;
  animation-delay: calc(var(--k) * 1s);
}

@keyframes sixth {
  0%, 100% { fill: var(--paper); }
  4%, 15% { fill: var(--color-1); }
  20% { fill: var(--paper); }
}

.ts-sense-art .cuts line,
.ts-sense-art .rim {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

/* The five commitments: title and lead line, full text on "Read more". */
/* Full-width photo bands between sections: where the coffee comes from (before the
   commitments) and how it's enjoyed (before the values). */
.ts-band {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tile);
}

@media (min-width: 900px) {
  .ts-band {
    aspect-ratio: 21 / 9;
  }
}

.ts-band--origin img {
  object-position: 50% 44%; /* the chute's end and the falling beans */
}

/* Desktop: the phone's 4:3 framing (the whole chute, beans and basket), centred, rather than
   the wide strip, which crops in close. */
@media (min-width: 900px) {
  .ts-band--origin {
    aspect-ratio: 4 / 3;
    width: min(100%, 860px);
    margin-inline: auto;
  }
}

/* A tall photo: a taller frame on phones; on desktop a centred square rather than the wide
   strip, which would cut the glass. */
.ts-band--glass {
  aspect-ratio: 4 / 5;
}

.ts-band--glass img {
  object-position: 50% 100%;
}

@media (min-width: 900px) {
  .ts-band--glass {
    aspect-ratio: 1 / 1;
    width: min(100%, 620px);
    margin-inline: auto;
  }
}

.ts-standard-head {
  margin-bottom: 26px;
}

.ts-cards {
  display: grid;
  gap: 7.5px;
  align-items: start; /* opening one card doesn't stretch its neighbours */
  list-style: none;
}

@media (min-width: 700px) {
  .ts-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .ts-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ts-card {
  background: #f5f5f5;
}

.ts-card summary {
  display: grid;
  gap: 6px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}

.ts-card summary::-webkit-details-marker {
  display: none;
}

.ts-num {
  color: var(--ink-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ts-card h3 {
  margin-top: 21px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}

.ts-lead {
  font-size: 14px;
}

.ts-more {
  display: inline-flex;
  gap: 4.5px;
  align-items: center;
  margin-top: 7.5px;
  color: var(--ink-muted);
  font-size: 13px;
}

.ts-more i {
  font-style: normal;
  transition: transform 0.4s var(--ease);
}

.ts-card details[open] .ts-more i {
  transform: rotate(45deg);
}

.ts-card .close-text,
.ts-card details[open] .open-text {
  display: none;
}

.ts-card details[open] .close-text {
  display: inline;
}

.ts-card-body {
  display: grid;
  gap: 7.5px;
  padding: 0 16px 16px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.6;
}

.ts-card details[open] .ts-card-body {
  animation: card-open 0.5s var(--ease);
}

@keyframes card-open {
  from { opacity: 0; transform: translateY(-6px); }
}

/* Why light roast: the bag floats on its tile. */
/* The roaster photo fills its tile and settles in slowly as it scrolls into view. */
.ts-roast-art {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--tile);
  overflow: hidden;
}

.ts-roast-art img,
.ts-close-photo img,
.ts-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.6s var(--ease);
}

.ts-roast-art img {
  object-position: 42% 50%; /* the beans and the cooling arm */
}

.ts-roast-art.is-visible img,
.ts-close-photo.is-visible img,
.ts-band.is-visible img {
  transform: none;
}

/* Honest, Remarkable, Uncompromising. */
.ts-value-list {
  display: grid;
  gap: 0;
  margin-top: 26px;
  list-style: none;
  border-top: 1px solid var(--ink);
}

@media (min-width: 900px) {
  .ts-value-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    border-top: 0;
  }

  .ts-value-list li {
    border-top: 1px solid var(--ink);
  }
}

.ts-value-list li {
  display: grid;
  gap: 4.5px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.ts-value-list strong {
  font-size: clamp(17px, 1.82vw, 24.5px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.ts-value-list span {
  color: var(--ink-muted);
  font-size: 14px;
}

/* The close: a dark band across the page. */
.ts-close {
  display: grid;
  align-content: start;
  margin: 0 calc(var(--gutter) * -1);
  padding: 73.5px var(--gutter);
  background: var(--ink);
  color: var(--paper);
}

/* The drip photo: above the text on phones, beside it on wide screens. */
.ts-close-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 26px;
  overflow: hidden;
}

.ts-close-photo img {
  object-position: 50% 55%; /* the falling drop */
}

@media (min-width: 900px) {
  .ts-close {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: 1fr auto; /* heading and text sit together at the photo's foot */
    column-gap: 52.5px;
    align-items: end;
  }

  .ts-close-photo {
    grid-column: 2;
    grid-row: 1 / span 2;
    aspect-ratio: 4 / 5;
    margin: 0;
  }

  .ts-close h2,
  .ts-close-text {
    grid-column: 1;
  }

  .ts-close h2 {
    align-self: end;
  }
}

.ts-close h2 {
  font-size: clamp(24px, 3.5vw, 44px);
}

.ts-close-text {
  display: grid;
  gap: 7.5px;
  max-width: 30em;
  margin-top: 21px;
  color: #b9b9b9;
  font-size: 15px;
  line-height: 1.6;
}

.ts-sign {
  margin-top: 6px;
  color: var(--paper);
  font-weight: 500;
}

.ts-close .button {
  max-width: 280px;
  margin-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .ts-sense-art .sector {
    animation: none;
  }

  .ts-sense-art .sector:first-child {
    fill: var(--color-1);
  }

  .ts-roast-art img,
  .ts-close-photo img,
  .ts-band img {
    transform: none;
    transition: none;
  }
}

/* The ® in "True Specialty®": small and raised, like a trademark mark, not full size. */
.reg {
  font-size: 0.42em; /* sized and placed like a degree sign: small, its top at cap height */
  line-height: 0;
  vertical-align: 1em;
  margin-left: 0.06em;
  font-weight: inherit;
}

/* In large headings a smaller share is enough. */
h1 .reg,
h2 .reg {
  font-size: 0.36em;
  vertical-align: 1.25em;
}

/* Product page: one-time purchase or subscribe & save (this coffee, on a schedule). */
.buy-type {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  border: 0;
}

.buy-type legend {
  width: 100%;
  margin-bottom: 7px;
  color: var(--ink-muted);
}

.buy-type label {
  position: relative;
  cursor: pointer;
}

.buy-type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.buy-type label > span {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5px 9px;
  align-items: baseline;
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* The radio dot. */
.buy-type label > span::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 11px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--ink-muted);
  border-radius: 50%;
  transition: border 0.2s;
}

.buy-type input:checked + span::before {
  border: 5px solid var(--color-1);
}

.buy-type strong {
  font-weight: 500;
}

.buy-type b {
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

.buy-type b s {
  margin-right: 3px;
  color: var(--ink-muted);
}

.buy-type em {
  grid-column: 1 / -1;
  color: var(--ink-muted);
  font-size: 13px;
  font-style: normal;
}

.buy-type label:hover span {
  border-color: var(--ink-muted);
}

.buy-type input:checked + span {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.buy-type input:focus-visible + span {
  outline: 2px solid var(--color-1);
  outline-offset: 2px;
}

/* Subscriptions: subscription vs one-time. */
.ways {
  max-width: 820px;
  margin-top: 68px;
}

.ways h2 {
  margin-bottom: 13px;
  font-size: 17px;
  font-weight: 500;
}

.ways-table {
  width: 100%;
  max-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  text-wrap: pretty;
}

.ways-table th,
.ways-table td {
  padding: 11px 12px;
  box-shadow: inset 0 -1px 0 var(--line);
  text-align: left;
  vertical-align: middle;
  font-weight: 400;
}

.ways-table th:first-child {
  padding-left: 0;
}

.ways-table thead th {
  color: var(--ink-muted);
  font-size: 13px;
}

.ways-table tbody th {
  width: 40%;
  color: var(--ink-muted);
}

.ways-table td:nth-child(3) {
  color: var(--ink-muted);
}

/* The subscription column reads first (ink); only its savings are marked in yellow. */
.ways-table th:nth-child(2),
.ways-table td:nth-child(2) {
  width: 32%;
  color: var(--ink);
}

.ways-table thead th:nth-child(2) {
  font-weight: 500;
}

.save-mark {
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-4);
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ways-yes,
.ways-no {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ways-yes {
  stroke: var(--ink);
}

.ways-no {
  stroke: var(--ink-muted);
}

/* Home: a way into the coffee finder, above the coffees. */
.filters-finder {
  color: var(--color-1);
  font-size: 14px;
}

.sub-finder-link {
  margin-top: 10.5px;
  color: var(--ink-muted);
  font-size: 14px;
}

.sub-finder-link a {
  color: var(--color-1);
}

/* Contact: a photo of the roastery's cooling tray under the heading. */
.contact-photo {
  aspect-ratio: 3 / 2;
  margin: 0 0 31.5px;
  overflow: hidden;
  background: var(--tile);
}

.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%; /* the sealer, the bag on its belt and the sealed bags */
}

@media (min-width: 900px) {
  .contact-photo {
    aspect-ratio: 21 / 9;
  }
}

/* Coffee finder: one question at a time, then the match. */
.finder-head {
  max-width: 620px;
  margin-bottom: 31.5px;
}

/* Photos standing in a hero tile (Wholesale) or beside the coffee quiz. */
.photo-hero img,
.finder-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wholesale: the frame takes the photo's own shape (3:4), so none of the roaster is cut off. */
.photo-hero {
  aspect-ratio: 3 / 4;
}

@media (min-width: 900px) {
  .photo-hero {
    width: min(100%, 520px);
    justify-self: end;
  }
}

.finder-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 21px;
  overflow: hidden;
  background: var(--tile);
}

.finder-photo img {
  object-position: 50% 45%; /* the dripper */
}

/* Wide screens: the quiz on the left, the photo beside it. */
@media (min-width: 900px) {
  .finder-page {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    column-gap: 52.5px;
  }

  .finder-photo {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    aspect-ratio: 4 / 5;
    margin: 0;
  }
}

.finder-head h1 {
  font-size: clamp(24.5px, 4.2vw, 44px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

.finder-head .lede {
  margin-top: 10.5px;
  color: var(--ink-muted);
  font-size: 15px;
}

.finder {
  max-width: 820px;
  min-height: 420px;
}

.finder-count {
  margin-bottom: 7.5px;
  color: var(--ink-muted);
  font-size: 13px;
}

.finder h2 {
  font-size: clamp(17px, 2.1vw, 24.5px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.finder-options {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}

@media (min-width: 700px) {
  .finder-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.finder-option {
  display: grid;
  gap: 2px;
  padding: 13.5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}

.finder-option strong {
  font-weight: 500;
  font-size: 15px;
}

.finder-option span {
  color: var(--ink-muted);
  font-size: 13px;
}

.finder-option:hover {
  border-color: var(--ink-muted);
}

.finder-option.is-picked {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.finder-back {
  margin-top: 16px;
  color: var(--ink-muted);
  font-size: 14px;
}

.finder-match {
  display: grid;
  gap: 18px;
  align-items: center;
  margin-top: 3px;
}

@media (min-width: 700px) {
  .finder-match {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 31.5px;
  }
}

.finder-art {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--tile);
}

.finder-copy h2 {
  margin-top: 3px;
}

.finder-notes {
  margin-top: 7.5px;
  font-size: 15px;
}

.finder-amount {
  margin-top: 13.5px;
  color: var(--ink-muted);
  font-size: 14px;
}

.finder-amount strong {
  color: var(--ink);
  font-weight: 500;
}

.finder-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7.5px 12px;
  margin-top: 16px;
}

.finder-actions .button {
  width: auto;
  padding-inline: 16px;
}

.finder-link {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.finder-also {
  margin-top: 31.5px;
}

.finder-also-list {
  display: grid;
  gap: 6px;
  list-style: none;
}

@media (min-width: 700px) {
  .finder-also-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.finder-also-list a {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10.5px;
  align-items: center;
  padding: 7.5px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.finder-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--tile);
  border-radius: 8px;
  overflow: hidden;
}

.finder-also-list strong {
  display: block;
  font-weight: 500;
}

.finder-also-list small {
  color: var(--ink-muted);
  font-size: 13px;
}

/* Café menu: Made on arrival and Low stock under the price. */
.drink-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 7.5px;
  margin-top: 1.5px;
  color: var(--ink-muted);
  font-size: 12px;
}

.drink-flags .is-low {
  color: var(--error);
}

.drink-section-note {
  margin: -4.5px 0 10.5px;
  color: var(--ink-muted);
  font-size: 14px;
}

/* Bags in the café menu: the packaging photo on its tile. */
.bag-card .drink-image .photo-art {
  position: absolute;
  inset: 0;
  height: 100%;
}

/* Options sheet: Size / Milk / Extras, or a bag's size and grind. */
.opt-group {
  margin-top: 13.5px;
  border: 0;
}

.opt-group legend {
  width: 100%;
  margin-bottom: 6px;
  font-weight: 500;
}

.opt-group legend small {
  margin-left: 4.5px;
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 400;
}

.opt-choice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.opt-choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-1);
}

.opt-choice b {
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 400;
}

.opt-add {
  margin-top: 16px;
}

/* ── Order Ahead: café, method and time above the menu ───────── */

.order-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  max-width: 760px;
  margin-bottom: 18px;
}

.order-control {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 34px 9px 12px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: left;
  position: relative;
  transition: box-shadow 0.2s;
}

/* The time spans the row on phones: it's the one most often changed. */
.order-control[data-open-time] {
  grid-column: 1 / -1;
}

@media (min-width: 700px) {
  .order-controls {
    grid-template-columns: 1fr 1fr 1.3fr;
  }

  .order-control[data-open-time] {
    grid-column: auto;
  }
}

.order-control:hover {
  box-shadow: inset 0 0 0 1px var(--ink);
}

.order-control small {
  color: var(--ink-muted);
  font-size: 12.5px;
}

.order-control span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A small chevron: it opens a choice. */
.order-control::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ink-muted);
  border-bottom: 1.5px solid var(--ink-muted);
  transform: translateY(-70%) rotate(45deg);
}

/* Time sheet */
.time-panel .days {
  margin-top: 12px;
}

.time-panel .slots {
  max-height: 46vh;
  overflow-y: auto;
  margin-bottom: 14px;
}

.slot-asap {
  grid-column: 1 / -1;
}

.slot-asap span {
  font-weight: 500;
}

/* ── Café order placed ───────────────────────────────────── */

.cafe-confirm-head {
  margin-bottom: 18px;
}

.cafe-confirm-when {
  font-size: 17px;
}

.cafe-confirm-where {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.cafe-confirm-where div {
  display: grid;
  gap: 2px;
}

.cafe-confirm-where span {
  color: var(--ink-muted);
  font-size: 14px;
}

.cafe-confirm-where a {
  flex: none;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
}

.cafe-confirm-items {
  display: grid;
  gap: 4px;
  margin: 6px 0 16px;
  list-style: none;
}

.cafe-confirm-items span {
  color: var(--ink-muted);
}

.cafe-confirm-note {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--tile);
  margin-bottom: 18px;
}

.cafe-confirm-note p {
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

.time-panel .slots {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

/* An open sheet, menu or cart takes focus itself (for keyboard users); it needs no ring. */
.overlay:focus {
  outline: none;
}

/* ── Photos: no "Save image" callout on a long press, no dragging them out ── */
img,
.bag-svg {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* ── Accessibility panel: a small blue button, bottom left ── */
.a11y {
  position: fixed;
  left: var(--gutter);
  bottom: calc(14px + var(--edge-bottom-height) + var(--a11y-lift, 0px));
  z-index: 44; /* above the page and pinned bars; under the cookie card, menu and cart */
  transition: bottom 0.3s var(--ease);
}

html.home-intro .a11y {
  bottom: calc(14px + var(--edge-bottom-height));
}

.a11y-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--color-1);
  color: #fff;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.18);
  cursor: pointer;
}

.a11y-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.a11y-button svg circle {
  fill: currentColor;
  stroke: none;
}

.a11y-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(270px, calc(100vw - 2 * var(--gutter)));
  padding: 14px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 8px 28px rgba(17, 17, 17, 0.14);
}

.a11y-panel h2 {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 500;
}

.a11y-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

/* A small switch: blue when on. */
.a11y-options i {
  position: relative;
  width: 30px;
  height: 18px;
  flex: none;
  border-radius: 9px;
  background: var(--line);
  transition: background 0.2s var(--ease);
}

.a11y-options i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.2);
  transition: transform 0.2s var(--ease);
}

.a11y-options [aria-pressed="true"] i {
  background: var(--color-1);
}

.a11y-options [aria-pressed="true"] i::after {
  transform: translateX(12px);
}

.a11y-reset {
  margin: 10px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-1);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.a11y-panel p {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

.a11y-panel p a {
  color: var(--ink);
  text-decoration: underline;
}

/* The choices themselves. */
html.a11y-text body {
  zoom: 1.15;
}

html.a11y-contrast {
  --ink-muted: #111111;
  --line: #6b6b6b;
}

html.a11y-contrast {
  --color-1: #1a3fc4; /* a deeper blue for buttons and links */
}

html.a11y-links a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

html.a11y-font body {
  font-family: Verdana, Tahoma, system-ui, sans-serif;
  letter-spacing: 0.02em;
  word-spacing: 0.06em;
  line-height: 1.6;
}

html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Coffee finder: "tell us in your own words" under the first question. */
.finder-describe {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin-top: 31.5px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.finder-describe label {
  font-size: 15px;
}

.finder-describe textarea {
  width: 100%;
  max-height: 240px; /* grows with the text (app.js), then scrolls */
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* no zoom on iPhone */
  line-height: 1.45;
  resize: none;
  field-sizing: content;
}

.finder-describe textarea:focus {
  outline: 2px solid var(--color-1);
  outline-offset: 1px;
  border-color: transparent;
}

.finder-describe .button {
  justify-self: start;
}

.finder-describe-status {
  min-height: 1.4em;
  color: var(--ink-muted);
  font-size: 13px;
}

.finder-describe-status.is-error {
  color: #b42318;
}

.finder-reason {
  color: var(--ink);
}

/* ── Languages ── */
/* Hidden for a moment on /es/ and /ko/ while js/i18n.js translates, so English doesn't flash. */
html.i18n-pending body {
  opacity: 0;
}

/* Title case is an English habit: Spanish and Korean headings keep their own capitals. */
html:not([lang="en"]) :is(h1, h2, h3, h4, legend, .section-label, .ticker) {
  text-transform: none;
}

/* Korean breaks lines between words, not inside them. */
html[lang="ko"] body {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.menu-langs,
.footer-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.menu-langs {
  margin-top: 24px;
  font-size: 13px;
}

.menu-langs a,
.footer-langs a {
  opacity: 0.6;
}

.menu-langs a[aria-current],
.footer-langs a[aria-current] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-langs {
  margin-top: 12px;
  font-size: 12px;
}

/* ── Notes: articles (/notes/<slug>) and their list (/notes/). Text at reading width; photos
   on the product tile grey while they load; a coffee mentioned in a note links to it. ── */

.note-head,
.note-body,
.note-cover,
.note-more {
  max-width: 720px;
}

.note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
  color: var(--ink-muted);
  font-size: 13px;
}

.note-meta a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.note-head h1 {
  font-size: clamp(22px, 4.9vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.note-lede {
  max-width: 34em;
  margin-top: 16px;
  font-size: clamp(15.5px, 1.96vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.note-cover {
  margin-top: 26px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--tile);
}

.note-cover img,
.note-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.note-cover img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.note-body {
  display: grid;
  gap: 16px;
  margin-top: 31.5px;
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

.note-body h2,
.note-more h2 {
  margin-top: 16px;
  font-size: clamp(18px, 2.24vw, 29.5px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.note-body h3 {
  margin-top: 7px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
}

.note-body ul,
.note-body ol {
  display: grid;
  gap: 7px;
  padding-left: 21px;
}

.note-body ul {
  list-style: disc;
}

.note-body ol {
  list-style: decimal;
}

.note-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.note-body blockquote {
  padding-left: 16px;
  border-left: 2px solid var(--ink);
  font-size: clamp(15.5px, 1.96vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.note-figure {
  overflow: hidden;
  border-radius: 12px;
  background: var(--tile);
}

.note-body .note-coffee {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: center;
  padding: 10.5px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: box-shadow 0.2s var(--ease);
}

/* The coffee's bag on the shop's grey tile, as in the shop. */
.note-coffee .note-coffee-art {
  border-radius: 8px;
}

.note-coffee > span {
  display: grid;
  gap: 2.5px;
}

.note-coffee small {
  color: var(--ink-muted);
  font-size: 13px;
}

@media (hover: hover) {
  .note-body .note-coffee:hover {
    box-shadow: inset 0 0 0 1px var(--ink);
  }
}

.note-more {
  margin-top: 63px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.note-more h2 {
  margin: 0 0 21px;
}

.note-list {
  display: grid;
  gap: 31.5px 16px;
  list-style: none;
}

.notes-index .note-list {
  max-width: 1100px;
}

@media (min-width: 700px) {
  .note-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .notes-index .note-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.note-card {
  display: grid;
  gap: 10.5px;
}

.note-card-img {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
  background: var(--tile);
}

.note-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.note-card-copy {
  display: grid;
  gap: 4px;
  text-wrap: pretty;
}

.note-card-copy time,
.note-card-copy span {
  color: var(--ink-muted);
  font-size: 13px;
}

.note-card-copy strong {
  text-transform: capitalize; /* like the site's other titles */
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
}

@media (hover: hover) {
  .note-card:hover .note-card-img img {
    transform: scale(1.03);
  }
  .note-card:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note-card-img img {
    transition: none;
  }
}

/* ── Rounded photos and product boxes, like the buttons and cards (12px; 8px for the small cart
   thumbnails). overflow clips the picture inside, including photos scaled for the scroll effect.
   Photos that run the full width of the screen (the home page hero) stay square. ── */

.product-image,
.pdp-image,
.sub-hero-art,
.drink-image,
.cafe-thumb,
.location-image,
.ts-hero-image,
.ts-sense-art,
.ts-band,
.ts-roast-art,
.ts-close-photo,
.contact-photo,
.finder-photo,
.finder-art {
  border-radius: 12px;
  overflow: hidden;
}

.cart-thumb {
  border-radius: 8px;
  overflow: hidden;
}

/* ── Chat window ──────────────────────────────────────────── */

/* With the keyboard, the chat moves once, smoothly, alongside it. */
.chat-panel {
  transition: transform 0.5s var(--ease), padding-bottom 0.28s var(--ease);
}

.chat-panel.is-instant {
  transition: transform 0.5s var(--ease);
}


.chat-head-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.chat-new {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chat-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 8px var(--gutter) 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.chat-msg {
  display: grid;
  gap: 3px;
  max-width: 85%;
  animation: line-in 0.35s var(--ease);
}

.chat-msg > small {
  color: var(--ink-muted);
  font-size: 12px;
}

.chat-msg > p {
  padding: 9px 13px;
  border-radius: 18px;
  background: var(--tile);
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-msg.from-you {
  align-self: flex-end;
}

.chat-msg.from-you > p {
  background: var(--ink);
  color: var(--paper);
}

.chat-msg.from-staff > p {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.chat-msg.is-error > p {
  background: var(--error-tint);
  color: var(--error);
}

.chat-foot {
  display: grid;
  gap: 8px;
  padding-top: 10.5px;
  border-top: 1px solid var(--line);
}

.chat-compose {
  display: flex;
  align-items: flex-end;
  gap: 10.5px;
  border-bottom: 1px solid var(--line);
}

.chat-compose:focus-within {
  border-bottom-color: var(--ink);
}

.chat-compose textarea {
  flex: 1;
  min-width: 0;
  max-height: 140px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  resize: none;
}

.chat-compose textarea:focus {
  outline: none;
}

.chat-compose button {
  margin-bottom: 8px;
  padding: 4px 11px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  transition: background 0.25s, color 0.25s;
}

.chat-compose button:hover {
  background: var(--ink);
  color: var(--paper);
}

.chat-head {
  align-items: flex-start;
}

.chat-head h2 {
  font-size: 15px;
}

.chat-sub {
  display: block;
  color: var(--ink-muted);
  font-size: 12.5px;
}

.chat-msg.is-pending > p {
  opacity: 0.6;
}

.chat-status {
  justify-self: end;
}

/* "Online now" (a green dot) or "Away right now, back soon". */
.chat-sub.is-online::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--open);
  vertical-align: 1px;
}

/* A note in the thread from the chat itself (we're away), not from a person. */
.chat-note {
  align-self: center;
  max-width: 90%;
  color: var(--ink-muted);
  font-size: 13px;
  text-align: center;
  text-wrap: pretty;
  animation: line-in 0.35s var(--ease);
}

/* ── Soft controls ─────────────────────────────────────────────
   Soft rounded rectangles instead of outlined pills: light grey for everyday controls,
   pale blue with ink text for the one main action and for what's chosen. */
:root {
  --soft: #f2f2f2;          /* grey control */
  --soft-hover: #e8e8e8;
  --soft-text: #6b6b6b;     /* grey text on --soft (4.6:1) */
  --sky: #e0f0fb;           /* pale blue: main action, chosen option */
  --sky-hover: #cce6f8;
  --soft-radius: 10px;
}

/* Main action: pale blue, ink text; a slightly deeper blue fills in on hover or press. */
.button {
  border-radius: var(--soft-radius);
  background: var(--sky);
  color: var(--ink);
}

.button::after {
  background: var(--sky-hover);
}

/* Second action (and Checkout beside Apple Pay): grey, no outline. */
.button.is-outline,
.drawer-foot:has([data-cart-express]:not([hidden])) [data-checkout-link] {
  background: var(--soft);
  color: var(--ink);
  box-shadow: none;
}

.button.is-outline::after,
.drawer-foot:has([data-cart-express]:not([hidden])) [data-checkout-link]::after {
  background: var(--soft-hover);
}

.button.is-outline:active,
.drawer-foot:has([data-cart-express]:not([hidden])) [data-checkout-link]:active {
  color: var(--ink);
}

@media (hover: hover) {
  .button.is-outline:hover,
  .drawer-foot:has([data-cart-express]:not([hidden])) [data-checkout-link]:hover {
    color: var(--ink);
  }
}

/* Cart suggestions (+, Size) and the chat's Send: grey, no outline. */
.suggest-add {
  border-radius: var(--soft-radius);
  background: var(--soft);
  box-shadow: none;
}

.suggest-add:active {
  background: var(--sky-hover);
  box-shadow: none;
  color: var(--ink);
}

@media (hover: hover) {
  .suggest-add:hover {
    background: var(--sky);
    box-shadow: none;
    color: var(--ink);
  }
}

.chat-compose button {
  border: 0;
  border-radius: 8px;
  background: var(--sky);
  box-shadow: none;
  color: var(--ink);
}

.chat-compose button:hover {
  background: var(--sky-hover);
  color: var(--ink);
}

/* Kept as they were: Apple Pay black (Apple's rule), delete red, not-ready grey. */
.wallet-button {
  background: #000;
  color: #fff;
}

.wallet-button::after {
  background: #333;
}

.button-danger {
  background: var(--error);
  color: #fff;
}

.button-danger::after {
  background: #9e1c14;
}

.button.is-disabled,
.button:disabled {
  background: var(--tile);
  color: var(--ink-muted);
}

/* "Added" over the pale blue Add to Cart. */
.buy-added {
  color: var(--ink);
}

/* Cookie card buttons. */
.cookie-btn {
  border-radius: var(--soft-radius);
  background: var(--soft);
  box-shadow: none;
}

.cookie-btn:hover {
  background: var(--soft-hover);
  color: var(--ink);
}

.cookie-btn.is-primary {
  background: var(--sky);
  box-shadow: none;
  color: var(--ink);
}

.cookie-btn.is-primary:hover {
  background: var(--sky-hover);
}

/* ── Calendar and classes ─────────────────────────────────────
   Upcoming events one under another (photo, date, title, place, words, what to do), past
   events and classes as a grid of tiles. */
.cal-heading {
  margin: 0 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cal-upcoming {
  display: grid;
  gap: 40px;
}

.cal-past {
  margin-top: 56px;
}

.cal-item {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .cal-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
}

.cal-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--tile);
}

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

.cal-art-date {
  display: grid;
  justify-items: center;
  color: var(--ink-muted);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cal-art-date b {
  color: var(--ink);
  font-size: clamp(32px, 8vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cal-art-thumb {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
}

.cal-art-thumb .cal-art-date {
  font-size: 9px;
}

.cal-art-thumb .cal-art-date b {
  font-size: 22px;
}

.cal-labels {
  position: absolute;
  top: 10px;
  left: 10px;
}

.cal-text {
  display: grid;
  gap: 6px;
  align-content: start;
}

.cal-text h1,
.cal-text h2 {
  font-size: clamp(19px, 3vw, 26px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.cal-date,
.cal-place {
  color: var(--ink-muted);
  font-size: 14px;
}

.cal-date {
  color: var(--ink);
}

.cal-body {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  max-width: 56ch;
}

.cal-left {
  color: var(--error);
  font-size: 13px;
}

.cal-price {
  font-size: 15px;
}

.cal-full {
  margin-top: 8px;
  color: var(--error);
}

.cal-cta {
  width: auto;
  justify-self: start;
  min-width: 200px;
  margin-top: 10px;
}

.cal-reserve {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  max-width: 460px;
}

.cal-reserve .button {
  justify-self: start;
  width: auto;
  min-width: 200px;
}

.cal-done {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--soft-radius, 10px);
  background: var(--sky, #e0f0fb);
  max-width: 460px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 12px;
  list-style: none;
}

@media (min-width: 900px) {
  .cal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cal-grid li,
.cal-grid a {
  display: grid;
  gap: 4px;
  align-content: start;
}

.cal-grid .cal-art {
  aspect-ratio: 1;
  margin-bottom: 6px;
}

.cal-grid .cal-title {
  font-size: 15px;
}

.cal-grid .cal-date,
.cal-grid .cal-place {
  font-size: 13px;
}

.cal-classes .cal-price {
  font-size: 14px;
}

@media (hover: hover) {
  .cal-classes a:hover .cal-art img {
    transform: scale(1.03);
  }
}

.cal-classes .cal-art img {
  transition: transform 0.6s var(--ease);
}

.cal-back {
  margin-bottom: 16px;
  font-size: 14px;
}

.cal-back a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cal-class {
  display: grid;
  gap: 18px;
}

@media (min-width: 900px) {
  .cal-class {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}

.cal-empty {
  color: var(--ink-muted);
}

/* Blue is the accent: only the one main action on a screen (Add to Cart, Checkout, Subscribe);
   other buttons are grey. */
.suggest-add:active {
  background: var(--soft-hover);
}

@media (hover: hover) {
  .suggest-add:hover {
    background: var(--soft-hover);
  }
}

.chat-compose button {
  background: var(--soft);
}

.chat-compose button:hover {
  background: var(--soft-hover);
}

.cal-done {
  background: var(--soft);
}

/* Subscription picks (coffee, size, how often…): grey cards; the chosen one white with an ink
   edge (no tick: the edge shows the choice). The edge is drawn above the contents and the
   thumbnail sits inside the card with its own corners, so nothing covers or crosses it. */
.pick-body {
  border-color: transparent;
  background: var(--soft);
}

.pick-card:hover .pick-body {
  border-color: transparent;
  background: var(--soft-hover);
}

.pick-card input:checked + .pick-body {
  border-color: transparent;
  background: var(--paper);
}

.pick-card input:checked + .pick-body::before {
  inset: 0; /* inside the card's clip (it hides overflow for its rounded corners) */
  border: 1.5px solid var(--ink);
}

.pick-card input:checked + .pick-body::after {
  content: none;
}

.pick-body strong {
  padding-right: 0;
}

.pick-thumb {
  margin: 0 0 8px;
  border-radius: 8px;
}

@media (max-width: 599px) {
  .pick-grid--coffee .pick-thumb {
    margin: 0;
    height: auto;
    aspect-ratio: 1;
    align-self: stretch;
  }
}

/* Add to Calendar, after a reservation or a class bought. */
.cal-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 12px;
}

.cal-add .button {
  width: auto;
  min-width: 200px;
}

.cal-add-google {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cal-confirm {
  margin: 20px 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Each upcoming event opens with its date and time, on the hairline above the photo. */
.cal-item {
  gap: 12px;
}

.cal-when {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.02em;
}

@media (min-width: 900px) {
  .cal-when {
    grid-column: 1 / -1;
  }
}

/* Nothing to pay (a code covers it all): no card fields, no Apple Pay. */
body.checkout-free [data-pay-inline],
body.checkout-free [data-express] {
  display: none !important;
}

/* A shipping price still to come (until the address is in). */
.ship-pending {
  color: var(--ink-muted);
  font-size: 0.875em;
  font-weight: 400;
}

/* Local Delivery · the courier's mark. */
.courier-dot {
  margin: 0 4px;
  color: var(--ink-muted);
}

.courier-mark {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.courier-mark span {
  font-weight: 400;
  letter-spacing: 0;
}

.courier-uber {
  display: inline-block;
  width: 4.85em; /* logo is 350 × 60 */
  height: 0.83em;
  vertical-align: -0.06em;
  background: currentColor;
  -webkit-mask: url("assets/uber-direct.png") left center / contain no-repeat;
  mask: url("assets/uber-direct.png") left center / contain no-repeat;
}


/* ── Order tracking (track.html, and the account page's sheet) ── */
.track-page {
  max-width: 560px;
  margin: 0 auto;
}

.track-body {
  padding: 0 0 24px;
}

.tracker {
  display: grid;
  gap: 8px;
}

.tracker-kicker {
  font-size: 13px;
  color: var(--ink-muted);
}

.tracker-head {
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.tracker-sub {
  color: var(--ink-muted);
}

/* The steps: a line down the left, a dot per step; done steps solid, the next one ringed. */
.tracker-steps {
  list-style: none;
  margin: 24px 0 8px;
  padding: 0;
  display: grid;
}

.tracker-steps li {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 0 0 24px 28px;
  color: var(--ink-muted);
}

.tracker-steps li:last-child {
  padding-bottom: 0;
}

.tracker-steps li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: -4px;
  width: 2px;
  background: var(--line);
}

.tracker-steps li:last-child::before {
  display: none;
}

.tracker-steps li.is-done::before {
  background: var(--ink);
}

.tracker-dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line);
}

.tracker-steps li.is-done {
  color: var(--ink);
}

.tracker-steps li.is-done .tracker-dot {
  background: var(--ink);
  box-shadow: none;
}

.tracker-steps li.is-next .tracker-dot {
  box-shadow: inset 0 0 0 2px var(--ink);
  animation: tracker-pulse 1.8s ease-in-out infinite;
}

@keyframes tracker-pulse {
  50% { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 5px color-mix(in srgb, var(--ink) 12%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .tracker-steps li.is-next .tracker-dot {
    animation: none;
  }
}

.tracker-steps time {
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.tracker-block {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.tracker-block h3 {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
}

.tracker-history summary {
  margin-top: 4px;
  font-size: 14px;
  cursor: pointer;
}

.tracker-history ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
}

.tracker-history li {
  display: grid;
  gap: 2px;
}

.tracker-history time,
.tracker-ref {
  font-size: 13px;
  color: var(--ink-muted);
}

.tracker-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.tracker-total {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.tracker-help {
  margin-top: 24px;
  font-size: 14px;
  color: var(--ink-muted);
}

.tracker-help .link-button {
  color: var(--ink);
}

/* Product cards in a sideways row (assistant answers, chat replies). */
.card-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 42%);
  gap: 12px;
  margin: 16px 0 4px;
  padding: 0 0 8px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.card-rail::-webkit-scrollbar {
  display: none;
}

.card-rail .product-card {
  scroll-snap-align: start;
  animation: line-in 0.45s var(--ease) both;
}

.card-rail .product-card:nth-child(2) { animation-delay: 60ms; }
.card-rail .product-card:nth-child(3) { animation-delay: 120ms; }
.card-rail .product-card:nth-child(4) { animation-delay: 180ms; }

@media (min-width: 700px) {
  .card-rail {
    grid-auto-columns: 200px;
  }
}

/* In a chat bubble: the cards run the bubble's width. */
.chat-msg .card-rail {
  grid-auto-columns: minmax(132px, 60%);
  margin: 10px 0 0;
}

/* Follow-up questions under an answer. */
.ask-chips {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ask-chips::-webkit-scrollbar {
  display: none;
}

.ask-chip {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  flex: none;
  animation: line-in 0.45s var(--ease) both;
  transition: border-color 0.2s var(--ease);
}

.ask-chip:hover,
.ask-chip:focus-visible {
  border-color: var(--ink);
}

.cal-place a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.cal-place a:hover {
  text-decoration-color: currentColor;
}

/* The accessibility button waits until the cookie banner is answered (it sits under it). */
body:has(.cookie-banner.is-in:not(.is-done)) .a11y {
  opacity: 0;
  pointer-events: none;
}

/* ── Reviews ─────────────────────────────────────────────── */
.star-row {
  color: var(--ink);
  letter-spacing: 1px;
}

.star-row span {
  color: var(--line);
}

.pdp-rating {
  margin-top: 8px;
  font-size: 15px;
}

.pdp-rating a {
  display: inline-flex;
  gap: 8px;
  color: var(--ink-muted);
  text-decoration: none;
}

.pdp-reviews {
  margin-top: 73.5px;
  padding-top: 21px;
  border-top: 1px solid var(--ink);
}

.pdp-reviews ul {
  display: grid;
  gap: 21px;
  max-width: 640px;
  padding: 0;
  list-style: none;
}

.pdp-reviews li p {
  text-wrap: pretty;
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 5px;
}

.review-meta time {
  color: var(--ink-muted);
  font-size: 13px;
}

.review-page {
  max-width: 560px;
  margin: 0 auto;
}

.review-item-head {
  display: flex;
  gap: 12px;
  align-items: center;
}

.review-item-head img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: var(--tile);
}

.review-item-head h2 {
  font: inherit;
}

/* Five radio buttons drawn as stars: the chosen one and those before it fill in. */
.stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}

.stars label {
  position: relative;
  font-size: 28px;
  line-height: 1;
  color: var(--line);
  cursor: pointer;
}

.stars input {
  position: absolute;
  opacity: 0;
}

.stars label:has(input:checked),
.stars label:has(input:checked) ~ label,
.stars label:hover,
.stars label:hover ~ label {
  color: var(--ink);
}

.stars label:has(input:focus-visible) {
  outline: 2px solid var(--color-1);
  outline-offset: 2px;
}

/* ── Returns (tracking page) ─────────────────────────────── */
.tracker-returns {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding-top: 21px;
  border-top: 1px solid var(--line);
}

.return-card {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 14px;
  border: 1px solid var(--line);
}

.return-card p,
.return-done {
  text-wrap: pretty;
}

.return-by {
  font-size: 13px;
}

.return-form {
  display: grid;
  gap: 16px;
}

.return-form fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.return-form legend {
  margin-bottom: 8px;
  color: var(--ink-muted);
}

.return-line {
  display: flex;
  gap: 10px;
  align-items: center;
}

.return-line span {
  flex: 1;
}

/* A tea's price, between its notes and the buy row (a coffee's is on its size cards). */
.pdp-tea-price {
  margin-top: 21px;
  font-size: 14px; /* as a coffee's price on its size card */
}

/* ── Tea cultivars (glossary) ────────────────────────────── */
.cultivars-page {
  max-width: 720px;
  margin: 0 auto;
}

.cultivars-lead {
  margin-top: 12px;
  max-width: 56ch;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.cultivars-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 21px;
}

.cultivars-jump a {
  padding: 6px 12px;
  border-radius: 999px;
  background: #f3f3f1;
  font-size: 13px;
}

.cultivars-country {
  margin-top: 42px;
  scroll-margin-top: 80px;
}

.cultivars-country dl {
  border-top: 1px solid var(--ink);
}

.cultivar {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 80px;
}

.cultivar dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.cultivar-native,
.cultivar-gloss {
  color: var(--ink-muted);
  font-size: 13px;
}

.cultivar dd {
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 15px;
  text-wrap: pretty;
}

.cultivar-ours {
  display: block;
  margin-top: 8px;
  color: var(--ink);
}

.cultivar-ours a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Choice cards mark the choice with their ink edge alone (like the subscription picks): no
   radio dot inside. The real radio stays for keyboards and screen readers, out of sight. */
.buy-type label > span {
  padding-left: 12px;
}

.buy-type label > span::before {
  content: none;
}

.delivery-options .delivery-option {
  position: relative;
  grid-template-columns: 1fr auto;
}

.delivery-options .delivery-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.delivery-options .delivery-option:has(input:focus-visible) {
  outline: 2px solid var(--color-1);
  outline-offset: 2px;
}