/* ==========================================================================
   LEAF & LOOM TEA CO. — theme layer
   Sits on top of css/styles.css (Bootstrap 5 + Grayscale base).
   All theme rules use new class names, so nothing here fights the base theme.
   ========================================================================== */

:root {
  /* Ink & mist — a bright morning-tea palette: ivory light, jade ink */
  --ink-900: #faf6ec;
  --ink-800: #f1e8d3;
  --ink-700: #e3d6b0;
  --moss:    #4a6b4f;
  --jade:    #2f7a3d;
  --mist:    #24331f;
  --mist-50: rgba(36, 51, 31, 0.62);
  --mist-15: rgba(36, 51, 31, 0.14);
  --mist-08: rgba(36, 51, 31, 0.06);
  /* Infusion — the colour tea turns as it steeps */
  --brew:      #d9862a;
  --brew-deep: #8f4d18;

  --display: "Marcellus", Georgia, "Times New Roman", serif;
  --body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --cjk:     "Noto Serif TC", var(--display), serif;

  --rule: 1px solid var(--mist-15);
  /* Height of the fixed navbar — the flash region clears it by this much. */
  --nav-h: 5rem;
}

/* --- base ---------------------------------------------------------------- */

html { scroll-padding-top: 4.5rem; }
/* Native smooth scrolling is only the fallback: Lenis (html.lenis) sets the
   scroll position every frame, and a CSS smooth behaviour would fight it. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}

body.tea {
  background: var(--ink-900);
  color: var(--mist);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

body.tea h1, body.tea h2, body.tea h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.08;
}

.appointment-calendar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .6rem;
}
.appointment-calendar--blurred { filter: blur(3px); }
.appointment-calendar__weekday {
  padding: .35rem;
  color: var(--mist-50);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}
.appointment-calendar__cell {
  position: relative;
  display: flex;
  min-height: 8.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mist-15);
  border-radius: .25rem;
  background: rgba(255, 253, 247, .72);
}
.appointment-calendar__cell--outside {
  color: rgba(36, 51, 31, .25);
  background: rgba(36, 51, 31, .04);
}
.appointment-calendar__cell--unavailable {
  color: rgba(36, 51, 31, .48);
  background: rgba(36, 51, 31, .12);
}
.appointment-calendar__cell--outside.appointment-calendar__cell--unavailable {
  color: rgba(36, 51, 31, .3);
  background: rgba(36, 51, 31, .08);
}
.appointment-calendar__date {
  position: absolute;
  top: .7rem;
  left: .8rem;
  color: var(--mist-50);
  font-family: var(--mono);
  font-size: .82rem;
}
.appointment-day {
  display: flex;
  width: 4.25rem;
  height: 4.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  font-family: var(--mono);
  font-size: .85rem;
}
.appointment-day--available {
  margin: .25rem;
  color: #fff;
  background: var(--jade);
}
.appointment-day--available:hover,
.appointment-day--available:focus-visible { color: #fff; background: var(--moss); }
.appointment-day--unavailable {
  color: rgba(36, 51, 31, .3);
  background: rgba(36, 51, 31, .08);
}
.appointment-overlay,
.appointment-confirmation {
  position: fixed;
  z-index: 1050;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(36, 51, 31, .2);
}
.appointment-modal {
  position: relative;
  width: min(100%, 32rem);
  max-height: min(80vh, 42rem);
  overflow-y: auto;
  padding: 2.5rem;
  border: 1px solid var(--mist-15);
  border-radius: .3rem;
  background: #fbf8ef;
  box-shadow: 0 1.5rem 4rem rgba(36, 51, 31, .2);
}
.appointment-modal__close {
  position: absolute;
  top: .8rem;
  right: 1rem;
  border: 0;
  color: var(--mist);
  background: transparent;
  font-size: 1.8rem;
  line-height: 1;
  text-decoration: none;
}
.appointment-times-list { display: grid; gap: .65rem; margin: 1.5rem 0; }
.appointment-time-option {
  display: block;
  width: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--mist-15);
  border-radius: .2rem;
  color: var(--mist);
  background: #f1eadc;
  font-family: var(--mono);
  text-align: left;
}
.appointment-time-option:hover,
.appointment-time-option:focus-visible {
  border-color: var(--jade);
  color: var(--mist);
  background: #e6dfcf;
}
.appointment-time-option--disabled { opacity: .55; cursor: not-allowed; }
.appointment-confirmation[hidden] { display: none; }
.appointment-confirmation .form-group,
.appointment-confirmation .mb-3 { margin-bottom: 1.5rem; }
.appointment-confirmation label {
  display: block;
  margin-bottom: .55rem;
  color: var(--mist);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .04em;
}
.appointment-message {
  display: block;
  width: 100%;
  min-height: 7rem;
  resize: vertical;
  border: 1px solid var(--mist-15);
  border-radius: .2rem;
  background: #fffdf7;
  color: var(--mist);
  font-family: var(--body);
  padding: .8rem 1rem;
}
.appointment-message:focus {
  border-color: var(--jade);
  box-shadow: 0 0 0 .2rem rgba(47, 122, 61, .12);
  outline: 0;
}
.appointment-message::placeholder { color: var(--mist-50); }
.appointment-confirmation .appointment-message + .form-error,
.appointment-confirmation textarea + .form-error { margin-bottom: 1rem; }
.appointment-confirmation button[type="submit"] { margin-top: .75rem; }

@media (max-width: 767.98px) {
  .appointment-calendar { gap: .25rem; }
  .appointment-calendar__cell { min-height: 5.5rem; }
  .appointment-calendar__date { top: .4rem; left: .45rem; font-size: .7rem; }
  .appointment-day { width: 2.8rem; height: 2.8rem; font-size: .7rem; }
  .appointment-calendar__weekday { font-size: .58rem; letter-spacing: .04em; }
}

.h-display { font-size: clamp(2.5rem, 6.6vw, 5.25rem); }
.h-section { font-size: clamp(1.9rem, 4.2vw, 3.25rem); margin-bottom: 1.25rem; }

.lede { font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--mist-50); max-width: 34rem; }

/* Eyebrow: small tracked-out mono, used to label a section the way a tin is
   labelled — origin, grade, date. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 590;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--jade);
  margin-bottom: 1.75rem;
  display: block;
}

@media (max-width: 575.98px) {
  .eyebrow { letter-spacing: 0.22em; font-size: 0.64rem; }
}

.rule { border: 0; border-top: var(--rule); opacity: 1; margin: 0; }

.section { padding: clamp(1rem, 2vw, 2.5rem) 0; }
.section--ink { background: var(--ink-800); }

a { color: inherit; }
a:hover { color: var(--jade); }

/* --- buttons -------------------------------------------------------------- */

