/* Appily-Six — Midnight Produce Exchange */
:root {
  --navy: #0B132B; --navy-mid: #1C2541; --teal: #5BC0BE; --teal-pale: #D8F3F2;
  --coral: #FF6B6B; --coral-pale: #FFE8E8; --gold: #F7C948; --gold-pale: #FFF4D6;
  --cream: #FAF8F5; --cream-2: #F0EBE3; --ink: #0A0E17; --muted: #5C6578;
  --white: #fff; --line: rgba(11, 19, 43, 0.12);
  --radius: 10px; --radius-lg: 18px; --radius-xl: 28px; --radius-round: 999px;
  --font-display: 'Spectral', Georgia, serif; --font-body: 'Karla', system-ui, sans-serif;
  --shadow: 0 18px 44px rgba(11, 19, 43, 0.14); --shadow-soft: 0 8px 24px rgba(11, 19, 43, 0.08);
  --policy-accent: var(--teal);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }
body.appily-store, body.appily-six {
  font-family: var(--font-body); background: var(--cream); color: var(--ink);
  line-height: 1.65; min-height: 100%;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.page-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.page-main { flex: 1 0 auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Exchange header */
.exchange-header { position: sticky; top: 0; z-index: 60; background: var(--navy); color: var(--cream); }
.exchange-header.is-scrolled .exchange-masthead { box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28); }
.exchange-ticker { background: var(--ink); border-bottom: 2px solid var(--teal); }
.ticker-track {
  display: flex; align-items: center; gap: 12px; padding: 7px 0;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.ticker-track::-webkit-scrollbar { display: none; }
.ticker-badge {
  flex-shrink: 0; font-size: .64rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); padding: 3px 10px;
  border: 1px solid rgba(247, 201, 72, 0.35); border-radius: var(--radius-round);
}
.ticker-dot { flex-shrink: 0; color: var(--teal); font-size: .55rem; opacity: .7; }
.ticker-item { flex-shrink: 0; font-size: .72rem; font-weight: 600; color: rgba(250, 248, 245, 0.88); }
.exchange-masthead {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, #243356 100%);
  padding: 16px 0 18px; transition: box-shadow .25s ease;
}
.masthead-grid {
  display: grid; grid-template-columns: auto 1fr minmax(180px, 280px) auto;
  align-items: center; gap: 16px 20px;
}
.lane-toggle {
  display: none; align-items: center; gap: 8px;
  border: 1px solid rgba(91, 192, 190, 0.35); background: rgba(91, 192, 190, 0.1);
  color: var(--teal-pale); padding: 8px 12px; border-radius: var(--radius);
  cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.lane-bars { display: flex; flex-direction: column; gap: 4px; }
.lane-bars span { display: block; width: 16px; height: 2px; background: var(--teal); border-radius: 2px; }
.exchange-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-crate {
  position: relative;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 9px 10px 11px;
  border-radius: 9px 9px 5px 5px;
  background: linear-gradient(165deg, #2f261c 0%, #15120e 100%);
  border: 2px solid rgba(247, 201, 72, 0.38);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.brand-crate::before,
.brand-crate::after {
  content: '';
  position: absolute;
  left: 7px;
  right: 7px;
  height: 2px;
  border-radius: 1px;
  background: rgba(247, 201, 72, 0.22);
  pointer-events: none;
}
.brand-crate::before { top: 8px; }
.brand-crate::after { bottom: 9px; }
.crate-slat { border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.crate-fruit { background: linear-gradient(90deg, #ff6b6b 0%, #ff922b 100%); }
.crate-veg { background: linear-gradient(90deg, #51cf66 0%, #6baa3c 100%); }
.crate-combo { background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 100%); }
.brand-crate-leaf {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 13px;
  height: 8px;
  transform: translateX(-50%) rotate(-18deg);
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(135deg, #69db7c, #40c057);
  box-shadow: -7px 3px 0 -3px #2f9e44;
}
.brand-stack { display: flex; flex-direction: column; min-width: 0; }
.brand-eyebrow { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); opacity: .85; }
.brand-title {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 700; line-height: 1.1; white-space: nowrap;
}
.brand-six { color: var(--gold); font-style: italic; }
.brand-sub { font-size: .62rem; color: rgba(250, 248, 245, 0.65); letter-spacing: .04em; }
.exchange-search {
  display: flex; background: var(--white); border-radius: var(--radius-round); overflow: hidden;
  border: 2px solid rgba(91, 192, 190, 0.25); box-shadow: var(--shadow-soft); min-width: 0;
}
.exchange-search input {
  flex: 1; border: 0; padding: 9px 14px; font: inherit; font-size: .84rem;
  outline: none; min-width: 0; color: var(--ink); background: transparent;
}
.search-pulse {
  border: 0; background: var(--teal); color: var(--navy); padding: 9px 16px;
  font-weight: 700; font-size: .78rem; cursor: pointer; letter-spacing: .04em;
}
.search-pulse:hover { background: #4ab3b1; }
.masthead-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.masthead-account { font-size: .82rem; font-weight: 600; color: rgba(250, 248, 245, 0.85); padding: 6px 10px; border-radius: var(--radius); }
.masthead-account.is-active { color: var(--gold); }
.masthead-cart {
  display: flex; align-items: center; gap: 8px; background: var(--coral); color: var(--white);
  padding: 7px 14px; border-radius: var(--radius); font-size: .78rem; font-weight: 700;
  box-shadow: 0 4px 14px rgba(255, 107, 107, 0.35);
}
.cart-qty {
  background: var(--navy); color: var(--gold); min-width: 22px; height: 22px;
  border-radius: 6px; display: grid; place-items: center; font-size: .72rem;
}
.exchange-ribbon {
  position: relative;
  background:
    radial-gradient(ellipse 80% 120% at 50% -20%, rgba(212, 175, 55, 0.12), transparent 60%),
    linear-gradient(180deg, #faf8f5 0%, var(--cream) 100%);
  border-bottom: 1px solid var(--line);
  padding: 14px 0 18px;
}
.ribbon-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ribbon-kicker {
  margin: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(10, 14, 23, 0.38);
}
.lane-nav-centered {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  max-width: 100%;
  padding: 5px 6px;
  border-radius: 999px;
  border: 1px solid rgba(10, 14, 23, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 242, 236, 0.95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 8px 28px rgba(10, 14, 23, 0.07);
}
.lane-join {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  margin: 0 2px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: 0.45;
  align-self: center;
}
.lane-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
  position: relative;
}
.lane-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: .58rem;
  line-height: 1;
  background: rgba(10, 14, 23, 0.05);
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.lane-label { white-space: nowrap; }
.lane-home .lane-mark { color: var(--teal); background: rgba(91, 192, 190, 0.14); }
.lane-all .lane-mark { color: var(--gold); background: rgba(212, 175, 55, 0.16); }
.lane-fruits .lane-mark { color: #6baa3c; background: rgba(107, 170, 60, 0.16); }
.lane-vegetables .lane-mark { color: #51cf66; background: rgba(81, 207, 102, 0.16); }
.lane-combos .lane-mark { color: #ff922b; background: rgba(255, 146, 43, 0.16); }
.lane-chip:hover {
  color: var(--navy);
  background: rgba(255, 255, 255, 0.75);
  transform: translateY(-1px);
}
.lane-chip:hover .lane-mark { transform: scale(1.08); }
.lane-chip.is-active {
  color: var(--cream);
  background: linear-gradient(135deg, var(--navy) 0%, #141c2e 100%);
  box-shadow: 0 6px 18px rgba(10, 14, 23, 0.22);
}
.lane-chip.is-active .lane-mark {
  color: var(--gold);
  background: rgba(250, 248, 245, 0.12);
}
.lane-home.is-active .lane-mark { color: var(--teal); }
.lane-all.is-active .lane-mark { color: var(--gold); }
.lane-fruits.is-active .lane-mark { color: #8fd14f; }
.lane-vegetables.is-active .lane-mark { color: #69db7c; }
.lane-combos.is-active .lane-mark { color: #ffa94d; }
.lane-orchard { border-left: 3px solid #6baa3c; }
.lane-citrus { border-left: 3px solid var(--gold); }
.lane-rain { border-left: 3px solid var(--teal); }
.lane-berry { border-left: 3px solid var(--coral); }
.lane-tropic { border-left: 3px solid #ff9f43; }
.lane-hill { border-left: 3px solid #8892b0; }
.lane-coast { border-left: 3px solid #4dabf7; }
.lane-leafy { border-left: 3px solid #51cf66; }
.lane-roots { border-left: 3px solid #a66; }
.lane-gourds { border-left: 3px solid #82c91e; }
.lane-crucifer { border-left: 3px solid #748ffc; }
.lane-alliums { border-left: 3px solid #be4bdb; }
.lane-legumes { border-left: 3px solid #40c057; }
.lane-herbs { border-left: 3px solid #12b886; }
.lane-salad { border-left: 3px solid #ff922b; }
.lane-smoothie { border-left: 3px solid #f06595; }
.lane-stirfry { border-left: 3px solid #fab005; }
.lane-juice { border-left: 3px solid #339af0; }
.lane-rainbow { border-left: 3px solid var(--gold); }
.lane-soup { border-left: 3px solid #e67700; }
.lane-pickle { border-left: 3px solid #868e96; }
.lane-meta { border-left: 3px solid var(--muted); }
.ribbon-zigzag {
  position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background:
    linear-gradient(135deg, var(--cream) 33.33%, transparent 33.33%) 0 0 / 12px 8px,
    linear-gradient(225deg, var(--cream) 33.33%, transparent 33.33%) 0 0 / 12px 8px;
}
.lane-drawer { pointer-events: none; visibility: hidden; }
.lane-drawer.is-open { pointer-events: auto; visibility: visible; }
.drawer-scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(10, 14, 23, 0.55);
  opacity: 0; transition: opacity .25s ease;
}
.lane-drawer.is-open .drawer-scrim { opacity: 1; }
.drawer-sheet {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 95; width: min(320px, 88vw);
  background: var(--cream); color: var(--ink); transform: translateX(-105%);
  transition: transform .25s ease; display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.lane-drawer.is-open .drawer-sheet { transform: translateX(0); }
.drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 18px 14px; border-bottom: 1px solid var(--line);
  background: var(--navy); color: var(--cream);
}
.drawer-head strong { font-family: var(--font-display); font-size: 1.05rem; }
.drawer-close {
  border: 1px solid rgba(250, 248, 245, 0.25); background: transparent; color: var(--cream);
  padding: 6px 12px; border-radius: var(--radius); cursor: pointer; font: inherit; font-size: .78rem;
}
.drawer-lanes { display: flex; flex-direction: column; padding: 12px; overflow-y: auto; }
.drawer-lanes-sections { gap: 6px; }
.drawer-lane {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--white);
}
.drawer-lane-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: .65rem;
  flex-shrink: 0;
}
.drawer-lane-home .drawer-lane-mark { color: var(--teal); background: rgba(91, 192, 190, 0.14); }
.drawer-lane-all .drawer-lane-mark { color: var(--gold); background: rgba(212, 175, 55, 0.16); }
.drawer-lane-fruits .drawer-lane-mark { color: #6baa3c; background: rgba(107, 170, 60, 0.16); }
.drawer-lane-vegetables .drawer-lane-mark { color: #51cf66; background: rgba(81, 207, 102, 0.16); }
.drawer-lane-combos .drawer-lane-mark { color: #ff922b; background: rgba(255, 146, 43, 0.16); }
.drawer-lane:hover, .drawer-lane.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--cream);
}
.drawer-lane.is-active .drawer-lane-mark,
.drawer-lane:hover .drawer-lane-mark {
  background: rgba(250, 248, 245, 0.12);
  color: var(--gold);
}

/* Typography & buttons */
.eyebrow {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal); font-weight: 700; margin: 0 0 10px;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; font-weight: 600; }
h1 em { font-style: italic; color: var(--coral); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: var(--radius-round); font-weight: 700; font-size: .9rem;
  border: 2px solid transparent; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s; font-family: inherit;
}
.btn-primary { background: var(--teal); color: var(--navy); border-color: var(--teal); }
.btn-primary:hover { background: #4ab3b1; border-color: #4ab3b1; }
.btn-outline { background: transparent; border-color: var(--navy-mid); color: var(--navy-mid); }
.btn-outline:hover { background: var(--teal-pale); }
.btn-soft { background: var(--cream-2); color: var(--navy); border-color: var(--line); }
.btn-soft:hover { background: var(--teal-pale); }
.btn-sm { padding: 8px 16px; font-size: .82rem; }
.link-arrow { font-weight: 700; color: var(--teal); font-size: .88rem; white-space: nowrap; }
.link-arrow:hover { color: var(--coral); }
.price { font-weight: 800; color: var(--navy); font-size: 1.05rem; }

/* Hero bento */
.hero-bento {
  padding: 40px 0 52px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  border-bottom: 1px solid var(--line);
}
.bento-shell { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 32px; align-items: center; }
.bento-intro h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin: 0 0 14px; }
.hero-lede { color: var(--muted); max-width: 42ch; margin: 0 0 22px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-stats { list-style: none; padding: 0; margin: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.hero-stats strong { display: block; font-size: 1.35rem; color: var(--navy); font-family: var(--font-display); }
.hero-stats span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 130px); gap: 10px; }
.bento-cell {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-soft);
}
.bento-cell img { width: 100%; height: 100%; object-fit: cover; }
.bento-hero { grid-column: 1 / 3; grid-row: 1 / 3; }
.bento-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px;
  background: linear-gradient(transparent, rgba(11, 19, 43, 0.88)); color: var(--cream);
}
.cap-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); font-weight: 700; }
.bento-cap h2 { margin: 6px 0 4px; font-size: 1.15rem; color: var(--cream); }
.bento-cap .price { color: var(--gold); }
.bento-sm-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
  font-size: .72rem; font-weight: 700; background: rgba(11, 19, 43, 0.72); color: var(--cream);
}

/* Basket showcase */
.basket-showcase { padding: 48px 0 24px; }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.section-head h2 { margin: 0; font-size: 1.85rem; }
.section-head p { margin: 0; color: var(--muted); }
.section-head-split { align-items: flex-start; }
.basket-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.basket-tile {
  position: relative; display: flex; flex-direction: column; min-height: 220px;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--white); box-shadow: var(--shadow-soft);
  transition: transform .2s, box-shadow .2s;
}
.basket-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.basket-tile:nth-child(3n+1) { grid-column: span 5; }
.basket-tile:nth-child(3n+2) { grid-column: span 4; }
.basket-tile:nth-child(3n) { grid-column: span 3; }
.basket-tile-img { width: 100%; height: 130px; object-fit: cover; }
.basket-tile-body { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; }
.basket-index { font-size: .62rem; font-weight: 700; letter-spacing: .12em; color: var(--teal); }
.basket-tile-body h3 { margin: 4px 0; font-size: 1rem; }
.basket-count { margin-top: auto; font-size: .76rem; color: var(--muted); }

/* Sections & products */
.section { padding: 56px 0; }
.section-muted { background: var(--cream-2); }
.section-produce { background: var(--white); }
.benefit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.benefit-list li {
  font-size: .76rem; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-round);
  background: var(--gold-pale); color: #7a6118;
}
.product-stagger-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.product-card {
  background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--line);
  overflow: hidden; transition: box-shadow .2s, transform .2s; display: flex; flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.product-card.tone-orchard { border-top: 3px solid #6baa3c; }
.product-card.tone-citrus { border-top: 3px solid var(--gold); }
.product-card.tone-rain { border-top: 3px solid var(--teal); }
.product-card.tone-berry { border-top: 3px solid var(--coral); }
.product-card.tone-tropic { border-top: 3px solid #ff9f43; }
.product-card.tone-hill { border-top: 3px solid #8892b0; }
.product-card.tone-coast { border-top: 3px solid #4dabf7; }
.product-card.tone-leafy { border-top: 3px solid #51cf66; }
.product-card.tone-roots { border-top: 3px solid #a66; }
.product-card.tone-gourds { border-top: 3px solid #82c91e; }
.product-card.tone-crucifer { border-top: 3px solid #748ffc; }
.product-card.tone-alliums { border-top: 3px solid #be4bdb; }
.product-card.tone-legumes { border-top: 3px solid #40c057; }
.product-card.tone-herbs { border-top: 3px solid #12b886; }
.product-card.tone-salad { border-top: 3px solid #ff922b; }
.product-card.tone-smoothie { border-top: 3px solid #f06595; }
.product-card.tone-stirfry { border-top: 3px solid #fab005; }
.product-card.tone-juice { border-top: 3px solid #339af0; }
.product-card.tone-rainbow { border-top: 3px solid var(--gold); }
.product-card.tone-soup { border-top: 3px solid #e67700; }
.product-card.tone-pickle { border-top: 3px solid #868e96; }
.product-card.tone-all { border-top: 3px solid var(--navy-mid); }
.product-img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--cream-2); }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-badge {
  position: absolute; top: 12px; right: 12px; background: var(--navy); color: var(--gold);
  font-size: .6rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-round);
  text-transform: uppercase; letter-spacing: .06em;
}
.product-body { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; }
.product-cat { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.product-body h3 { font-size: .95rem; margin: 6px 0; font-family: var(--font-body); font-weight: 700; }
.product-variant { font-size: .78rem; color: var(--muted); margin: 0 0 12px; }
.product-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }

/* Shop exchange */
.shop-exchange-banner {
  padding: 36px 0 28px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: var(--cream);
}
.catalog-code {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); font-weight: 700; margin: 0 0 10px;
}
.shop-banner-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 10px; }
.shop-banner-title em { color: var(--gold); }
.shop-banner-lede { margin: 0; opacity: .8; max-width: 52ch; }
.exchange-shop { padding: 32px 0 56px; }
.exchange-shop .container { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.filter-ladder { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 200px; }
.ladder-rung {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--white); font-size: .82rem; color: var(--muted);
  transition: background .2s, border-color .2s;
}
.ladder-rung:hover, .ladder-rung.is-active { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.rung-label { font-weight: 600; }
.rung-count { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-round); background: var(--cream-2); }
.ladder-rung.is-active .rung-count { background: rgba(91, 192, 190, 0.2); color: var(--teal-pale); }
.rung-orchard { border-left: 3px solid #6baa3c; }
.rung-citrus { border-left: 3px solid var(--gold); }
.rung-rain { border-left: 3px solid var(--teal); }
.rung-berry { border-left: 3px solid var(--coral); }
.rung-tropic { border-left: 3px solid #ff9f43; }
.rung-hill { border-left: 3px solid #8892b0; }
.rung-coast { border-left: 3px solid #4dabf7; }
.rung-leafy { border-left: 3px solid #51cf66; }
.rung-roots { border-left: 3px solid #a66; }
.rung-gourds { border-left: 3px solid #82c91e; }
.rung-crucifer { border-left: 3px solid #748ffc; }
.rung-alliums { border-left: 3px solid #be4bdb; }
.rung-legumes { border-left: 3px solid #40c057; }
.rung-herbs { border-left: 3px solid #12b886; }
.rung-salad { border-left: 3px solid #ff922b; }
.rung-smoothie { border-left: 3px solid #f06595; }
.rung-stirfry { border-left: 3px solid #fab005; }
.rung-juice { border-left: 3px solid #339af0; }
.rung-rainbow { border-left: 3px solid var(--gold); }
.rung-soup { border-left: 3px solid #e67700; }
.rung-pickle { border-left: 3px solid #868e96; }
.shop-meta { font-size: .86rem; color: var(--muted); margin: 0 0 18px; }
.shop-empty { margin-top: 12px; }

/* Showcase rail */
.showcase-rail { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.showcase-chip {
  flex-shrink: 0; width: 168px; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: box-shadow .2s, transform .2s;
}
.showcase-chip:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.showcase-chip img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cream-2); }
.showcase-chip span { padding: 10px 12px 4px; font-size: .82rem; font-weight: 600; line-height: 1.3; }
.showcase-chip strong { padding: 0 12px 14px; color: var(--navy); font-size: .92rem; }

/* Empty state & pagination */
.empty-state {
  text-align: center; padding: 48px 24px; background: var(--white);
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
}
.empty-state p { margin: 0; font-size: 1.05rem; font-weight: 700; }
.empty-state .sub { margin-top: 8px; font-size: .92rem; font-weight: 400; color: var(--muted); }
.catalog-pagination { margin-top: 32px; }
.pagination-inner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pagination-pages { display: flex; align-items: center; gap: 6px; }
.pagination-btn, .pagination-num {
  padding: 8px 14px; border-radius: var(--radius-round); border: 1px solid var(--line);
  font-size: .86rem; font-weight: 700; background: var(--white); color: var(--ink);
}
.pagination-num.is-active { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.pagination-btn.is-disabled { opacity: .4; pointer-events: none; }
.pagination-ellipsis { padding: 0 4px; color: var(--muted); }

/* Product detail */
.product-detail,
.product-hero { padding: 40px 0; }
.product-detail .product-layout,
.product-hero .product-layout,
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.product-detail .product-gallery,
.product-gallery {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  overflow: hidden;
  padding: 20px;
  box-shadow: var(--shadow-soft);
}
.product-detail .product-gallery::before,
.product-gallery::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(91, 192, 190, 0.25);
  border-radius: calc(var(--radius-lg) - 4px);
  pointer-events: none;
}
.product-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); }
.product-detail .product-info,
.product-info { min-width: 0; }
.product-info h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 8px 0 14px; }
.product-detail .product-cat,
.product-info .product-cat { display: inline-block; margin-bottom: 4px; color: var(--teal); font-weight: 700; }
.product-lede { color: var(--muted); margin-bottom: 20px; }
.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 24px; }
.spec-list div { padding: 10px 12px; background: var(--cream-2); border-radius: var(--radius); border: 1px solid var(--line); }
.spec-list dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.spec-list dd { margin: 4px 0 0; font-weight: 700; }
.product-detail .buy-panel,
.buy-panel {
  padding: 22px;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  color: var(--cream);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(91, 192, 190, 0.25);
}
.buy-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.price-lg { font-size: 1.6rem; color: var(--gold); }
.buy-panel .product-badge { position: static; background: rgba(91, 192, 190, 0.2); color: var(--teal-pale); }
.buy-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.buy-form label { display: block; font-size: .82rem; margin-bottom: 4px; }
.buy-form select {
  padding: 10px 12px; border: 1px solid rgba(250, 248, 245, 0.2);
  border-radius: var(--radius); background: rgba(255, 255, 255, 0.08); color: var(--cream); font: inherit;
}
.fine-print { font-size: .78rem; opacity: .7; margin: 12px 0 0; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.product-grid-compact { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.product-tile {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .2s;
}
.product-tile:hover { box-shadow: var(--shadow-soft); }
.product-tile-img { aspect-ratio: 1; overflow: hidden; background: var(--cream-2); }
.product-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.product-tile-info { padding: 12px 14px 16px; }
.product-tile-info h3 { font-size: .88rem; margin: 0 0 6px; font-family: var(--font-body); }

/* —— Exchange lot dossier (product view) —— */
.page-lot-dossier .page-main { background: linear-gradient(180deg, var(--cream) 0%, var(--white) 280px); }
.lot-trail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 18px 0 8px; font-size: .72rem; font-weight: 600; color: var(--muted);
}
.lot-trail a { color: var(--teal); }
.lot-trail a:hover { color: var(--navy); }
.lot-trail-dot {
  width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg); opacity: 0.55;
}
.lot-trail-current { color: var(--navy); font-weight: 700; }

.lot-dossier { padding: 12px 0 48px; }
.lot-dossier-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 44px); align-items: start;
}

.lot-crate-frame {
  position: relative;
  padding: 14px 14px 18px;
  border-radius: 14px 14px 8px 8px;
  background: linear-gradient(165deg, #2f261c 0%, #15120e 100%);
  border: 2px solid rgba(247, 201, 72, 0.35);
  box-shadow: 0 18px 48px rgba(10, 14, 23, 0.22);
}
.lot-crate-lid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  margin-bottom: 12px; padding: 0 2px;
}
.lot-crate-lid span { height: 5px; border-radius: 2px; }
.lot-crate-orchard .lot-crate-lid span:nth-child(1) { background: #ff922b; }
.lot-crate-orchard .lot-crate-lid span:nth-child(2) { background: #6baa3c; }
.lot-crate-orchard .lot-crate-lid span:nth-child(3) { background: var(--gold); }
.lot-crate-leafy .lot-crate-lid span:nth-child(1) { background: #51cf66; }
.lot-crate-leafy .lot-crate-lid span:nth-child(2) { background: #40c057; }
.lot-crate-leafy .lot-crate-lid span:nth-child(3) { background: #82c91e; }
.lot-crate-salad .lot-crate-lid span:nth-child(1) { background: var(--teal); }
.lot-crate-salad .lot-crate-lid span:nth-child(2) { background: #ff922b; }
.lot-crate-salad .lot-crate-lid span:nth-child(3) { background: var(--gold); }
.lot-crate-all .lot-crate-lid span,
.lot-crate-citrus .lot-crate-lid span,
.lot-crate-rain .lot-crate-lid span,
.lot-crate-berry .lot-crate-lid span,
.lot-crate-tropic .lot-crate-lid span,
.lot-crate-hill .lot-crate-lid span,
.lot-crate-coast .lot-crate-lid span,
.lot-crate-roots .lot-crate-lid span,
.lot-crate-gourds .lot-crate-lid span,
.lot-crate-crucifer .lot-crate-lid span,
.lot-crate-alliums .lot-crate-lid span,
.lot-crate-legumes .lot-crate-lid span,
.lot-crate-herbs .lot-crate-lid span,
.lot-crate-smoothie .lot-crate-lid span,
.lot-crate-stirfry .lot-crate-lid span,
.lot-crate-juice .lot-crate-lid span,
.lot-crate-rainbow .lot-crate-lid span,
.lot-crate-soup .lot-crate-lid span,
.lot-crate-pickle .lot-crate-lid span {
  background: linear-gradient(90deg, var(--teal), var(--gold));
}
.lot-stamp {
  position: absolute; top: 28px; left: -8px; z-index: 2;
  padding: 6px 12px 6px 10px;
  background: var(--gold); color: var(--navy);
  font-size: .62rem; font-weight: 800; letter-spacing: .14em;
  border-radius: 0 6px 6px 0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
}
.lot-corner-badge {
  position: absolute; top: 28px; right: 12px; z-index: 2;
  padding: 5px 10px; border-radius: 999px;
  background: var(--coral); color: var(--white);
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.lot-photo {
  margin: 0; overflow: hidden; border-radius: 8px;
  background: var(--cream);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.lot-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

.lot-coldchain {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  list-style: none; margin: 16px 0 0; padding: 0;
}
.lot-coldchain li {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; text-align: center;
  font-size: .68rem; font-weight: 700; color: var(--navy);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.chain-mark {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--teal-pale); color: var(--navy);
  font-size: .72rem; font-weight: 800;
}

.lot-manifest {
  position: relative;
  padding: 28px 28px 28px 36px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}
.lot-manifest::before {
  content: '';
  position: absolute; top: 16px; bottom: 16px; left: 14px; width: 6px;
  background:
    radial-gradient(circle at 50% 8px, var(--line) 2px, transparent 2px) center top / 6px 14px repeat-y;
  opacity: 0.85;
}
.lot-manifest::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.lot-manifest-orchard::after { background: linear-gradient(90deg, #6baa3c, #ff922b); }
.lot-manifest-leafy::after { background: linear-gradient(90deg, #51cf66, #40c057); }
.lot-manifest-salad::after { background: linear-gradient(90deg, var(--teal), #ff922b); }
.lot-manifest-all::after,
.lot-manifest-citrus::after,
.lot-manifest-rain::after,
.lot-manifest-berry::after,
.lot-manifest-tropic::after,
.lot-manifest-hill::after,
.lot-manifest-coast::after,
.lot-manifest-roots::after,
.lot-manifest-gourds::after,
.lot-manifest-crucifer::after,
.lot-manifest-alliums::after,
.lot-manifest-legumes::after,
.lot-manifest-herbs::after,
.lot-manifest-smoothie::after,
.lot-manifest-stirfry::after,
.lot-manifest-juice::after,
.lot-manifest-rainbow::after,
.lot-manifest-soup::after,
.lot-manifest-pickle::after {
  background: linear-gradient(90deg, var(--teal), var(--gold));
}
.lot-lane-tag {
  display: inline-block; margin-bottom: 10px;
  font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal);
}
.lot-manifest-head h1 {
  font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  line-height: 1.12; margin: 0 0 8px; color: var(--navy);
}
.lot-pack-size { margin: 0 0 16px; font-size: .88rem; color: var(--muted); }
.lot-pack-size strong { color: var(--navy); }
.lot-summary {
  margin: 0 0 22px; padding-bottom: 20px;
  border-bottom: 1px dashed var(--line);
  font-size: .92rem; line-height: 1.65; color: var(--muted);
}

.lot-fact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px;
}
.lot-fact {
  padding: 14px 14px 12px;
  border-radius: var(--radius-lg);
  background: var(--cream-2);
  border: 1px solid var(--line);
}
.lot-fact-label {
  display: block; font-size: .62rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.lot-fact strong {
  display: block; margin-top: 4px; font-size: 1.05rem; color: var(--navy);
  font-family: var(--font-display);
}
.lot-fact em {
  display: block; margin-top: 2px; font-size: .68rem; font-style: normal; color: var(--muted);
}

.lot-purchase {
  padding: 22px;
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, var(--navy) 0%, #141c2e 100%);
  color: var(--cream);
  border: 1px solid rgba(91, 192, 190, 0.28);
}
.lot-price-block { margin-bottom: 18px; }
.lot-price {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.35rem); font-weight: 700; color: var(--gold); line-height: 1;
}
.lot-price-note { font-size: .74rem; opacity: 0.72; margin-top: 6px; display: block; }
.lot-buy-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.lot-qty-wrap { flex: 0 0 auto; min-width: 140px; }
.lot-qty-label {
  display: block; margin-bottom: 8px;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: 0.75;
}
.lot-qty-select {
  width: 100%; min-width: 140px;
  padding: 12px 36px 12px 14px;
  border: 1px solid rgba(250, 248, 245, 0.22);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23FAF8F5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--cream);
  font: inherit; font-size: .88rem; font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s, background-color .2s;
}
.lot-qty-select:hover,
.lot-qty-select:focus {
  border-color: var(--teal);
  background-color: rgba(91, 192, 190, 0.12);
  outline: none;
}
.lot-qty-select option {
  color: var(--navy);
  background: var(--cream);
}
.btn-lot-add {
  flex: 1; min-width: 160px;
  padding: 14px 22px; border: 0; border-radius: var(--radius-lg);
  background: var(--coral); color: var(--white);
  font: inherit; font-size: .88rem; font-weight: 800; letter-spacing: .04em;
  cursor: pointer; box-shadow: 0 8px 22px rgba(255, 107, 107, 0.35);
  transition: transform .2s, box-shadow .2s;
}
.btn-lot-add:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 107, 107, 0.42); }
.lot-footnote { margin: 14px 0 0; font-size: .72rem; opacity: 0.65; line-height: 1.5; }

.lot-siblings {
  padding: 36px 0 56px;
  background: var(--cream-2);
  border-top: 1px solid var(--line);
}
.lot-siblings-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.lot-siblings-head h2 { margin: 6px 0 0; font-size: clamp(1.2rem, 2.5vw, 1.55rem); color: var(--navy); }
.lot-sibling-track {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.lot-sibling-card {
  flex: 0 0 min(220px, 78vw);
  display: grid; grid-template-rows: auto 1fr;
  scroll-snap-align: start;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .22s, box-shadow .22s;
}
.lot-sibling-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lot-sibling-card::before {
  content: ''; display: block; height: 3px;
}
.lot-sibling-orchard::before { background: #6baa3c; }
.lot-sibling-leafy::before { background: #51cf66; }
.lot-sibling-salad::before { background: #ff922b; }
.lot-sibling-citrus::before { background: var(--gold); }
.lot-sibling-berry::before { background: var(--coral); }
.lot-sibling-all::before,
.lot-sibling-rain::before,
.lot-sibling-tropic::before,
.lot-sibling-hill::before,
.lot-sibling-coast::before,
.lot-sibling-roots::before,
.lot-sibling-gourds::before,
.lot-sibling-crucifer::before,
.lot-sibling-alliums::before,
.lot-sibling-legumes::before,
.lot-sibling-herbs::before,
.lot-sibling-smoothie::before,
.lot-sibling-stirfry::before,
.lot-sibling-juice::before,
.lot-sibling-rainbow::before,
.lot-sibling-soup::before,
.lot-sibling-pickle::before { background: linear-gradient(90deg, var(--teal), var(--gold)); }
.lot-sibling-img {
  aspect-ratio: 4/3; overflow: hidden; background: var(--cream-2);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
}
.lot-sibling-img img { width: 100%; height: 100%; object-fit: cover; }
.lot-sibling-body { padding: 12px 14px 16px; }
.lot-sibling-sku {
  font-size: .58rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.lot-sibling-body h3 {
  margin: 4px 0 8px; font-size: .86rem; font-family: var(--font-body); font-weight: 700; line-height: 1.35;
}

@media (max-width: 960px) {
  .lot-dossier-grid { grid-template-columns: 1fr; }
  .lot-manifest { padding: 24px 22px 24px 30px; }
  .lot-coldchain { grid-template-columns: 1fr; }
  .lot-coldchain li { flex-direction: row; justify-content: flex-start; text-align: left; gap: 10px; }
}
@media (max-width: 640px) {
  .lot-trail { font-size: .66rem; }
  .lot-fact-grid { grid-template-columns: 1fr; }
  .lot-buy-form { flex-direction: column; align-items: stretch; }
  .btn-lot-add { width: 100%; }
}

/* —— Crate manifest cart —— */
.page-crate-cart .page-main {
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 320px);
}
.crate-cart { padding: 28px 0 56px; }
.crate-cart-head { margin-bottom: 28px; max-width: 640px; }
.crate-cart-head h1 {
  font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  margin: 8px 0 10px; color: var(--navy);
}
.crate-cart-head h1 em { font-style: italic; color: var(--teal); }
.crate-cart-lede { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.55; }

.crate-empty {
  text-align: center; max-width: 420px; margin: 48px auto 24px;
}
.crate-empty-box {
  position: relative; width: 120px; height: 100px; margin: 0 auto 24px;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(165deg, #2f261c, #15120e);
  border: 2px dashed rgba(247, 201, 72, 0.4);
}
.crate-empty-lid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  padding: 10px 8px 0;
}
.crate-empty-lid i {
  display: block; height: 4px; border-radius: 2px;
  background: rgba(247, 201, 72, 0.35);
  font-style: normal;
}
.crate-empty-mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .2em; color: rgba(250, 248, 245, 0.35);
}
.crate-empty h2 { font-size: 1.2rem; margin: 0 0 8px; color: var(--navy); }
.crate-empty p { margin: 0 0 20px; color: var(--muted); font-size: .92rem; }

.crate-cart-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(20px, 3vw, 32px); align-items: start;
}
.crate-manifest-count {
  margin: 0 0 14px; font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.crate-lines {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.crate-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto auto;
  gap: 16px; align-items: center;
  padding: 16px 18px 16px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  position: relative;
}
.crate-line::before {
  content: '';
  position: absolute; top: 12px; bottom: 12px; left: 8px; width: 5px;
  background:
    radial-gradient(circle at 50% 6px, var(--line) 2px, transparent 2px) center top / 5px 12px repeat-y;
}
.crate-line::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  opacity: 0.65;
}
.crate-line-thumb {
  display: block; overflow: hidden; border-radius: 8px;
  background: var(--cream-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.crate-line-thumb img { display: block; width: 88px; height: 88px; object-fit: cover; }
.crate-line-sku {
  display: block; font-size: .58rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.crate-line-info h2 {
  margin: 4px 0 2px; font-size: .95rem; font-family: var(--font-body); font-weight: 700; line-height: 1.35;
}
.crate-line-info h2 a { color: var(--navy); }
.crate-line-info h2 a:hover { color: var(--teal); }
.crate-line-pack { margin: 0; font-size: .78rem; color: var(--muted); }
.crate-line-unit { font-size: .72rem; color: var(--muted); }
.crate-line-qty { text-align: center; min-width: 72px; }
.crate-line-qty label {
  display: block; margin-bottom: 6px;
  font-size: .6rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.crate-qty-select {
  width: 100%; padding: 8px 28px 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235a6278' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center;
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--navy);
  cursor: pointer; appearance: none; -webkit-appearance: none;
}
.crate-line-total { text-align: right; min-width: 72px; }
.crate-line-total-label {
  display: block; font-size: .58rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.crate-line-total strong {
  display: block; margin-top: 4px; font-family: var(--font-display);
  font-size: 1.05rem; color: var(--navy);
}
.crate-form-actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px;
}

.crate-dispatch-ticket {
  position: sticky; top: 200px;
  padding: 28px 22px 24px;
  background: linear-gradient(165deg, var(--navy) 0%, #141c2e 100%);
  color: var(--cream);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(91, 192, 190, 0.3);
  box-shadow: 0 16px 40px rgba(10, 14, 23, 0.2);
  overflow: hidden;
}
.crate-ticket-notch {
  position: absolute; left: 0; right: 0; height: 8px;
  background:
    radial-gradient(circle at 8px 50%, var(--cream) 5px, transparent 5px) repeat-x;
  background-size: 16px 8px;
  opacity: 0.35;
}
.crate-ticket-notch-top { top: 0; }
.crate-ticket-notch-bottom { bottom: 0; }
.crate-ticket-stamp {
  display: inline-block; margin-bottom: 12px; padding: 5px 12px;
  border: 2px solid var(--gold); color: var(--gold);
  font-size: .62rem; font-weight: 800; letter-spacing: .22em;
  transform: rotate(-2deg);
}
.crate-ticket-title {
  margin: 0 0 18px; font-family: var(--font-display); font-size: 1.25rem;
}
.crate-ticket-rows { margin: 0 0 16px; }
.crate-ticket-rows div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px dashed rgba(250, 248, 245, 0.15);
  font-size: .88rem;
}
.crate-ticket-rows dt { margin: 0; font-weight: 500; opacity: 0.82; }
.crate-ticket-rows dd { margin: 0; font-weight: 700; }
.crate-ticket-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 0; margin-bottom: 16px;
  border-top: 2px solid rgba(247, 201, 72, 0.35);
  font-size: .88rem;
}
.crate-ticket-total strong {
  font-family: var(--font-display); font-size: 1.65rem; color: var(--gold);
}
.crate-ticket-notes {
  list-style: none; margin: 0 0 20px; padding: 0;
  font-size: .74rem; opacity: 0.72; line-height: 1.7;
}
.crate-ticket-notes li::before { content: '◆ '; color: var(--teal); font-size: .55rem; }
.crate-checkout-btn {
  display: block; width: 100%; text-align: center; text-decoration: none;
}

@media (max-width: 960px) {
  .crate-cart-layout { grid-template-columns: 1fr; }
  .crate-dispatch-ticket { position: static; }
}
@media (max-width: 640px) {
  .crate-line {
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto;
  }
  .crate-line-thumb img { width: 72px; height: 72px; }
  .crate-line-qty,
  .crate-line-total {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: space-between;
    text-align: left; padding-top: 8px; border-top: 1px dashed var(--line);
  }
  .crate-line-qty { flex: 1; }
  .crate-qty-select { max-width: 120px; }
}

/* —— Cold-chain clearance gate (checkout) —— */
.page-clearance-gate .page-main {
  background: linear-gradient(180deg, var(--cream) 0%, #eef6f6 240px, var(--white) 100%);
}
.clearance-gate { padding: 28px 0 64px; }
.clearance-head { margin-bottom: 20px; max-width: 640px; }
.clearance-head h1 {
  font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  margin: 8px 0 10px; color: var(--navy);
}
.clearance-head h1 em { font-style: italic; color: var(--teal); }
.clearance-lede { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.55; }

.clearance-coldstrip {
  display: flex; align-items: center; gap: 14px;
  max-width: 420px; margin-bottom: 22px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(91, 192, 190, 0.12), rgba(91, 192, 190, 0.04));
  border: 1px solid rgba(91, 192, 190, 0.35);
  border-radius: var(--radius-lg);
}
.coldstrip-label {
  font-size: .62rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #1a4f4e; white-space: nowrap;
}
.coldstrip-bar {
  flex: 1; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), #7dd3fc, var(--teal));
  background-size: 200% 100%;
  animation: coldstrip-flow 3s linear infinite;
}
@keyframes coldstrip-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.coldstrip-temp {
  font-size: .72rem; font-weight: 800; color: var(--navy);
  padding: 3px 8px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
}

.clearance-steps {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 20px;
}
.clearance-step {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; color: var(--muted);
}
.clearance-step.is-active { color: var(--navy); }
.step-num {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 800;
  background: var(--cream-2); border: 1px solid var(--line);
}
.clearance-step.is-active .step-num {
  background: var(--teal); border-color: var(--teal); color: var(--navy);
}

.clearance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(20px, 3vw, 32px); align-items: start;
}

.clearance-manifest {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.clearance-notch {
  display: block; height: 7px;
  background:
    radial-gradient(circle at 7px 50%, var(--cream) 4px, transparent 4px) repeat-x;
  background-size: 14px 7px;
}
.clearance-notch-bottom { transform: rotate(180deg); }
.clearance-manifest-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 24px 28px 0;
}
.clearance-stamp {
  flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 3px double var(--teal);
  font-size: .72rem; font-weight: 900; letter-spacing: .06em;
  color: #1a4f4e; background: var(--teal-pale);
  transform: rotate(-8deg);
}
.clearance-code {
  margin: 0 0 4px; font-size: .6rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.clearance-manifest-head h2 {
  margin: 0; font-family: var(--font-display); font-size: 1.35rem; color: var(--navy);
}
.clearance-error { margin: 16px 28px 0; }

.clearance-form { padding: 20px 28px 28px; }
.clearance-block {
  margin: 0 0 24px; padding: 0; border: 0;
}
.clearance-block legend {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 0;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--navy);
}
.block-num {
  font-size: .62rem; font-weight: 800; letter-spacing: .1em;
  padding: 4px 8px; border-radius: var(--radius);
  background: var(--navy); color: var(--cream);
}
.clearance-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.clearance-fields-route { grid-template-columns: 1fr 1fr 1fr; }
.clearance-field-wide { grid-column: 1 / -1; }
.clearance-field { display: block; }
.field-label {
  display: block; margin-bottom: 6px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.clearance-field input,
.clearance-field textarea,
.clearance-field select {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream-2); font: inherit; font-size: .88rem; color: var(--navy);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.clearance-field input:focus,
.clearance-field textarea:focus,
.clearance-field select:focus {
  outline: none; border-color: var(--teal);
  background: var(--white); box-shadow: 0 0 0 3px rgba(91, 192, 190, 0.2);
}
.clearance-field input[readonly] {
  background: var(--white); color: var(--muted); cursor: default;
}
.field-hint {
  display: block; margin-top: 4px; font-size: .72rem; color: var(--muted);
}

.clearance-pay-single {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 14px 16px;
  background: var(--cream-2); border: 1px dashed var(--line);
  border-radius: var(--radius-lg); font-weight: 700; color: var(--navy);
}
.pay-seal-mark { color: var(--gold); font-size: .85rem; }

.clearance-pay-lanes {
  display: flex; flex-direction: column; gap: 10px;
}
.pay-lane { cursor: pointer; }
.pay-lane input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.pay-lane-body {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.pay-lane-mark { font-size: .85rem; color: var(--muted); }
.pay-lane-name { font-weight: 700; font-size: .9rem; color: var(--navy); }
.pay-lane input:checked + .pay-lane-body {
  border-color: var(--teal);
  background: var(--teal-pale);
  box-shadow: 0 0 0 3px rgba(91, 192, 190, 0.15);
}
.pay-lane input:checked + .pay-lane-body .pay-lane-mark { color: var(--teal); }
.pay-lane:hover .pay-lane-body { border-color: rgba(91, 192, 190, 0.45); }

.clearance-submit {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding-top: 8px; border-top: 1px dashed var(--line);
}
.clearance-seal-btn { min-width: 220px; text-align: center; }

.clearance-weighbridge { position: relative; }
.weighbridge-frame {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  z-index: 2; padding: 6px 20px;
  background: linear-gradient(180deg, #3a4458, var(--navy));
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid rgba(250, 248, 245, 0.12);
}
.weighbridge-lights {
  display: flex; gap: 8px;
}
.weighbridge-lights i {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 6px rgba(91, 192, 190, 0.6);
  font-style: normal;
}
.weighbridge-lights i:nth-child(2) { background: var(--gold); box-shadow: 0 0 6px rgba(247, 201, 72, 0.5); }
.weighbridge-lights i:nth-child(3) { background: #51cf66; box-shadow: 0 0 6px rgba(81, 207, 102, 0.5); }

.weighbridge-slip {
  position: sticky; top: 200px;
  padding: 36px 22px 24px;
  background: linear-gradient(165deg, var(--navy) 0%, #141c2e 100%);
  color: var(--cream);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(91, 192, 190, 0.3);
  box-shadow: 0 16px 40px rgba(10, 14, 23, 0.2);
}
.weighbridge-notch {
  position: absolute; left: 0; right: 0; height: 8px;
  background:
    radial-gradient(circle at 8px 50%, var(--cream) 5px, transparent 5px) repeat-x;
  background-size: 16px 8px;
  opacity: 0.35;
}
.weighbridge-notch-top { top: 0; }
.weighbridge-notch-bottom { bottom: 0; }
.weighbridge-kicker {
  margin: 0 0 4px; font-size: .58rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--teal);
}
.weighbridge-title {
  margin: 0 0 18px; font-family: var(--font-display); font-size: 1.2rem;
}
.weighbridge-lines {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 280px; overflow-y: auto;
}
.weighbridge-line {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  padding-bottom: 10px; border-bottom: 1px dashed rgba(250, 248, 245, 0.12);
}
.weighbridge-thumb {
  display: block; overflow: hidden; border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}
.weighbridge-thumb img { display: block; width: 44px; height: 44px; object-fit: cover; }
.weighbridge-line-info {
  display: flex; flex-direction: column; gap: 2px;
  font-size: .78rem; line-height: 1.35;
}
.weighbridge-line-info strong { font-weight: 700; }
.weighbridge-line-info span { opacity: 0.72; font-size: .72rem; }
.weighbridge-line-price {
  font-family: var(--font-display); font-size: .88rem; font-weight: 700;
  white-space: nowrap;
}
.weighbridge-totals {
  margin: 0 0 12px;
}
.weighbridge-totals div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; font-size: .84rem;
  border-bottom: 1px dashed rgba(250, 248, 245, 0.1);
}
.weighbridge-totals dt { margin: 0; opacity: 0.8; }
.weighbridge-totals dd { margin: 0; font-weight: 700; }
.weighbridge-grand {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0; margin-bottom: 12px;
  border-top: 2px solid rgba(247, 201, 72, 0.35);
  font-size: .88rem;
}
.weighbridge-grand strong {
  font-family: var(--font-display); font-size: 1.55rem; color: var(--gold);
}
.weighbridge-notes {
  list-style: none; margin: 0; padding: 0;
  font-size: .72rem; opacity: 0.72; line-height: 1.7;
}
.weighbridge-notes li::before { content: '◆ '; color: var(--teal); font-size: .55rem; }

@media (max-width: 960px) {
  .clearance-layout { grid-template-columns: 1fr; }
  .weighbridge-slip { position: static; }
  .clearance-fields-route { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .clearance-fields,
  .clearance-fields-route { grid-template-columns: 1fr; }
  .clearance-submit { flex-direction: column; align-items: stretch; }
  .clearance-seal-btn { width: 100%; }
  .clearance-coldstrip { max-width: none; }
}

/* —— Cold-chain transit beacon (order status) —— */
.page-transit-beacon .page-main {
  background: linear-gradient(180deg, #0a0e17 0%, var(--navy) 220px, var(--cream) 220px, var(--white) 100%);
}
.transit-beacon { padding: 28px 0 64px; }
.beacon-head { margin-bottom: 24px; max-width: 640px; color: var(--cream); }
.page-beacon-lost .beacon-head { color: var(--navy); }
.beacon-head h1 {
  font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  margin: 8px 0 10px;
}
.beacon-head h1 em { font-style: italic; color: var(--teal); }
.beacon-lede { margin: 0; font-size: .92rem; opacity: 0.82; line-height: 1.55; }
.page-beacon-lost .beacon-beacon-head .beacon-lede { color: var(--muted); opacity: 1; }

.beacon-console { margin-top: 8px; }

.beacon-pulse-card {
  position: relative; overflow: hidden;
  margin-bottom: clamp(20px, 3vw, 28px);
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, #141c2e 0%, var(--navy) 100%);
  color: var(--cream);
  border: 1px solid rgba(91, 192, 190, 0.35);
  box-shadow: 0 20px 48px rgba(10, 14, 23, 0.35);
}
.beacon-pulse-ring {
  position: absolute; top: 50%; left: clamp(24px, 5vw, 48px);
  transform: translate(-50%, -50%);
  width: 140px; height: 140px; border-radius: 50%;
  border: 2px solid rgba(91, 192, 190, 0.35);
  animation: beacon-pulse 2.4s ease-out infinite;
}
.beacon-pulse-ring::before {
  content: ''; position: absolute; inset: 18px; border-radius: 50%;
  border: 1px solid rgba(247, 201, 72, 0.25);
}
@keyframes beacon-pulse {
  0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.9; }
  70% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
}
.beacon-pulse-card.beacon-transit .beacon-pulse-ring { border-color: rgba(247, 201, 72, 0.5); animation-duration: 1.8s; }
.beacon-pulse-card.beacon-delivered .beacon-pulse-ring { border-color: rgba(81, 207, 102, 0.5); animation: none; opacity: 0.5; }
.beacon-pulse-card.beacon-cancelled .beacon-pulse-ring { border-color: rgba(245, 180, 180, 0.4); animation: none; }

.beacon-pulse-core { position: relative; z-index: 1; padding-left: clamp(80px, 12vw, 120px); }
.beacon-kicker {
  margin: 0 0 4px; font-size: .6rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal);
}
.beacon-order-id {
  margin: 0 0 12px; font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem); word-break: break-all;
}
.beacon-status-pill {
  display: inline-block; margin-bottom: 18px;
  padding: 6px 14px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(250, 248, 245, 0.2);
}
.beacon-pulse-card.beacon-delivered .beacon-status-pill { background: rgba(81, 207, 102, 0.15); border-color: rgba(81, 207, 102, 0.4); color: #a5d6a7; }
.beacon-pulse-card.beacon-transit .beacon-status-pill { background: rgba(247, 201, 72, 0.12); border-color: rgba(247, 201, 72, 0.4); color: var(--gold); }
.beacon-pulse-card.beacon-cancelled .beacon-status-pill { background: rgba(245, 180, 180, 0.12); border-color: rgba(245, 180, 180, 0.4); color: #f5b4b4; }

.beacon-quick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 20px; margin: 0;
}
.beacon-quick div { font-size: .84rem; }
.beacon-quick dt {
  margin: 0 0 2px; font-size: .56rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; opacity: 0.65;
}
.beacon-quick dd { margin: 0; font-weight: 700; }

.beacon-body {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(260px, 300px);
  gap: clamp(16px, 2.5vw, 24px); align-items: start;
}

.beacon-panel-title {
  margin: 0 0 16px; font-family: var(--font-display);
  font-size: 1.05rem; color: var(--navy);
}

.beacon-route-panel,
.beacon-manifest-panel,
.beacon-signal-desk {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 22px 20px;
  box-shadow: var(--shadow-soft);
}

.beacon-conduit {
  list-style: none; margin: 0 0 20px; padding: 0 0 0 8px;
  position: relative;
}
.beacon-conduit::before {
  content: ''; position: absolute; top: 12px; bottom: 12px; left: 19px; width: 3px;
  background: linear-gradient(180deg, var(--line), var(--teal));
  border-radius: 999px;
}
.conduit-node {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  padding: 0 0 20px 0;
}
.conduit-node:last-child { padding-bottom: 0; }
.conduit-marker {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .62rem; font-weight: 800;
  background: var(--cream-2); border: 2px solid var(--line);
  color: var(--muted); z-index: 1;
}
.conduit-copy { padding-top: 2px; }
.conduit-copy strong {
  display: block; font-size: .84rem; color: var(--navy); margin-bottom: 2px;
}
.conduit-copy span { font-size: .72rem; color: var(--muted); line-height: 1.4; }
.conduit-node.is-done .conduit-marker {
  background: var(--teal); border-color: var(--teal); color: var(--navy);
}
.conduit-node.is-active .conduit-marker {
  background: var(--gold); border-color: var(--gold); color: var(--navy);
  box-shadow: 0 0 0 4px rgba(247, 201, 72, 0.25);
}
.conduit-node.is-active .conduit-copy strong { color: var(--teal); }

.beacon-route-cancelled {
  padding: 16px; margin-bottom: 20px;
  background: var(--coral-pale); border: 1px dashed rgba(146, 43, 33, 0.25);
  border-radius: var(--radius-lg);
}
.route-cancel-stamp {
  display: inline-block; margin-bottom: 8px;
  padding: 4px 10px; border: 2px double #922b21;
  font-size: .62rem; font-weight: 900; letter-spacing: .14em;
  color: #922b21; transform: rotate(-3deg);
}
.beacon-route-cancelled p { margin: 0; font-size: .84rem; color: #922b21; }

.beacon-delivery-strip {
  padding: 14px; background: var(--cream-2);
  border-radius: var(--radius-lg); border: 1px dashed var(--line);
}
.beacon-delivery-strip h4 {
  margin: 0 0 8px; font-size: .62rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.beacon-delivery-strip p { margin: 0 0 4px; font-size: .84rem; color: var(--navy-mid); line-height: 1.5; }
.beacon-phone { font-weight: 700; color: var(--navy); margin-top: 8px !important; }

.beacon-manifest {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 320px; overflow-y: auto;
}
.beacon-manifest-line {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding-bottom: 10px; border-bottom: 1px dashed var(--line);
}
.beacon-line-thumb {
  display: block; overflow: hidden; border-radius: 8px; background: var(--cream-2);
}
.beacon-line-thumb img { display: block; width: 48px; height: 48px; object-fit: cover; }
.beacon-line-info { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; }
.beacon-line-info span { font-size: .72rem; color: var(--muted); }
.beacon-line-price {
  font-family: var(--font-display); font-size: .92rem; font-weight: 700; color: var(--navy);
  white-space: nowrap;
}
.beacon-manifest-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; border-top: 2px solid rgba(91, 192, 190, 0.35);
  font-size: .88rem;
}
.beacon-manifest-total strong {
  font-family: var(--font-display); font-size: 1.4rem; color: var(--navy);
}

.beacon-signal-desk {
  background: linear-gradient(165deg, var(--navy) 0%, #141c2e 100%);
  color: var(--cream); border-color: rgba(91, 192, 190, 0.3);
}
.signal-desk-head { margin-bottom: 18px; }
.signal-desk-light {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #51cf66; box-shadow: 0 0 8px rgba(81, 207, 102, 0.7);
  margin-bottom: 10px; animation: signal-blink 2s ease-in-out infinite;
}
@keyframes signal-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.signal-desk-head h3 {
  margin: 0 0 6px; font-family: var(--font-display); font-size: 1.1rem; color: var(--gold);
}
.signal-desk-head p { margin: 0; font-size: .82rem; opacity: 0.78; }

.signal-desk-form { display: flex; flex-direction: column; gap: 12px; }
.signal-field { display: block; }
.signal-label {
  display: block; margin-bottom: 5px;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; opacity: 0.72;
}
.signal-field input,
.signal-field select,
.signal-field textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid rgba(250, 248, 245, 0.18);
  border-radius: var(--radius); background: rgba(255, 255, 255, 0.08);
  color: var(--cream); font: inherit; font-size: .86rem;
}
.signal-field input:focus,
.signal-field select:focus,
.signal-field textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(91, 192, 190, 0.2);
}
.signal-field select option { color: var(--navy); background: var(--white); }
.signal-send { width: 100%; text-align: center; }

.signal-log {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px dashed rgba(250, 248, 245, 0.15);
}
.signal-log h4 {
  margin: 0 0 12px; font-size: .62rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal);
}
.signal-log-item {
  padding: 12px 0; border-bottom: 1px dashed rgba(250, 248, 245, 0.1);
  font-size: .82rem;
}
.signal-log-item strong { display: block; margin-bottom: 4px; color: var(--gold); }
.signal-log-item p { margin: 0 0 4px; opacity: 0.85; line-height: 1.45; }
.signal-log-item time { font-size: .72rem; opacity: 0.55; }

.beacon-foot-links {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px;
}

.transit-beacon-lost { padding: 64px 0; }
.beacon-lost-card {
  max-width: 440px; margin: 0 auto; text-align: center;
  padding: 40px 28px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-soft);
}
.beacon-lost-ring {
  width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px dashed rgba(91, 192, 190, 0.45);
  color: var(--muted); font-size: 1.6rem; font-weight: 800;
  animation: beacon-pulse 2.4s ease-out infinite;
}
.beacon-lost-card h1 { margin: 0 0 8px; font-size: 1.35rem; color: var(--navy); }
.beacon-lost-card p { margin: 0 0 20px; color: var(--muted); font-size: .92rem; }
.beacon-lost-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

@media (max-width: 960px) {
  .beacon-body { grid-template-columns: 1fr 1fr; }
  .beacon-signal-desk { grid-column: 1 / -1; }
  .beacon-pulse-core { padding-left: clamp(70px, 10vw, 100px); }
}
@media (max-width: 640px) {
  .page-transit-beacon .page-main {
    background: linear-gradient(180deg, var(--navy) 0, var(--navy) 160px, var(--cream) 160px);
  }
  .beacon-body { grid-template-columns: 1fr; }
  .beacon-pulse-core { padding-left: 0; padding-top: 72px; }
  .beacon-pulse-ring { top: 36px; left: 50%; transform: translate(-50%, -50%); }
  @keyframes beacon-pulse {
    0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.9; }
    70% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
  }
  .beacon-foot-links { flex-direction: column; }
  .beacon-foot-links .btn { width: 100%; text-align: center; }
}

/* —— Lot pinboard registry (orders) —— */
.page-lot-pinboard .page-main {
  background: linear-gradient(180deg, #ebe4d8 0%, var(--cream) 280px, var(--white) 100%);
}
.lot-pinboard { padding: 28px 0 64px; }
.pinboard-head { margin-bottom: 28px; max-width: 640px; }
.pinboard-head h1 {
  font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  margin: 8px 0 10px; color: var(--navy);
}
.pinboard-head h1 em { font-style: italic; color: var(--teal); }
.pinboard-lede { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.55; }

.pinboard-frame {
  position: relative;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, #6b4f2e, #4a3520);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    0 20px 48px rgba(10, 14, 23, 0.18);
}
.pinboard-frame-guest { max-width: 560px; margin: 32px auto 0; min-height: 320px; }
.pinboard-cork {
  position: absolute; inset: 10px;
  border-radius: calc(var(--radius-xl) - 6px);
  background-color: #c4a574;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.06) 0, transparent 45%),
    repeating-linear-gradient(
      37deg,
      transparent 0,
      transparent 3px,
      rgba(90, 60, 30, 0.04) 3px,
      rgba(90, 60, 30, 0.04) 4px
    );
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.pinboard-toolbar {
  position: relative; z-index: 2;
  display: flex; gap: 8px; margin-bottom: 16px;
}
.toolbar-chip {
  padding: 4px 10px; border-radius: 999px;
  font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(10, 14, 23, 0.55); color: var(--cream);
  border: 1px solid rgba(250, 248, 245, 0.15);
}
.toolbar-chip-gold { color: var(--gold); border-color: rgba(247, 201, 72, 0.35); }

.pinboard-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(18px, 3vw, 28px);
  padding: 8px 4px 12px;
}

.pin-pushpin {
  position: absolute; top: -10px; left: 50%; z-index: 4;
  transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0d060, #c9a020 45%, #8a6914 100%);
  box-shadow:
    0 2px 4px rgba(10, 14, 23, 0.35),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2);
}
.pin-pushpin::after {
  content: ''; position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 8px;
  background: linear-gradient(180deg, #8a6914, transparent);
}

.lot-pin-card {
  position: relative;
  background:
    repeating-linear-gradient(
      transparent 0,
      transparent 23px,
      rgba(91, 192, 190, 0.07) 23px,
      rgba(91, 192, 190, 0.07) 24px
    ),
    linear-gradient(180deg, #fffef9 0%, #faf6ee 100%);
  border: 1px solid rgba(10, 14, 23, 0.1);
  border-radius: 3px;
  box-shadow:
    2px 4px 12px rgba(10, 14, 23, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  transition: transform .25s ease, box-shadow .25s ease;
}
.lot-pin-card.tilt-a { transform: rotate(-1.2deg); }
.lot-pin-card.tilt-b { transform: rotate(0.8deg); }
.lot-pin-card.tilt-c { transform: rotate(-0.5deg); }
.lot-pin-card.tilt-d { transform: rotate(1.4deg); }
.lot-pin-card:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.01);
  box-shadow: 4px 12px 28px rgba(10, 14, 23, 0.18);
  z-index: 3;
}

.pin-barcode {
  position: absolute; top: 18px; bottom: 18px; left: 10px; width: 6px;
  background: repeating-linear-gradient(
    180deg,
    var(--navy) 0, var(--navy) 2px,
    transparent 2px, transparent 4px,
    var(--navy) 4px, var(--navy) 5px,
    transparent 5px, transparent 8px
  );
  opacity: 0.35;
  border-radius: 1px;
}
.pin-card-body { padding: 22px 18px 16px 28px; }
.pin-card-head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 12px;
}
.pin-stamp {
  flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 3px double currentColor;
  transform: rotate(-12deg);
  font-size: .58rem; font-weight: 900; letter-spacing: .04em;
}
.pin-stamp.status-placed { color: var(--navy-mid); background: var(--cream-2); }
.pin-stamp.status-confirmed { color: #1a4f4e; background: var(--teal-pale); }
.pin-stamp.status-shipped { color: #7a5c00; background: var(--gold-pale); }
.pin-stamp.status-delivered { color: #2e7d32; background: #e8f5e9; }
.pin-stamp.status-cancelled { color: #922b21; background: var(--coral-pale); }
.pin-stamp-text { transform: rotate(12deg); }
.pin-label {
  display: block; font-size: .54rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1px;
}
.pin-card-id strong {
  font-family: var(--font-display); font-size: .98rem; color: var(--navy);
  word-break: break-all;
}
.pin-card-meta {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin-bottom: 10px; font-size: .82rem; color: var(--navy);
}
.pin-card-notes {
  margin: 0 0 12px; padding-left: 10px;
  border-left: 2px solid rgba(91, 192, 190, 0.45);
  font-size: .82rem; line-height: 1.5; color: var(--navy-mid);
  font-style: italic;
}
.pin-card-foot {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px;
  align-items: end;
  padding-top: 12px;
  border-top: 1px dashed rgba(10, 14, 23, 0.15);
}
.pin-card-total strong {
  font-family: var(--font-display); font-size: 1.25rem; color: var(--navy);
}
.pin-status-text {
  grid-column: 2; grid-row: 1;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; text-align: right;
}
.pin-status-text.status-placed { color: var(--muted); }
.pin-status-text.status-confirmed { color: #1a4f4e; }
.pin-status-text.status-shipped { color: #7a5c00; }
.pin-status-text.status-delivered { color: #2e7d32; }
.pin-status-text.status-cancelled { color: #922b21; }
.pin-track { grid-column: 1 / -1; justify-self: start; }
.pin-card-tear {
  display: block; height: 8px; margin-top: 2px;
  background:
    radial-gradient(circle at 6px 0, var(--cream) 4px, transparent 4px) repeat-x;
  background-size: 12px 8px;
  opacity: 0.7;
}

.pinboard-guest-card {
  position: relative; z-index: 2;
  max-width: 380px; margin: 48px auto 32px;
  padding: 32px 28px 28px;
  background: linear-gradient(180deg, #fffef9, #faf6ee);
  border: 1px solid rgba(10, 14, 23, 0.1);
  box-shadow: 3px 6px 20px rgba(10, 14, 23, 0.16);
  text-align: center;
  transform: rotate(-0.6deg);
}
.pin-guest-code {
  margin: 0 0 6px; font-size: .62rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal);
}
.pinboard-guest-card h2 { margin: 0 0 8px; font-size: 1.25rem; color: var(--navy); }
.pinboard-guest-card p { margin: 0 0 18px; font-size: .9rem; color: var(--navy-mid); line-height: 1.55; }
.pin-guest-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.pinboard-empty {
  position: relative; z-index: 2;
  text-align: center; padding: 48px 20px 32px;
}
.pin-empty-ghosts {
  position: relative; width: 200px; height: 120px; margin: 0 auto 28px;
}
.ghost-card {
  position: absolute; width: 100px; height: 72px;
  border: 2px dashed rgba(10, 14, 23, 0.12);
  border-radius: 3px;
  background: rgba(255, 254, 249, 0.35);
}
.ghost-card-a { top: 0; left: 10px; transform: rotate(-4deg); }
.ghost-card-b { top: 18px; right: 10px; transform: rotate(3deg); }
.ghost-pin {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(201, 160, 32, 0.45);
  box-shadow: 0 2px 6px rgba(10, 14, 23, 0.15);
}
.pinboard-empty h2 { margin: 0 0 8px; font-size: 1.2rem; color: var(--navy); }
.pinboard-empty p { margin: 0 0 20px; color: var(--muted); font-size: .92rem; }

@media (max-width: 640px) {
  .pinboard-grid { grid-template-columns: 1fr; }
  .lot-pin-card.tilt-a,
  .lot-pin-card.tilt-b,
  .lot-pin-card.tilt-c,
  .lot-pin-card.tilt-d { transform: none; }
  .lot-pin-card:hover { transform: translateY(-2px); }
  .pin-card-foot { grid-template-columns: 1fr; }
  .pin-status-text { grid-column: 1; text-align: left; }
  .pin-track { width: 100%; text-align: center; }
}

.page-panel { padding: 40px 0 56px; }
.dual { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.summary-box { position: sticky; top: 200px; background: var(--teal-pale); border-color: rgba(91, 192, 190, 0.35); }
.cart-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cart-table th, .cart-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.cart-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cart-table input { padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; }
.table-like { overflow-x: auto; }
.price-row { display: flex; justify-content: space-between; gap: 12px; }
.price-tag { color: var(--navy); font-size: 1.1rem; }
.inline-list { display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 4px; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); font: inherit; background: var(--white);
}
.form-grid textarea { min-height: 90px; resize: vertical; }
.notice { padding: 14px 16px; border-radius: var(--radius); background: var(--cream-2); border: 1px solid var(--line); }
.notice.error { border-color: #f5b4b4; background: var(--coral-pale); color: #922b21; }
.notice.success { border-color: #9dd9d8; background: var(--teal-pale); color: #1a4f4e; }
.notice.warning { border-color: #f0d78c; background: var(--gold-pale); }
.mini-copy { font-size: .85rem; color: var(--muted); margin: 0; }

/* Policy hooks */
.policy-page { padding: 40px 0 64px; }
.appily-six .policy-nav a.active { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.appily-six .policy-card { border-color: var(--line); box-shadow: var(--shadow-soft); }

/* Terrace footer */
.terrace-footer { margin-top: auto; background: var(--navy); color: var(--cream); position: relative; }
.terrace-skyline { position: relative; height: 48px; overflow: hidden; }
.sky-tier { position: absolute; left: 0; right: 0; }
.sky-tier-1 { bottom: 0; height: 18px; background: var(--teal); opacity: .25; }
.sky-tier-2 {
  bottom: 14px; height: 22px; background: var(--navy-mid);
  clip-path: polygon(0 100%, 8% 30%, 16% 70%, 24% 20%, 32% 65%, 40% 15%, 48% 60%, 56% 25%, 64% 75%, 72% 35%, 80% 80%, 88% 40%, 96% 55%, 100% 100%);
}
.sky-tier-3 {
  bottom: 28px; height: 28px; background: rgba(91, 192, 190, 0.15);
  clip-path: polygon(0 100%, 5% 50%, 12% 85%, 20% 40%, 28% 90%, 36% 35%, 44% 75%, 52% 30%, 60% 80%, 68% 45%, 76% 95%, 84% 50%, 92% 85%, 100% 100%);
}
.terrace-body { display: grid; grid-template-columns: 280px 1fr 240px; gap: 32px; padding: 36px 0 32px; align-items: start; }
.terrace-hub { display: flex; justify-content: center; }
.hub-ring { position: relative; width: 220px; height: 220px; display: grid; place-items: center; }
.hub-orbit { position: absolute; inset: 0; border: 2px dashed rgba(91, 192, 190, 0.35); border-radius: 50%; }
.hub-core {
  width: 170px; height: 170px; border-radius: 50%;
  background: linear-gradient(145deg, var(--navy-mid), var(--navy));
  border: 2px solid rgba(91, 192, 190, 0.4); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 20px;
  box-shadow: inset 0 0 0 6px rgba(91, 192, 190, 0.08);
}
.hub-core strong { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; }
.hub-core p { margin: 6px 0; font-size: .78rem; opacity: .75; }
.hub-stamp { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.terrace-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.terrace-col h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 12px; color: var(--teal); }
.terrace-col a { display: block; font-size: .86rem; opacity: .78; margin-bottom: 8px; }
.terrace-col a:hover { opacity: 1; color: var(--gold); }
.terrace-desk {
  padding: 18px; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(250, 248, 245, 0.1);
}
.terrace-desk h4 { margin: 0 0 12px; font-family: var(--font-display); color: var(--gold); }
.terrace-desk p { margin: 0 0 8px; font-size: .86rem; opacity: .82; }
.desk-muted { opacity: .65; font-size: .82rem; }
.desk-hours { color: var(--teal-pale); }
.desk-legal { font-size: .74rem; opacity: .55; margin-top: 12px; }
.terrace-base { border-top: 1px solid rgba(250, 248, 245, 0.1); padding: 16px 0; }
.terrace-base-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; font-size: .82rem; opacity: .65;
}
.terrace-base-inner a:hover { color: var(--gold); opacity: 1; }

/* Page accents & polish */
.page-home .hero-bento { border-bottom-color: rgba(91, 192, 190, 0.2); }
.page-exchange-shop .exchange-shop { background: linear-gradient(180deg, var(--cream) 0%, var(--white) 120px); }
.section-showcase { background: var(--cream-2); border-top: 1px solid var(--line); }
.section-showcase .section-head h2 { color: var(--navy); }
.shop-grid { gap: 18px; }
.exchange-shop .shop-results { min-width: 0; }

.bento-cell:hover { border-color: rgba(91, 192, 190, 0.45); }
.basket-tile:nth-child(3n+1) { border-top: 3px solid var(--teal); }
.basket-tile:nth-child(3n+2) { border-top: 3px solid var(--gold); }
.basket-tile:nth-child(3n) { border-top: 3px solid var(--coral); }
.product-img img { transition: transform .35s ease; }
.product-card:hover .product-img img { transform: scale(1.04); }
.pagination-btn:hover, .pagination-num:not(.is-active):hover {
  border-color: var(--teal); color: var(--navy); background: var(--teal-pale);
}

.lane-nav-centered { scroll-snap-type: x proximity; }
.lane-chip { scroll-snap-align: center; }
.filter-ladder { scroll-snap-type: x proximity; }
.ladder-rung { scroll-snap-align: start; }

.btn-light { background: var(--white); color: var(--navy); border-color: var(--line); }
.btn-outline-light { background: transparent; border-color: rgba(250, 248, 245, 0.45); color: var(--cream); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}
.exchange-search input:focus-visible { outline: none; }
.exchange-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(91, 192, 190, 0.25); }
.lane-toggle:focus-visible { outline-color: var(--gold); }

.order-list { display: grid; gap: 12px; margin-top: 18px; }
.order-row {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white);
}
.order-row:hover { border-color: rgba(91, 192, 190, 0.45); box-shadow: var(--shadow-soft); }
.panel h1, .panel h2 { margin-top: 0; color: var(--navy); }
.panel hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.summary-box .price-row strong { color: var(--navy); }

@media (min-width: 961px) {
  .hub-ring:hover .hub-orbit { border-color: rgba(247, 201, 72, 0.45); }
}

/* Scroll reveal (no keyframes) */
.reveal-ready { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
.reveal-in { opacity: 1; transform: translateY(0); }

@media (max-width: 960px) {
  .masthead-grid { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; }
  .lane-toggle { display: flex; grid-row: 1; }
  .exchange-brand { grid-row: 1; }
  .masthead-actions { grid-row: 1; grid-column: 3; }
  .exchange-search { grid-column: 1 / -1; width: 100%; }
  .ribbon-kicker { letter-spacing: .18em; }
  .lane-nav-centered {
    width: min(100%, 640px);
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .lane-join { margin: 0 1px; }
  .bento-shell, .product-layout, .dual, .exchange-shop .container { grid-template-columns: 1fr; }
  .filter-ladder { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
  .ladder-rung { flex-shrink: 0; min-width: 180px; }
  .bento-grid { grid-template-rows: repeat(2, 110px); }
  .basket-mosaic { grid-template-columns: 1fr 1fr; }
  .basket-tile, .basket-tile:nth-child(3n+1), .basket-tile:nth-child(3n+2), .basket-tile:nth-child(3n) { grid-column: span 1; }
  .basket-tile:first-child { grid-column: 1 / -1; }
  .terrace-body { grid-template-columns: 1fr; text-align: center; }
  .terrace-columns { grid-template-columns: 1fr 1fr; text-align: left; }
  .terrace-desk { text-align: left; }
  .form-grid { grid-template-columns: 1fr; }
  .summary-box { position: static; }
}

@media (max-width: 640px) {
  .container { width: min(1180px, calc(100% - 24px)); }
  .ribbon-center { align-items: stretch; }
  .lane-nav-centered { width: 100%; border-radius: var(--radius-lg); padding: 4px; }
  .lane-chip { padding: 8px 12px 8px 10px; font-size: .72rem; }
  .lane-mark { width: 20px; height: 20px; font-size: .52rem; }
  .ticker-badge { font-size: .58rem; }
  .brand-sub { display: none; }
  .masthead-cart .cart-label { display: none; }
  .bento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bento-hero { grid-column: 1 / -1; grid-row: auto; min-height: 240px; }
  .bento-sm { min-height: 100px; }
  .product-stagger-grid, .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .basket-mosaic { grid-template-columns: 1fr; }
  .section-head { align-items: flex-start; }
  .hero-stats { gap: 16px; }
  .spec-list { grid-template-columns: 1fr; }
  .terrace-columns { grid-template-columns: 1fr; }
  .cart-table { font-size: .78rem; }
  .cart-table th:nth-child(2), .cart-table td:nth-child(2) { display: none; }
  .terrace-base-inner { flex-direction: column; align-items: flex-start; }
}