/* ==========================================================================
   BINDI WHOLESALE — APP SHELL, CHROME & SCREEN LAYOUT

   Shell contract (js/components.js owns the markup):
     #header-root      sticky, forest, holds the brand / desktop nav / actions
     #main-root        the scrolling document region, one screen at a time
     #bottom-nav-root  fixed 5-tab bar, MOBILE ONLY (display:none >= 768px)
     #drawer-root      order drawer + the mobile cart bar
     #modal-root       payment sheet and anything else that overlays
     #toast-root       toast() output

   Class names screens may rely on:
     .portal-main-content, .screen-header, .section-headline,
     .dashboard-kpi-grid / .kpi-card-shell / .kpi-card-inner[-forest] /
     .kpi-label / .kpi-value / .kpi-meta,
     .catalog-controls-strip / .brand-filter-pills / .brand-pill /
     .catalog-search-box / .catalog-search-input / .products-grid /
     .product-card / .preset-tiers-row / .tier-btn,
     .catalog-layout / .catalog-summary-slot (>=1024px right-hand panel),
     .order-history-card and friends, .auth-* for the signed-out screen.
   ========================================================================== */

/* ==========================================================================
   1. THREE-TIER APP SHELL
   The document scrolls (state.setScreen calls window.scrollTo), the header
   sticks to the top of that scroll, the tab bar is fixed to the viewport.

   The header is sticky on #header-root, NOT on the <header> inside it: a
   sticky element's containing block is its nearest block ancestor, and that
   ancestor shrink-wraps the header, so an inner sticky has zero travel and
   never actually sticks. That was the old bug.
   ========================================================================== */

.portal-app-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
}

#header-root {
  position: sticky;
  top: 0;
  z-index: 900;
}

.portal-main-content {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding:
    clamp(18px, 3.5vw, 34px)
    calc(var(--gutter) + var(--safe-right))
    calc(var(--bottom-nav-h) + var(--safe-bottom) + 28px)
    calc(var(--gutter) + var(--safe-left));
}

/* The mobile cart bar floats above the tab bar; reserve room for it too. */
body.is-cart-active .portal-main-content {
  padding-bottom: calc(var(--bottom-nav-h) + var(--cart-bar-h) + var(--safe-bottom) + 34px);
}

@media (min-width: 768px) {
  .portal-main-content,
  body.is-cart-active .portal-main-content { padding-bottom: 72px; }
}

#main-root:focus { outline: none; }

/* ==========================================================================
   2. HEADER
   ========================================================================== */

.portal-top-header {
  background: rgba(6, 30, 14, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(238, 188, 74, 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
  padding-top: var(--safe-top);
  --color-focus: var(--color-gold);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--header-h);
  max-width: 1240px;
  margin: 0 auto;
  padding: 6px calc(10px + var(--safe-right)) 6px calc(10px + var(--safe-left));
}

@media (min-width: 768px) {
  .header-inner { gap: 16px; padding-left: calc(20px + var(--safe-left)); padding-right: calc(20px + var(--safe-right)); }
}

/* -- brand lockup ---------------------------------------------------------- */

.header-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px 4px 2px;
  border-radius: var(--radius-sm);
  color: var(--color-white);
  text-align: left;
  min-width: 0;                    /* lets the wordmark shrink before it overflows */
  flex: 0 1 auto;
}

.header-logo-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(238, 188, 74, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  flex-shrink: 0;
}

.header-brand-meta { display: flex; flex-direction: column; min-width: 0; }

/* On a 375px screen the wordmark and the action cluster cannot both fit on one
   line, so below 640px the lockup stacks (BINDI / WHOLESALE) instead of being
   truncated to "BINDI WHOLE…". */
.header-brand-title {
  font-family: var(--font-serif);
  font-size: clamp(11.5px, 2.9vw, 15px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.08;
  color: var(--color-white);
  overflow-wrap: break-word;
}

@media (min-width: 640px) {
  .header-brand-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
  }
}

/* 768–899px is the one band where the nav, the wordmark and the action cluster
   genuinely cannot share a line. The mark carries the brand there and the
   wordmark stays in the accessibility tree, so the button keeps its name. */