.leaf-btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.05rem 2.4rem;
  border: 1px solid var(--mist-50);
  color: var(--mist);
  background: transparent;
  text-decoration: none;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.leaf-btn:hover,
.leaf-btn:focus-visible { background: var(--mist); color: var(--ink-900); border-color: var(--mist); }
.leaf-btn--solid { background: var(--mist); color: var(--ink-900); border-color: var(--mist); }
.leaf-btn--solid:hover { background: var(--jade); border-color: var(--jade); color: var(--ink-900); }

/* Unavailable action: still visible and still focusable, so the customer can
   see what they're working towards and a screen reader can announce why it
   can't be used yet. Hover and pointer feedback are removed so it doesn't
   invite a click that would do nothing. */
.leaf-btn.is-disabled,
.leaf-btn.is-disabled:hover,
.leaf-btn.is-disabled:focus-visible {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
  color: var(--mist);
  border-color: var(--mist-50);
}
.leaf-btn--solid.is-disabled,
.leaf-btn--solid.is-disabled:hover,
.leaf-btn--solid.is-disabled:focus-visible {
  background: var(--mist);
  color: var(--ink-900);
  border-color: var(--mist);
}
.cart-hint {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--mist-50);
}

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

/* --- duotone ------------------------------------------------------------- */
/* The photographs are already colour and already sit in the palette (green
   tea gardens). A light jade tint ties them together as one set without
   burying the actual photo under the overlay. */

.duo { position: relative; overflow: hidden; background: var(--ink-900); }
.duo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.04) brightness(1.03); }
.duo::before,
.duo::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.duo::before { background: rgba(47, 122, 61, 0.14); mix-blend-mode: multiply; }
.duo::after  { background: rgba(253, 246, 227, 0.1); mix-blend-mode: screen; }

/* --- navigation ---------------------------------------------------------- */
.brand-logo {
    width: 48px;
    height: 48px;
    object-fit: cover;
    margin-right: 12px;
}
#teaNav {
  background: rgba(250, 246, 236, 0.92);
  transition: background-color 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
  padding: 0.9rem 0;
}
/* No backdrop-filter: a blur behind a fixed bar is recomputed every scroll
   frame, and at 92% opacity it was barely visible anyway. */
#teaNav.solid { background: rgba(250, 246, 236, 0.92); border-bottom: var(--rule); }

.brand-mark { font-family: var(--cjk); font-size: 1.45rem; line-height: 1; color: var(--mist); }
.brand-name {
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--mist); display: block; margin-top: 0.35rem;
}
.navbar-brand:hover .brand-mark { color: var(--jade); }

/* Spacing is a single flex gap on the list rather than a margin on each link.
   Every gap is then identical by construction, and adding or removing an item
   can't leave a stray double space at one end.

   --nav-space is the visible distance between neighbours: text to text for
   the links, and edge to edge for the boxed items (language toggle, account
   button, cart). The links' 0.9rem side padding is invisible, so two links
   sit 0.9 + 0.25 + 0.9 ≈ 2rem apart; the boxed items further down add
   whatever margin makes up the same 2rem. */
#teaNav { --nav-space: 2rem; }
#teaNav .navbar-nav { gap: 0.25rem; }
#teaNav .nav-link {
  font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mist);
  /* Padding and border are declared here, not only on .active below, so a link
     keeps exactly the same box when it becomes the current page. Previously
     .active added 1.5rem of horizontal padding and a 1px border out of
     nowhere, so the whole row shifted sideways as you navigated. */
  padding: 0.55rem 0.9rem;
  border: 1px solid transparent;
}
#teaNav .nav-link:hover, #teaNav .nav-link:focus { color: var(--jade); }
#teaNav .nav-link.active {
  background: var(--mist); color: var(--ink-900); border-color: var(--mist);
}
#teaNav .nav-link.active:hover, #teaNav .nav-link.active:focus-visible {
  background: var(--jade); color: var(--ink-900); border-color: var(--jade);
}
#teaNav .navbar-toggler {
  border: 1px solid var(--mist-15); border-radius: 0; color: var(--mist);
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.2em; padding: 0.5rem 0.9rem;
}
#teaNav .nav-cta { padding: 0.55rem 1.5rem; font-size: 0.8rem; }
#teaNav .nav-cta.dropdown-toggle::after { margin-left: 0.6rem; vertical-align: 0.1em; }
/* Cart and Menu button sit outside the collapse (see tea_nav.php). The count
   badge is absolutely positioned so it never changes the icon's box, and the
   navbar doesn't jog as items are added. */