@media (min-width: 768px) and (max-width: 899px) {
  .header-brand-title {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.header-brand-sub {
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  line-height: 1.4;
  color: var(--color-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}

/* The tagline is long; it only appears where it fits whole rather than
   arriving pre-truncated. */
@media (min-width: 1180px) { .header-brand-sub { display: block; } }

@media (hover: hover) {
  .header-brand:hover .header-logo-badge { background: rgba(238, 188, 74, 0.16); }
}

/* -- desktop nav ----------------------------------------------------------- */

.header-nav { display: none; }

@media (min-width: 768px) {
  .header-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 0;
  }
}

.header-nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  min-height: var(--tap);
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  color: rgba(250, 245, 230, 0.72);
  transition: color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) {
  .header-nav__item:hover { color: var(--color-white); background: rgba(255, 255, 255, 0.07); }
}

.header-nav__item.is-active {
  color: var(--color-gold);
  background: rgba(238, 188, 74, 0.14);
}

@media (min-width: 1180px) {
  .header-nav { gap: 4px; }
  .header-nav__item { padding: 0 14px; font-size: 13px; }
}

/* -- action cluster -------------------------------------------------------- */

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

@media (min-width: 768px) { .header-actions { gap: 10px; } }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  flex-shrink: 0;
}

/* Each half is a full 44x44 target in its own right, not a 44px pill split
   into two undersized halves. */
.lang-toggle__btn {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(250, 245, 230, 0.7);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-toggle__btn[aria-pressed="true"] {
  background: var(--color-gold);
  color: var(--color-forest-dark);
}

@media (hover: hover) {
  .lang-toggle__btn[aria-pressed="false"]:hover { color: var(--color-white); background: rgba(255, 255, 255, 0.1); }
}

.header-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  min-width: var(--tap);
  min-height: var(--tap);
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-forest-dark);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 12px rgba(238, 188, 74, 0.3);
  flex-shrink: 0;
  transition: background-color 0.2s ease, transform 0.2s var(--ease-elastic);
}

.header-cart--empty {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--color-cream);
  box-shadow: none;
  padding: 0 10px;
}

@media (hover: hover) { .header-cart:hover { transform: translateY(-1px); } }

/* A corner badge, not an inline number: the button's width then does not move
   as the basket grows, so the wordmark beside it keeps its space. */
.header-cart__count {
  position: absolute;
  top: -1px;
  right: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-forest-dark);
  color: var(--color-gold);
  border: 1.5px solid var(--color-forest-dark);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.header-cart__total { display: none; }

@media (min-width: 1024px) {
  .header-cart__total {
    display: inline;
    font-size: 12.5px;
    padding-left: 8px;
    border-left: 1px solid rgba(10, 47, 23, 0.22);
  }
}

.header-signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--color-cream);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .header-signout:hover { background: rgba(238, 188, 74, 0.16); color: var(--color-gold); }
}

/* Label is present for assistive tech at every width, visible only where
   there is room for it. */
.label-lg-up {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 1180px) {
  .label-lg-up {
    position: static;
    width: auto; height: auto;
    margin: 0; overflow: visible;
    clip: auto; clip-path: none;
  }
}

/* ==========================================================================
   3. BOTTOM TAB BAR — mobile only
   The audit found this rendering at 1440px on top of the desktop nav.
   ========================================================================== */

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 2px;
  background: rgba(6, 30, 14, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(238, 188, 74, 0.2);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
  padding:
    6px
    calc(8px + var(--safe-right))
    calc(6px + var(--safe-bottom))
    calc(8px + var(--safe-left));
  --color-focus: var(--color-gold);
}

.bottom-nav__item {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  border-radius: 14px;
  color: rgba(250, 245, 230, 0.66);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.bottom-nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.bottom-nav__item.is-active {
  color: var(--color-gold);
  background: rgba(238, 188, 74, 0.14);
}

.bottom-nav__icon { width: 20px; height: 20px; }

/* Desktop: the header nav takes over completely. */
@media (min-width: 768px) {
  #bottom-nav-root { display: none; }
}

/* ==========================================================================
   4. MOBILE CART BAR
   Replaces the old right-edge floating tab, which sat on top of product cards
   and swallowed taps meant for the quantity tiers. This is anchored above the
   tab bar, spans the gutters, and only exists when the order is non-empty.
   ========================================================================== */

.cart-bar {
  position: fixed;
  left: calc(12px + var(--safe-left));
  right: calc(12px + var(--safe-right));
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 8px);
  z-index: 940;
  min-height: var(--cart-bar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-forest);
  border: 1px solid var(--color-border-gold);
  color: var(--color-cream);
  box-shadow: 0 16px 34px -10px rgba(6, 30, 14, 0.55);
  text-align: left;
  --color-focus: var(--color-gold);
  animation: cart-bar-in 0.28s var(--ease-elastic);
}