#teaNav .nav-quick { gap: 0.75rem; margin-left: auto; }
#teaNav .nav-cart {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; color: var(--mist); border: 1px solid transparent;
}
#teaNav .nav-cart:hover, #teaNav .nav-cart:focus-visible { color: var(--jade); }
#teaNav .nav-cart.active { border-color: var(--mist-15); }
.nav-cart__badge {
  position: absolute; top: 0.1rem; right: 0;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 0.6rem;
  background: var(--jade); color: var(--ink-900);
  font-family: var(--mono); font-size: 0.65rem; line-height: 1.15rem; text-align: center;
}
/* Two-way language switch. translations.js sets .active and aria-pressed. */
#teaNav .nav-lang { display: inline-flex; border: var(--rule); }
#teaNav .nav-lang__btn {
  background: transparent; border: 0; color: var(--mist-50); cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; padding: 0.35rem 0.6rem;
}
#teaNav .nav-lang__btn + .nav-lang__btn { border-left: var(--rule); }
#teaNav .nav-lang__btn:hover, #teaNav .nav-lang__btn:focus-visible { color: var(--jade); }
#teaNav .nav-lang__btn.active { background: var(--mist); color: var(--ink-900); }
/* Top up each boxed item's gap to --nav-space (see the note on .navbar-nav).
   Desktop only: in the stacked mobile menu these are full-width rows. */
@media (min-width: 992px) {
  /* After a link: subtract that link's invisible right padding and the gap. */
  #teaNav .nav-lang-item { margin-left: calc(var(--nav-space) - 0.9rem - 0.25rem); }
  /* After the toggle's visible border: subtract only the gap. */
  #teaNav .nav-item--cta { margin-left: calc(var(--nav-space) - 0.25rem); }
  /* Outside the list, so no gap; subtract the space around the 22px icon
     inside the 2.5rem cart box so the glyph itself sits --nav-space away. */
  #teaNav .nav-quick { margin-left: calc(var(--nav-space) - (2.5rem - 22px) / 2); }

  /* One line per label. Wrapped, "Find my tea" stacked three words high and
     tripled the bar's height, so it covered the top of every page (which
     only clears --nav-h) and the sticky bulk-order summary slid under it. */
  #teaNav .nav-link, #teaNav .nav-cta { white-space: nowrap; }
}
/* Laptop widths: the full bar doesn't fit at the default spacing, so tighten
   it rather than let anything wrap. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  #teaNav { --nav-space: 1.25rem; }
  #teaNav .nav-link { padding-left: 0.6rem; padding-right: 0.6rem; letter-spacing: 0.1em; }
  #teaNav .nav-lang-item { margin-left: calc(var(--nav-space) - 0.6rem - 0.25rem); }
  #teaNav .nav-cta { padding-left: 1.1rem; padding-right: 1.1rem; }
  .brand-name { letter-spacing: 0.2em; }
}
/* Narrowest expanded bar: the logo alone carries the brand (it has alt text). */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #teaNav .brand-name { display: none; }
}
/* Tighter spacing beside the cart and Menu button on the narrowest phones.
   The brand name's own fit is handled in the max-width: 767.98px block
   further down, which comes later and so wins for .brand-name/.brand-logo. */
@media (max-width: 399.98px) {
  #teaNav .nav-quick { gap: 0.4rem; }
}
/* Shared by the About and account dropdowns. */
.nav-menu {
  border-radius: 0; border: var(--rule); box-shadow: 0 8px 24px var(--mist-15);
  background: var(--ink-900); padding: 0.4rem 0; margin-top: 0.6rem; min-width: 12rem;
}
.nav-menu .dropdown-item {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mist); padding: 0.6rem 1.3rem;
}
.nav-menu .dropdown-item:hover, .nav-menu .dropdown-item:focus { background: var(--ink-800); color: var(--jade); }
.nav-menu .dropdown-item.active { background: var(--ink-800); color: var(--jade); }
.nav-menu .dropdown-divider { border-top: var(--rule); opacity: 1; margin: 0.4rem 0; }

/* Address suggestions under a delivery form's street-address field
   (webroot/js/address-autocomplete.js). Same panel as .nav-menu, but in the
   body font: these are addresses to read, not menu labels. */
.address-suggest-host { position: relative; }
.address-suggest {
  position: absolute; left: 0; right: 0; z-index: 20;
  margin-top: 0.25rem; padding: 0.4rem 0;
  border: var(--rule); box-shadow: 0 8px 24px var(--mist-15); background: var(--ink-900);
}
.address-suggest[hidden] { display: none; }
.address-suggest__list { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.address-suggest__item {
  font-family: var(--body); font-size: 0.95rem; color: var(--mist);
  padding: 0.6rem 1rem; cursor: pointer; line-height: 1.35;
}
.address-suggest__item:hover,
.address-suggest__item[aria-selected="true"] { background: var(--ink-800); color: var(--jade); }
.address-suggest__credit {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--mist-50);
  padding: 0.4rem 1rem 0.1rem; border-top: var(--rule); margin-top: 0.3rem;
}
@media (max-width: 991.98px) {
  #teaNav .navbar-collapse { background: var(--ink-800); margin-top: 0.9rem; padding: 0.5rem 1rem 1rem; }
  /* Stacked vertically the gap would double up with the row rules, so the
     links go back to full-width rows separated by borders. */
  #teaNav .navbar-nav { gap: 0; }
  #teaNav .nav-link { padding-left: 0; padding-right: 0; border: 0; border-bottom: var(--rule); }
  #teaNav .nav-link.active { padding-left: 1.1rem; padding-right: 1.1rem; border-bottom: 0; }
  #teaNav .nav-item--cta { margin-left: 0; }
  #teaNav .nav-cta { display: inline-block; margin-top: 0.75rem; }
  #teaNav .nav-lang-item { padding-top: 0.75rem; }
  .nav-menu { margin-top: 0.5rem; }
}

/* --- flash messages ------------------------------------------------------ */
/* The tea layouts load only styles.css + tea.css, never cake.css — which is
   where CakePHP's default .message rules live. So a flash arrived completely
   unstyled: a plain block at the top-left of the document, tucked underneath
   the fixed navbar and pushed off-screen entirely by the full-height hero.
   These rules are the theme's own treatment; the admin layouts still load
   cake.css and are untouched. */
.tea-flash-region {
  position: fixed;
  top: calc(var(--nav-h) + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080; /* above .fixed-top, which Bootstrap puts at 1030 */
  width: min(92vw, 34rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  /* The region spans the width of the page even when empty, so let clicks
     through it — only the messages themselves are interactive. */
  pointer-events: none;
}
.tea-flash-region .message {
  pointer-events: auto;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  padding: 0.9rem 1.3rem;
  background: var(--ink-800);
  color: var(--mist);
  border: var(--rule);
  border-left: 3px solid var(--mist-50);
  box-shadow: 0 12px 30px var(--mist-15);
  cursor: pointer;
}
/* cake.css also owns .message.hidden, so without this the click-to-dismiss
   built into the flash elements silently did nothing. */
.tea-flash-region .message.hidden { display: none; }
.tea-flash-region .message.success { border-left-color: var(--jade); }
.tea-flash-region .message.error { border-left-color: var(--brew-deep); }
.tea-flash-region .message.warning { border-left-color: var(--brew); }
@media (prefers-reduced-motion: no-preference) {
  .tea-flash-region .message { animation: teaFlashIn 0.35s ease both; }
}
@keyframes teaFlashIn {
  from { opacity: 0; transform: translateY(-0.6rem); }
  to   { opacity: 1; transform: none; }
}

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

/* overflow: the drift below scales .hero__media past the hero's edges. */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(250,246,236,0.72) 0%, rgba(250,246,236,0.18) 30%, rgba(250,246,236,0.72) 72%, rgba(250,246,236,0.9) 100%),
        linear-gradient(to right, rgba(250,246,236,0.78) 0%, rgba(250,246,236,0.28) 45%, rgba(250,246,236,0) 78%);
}
/* padding-bottom's minimum leaves room for .hero__scroll beneath the buttons. */
.hero__inner { position: relative; padding-bottom: clamp(5rem, 10vh, 7rem); padding-top: 9rem; width: 100%; }

/* Phones: the full-screen, bottom-aligned hero left most of the first screen
   as empty photo above the heading (PO review 2.2). Here the hero is only as
   tall as its content, starting just below the fixed nav, so the heading is
   the first thing seen and the next section starts sooner. */
@media (max-width: 767.98px) {
  .hero { min-height: 0; align-items: flex-start; }
  .hero__inner { padding-top: calc(var(--nav-h) + 2.5rem); padding-bottom: 5.5rem; }
}

/* "There's more below" cue at the foot of the homepage hero (PO review 2.1). */
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(0.75rem, 2.5vh, 1.5rem); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0.4rem 0.75rem; color: var(--mist); text-decoration: none;
}
.hero__scroll:hover, .hero__scroll:focus-visible { color: var(--jade); }
.hero__scroll:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.hero__scroll-label {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll-icon { animation: scroll-cue 1.8s ease-in-out infinite; }
  .hero.is-offscreen .hero__scroll-icon { animation-play-state: paused; }
  @keyframes scroll-cue { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(5px); opacity: 1; } }
}
.hero h1 { max-width: 20ch; text-shadow: 0 0.1em 0.9em rgba(36,51,31,0.18); }
.hero .eyebrow, .hero .lede { color: var(--mist); text-shadow: 0 0.05em 0.6em rgba(250,246,236,0.75); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; margin-top: 2.5rem; }

/* Ambient drift on the hero photograph — slow enough to read as weather.
   It moves the whole .duo box rather than the <img> inside it. Animating only
   the photo put it on its own layer under the filter and the two blend-mode
   tints, so the browser re-blended a full-screen stack every frame. Moving
   the box lets it paint photo + filter + tints once and just scale that. */
@media (prefers-reduced-motion: no-preference) {
  .hero__media { animation: drift 34s ease-in-out infinite alternate; transform-origin: 60% 40%; }
  /* tea.js sets this once the hero has scrolled out of view. */
  .hero.is-offscreen .hero__media { animation-play-state: paused; }
  @keyframes drift { from { transform: scale(1.06); } to { transform: scale(1.14) translate3d(-1.2%, -0.8%, 0); } }
}

/* --- spec list ----------------------------------------------------------- */
/* Real numbers off the tin: altitude, harvest window, oxidation, roast. */