@keyframes cart-bar-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.cart-bar__icon { color: var(--color-gold); flex-shrink: 0; }

.cart-bar__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.cart-bar__count {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-bar__total { font-size: 15px; color: var(--color-white); }
.cart-bar__pending { font-size: 12px; color: rgba(250, 245, 230, 0.72); }

.cart-bar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-forest-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Clipped rather than display:none below 420px, so the button keeps a verb in
   its accessible name even when only the arrow is drawn. */
.cart-bar__cta-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 420px) {
  .cart-bar__cta-label {
    position: static;
    width: auto; height: auto;
    margin: 0; overflow: visible;
    clip: auto; clip-path: none;
  }
}

@media (min-width: 768px) { .cart-bar { display: none; } }

/* ==========================================================================
   5. ORDER DRAWER
   Closed means visibility:hidden + inert — not opacity:0, which leaves every
   control inside it in the tab order.
   ========================================================================== */

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  visibility: hidden;
  /* pointer-events is belt to visibility's braces: if the delayed visibility
     transition is ever skipped, the closed drawer still cannot eat a tap. */
  pointer-events: none;
  transition: visibility 0s linear 0.34s;
}

.cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  background: rgba(6, 30, 14, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: default;
}

.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }

.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  background: var(--color-cream);
  box-shadow: var(--shadow-drawer);
  transform: translateX(101%);
  transition: transform 0.34s var(--ease-snappy);
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-right: var(--safe-right);
}

.cart-drawer.is-open .cart-drawer__panel { transform: none; }

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px 14px 22px;
  border-bottom: 1.5px solid var(--color-border-light);
  background: var(--color-cream-surface);
  flex-shrink: 0;
}

.cart-drawer__title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--color-forest);
}

/* The body itself never scrolls: the line list does. patch() restores a
   scroll position by [data-scroll-key], and it can only do that for a node
   inside the region it rewrites — the patch container's own scrollTop is
   reset by the innerHTML swap. */
.cart-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* ==========================================================================
   6. DESKTOP SUMMARY PANEL
   Same content as the drawer, parked in the catalog layout from 1024px up.
   ========================================================================== */

.catalog-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.catalog-summary-slot { display: none; }

@media (min-width: 1024px) {
  .catalog-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .catalog-summary-slot { display: block; }
}

.summary-panel {
  display: none;
  position: sticky;
  top: calc(var(--header-h) + var(--safe-top) + 18px);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border-light);
  background: var(--color-cream-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

@media (min-width: 1024px) { .summary-panel { display: block; } }

.summary-panel__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--color-forest);
  padding: 16px 20px;
  border-bottom: 1.5px solid var(--color-border-light);
}

.summary-panel__body {
  max-height: calc(100dvh - var(--header-h) - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ==========================================================================
   7. ORDER SUMMARY BODY — shared by the drawer and the panel
   ========================================================================== */

.cart-summary { display: flex; flex-direction: column; }

.cart-summary--drawer {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.cart-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.cart-summary--drawer .cart-lines {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.cart-summary--drawer .cart-foot { flex-shrink: 0; }

.cart-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 8px 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-nested);
}

.cart-line__main { flex: 1 1 auto; min-width: 0; }

.cart-line__name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-forest);
}

.cart-line__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--color-charcoal-muted);
}

.cart-line__sku {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-muted-gold-deep);
}

.cart-line__side {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.cart-line__total { font-size: 13px; color: var(--color-forest); }
.cart-line__total.is-pending { color: var(--color-charcoal-muted); font-weight: 500; }
.cart-line__remove { color: var(--color-charcoal-muted); }

@media (hover: hover) {
  .cart-line__remove:hover { color: var(--color-danger); background: var(--color-danger-soft); }
}

/* -- totals ---------------------------------------------------------------- */

.cart-foot {
  padding: 16px;
  border-top: 1.5px solid var(--color-border-light);
  background: var(--color-cream-warm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cart-totals { display: flex; flex-direction: column; gap: 8px; }

.cart-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  color: var(--color-charcoal);
}

.cart-row__label { color: var(--color-charcoal-muted); }
.cart-row__value { text-align: right; min-width: 0; }
.cart-row--muted { font-size: 12px; color: var(--color-charcoal-muted); }

.cart-row--total {
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1.5px dashed rgba(10, 47, 23, 0.18);
  font-size: 14px;
  font-weight: 800;
  color: var(--color-forest);
}

.cart-row--total .money { color: var(--color-forest); }

.cart-free {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-mint-accent);
  white-space: nowrap;
}

.cart-carrier {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-forest);
  text-align: right;
}