.spec { list-style: none; padding: 0; margin: 2.5rem 0 0; border-top: var(--rule); }
.spec li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.85rem 0; border-bottom: var(--rule);
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em;
}
.spec dt, .spec .k { color: var(--jade); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.68rem; }
.spec .v { color: var(--mist); text-align: right; }

/* --- leaves / steep cards ------------------------------------------------ */

.leaf-card {
  position: relative; overflow: hidden; height: 100%;
  background: var(--ink-800); border: var(--rule);
  padding: 2.25rem 1.75rem 1.75rem;
  display: flex; flex-direction: column;
}
.leaf-card { transition: border-color 0.4s ease, transform 0.4s ease; }
.leaf-card:hover { border-color: rgba(180,113,42,0.55); }
.leaf-card__fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(to top, rgba(111,58,18,0.92), rgba(180,113,42,0.55) 55%, rgba(180,113,42,0.12));
  transition: height linear 0s;
  z-index: 0;
}
.leaf-card > *:not(.leaf-card__fill) { position: relative; z-index: 1; }
.leaf-card__name { font-family: var(--display); font-size: 1.5rem; margin-bottom: 0.5rem; }
.leaf-card__cjk { font-family: var(--cjk); font-size: 0.95rem; color: var(--jade); margin-bottom: 1rem; display: block; }
.leaf-card__note { color: var(--mist-50); font-size: 0.95rem; flex-grow: 1; }

.brewline {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em;
  color: var(--mist); border-top: var(--rule); border-bottom: var(--rule);
  padding: 0.7rem 0; margin: 1.5rem 0 1.25rem;
  display: flex; justify-content: space-between; gap: 0.5rem;
}
.brewline span { white-space: nowrap; }

.steep {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: transparent; border: 1px solid var(--mist-15); color: var(--mist);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.8rem 1.1rem; width: 100%; cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.steep:hover:not([disabled]) { border-color: var(--jade); color: var(--jade); }
.steep[disabled] { cursor: default; color: var(--mist); border-color: var(--mist-50); }
.steep__count { font-variant-numeric: tabular-nums; }

/* --- alternating story blocks -------------------------------------------- */

.story { display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .story { grid-template-columns: 1.15fr 1fr; } .story--flip .story__media { order: 2; } }
.story__media { min-height: 26rem; position: relative; }
.story__media::after { opacity: 1; }
.story__body { padding: clamp(2.5rem, 6vw, 5.5rem); display: flex; flex-direction: column; justify-content: center; background: var(--ink-800); }

/* The tea an enquiry is about, above the contact form when it was opened
   from a product's "Ask about this tea" button (templates/Enquiries/add.php). */
.enquiry-tea {
  border-left: 3px solid var(--jade); background: var(--ink-900);
  padding: 1rem 1.25rem; margin: 0 0 1.75rem;
}
.enquiry-tea__eyebrow {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--jade);
}
.enquiry-tea__name { font-family: var(--display); font-size: 1.35rem; margin: 0.25rem 0 0.4rem; }
.enquiry-tea__name a { color: var(--mist); text-decoration: none; }
.enquiry-tea__name a:hover { color: var(--jade); }
.enquiry-tea__facts { font-family: var(--mono); font-size: 0.78rem; color: var(--mist-50); margin: 0 0 0.5rem; }
.enquiry-tea__description { font-size: 0.95rem; margin: 0; }

/* Opt-in scrim for a .story used as the first thing on a page (no .hero above
   it) — the fixed nav starts transparent and only goes solid on scroll, so a
   bright photo sitting directly under it at the top needs its own scrim to
   keep the (dark) nav text legible, same idea as .hero__scrim. */
.story__topscrim {
  position: absolute; top: 0; left: 0; right: 0; height: 7rem; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(250,246,236,0.85) 0%, rgba(250,246,236,0) 100%);
}

/* --- brewing steps ------------------------------------------------------- */
/* Numbered because the order genuinely matters — you cannot rinse before you
   warm the pot. */

.step { border-top: var(--rule); padding: 2rem 0 0; height: 100%; }
.step__n { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--jade); display: block; margin-bottom: 1rem; }
.step h3 { font-size: 1.35rem; margin-bottom: 0.65rem; }
.step p { color: var(--mist-50); font-size: 0.95rem; margin: 0; }

/* --- first-flush list ---------------------------------------------------- */

.flush { position: relative; }
.flush__media { position: absolute; inset: 0; }
.flush__scrim { position: absolute; inset: 0; background: rgba(250,246,236,0.88); }
.flush__inner { position: relative; }
.flush input[type="email"] {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--mist-50);
  color: var(--mist); font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.08em;
  padding: 0.9rem 0.2rem;
}
.flush input::placeholder { color: rgba(36,51,31,0.4); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem; }
.flush input:focus { outline: none; border-bottom-color: var(--jade); }
.flush__msg { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--jade); margin-top: 1rem; min-height: 1.2rem; }

/* --- visit --------------------------------------------------------------- */

.visit-item { border-top: var(--rule); padding-top: 1.5rem; height: 100%; }
.visit-item h3 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--jade); margin-bottom: 1rem; }
.visit-item p { margin: 0; color: var(--mist); font-size: 0.98rem; }
.visit-item p + p { color: var(--mist-50); }
/* Opening hours come from a content block as a bulleted list. */
.visit-item ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }

.social { border-top: var(--rule); padding-top: 1.75rem; }
.social a {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--mist-50); text-decoration: none; transition: color 0.3s ease;
}
.social a:hover { color: var(--jade); }

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

.tea-footer { background: var(--ink-800); border-top: var(--rule); padding: 4rem 0 2rem; color: var(--mist-50); font-size: 0.92rem; }
.tea-footer a { color: var(--mist-50); text-decoration: none; transition: color 0.2s ease; }
.tea-footer a:hover, .tea-footer a:focus-visible { color: var(--jade); }

.tea-footer__brand { text-decoration: none; margin-bottom: 1.25rem; }
.tea-footer__brand .brand-name { margin-top: 0; }
.tea-footer__brand:hover .brand-name { color: var(--jade); }
.tea-footer__tagline { color: var(--mist); max-width: 22rem; margin-bottom: 1.25rem; }
/* Same content block as the homepage "Where" card: the first line is the shop name. */
.tea-footer__address { font-style: normal; line-height: 1.6; }
.tea-footer__address p { margin: 0; }
.tea-footer__address em { font-style: normal; color: var(--mist); }
.tea-footer__contact { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.tea-footer__social { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.tea-footer__social a { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; }

/* Two classes so it outranks the display-font rule on body.tea h2. */
.tea-footer .tea-footer__heading {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--jade); margin-bottom: 1.1rem;
}
.tea-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }

.tea-footer__bottom {
  border-top: var(--rule); margin-top: 3.5rem; padding-top: 1.5rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
}
.tea-footer__legal { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* The error layout keeps its single centred copyright line. */
.tea-footer.text-center { padding: 3rem 0; }
.tea-footer.text-center, .tea-footer.text-center a { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; }

/* --- auth / login card ----------------------------------------------------- */

.auth-header { height: 4.5rem; display: flex; align-items: center; }
.auth-header__brand { text-decoration: none; }
.auth-header__brand:hover .brand-name { color: var(--jade); }

.auth-section { min-height: calc(100svh - 4.5rem); display: flex; align-items: center; }
.auth-card {
  background: var(--ink-800); border: var(--rule);
  padding: clamp(2.5rem, 5vw, 3.5rem); max-width: 28rem; margin: 0 auto; width: 100%;
}
.auth-card h1, .auth-card h2 { font-size: clamp(1.9rem, 4vw, 2.4rem); margin: 0.5rem 0 0.75rem; }
.auth-card .subtitle { color: var(--mist-50); font-size: 0.95rem; margin: 0 0 2rem; }

/* Shared field styling — used by .auth-card (admin forms) and .contact-form
   (public marketing-style forms, e.g. the enquiry page). */
.field-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 575.98px) { .field-form .field-row { grid-template-columns: 1fr; } }

.field-form .input { margin-bottom: 1.5rem; }
.field-form .input label {
  display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--jade); margin-bottom: 0.5rem;
}

/* Required-field markers on every public form (PO review 5.1). FormHelper
   adds `required` to a control's wrapper for any required field, so this
   needs no per-template work. Scoped to body.tea (the public layouts):
   admin forms in the dashboard layout mark their labels by hand.
   The "/ ''" gives screen readers no text for the star: the input's own
   `required` attribute already announces it. */
:root { --required: #b42318; }
body.tea .input.required > label::after {
  content: " *"; content: " *" / "";
  color: var(--required); font-weight: 700;
}
.form-required-note { font-size: 0.85rem; color: var(--mist-50); margin: 0 0 1.25rem; }
.form-required-note__mark { color: var(--required); font-weight: 700; }
.field-form .input input,
.field-form .input textarea,
.field-form .input select {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--mist-50);
    color: var(--mist);
    font-family: var(--body);
    font-size: 1rem;
    padding: 0.7rem 0.1rem;
}

.field-form .input textarea {
    resize: vertical;
}

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

.field-form .verify-hint { font-family: var(--mono); font-size: 0.7rem; color: var(--mist-50); margin-top: 0.75rem; }

.auth-links {
  margin-top: 2rem; padding-top: 1.5rem; border-top: var(--rule);
  display: flex; flex-direction: column; gap: 0.75rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
}
.auth-register-text { margin: 0; color: var(--mist-50); }
.auth-links .auth-register-btn { align-self: flex-start; width: fit-content; color: #24331f; border: 1px solid #24331f; background: #faf6ec; }
.auth-links .auth-register-btn:hover { color: #faf6ec; background: #24331f; }
.auth-links a:hover { color: var(--jade); }
.auth-links hr { border: 0; border-top: var(--rule); margin: 0.25rem 0; }

/* --- scroll reveal ------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(1.75rem); transition: opacity 0.9s ease, transform 0.9s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* Lazy images fade in once loaded. tea.js adds .img-fade only to images still
   loading, so cached images and no-JS visitors never see them hidden. */
@media (prefers-reduced-motion: no-preference) {
  .img-fade { opacity: 0; transition: opacity 0.6s ease; }
  .img-fade.is-loaded { opacity: 1; }
}

/* --- shop -------------------------------------------------------------- */
/* Product catalogue + detail. Structure is adapted from Start Bootstrap's
   shop-homepage / shop-item templates, recoloured onto the tea palette. */

/* Extra top padding so the first section clears the fixed nav (#teaNav). */
.shop-hero {
    background: var(--ink-800);
    border-bottom: var(--rule);
    /*padding-top: clamp(7.5rem, 14vw, 10rem); */
    padding-top: calc(var(--nav-h) + 1.5rem);
    padding-bottom: 0.5rem;
}

.product-grid {
  display: grid;
  gap: 2.5rem 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px)  { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: var(--ink-800); border: var(--rule);
  transition: border-color 0.4s ease, transform 0.4s ease;
}
.product-card:hover { border-color: rgba(180, 113, 42, 0.55); transform: translateY(-3px); }
.product-card__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.product-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
  text-align: center;
  display: flex; flex-direction: column; flex-grow: 1;
}
.product-card__title { font-family: var(--display); font-size: 1.35rem; margin: 0 0 0.4rem; }
.product-card__origin {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--jade); margin-bottom: 0.9rem;
}
.product-card__price {
  font-family: var(--mono); font-size: 0.92rem; color: var(--mist);
  margin-bottom: 1.35rem;
}
.product-card__price del { color: var(--mist-50); margin-right: 0.5rem; }
.product-card .leaf-btn { margin-top: auto; align-self: center; padding: 0.7rem 1.9rem; }

/* Sale flag — unused until products carry a sale price, kept so the markup
   hook is ready. */
.product-card__flag {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-900);
  background: var(--brew-deep); padding: 0.3rem 0.6rem;
}

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

.product-detail { padding-top: clamp(7.5rem, 14vw, 10rem); }
.product-detail__back {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mist-50); text-decoration: none;
}
.product-detail__back:hover { color: var(--jade); }
.product-detail__media { border: var(--rule); background: var(--ink-800); overflow: hidden; }
.product-detail__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-detail__origin {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--jade); margin-bottom: 0.75rem;
}
.product-detail__price {
  font-family: var(--mono); font-size: 1.15rem; color: var(--mist);
  margin: 0 0 2rem;
}
.product-detail__price del { color: var(--mist-50); margin-right: 0.6rem; }
.product-detail__buy { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2.5rem; }
.product-detail__qty {
  width: 3.5rem; text-align: center;
  background: transparent; border: 1px solid var(--mist-50); color: var(--mist);
  font-family: var(--mono); font-size: 0.95rem; padding: 0.7rem 0.4rem;
}
.product-detail__qty:focus { outline: none; border-color: var(--jade); }
.product-detail__qty[aria-invalid="true"] { border-color: var(--brew-deep); }
/* Under the quantity box when it asks for more than is in stock
   (templates/Products/details.php). */
.product-detail__qty-message {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  margin: 0.9rem 0 0; color: var(--brew-deep); font-size: 0.95rem;
}
.product-detail__qty-message[hidden] { display: none; }
.product-detail__qty-fix {
  background: none; border: 0; padding: 0; color: var(--jade);
  font: inherit; text-decoration: underline; cursor: pointer;
}
.product-detail__qty-fix[hidden] { display: none; }
.product-detail__ingredients { color: var(--mist-50); font-size: 0.95rem; margin-top: 1.5rem; }
@media (max-width: 767.98px) {

    /* Must wrap: the opened menu (.navbar-collapse, flex-basis 100%) drops to
       its own row below the brand. With nowrap it was squeezed into the same
       row, beside the logo, and pushed the brand down underneath it. */
    .navbar .container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    /* A zero basis keeps the cart and Menu button on the brand's row however
       long the site title is; the title wraps instead (see .brand-name). */
    .navbar-brand {
        display: flex;
        align-items: center;
        flex: 1 1 0;
        min-width: 0;
        margin-right: 0.75rem;
    }

    .brand-logo {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        margin-right: 10px;
    }

    /* Wraps onto a second line on narrow phones (360px and below) rather
       than running under the cart icon. Bootstrap's .navbar-brand sets
       nowrap, which the name would otherwise inherit. */
    .brand-name {
        font-size: 0.68rem;
        letter-spacing: 0.18em;
        white-space: normal;
        line-height: 1.5;
        margin-top: 0;
    }

    .navbar-toggler {
        margin-left: auto;
        flex-shrink: 0;
    }
}

/* --- error pages ---------------------------------------------------------
   Used by templates/layout/error.php and templates/Error/*. The header here
   is a static brand bar rather than the site navbar, so it needs its own
   rules instead of borrowing #teaNav's.
   ------------------------------------------------------------------------- */
.error-header {
  border-bottom: var(--rule);
  padding: 1.1rem 0;
}
.error-header .brand-name {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
}
.error-header .navbar-brand:hover .brand-name { color: var(--jade); }

/* Centred in what is left of the viewport once the brand bar and footer are
   accounted for, so the message sits optically centred on a tall desktop
   screen and still scrolls normally on a short one. */
.error-page {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 16rem);
  padding: 4rem 0;
}
.error-page > .container { max-width: 44rem; }
.error-page__heading { margin: 0.75rem 0 1.25rem; }
.error-page__body { max-width: 34rem; }

/* The address that failed, set in mono so a stray character is visible. It can
   be arbitrarily long and must not push the page sideways on a phone. */
.error-page__url {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--mist-50);
  background: var(--mist-08);
  border: var(--rule);
  padding: 0.6rem 0.9rem;
  margin-top: 1.75rem;
  overflow-wrap: anywhere;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.5rem;
}

@media (max-width: 575.98px) {
  /* Stacked full-width, so the primary action is not a small target beside a
     wrapped second one. */
  .error-page__actions { flex-direction: column; align-items: stretch; }
  .error-page__actions .leaf-btn { text-align: center; }
}

/* --- distributor bulk order (templates/Distributor/Orders/add.php) ------- */
.bulk-tiers {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem;
  list-style: none; padding: 0; margin-bottom: 0;
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--jade);
}
.bulk-thumb { width: 56px; height: 56px; object-fit: cover; flex-shrink: 0; }
.bulk-qty { width: 6.5rem; font-family: var(--mono); }
.bulk-row--out { opacity: 0.55; }
.bulk-stock { font-size: 0.9rem; color: var(--jade); white-space: nowrap; }
.bulk-stock--low { color: var(--brew-deep); }
.bulk-stock--out { color: var(--mist-50); }

.bulk-summary {
  border: var(--rule); background: var(--ink-800); padding: 1.5rem;
}
/* Only the order form's summary sticks, beside a long list of teas on wide
   screens. A sticky panel with another panel below it (order page) or one
   taller than the screen (review page) would slide over content. */
@media (min-width: 992px) {
  .bulk-summary--sticky { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
}
.bulk-summary__rows > div {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0;
}
.bulk-summary__rows dt { font-weight: normal; }
.bulk-summary__rows dd { margin: 0; font-family: var(--mono); white-space: nowrap; }
.bulk-summary__total { border-top: var(--rule); margin-top: 0.5rem; padding-top: 0.75rem !important; }
.bulk-summary__total dt, .bulk-summary__total dd { font-weight: 700; }
.bulk-summary__hint { color: var(--jade); font-size: 0.9rem; min-height: 1.4em; margin: 0.75rem 0 0.25rem; }

/* --- distributor portal home (templates/Distributor/Dashboard/index.php) -- */
.portal { padding-top: clamp(2rem, 4vw, 3rem); }
.portal-heading { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.portal-card {
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: 0.3rem;
  border: var(--rule); background: var(--ink-800); padding: 1.1rem 1.25rem;
}
.portal-card__label {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mist-50);
}
.portal-card__value {
  font-family: var(--body); font-weight: 600; font-size: 1.6rem; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.portal-card__value--alert, .portal-card__note--alert { color: #a8321e; }
.portal-card__note { color: var(--mist-50); font-size: 0.9rem; }
.portal-card__tiers { list-style: none; padding: 0; margin: 0.25rem 0 0; font-size: 0.95rem; }
.portal-card__tiers li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.1rem 0; }
.portal-card__tiers span { font-family: var(--mono); color: var(--jade); }

/* Placeholders for features still to come (US7.3, US7.4). */
.portal-card--soon { background: transparent; border-style: dashed; }
.portal-soon {
  align-self: flex-start;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brew-deep); border: 1px solid currentColor; padding: 0.1rem 0.5rem;
}

.portal-empty { border: var(--rule); padding: 2rem; text-align: center; }

.portal-pill {
  display: inline-block; font-size: 0.8rem; padding: 0.15rem 0.6rem;
  border: 1px solid var(--mist-15); background: var(--mist-08); white-space: nowrap;
}
.portal-pill--paid { color: var(--jade); border-color: currentColor; background: transparent; }
.portal-pill--unpaid { color: #a8321e; border-color: currentColor; background: transparent; }
.portal-pill--partial { color: var(--brew-deep); border-color: currentColor; background: transparent; }

.portal-details { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.5rem; }
.portal-details dt { font-weight: normal; color: var(--mist-50); }
.portal-details dd { margin: 0; overflow-wrap: anywhere; }

/* --- distributor order review (templates/Distributor/Orders/review.php) --- */
.review-totals { max-width: 26rem; margin-left: auto; margin-top: 1rem; }
.review-totals__gst dt, .review-totals__gst dd { color: var(--mist-50); font-size: 0.9rem; }
.bulk-draft-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  border: var(--rule); border-left: 3px solid var(--jade); background: var(--ink-800); padding: 0.9rem 1.25rem;
}
/* The display face draws 0 like the letter O, which misreads in an order number. */
.portal-order-number { font-family: var(--mono); letter-spacing: 0.02em; font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
.order-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding-left: 1.5rem;
    color: #757b70;
}
.order-progress .is-reached { color: #263d26; }
.order-progress [aria-current="step"] { font-weight: bold; text-decoration: underline; }

/* --- FAQ ---------------------------------------------------------------- */

/* Keep the FAQ list at a comfortable reading width on large screens. */
.faq-list {
    max-width: 68rem;
    margin: 0 auto;
}

/* Separate each FAQ with a subtle line and generous spacing. */
.faq-item {
    border-bottom: var(--rule);
}

/* Add a matching line above the first FAQ. */
.faq-item:first-child {
    border-top: var(--rule);
}

/* Make the whole question row clickable and keep the + aligned right. */
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.6rem 0;

    cursor: pointer;
    list-style: none;

    font-family: var(--body);
    font-size: 1.05rem;
    font-weight: 500;
}

/* Hide the browser's default triangle because we use our own + / -. */
.faq-question::marker {
    content: "";
}

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

/* Give an expanded answer breathing room below its question. */
.faq-answer {
    max-width: 55rem;
    padding: 0 0 1.6rem;

    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.7;
}

/* Style the expand/collapse symbol on the right. */
.faq-toggle {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 1.15rem;
    color: var(--jade);
}

/* Replace + with - when the FAQ is open. */
.faq-item[open] .faq-toggle {
    font-size: 0;
}

.faq-item[open] .faq-toggle::after {
    content: "−";
    font-size: 1.15rem;
}

.newsletter-page {
    padding-top: 100px;
}