.cart-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  color: var(--color-charcoal-muted);
}

.cart-note--warn {
  background: var(--color-muted-gold-tint);
  border-color: rgba(146, 113, 49, 0.3);
  color: var(--color-muted-gold-deep);
  font-weight: 600;
}

.cart-note__icon { flex-shrink: 0; margin-top: 1px; }

.savings-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-mint);
  border: 1px solid rgba(0, 105, 74, 0.2);
  color: var(--color-mint-ink);
  font-size: 12px;
  font-weight: 800;
}

.savings-pill .money { margin-left: auto; font-size: 13px; }
.savings-pill__icon { flex-shrink: 0; }

/* -- free shipping nudge --------------------------------------------------- */

.ship-nudge {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-nested);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
}

.ship-nudge__text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-charcoal);
}

.ship-nudge__track {
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-cream-muted);
  overflow: hidden;
}

.ship-nudge__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-mint-accent), var(--color-gold));
  transition: width 0.4s var(--ease-snappy);
}

/* -- minimum order gate ---------------------------------------------------- */

.cart-gate {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-danger-soft);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.cart-cta { width: 100%; justify-content: space-between; }

/* -- summary states -------------------------------------------------------- */

.cart-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 28px 20px;
  color: var(--color-charcoal-muted);
}

.cart-state__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-forest);
}

.cart-state__text { font-size: 13px; line-height: 1.5; max-width: 34ch; }
.cart-state__icon { color: var(--color-muted-gold); opacity: 0.6; }

.cart-state--error { color: var(--color-danger); }
.cart-state--error .cart-state__title { color: var(--color-danger); }

.cart-quoting {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-charcoal-muted);
}

.cart-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 16px; }

.cart-skeleton__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-nested);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
}

.cart-skeleton__row > .skeleton:first-child { flex: 1 1 auto; }

/* ==========================================================================
   8. TOASTS
   ========================================================================== */

.toast-region {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 14px);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 calc(12px + var(--safe-left));
  pointer-events: none;
}

body.is-cart-active .toast-region {
  bottom: calc(var(--bottom-nav-h) + var(--cart-bar-h) + var(--safe-bottom) + 18px);
}

@media (min-width: 768px) {
  .toast-region,
  body.is-cart-active .toast-region {
    bottom: calc(24px + var(--safe-bottom));
    align-items: flex-end;
    padding-right: calc(24px + var(--safe-right));
  }
}

.toast {
  pointer-events: auto;
  max-width: min(420px, 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: var(--radius-nested);
  background: var(--color-forest);
  color: var(--color-cream);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: 0 18px 40px -12px rgba(6, 30, 14, 0.55);
  border-left: 4px solid var(--color-gold);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.25s var(--ease-elastic);
}

.toast--in { opacity: 1; transform: none; }
.toast--success { border-left-color: var(--color-mint-accent); }
.toast--error { background: var(--color-danger); border-left-color: #74150f; }
.toast--warn { border-left-color: var(--color-gold); }

/* ==========================================================================
   9. MODALS (#modal-root)
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

@media (min-width: 640px) { .modal { align-items: center; padding: 24px; } }

.modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  background: rgba(6, 30, 14, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: default;
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-cream);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 24px 20px calc(24px + var(--safe-bottom));
  box-shadow: 0 -20px 60px rgba(6, 30, 14, 0.4);
}

@media (min-width: 640px) {
  .modal__panel { border-radius: var(--radius-card); padding-bottom: 24px; }
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* ==========================================================================
   10. SCREEN FURNITURE
   ========================================================================== */

.screen-header { margin-bottom: clamp(20px, 3vw, 32px); }

.screen-header__title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4.6vw, 2.6rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--color-forest);
  text-wrap: balance;
}

.section-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--color-forest);
}

.dashboard-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

/* -- dashboard KPIs -------------------------------------------------------- */

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: clamp(24px, 4vw, 36px);
}

@media (min-width: 580px) { .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 960px) { .dashboard-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.kpi-card-shell {
  background: rgba(10, 47, 23, 0.03);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card);
  padding: 6px;
}

.kpi-card-inner,
.kpi-card-inner-forest {
  border-radius: var(--radius-card-inner);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.kpi-card-inner { background: var(--color-white); }

.kpi-card-inner-forest {
  background: var(--color-forest);
  color: var(--color-cream);
  --color-focus: var(--color-gold);
}

.kpi-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: var(--color-charcoal-muted);
}

.kpi-card-inner-forest .kpi-label { color: var(--color-gold); }

.kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.25rem, 3.6vw, 1.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--color-forest);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-card-inner-forest .kpi-value { color: var(--color-white); }

.kpi-meta { font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--color-muted-gold-deep); }
.kpi-card-inner-forest .kpi-meta { color: var(--color-gold); }

.dashboard-actions-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 4vw, 36px);
}

/* -- order cards ----------------------------------------------------------- */

.order-history-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border-light);
  padding: clamp(16px, 3vw, 24px);
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.order-card-header,
.order-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.order-card-header { padding-bottom: 12px; border-bottom: 1px solid var(--color-border-light); }
.order-card-footer { padding-top: 12px; border-top: 1px solid var(--color-border-light); }

.order-items-list { display: flex; flex-direction: column; gap: 8px; }

.order-item-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--color-charcoal);
}

.order-item-row__name { min-width: 0; overflow-wrap: anywhere; }

/* -- catalog --------------------------------------------------------------- */

.catalog-controls-strip {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(20px, 3vw, 30px);
}

@media (min-width: 900px) {
  .catalog-controls-strip { flex-direction: row; align-items: center; justify-content: space-between; }
}

.brand-filter-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
  margin: -2px -2px -6px;
}

.brand-pill {
  background: var(--color-white);
  border: 1.5px solid var(--color-border-light);
  color: var(--color-forest);
  font-size: 13px;
  font-weight: 800;
  padding: 0 18px;
  min-height: var(--tap);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .brand-pill:hover { border-color: var(--color-forest); }
}

.brand-pill.is-active,
.brand-pill[aria-pressed="true"] {
  background: var(--color-forest);
  color: var(--color-gold);
  border-color: var(--color-forest);
}

.catalog-search-box { position: relative; flex-shrink: 0; }

@media (min-width: 900px) { .catalog-search-box { min-width: 300px; } }

.catalog-search-input {
  width: 100%;
  background: var(--color-white);
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-pill);
  padding: 11px 18px 11px 44px;
  font-size: 16px;
  min-height: var(--tap);
  color: var(--color-charcoal);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.catalog-search-input:focus {
  border-color: var(--color-forest);
  box-shadow: 0 0 0 3px rgba(10, 47, 23, 0.1);
}

.catalog-search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-charcoal-muted);
  pointer-events: none;
}

.brand-catalog-section { margin-bottom: clamp(28px, 5vw, 48px); }

.brand-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--color-forest);
  margin-bottom: 16px;
}

.brand-section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border-light);
}

.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 620px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } }

.product-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border-light);
  padding: 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.25s ease, transform 0.25s var(--ease-elastic);
}

@media (hover: hover) {
  .product-card:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(10, 47, 23, 0.14); }
}

.product-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.product-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.22;
  color: var(--color-forest);
  overflow-wrap: anywhere;
}

.product-msrp-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-charcoal-muted);
  text-decoration: line-through;
  white-space: nowrap;
}

.product-wholesale-tag {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-forest);
  white-space: nowrap;
}

.product-discount-pill {
  background: var(--color-mint);
  color: var(--color-mint-ink);
  font-size: 11px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.preset-tiers-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.tier-btn {
  background: var(--color-cream);
  border: 1.5px solid var(--color-border-light);
  border-radius: 12px;
  padding: 6px 2px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--color-forest);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .tier-btn:hover { border-color: var(--color-forest); background: var(--color-cream-warm); }
}

.tier-btn.is-selected,
.tier-btn[aria-pressed="true"] {
  background: var(--color-forest);
  border-color: var(--color-forest);
  color: var(--color-gold);
  --color-focus: var(--color-gold);
}

.tier-qty-label { font-size: 12px; font-weight: 900; line-height: 1.2; }

.tier-price-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0.85;
  white-space: nowrap;
}

/* -- signed-out screen ----------------------------------------------------- */

.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--header-h) - 120px);
  padding: 16px 0;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-outer);
  padding: clamp(24px, 5vw, 36px);
  box-shadow: var(--shadow-portal);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 900;
  line-height: 1.08;
  color: var(--color-forest);
}

/* -- data tables ----------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-nested);
}

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.data-table th,
.data-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  white-space: nowrap;
}

.data-table th {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-charcoal-muted);
}

.data-table td.is-numeric,
.data-table th.is-numeric { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }