/* ═══════════════════════════════════════════════════════════════════════
   KOBAYASHI SHARED SHELL STYLES, nav, footer, logo slider
   Paired with shell.js. All tokens come from theme.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* Offset body content so fixed nav (top: 24px with a preview banner above) doesn't overlap */
body { padding-top: 0; }

/* ── NAVIGATION ─────────────────────────────────────────────────────── */
.kb-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: hsl(var(--background));
  /* No bottom rule on the header itself. The only line in the menu is the one
     under the utility strip, between it and the main row. The 1px box-shadow
     layer that used to sit here drew a second identical line, so it goes with
     the border; the soft drop shadow stays for depth. */
  box-shadow: 0 8px 24px -16px hsl(0 0% 0% / 0.5);
}
html.light .kb-nav {
  box-shadow: 0 8px 24px -16px hsl(30 10% 14% / 0.08);
}

/* ── Utility bar: thin desktop-only strip above the main row ─────────── */
.kb-nav__utility {
  display: none;
  border-bottom: 1px solid hsl(var(--border));
}
.kb-nav__utility-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 32px;
}

/* Light mode: the utility strip inverts to a black bar with white text, so
   the header keeps a strong brand edge instead of washing into the page. */
html.light .kb-nav__utility {
  background: hsl(0 0% 7%);
  border-bottom-color: hsl(0 0% 7%);
}
html.light .kb-nav__utility-link,
html.light .kb-nav__utility-phone {
  color: hsl(0 0% 100% / 0.74);
}
html.light .kb-nav__utility-link:hover,
html.light .kb-nav__utility-link.is-active,
html.light .kb-nav__utility-phone:hover {
  color: hsl(0 0% 100%);
}
html.light .kb-nav__utility .kb-nav__social a {
  color: hsl(0 0% 100% / 0.74);
}
html.light .kb-nav__utility .kb-nav__social a:hover {
  color: hsl(0 0% 100%);
  background: hsl(0 0% 100% / 0.12);
}

/* ── Social icons: quiet line icons, shared by the utility bar and the
   mobile menu's Follow Us row ─────────────────────────────────────── */
.kb-nav__social { display: flex; align-items: center; gap: 4px; }
.kb-nav__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: hsl(var(--muted-foreground));
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.kb-nav__social a:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--secondary));
}
.kb-nav__social svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Mobile menu variant: larger tappable tiles in a row */
.kb-nav__social--mobile { gap: 10px; padding: 8px 0 4px; }
.kb-nav__social--mobile a {
  width: 44px; height: 44px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
}
.kb-nav__social--mobile svg { width: 19px; height: 19px; }
.kb-nav__utility-phone,
.kb-nav__utility-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color 0.2s;
}
.kb-nav__utility-phone:hover,
.kb-nav__utility-link:hover,
.kb-nav__utility-link.is-active {
  color: hsl(var(--foreground));
}
.kb-nav__utility-phone svg {
  width: 13px; height: 13px;
  stroke: hsl(var(--primary));
  flex: none;
}
.kb-nav__utility-links { display: flex; gap: 18px; }
.kb-nav__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 32px;
}
.kb-nav__logo { display: flex; height: 34px; flex-shrink: 0; }
.kb-nav__logo img { height: 100%; width: auto; filter: var(--logo-filter); }

.kb-nav__toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: transparent;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  cursor: pointer;
}
.kb-nav__toggle svg { width: 20px; height: 20px; }

.kb-nav__links {
  display: flex;
  gap: 2px;
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
}
.kb-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.85rem;
  color: hsl(var(--foreground) / 0.92);
  padding: 8px 14px;
  border-radius: var(--radius);
  transition: color 0.2s, background 0.2s;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.kb-nav__link:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--secondary));
}
.kb-nav__link.is-active {
  color: hsl(var(--foreground));
}
.kb-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: hsl(var(--primary));
  border-radius: 2px;
}
.kb-nav__caret {
  width: 12px; height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 0.2s;
}
/* Bar Matcher trigger: small magnifier icon + label */
.kb-nav__matcher { display: inline-flex; align-items: center; gap: 6px; }
.kb-nav__matcher svg { width: 14px; height: 14px; flex: none; }
.kb-nav__has-menu:hover .kb-nav__caret,
.kb-nav__has-menu.is-open .kb-nav__caret {
  transform: rotate(180deg);
}

.kb-nav__has-menu {
  position: relative;
}
.kb-nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 300px;
  padding: 8px;
  background: hsl(var(--background-elev));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 10;
}
.kb-nav__has-menu:hover .kb-nav__menu,
.kb-nav__has-menu:focus-within .kb-nav__menu,
.kb-nav__has-menu.is-open .kb-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.kb-nav__menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: hsl(var(--foreground));
  border-radius: var(--radius);
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.kb-nav__menu-item:hover {
  background: hsl(var(--secondary));
  color: hsl(var(--primary));
}
.kb-nav__menu-size {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 44px;
  padding: 3px 8px;
  font-family: var(--font-condensed);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em;
  color: hsl(var(--primary));
  background: hsl(350 72% 44% / 0.1);
  border: 1px solid hsl(350 72% 44% / 0.25);
  border-radius: 6px;
}
.kb-nav__menu-divider {
  height: 1px;
  background: hsl(var(--border));
  margin: 6px 8px;
}
.kb-nav__menu-item--all {
  color: hsl(var(--primary));
  font-weight: 500;
}
/* "By Use Case" subhead inside the Cocktail Stations dropdown */
.kb-nav__menu-eyebrow {
  padding: 8px 12px 4px;
  font-family: var(--font-condensed);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.kb-nav__menu-item--usecase {
  padding-left: 12px;
}
.kb-nav__menu-item--usecase span {
  font-size: 0.85rem;
}

/* Neutral variant of the stock-note pill: no green pill, no pulsing dot,
   smaller body-text style. Used for long disclosures (e.g. Portable Bar
   conversion kit notice) rather than fast-ship stock callouts. */
.info__stock-note.info__stock-note--neutral {
  display: block;
  background: transparent;
  color: hsl(var(--muted-foreground));
  border: none;
  padding: 6px 0 0;
  margin-top: 8px;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  animation: none;
}
.info__stock-note.info__stock-note--neutral::before {
  display: none;
}

.kb-nav__cta {
  background: hsl(var(--primary));
  color: hsl(var(--white));
  padding: 9px 18px;
}
.kb-nav__cta:hover {
  background: hsl(var(--primary-hover));
  color: hsl(var(--white));
}
/* Mobile actions wrapper (theme + hamburger), desktop hides it */
.kb-nav__mobile-actions { display: none; align-items: center; gap: 4px; }
.kb-nav__mobile-actions button {
  /* Skip iOS 300ms tap delay so the hamburger fires reliably on first
     tap. Default touch-action is `auto` which lets the browser wait
     and see if it's a scroll/zoom gesture. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.kb-nav__theme-mobile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius, 0.5rem);
  color: hsl(var(--foreground));
  cursor: pointer;
  position: relative;
}
.kb-nav__theme-mobile:hover { border-color: hsl(var(--border)); background: hsl(var(--secondary)); }
.kb-nav__theme-mobile .kb-nav__theme-icon {
  position: absolute;
  width: 20px; height: 20px;
  color: hsl(var(--primary));
  transition: opacity 0.2s, transform 0.3s;
}
.kb-nav__theme-mobile .kb-nav__theme-icon--sun  { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.kb-nav__theme-mobile .kb-nav__theme-icon--moon { opacity: 1; transform: rotate(0) scale(1); }
html.light .kb-nav__theme-mobile .kb-nav__theme-icon--sun  { opacity: 1; transform: rotate(0) scale(1); }
html.light .kb-nav__theme-mobile .kb-nav__theme-icon--moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

/* Mobile cart icon (top bar, next to theme toggle + hamburger) */
.kb-nav__cart-mobile {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius, 0.5rem);
  color: hsl(var(--foreground));
  cursor: pointer;
}
.kb-nav__cart-mobile:hover { border-color: hsl(var(--border)); background: hsl(var(--secondary)); }
.kb-nav__cart-mobile svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }

/* In-menu theme toggle (mobile only) */
.kb-nav__theme-item { display: none; }
.kb-nav__theme {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  color: hsl(var(--foreground));
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.kb-nav__theme-icon { width: 18px; height: 18px; color: hsl(var(--primary)); flex-shrink: 0; }
.kb-nav__theme-icon--sun { display: none; }
html.light .kb-nav__theme-icon--sun { display: inline-block; }
html.light .kb-nav__theme-icon--moon { display: none; }

/* Top-bar phone link (desktop) */
.kb-nav__phone {
  display: inline-flex; align-items: center; gap: 8px;
  color: hsl(var(--foreground));
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.kb-nav__phone:hover { color: hsl(var(--primary)); }
.kb-nav__phone-icon { width: 15px; height: 15px; color: hsl(var(--primary)); flex-shrink: 0; }

/* Cart icon in the nav */
.kb-nav__cart-item { display: flex; align-items: center; margin-right: 8px; }
.kb-nav__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 8px;
  color: hsl(var(--foreground));
  cursor: pointer;
  border-radius: var(--radius, 0.5rem);
  transition: color 0.15s var(--ease, ease), background 0.15s var(--ease, ease);
}
.kb-nav__cart:hover { color: hsl(var(--primary)); background: hsl(var(--secondary)); }
.kb-nav__cart-icon { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.kb-nav__cart-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--primary));
  color: hsl(var(--white));
  font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: 100px;
  box-shadow: 0 0 0 2px hsl(var(--background));
}
.kb-nav__cart-badge[hidden] { display: none; }

/* Mobile bottom tab bar (compact shortcut to key pages) */
.kb-mobilebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: none;
  /* 5 equal columns. minmax(0,1fr) (not plain 1fr) so a wider label like
     "Products" can't stretch its column and unbalance the spacing. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: hsl(var(--background));
  border-top: 1px solid hsl(var(--border));
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  gap: 2px;
  z-index: 90;
  box-shadow: 0 -6px 24px hsl(0 0% 0% / 0.35);
  /* GPU-composite the bar so it sits on its own layer. The browser
     never has to repaint it during page scroll, which makes it feel
     rock-solid and means the first tap after a scroll lands instantly
     instead of waiting for the next paint frame. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* NO paint containment: the raised Build Quote circle overflows the
     bar's top edge and paint containment would clip it. */
  contain: layout style;
  /* No transitions on the bar itself, any animation here would feel
     like the menu is "moving while I scroll". */
  transition: none !important;
  animation: none !important;
}
.kb-mobilebar__item {
  /* Fill the entire grid cell so the WHOLE square is tappable, not just
     the icon/text. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 56px;
  place-self: stretch;
  gap: 4px;
  padding: 8px 2px;
  box-sizing: border-box;
  text-decoration: none;
  color: hsl(var(--muted-foreground));
  font-family: var(--font-sans);
  /* Slightly smaller so 6 labels (Portfolio, Matcher) breathe in the bar */
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 8px;
  /* INSTANT response, zero transition. Every previous transition here
     introduced a perceptible delay between tap and visual change, which
     people read as "I have to tap twice". Now the press feedback fires
     on the first frame. */
  transition: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.kb-mobilebar__item svg {
  width: 20px; height: 20px; stroke-width: 1.8;
  /* SVG children should not absorb the tap, the parent <a> must be the
     event target so the link follows on the first tap. */
  pointer-events: none;
}
.kb-mobilebar__item span { pointer-events: none; white-space: nowrap; }

/* ── Center "Build Quote" action ─────────────────────────────────────
   A raised red circle with the Kobayashi mark, floating above the bar.
   The one thing we want a mobile visitor to do: build their order. */
.kb-mobilebar__item--quote {
  color: hsl(var(--primary));
  font-weight: 700;
  gap: 5px;
  overflow: visible;
}
.kb-mobilebar__fab {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  margin-top: -32px;
  background: hsl(var(--primary));
  border-radius: 50%;
  border: 3px solid hsl(var(--background));
  box-shadow: 0 6px 18px hsl(350 72% 44% / 0.45), 0 2px 6px hsl(0 0% 0% / 0.45);
  pointer-events: none;
}
.kb-mobilebar__fab img { width: 46px; height: 46px; display: block; }
/* Light mode: the ring is drawn in the page background, which reads as a
   white gap around the mark. Match it to the circle so the whole thing is
   red, and lighten the drop shadow to suit the pale bar. */
html.light .kb-mobilebar__fab {
  border-color: hsl(var(--primary));
  box-shadow: 0 6px 18px hsl(350 72% 44% / 0.34), 0 2px 6px hsl(0 0% 0% / 0.16);
}
.kb-mobilebar__item--quote:active .kb-mobilebar__fab { transform: scale(0.93); }
/* The circle is always red; never restyle it via the active-page tint */
.kb-mobilebar__item--quote.is-active,
:root[data-kb-page="contact"] .kb-mobilebar__item--quote {
  background: transparent;
}
/* Hover styles ONLY apply on devices with a real mouse pointer. On
   touchscreens these used to "stick" after the first tap and force a
   second tap to actually navigate. */
@media (hover: hover) and (pointer: fine) {
  .kb-mobilebar__item:hover,
  .kb-mobilebar__item:focus-visible {
    color: hsl(var(--foreground));
    background: hsl(var(--background-elev));
  }
}
/* Brief tap feedback for touch devices, applies only while the finger
   is actively pressing, then releases instantly so navigation happens. */
.kb-mobilebar__item:active {
  background: hsl(var(--background-elev));
}
/* Active state, set by shell.js highlightActive() based on current
   URL. The Quote item used to live in primary red regardless of page;
   now red is reserved for the actual active page. */
.kb-mobilebar__item.is-active {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.12);
}
.kb-mobilebar__item.is-active svg { stroke: hsl(var(--primary)); }

/* CSS-only active state fallback, keyed off <html data-kb-page="..."> set
   by shell.js before any mount happens. Survives JS timing issues and
   stale-cache scenarios where `.is-active` never gets applied. */
:root[data-kb-page="contact"] .kb-mobilebar__item[href$="/contact/"],
:root[data-kb-page="shop"] .kb-mobilebar__item[href$="/shop/"],
:root[data-kb-page="client-portfolio"] .kb-mobilebar__item[href$="/client-portfolio/"],
:root[data-kb-page="about"] .kb-mobilebar__item[href$="/about/"] {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.12);
}
:root[data-kb-page="contact"] .kb-mobilebar__item[href$="/contact/"] svg,
:root[data-kb-page="shop"] .kb-mobilebar__item[href$="/shop/"] svg,
:root[data-kb-page="client-portfolio"] .kb-mobilebar__item[href$="/client-portfolio/"] svg,
:root[data-kb-page="about"] .kb-mobilebar__item[href$="/about/"] svg {
  stroke: hsl(var(--primary));
}

/* Mobile */
@media (max-width: 900px) {
  .kb-mobilebar { display: grid; }
  /* Keep page content from being hidden behind the fixed bottom bar */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .kb-nav__logo { height: 30px; }
  .kb-nav__utility { display: none; }
  /* The centered active-state dash looks stray under full-width sheet rows */
  .kb-nav__links .kb-nav__link.is-active::after { display: none; }
  /* Theme toggle lives inside the hamburger menu on mobile */
  .kb-nav__theme-item { display: block; }
  /* Hide the floating theme button on mobile, it's now in the menu */
  .kb-theme-toggle { display: none !important; }

  /* Cart icon already lives in the mobile top bar (next to the theme
     toggle + hamburger), so hide the in-menu cart row on mobile. */
  .kb-nav__cart-item { display: none; }

  /* Pull theme toggle to the TOP of the open mobile menu */
  .kb-nav__theme-item { order: -1; }

  /* Visual divider between the theme row and the link list */
  .kb-nav__theme-item {
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid hsl(var(--border));
  }
}

/* Mobile */
@media (max-width: 900px) {
  .kb-nav__inner { padding: 10px 20px; }
  .kb-nav__toggle { display: inline-flex; }
  .kb-nav__mobile-actions { display: inline-flex; }
  .kb-nav__links {
    position: absolute;
    top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    background: hsl(var(--background-elev));
    border-bottom: 1px solid hsl(var(--border));
    box-shadow: var(--shadow-lg);
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s, opacity 0.2s;
  }
  .kb-nav__links.is-open {
    max-height: 80vh;
    overflow-y: auto;
    opacity: 1;
  }
  .kb-nav__link { padding: 12px 14px; font-size: 0.9rem; }
  /* Move the Bar Design + Get Quote CTAs to the TOP of the open hamburger sheet
     and make them full-width, tappable buttons (instead of narrow, bottom-stacked). */
  .kb-nav__cta-li { order: -1; }
  .kb-nav__cta-li:last-of-type { margin-bottom: 8px; }
  .kb-nav__links.is-open .kb-nav__cta {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 14px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius);
  }
  .kb-nav__menu {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    padding: 4px 0 4px 24px;
    min-width: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
  }
  .kb-nav__has-menu.is-open .kb-nav__menu { display: block; }
  .kb-nav__menu-item { padding: 8px 10px; font-size: 0.82rem; }
  /* Footer-rollup sections inside the hamburger (Support / Contact / Legal) */
  .kb-nav__mobile-section {
    list-style: none;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid hsl(var(--border));
  }
  .kb-nav__section-label {
    font-family: var(--font-condensed);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    padding: 4px 14px 8px;
  }
  .kb-nav__sublink {
    display: block;
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
    color: hsl(var(--foreground)) !important;
  }
}
/* Hide mobile-only sections on desktop. */
@media (min-width: 901px) {
  .kb-nav__mobile-section { display: none; }
  .kb-nav__utility { display: block; }
  /* Theme toggle joins the main row as an icon-only button on desktop */
  .kb-nav__theme-item { display: block; }
  .kb-nav__theme-label { display: none; }
  .kb-nav__theme { padding: 8px; }
  /* The floating page-corner toggle is redundant once the nav has one */
  .kb-theme-toggle { display: none !important; }
  /* Cap tall dropdowns to the viewport, minus the taller two-row header,
     so their lower items are never clipped below the fold. The nav is fixed,
     so an over-tall dropdown can't be scrolled to, it just gets cut off until
     you zoom out. Scroll inside the menu instead. */
  .kb-nav__menu {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Products mega panel: three grouped columns. Mobile never sees this
     (below 901px the menu is position:static and stacks the columns). */
  .kb-nav__menu--mega {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 500px;
    max-width: calc(100vw - 64px);
    flex-wrap: wrap;
  }
  .kb-nav__menu-col { min-width: 210px; flex: 1; }
}

/* ── LOGO SLIDER ────────────────────────────────────────────────────── */
.kb-logos {
  padding: 56px 32px;
  background: hsl(var(--background-elev));
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
  overflow: hidden;
}
.kb-logos__label {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground-2));
  margin-bottom: 36px;
}
.kb-logos__track-wrap {
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.kb-logos__track {
  display: flex;
  align-items: center;
  gap: 88px;
  width: max-content;
  animation: kb-logo-scroll 120s linear infinite;
}
/* Pause-on-hover and scale-on-hover are scoped to actual mouse devices
   only (`hover: hover` + `pointer: fine`). On touchscreens iOS treats
   the first tap as a sticky :hover, which made tapped logos jitter
   and appear to "disappear" while the track was paused. */
@media (hover: hover) and (pointer: fine) {
  .kb-logos__track:hover { animation-play-state: paused; }
  .kb-logos__track img:hover { opacity: 1; transform: scale(1.06); }
  html.light .kb-logos__track img:hover,
  body.light .kb-logos__track img:hover {
    filter: grayscale(0%);
    opacity: 1;
  }
}

.kb-logos__track img {
  height: 84px;
  max-width: 240px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.3s, transform 0.3s, filter 0.3s;
  pointer-events: none; /* logos aren't links, keep iOS hover from latching */
}

/* DARK MODE, per-tone treatment so every logo reads on a #121212 surface:
   - Default (assumed "dark" = black/colored ink on transparent): invert to white
   - data-tone="light"  → already white/light, leave alone (just opacity)       */
.kb-logos__track img                       { filter: brightness(0) invert(1); }
.kb-logos__track img[data-tone="light"]    { filter: none; }
.kb-logos__track img[data-tone="dark"]     { filter: brightness(0) invert(1); }

/* LIGHT MODE, native colors, slight grayscale + dim. */
html.light .kb-logos__track img,
body.light .kb-logos__track img {
  filter: grayscale(100%);
  opacity: 0.55;
}

@keyframes kb-logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 700px) {
  .kb-logos { padding: 36px 16px; }
  .kb-logos__track { gap: 56px; animation-duration: 80s; }
  /* Bigger on mobile per request, easier to read at thumb distance */
  .kb-logos__track img { height: 80px; max-width: 220px; padding: 6px 0; opacity: 0.85; }
}

/* ── INSTAGRAM GRID ─────────────────────────────────────────────────── */
.kb-ig {
  padding: 64px 32px;
  background: hsl(var(--background));
  border-top: 1px solid hsl(var(--border));
}
.kb-ig__inner { max-width: 1120px; margin: 0 auto; }
.kb-ig__header {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin: 0 auto 28px;
  color: hsl(var(--foreground));
  transition: color 0.2s;
}
.kb-ig__header:hover { color: hsl(var(--primary)); }
.kb-ig__glyph { width: 22px; height: 22px; flex: none; }
.kb-ig__handle {
  font-family: var(--font-condensed);
  font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em;
}
.kb-ig__follow {
  font-family: var(--font-condensed);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: hsl(var(--muted-foreground-2));
  padding-left: 10px;
  border-left: 1px solid hsl(var(--border));
}
/* Behold's official widget renders the live grid inside .kb-ig__widget. The
   min-height reserves space so there's no layout jump before it populates. */
.kb-ig__widget { min-height: 220px; }
@media (max-width: 900px) {
  .kb-ig { padding: 48px 16px; }
  .kb-ig__header { flex-wrap: wrap; gap: 6px 10px; }
  .kb-ig__follow { border-left: none; padding-left: 0; }
}

/* ── FOOTER ─────────────────────────────────────────────────────────── */
.kb-footer {
  background: hsl(var(--sidebar-bg));
  border-top: 1px solid hsl(var(--border));
  padding: 60px 32px 28px;
}
.kb-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.kb-footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr) 2fr;
  gap: 40px 24px;
  margin-bottom: 40px;
}
@media (max-width: 1100px) {
  .kb-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .kb-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .kb-footer__grid { grid-template-columns: 1fr 1fr; }
}
.kb-footer__brand img {
  height: 28px;
  width: auto;
  margin-bottom: 14px;
  filter: var(--logo-filter);
}
.kb-footer__tagline {
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground-2));
  line-height: 1.65;
  max-width: 300px;
}
.kb-footer__col-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--foreground));
  margin-bottom: 14px;
}
/* Collapsible footer group (Koba Workflows) */
.kb-footer__collapse > summary.kb-footer__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.kb-footer__collapse > summary.kb-footer__summary::-webkit-details-marker { display: none; }
.kb-footer__collapse > summary.kb-footer__summary::after {
  content: '+';
  font-size: 1.1rem;
  line-height: 1;
  color: hsl(var(--primary));
}
.kb-footer__collapse[open] > summary.kb-footer__summary::after { content: '\2212'; }
/* Koba Workflows links split into two aligned columns under the summary */
.kb-footer__collapse-grid {
  column-count: 2;
  column-gap: 22px;
  margin-top: 2px;
}
.kb-footer__collapse-grid .kb-footer__link { break-inside: avoid; }
@media (max-width: 700px) {
  .kb-footer__collapse-grid { column-count: 1; }
}
.kb-footer__link {
  display: block;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground-2));
  padding: 4px 0;
  transition: color 0.15s;
  text-decoration: none;
}
.kb-footer__link:hover,
.kb-footer__link.is-active {
  color: hsl(var(--primary));
}
.kb-footer__madein {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 10px;
  font-family: var(--font-condensed);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
}
.kb-footer__madein svg {
  width: 14px; height: 14px;
}
.kb-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid hsl(var(--border));
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground-2));
}
@media (max-width: 600px) {
  .kb-footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════════
   HP-* SHARED COMPONENTS (Client Installations gallery, labels, buttons)
   Originally defined inline on the homepage; moved here so every PDP can
   render the same "Trusted by Bars and Hotels Worldwide" block.
   ══════════════════════════════════════════════════════════════════════ */
.hp-label {
  display: inline-flex; align-items: center;
  font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: 16px;
}
.hp-h2 {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: hsl(var(--foreground));
  margin-bottom: 22px;
}
.hp-h2 em { color: hsl(var(--primary)); font-style: normal; }

.hp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.2s var(--ease);
}
.hp-btn--ghost {
  background: transparent;
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
.hp-btn--ghost:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}
.hp-btn svg { width: 14px; height: 14px; }

/* ═══ FEATURED IN, press strip ═══
   Monochrome press wordmark strip used on homepage + every PDP.
   Logos are individual SVG files in /images/press/. */
.press-strip {
  padding: 48px 32px;
  background: hsl(var(--background-elev));
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
}
.press-strip__inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.press-strip__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: hsl(var(--muted-foreground-2));
  margin: 0 0 28px;
}
.press-strip__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 56px;
  color: hsl(var(--muted-foreground));
}
.press-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  opacity: 0.72;
  transition: opacity 0.2s ease;
}
.press-logo:hover { opacity: 1; }
.press-logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 180px;
  filter: brightness(0) invert(0);
}
html:not(.light) .press-logo img,
body:not(.light) .press-logo img {
  filter: brightness(0) invert(1);
}
@media (max-width: 700px) {
  .press-strip { padding: 32px 20px; }
  .press-strip__label { margin-bottom: 20px; font-size: 0.7rem; }
  .press-strip__logos { gap: 18px 32px; }
  .press-logo { height: 26px; }
  .press-logo img { max-width: 130px; }
}

.hp-gallery {
  padding: 100px 32px;
  max-width: 1440px;
  margin: 0 auto;
}
.hp-gallery__inner { max-width: 1280px; margin: 0 auto; }
.hp-gallery__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.hp-gallery__header-text { max-width: 640px; }
.hp-gallery__header .hp-h2 { margin-bottom: 0; }
.hp-gallery__header-sub {
  font-size: 1rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  margin: 14px 0 0;
}
.hp-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) { .hp-gallery__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .hp-gallery__grid { grid-template-columns: repeat(2, 1fr); } }

.hp-gallery__item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  text-decoration: none;
  display: block;
  background: hsl(var(--background-elev));
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.hp-gallery__item:hover {
  transform: translateY(-4px);
  border-color: hsl(350 72% 44% / 0.5);
}
.hp-gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.hp-gallery__item:hover img { transform: scale(1.08); }
.hp-gallery__item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background: linear-gradient(to top,
    hsl(0 0% 0% / 0.85) 0%,
    hsl(0 0% 0% / 0.3) 55%,
    transparent 100%);
}
.hp-gallery__item-name {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: hsl(0 0% 100%);
  line-height: 1.2;
}
.hp-gallery__item-loc {
  font-size: 0.78rem;
  color: hsl(0 0% 80%);
  margin-top: 4px;
}


/* Info-icon + CSS-only tooltip for Optional Add-Ons. Triggered by
   :hover, :focus, or .is-open (tap-to-toggle on mobile, wired in
   sale.js's tooltip helper or the inline addon click handler). */
.addon__info {
  appearance: none;
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid hsl(var(--border-strong));
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  padding: 0;
  position: relative;
  transition: color 0.15s, border-color 0.15s;
}
.addon__info:hover,
.addon__info:focus,
.addon__info.is-open {
  color: hsl(var(--foreground));
  border-color: hsl(var(--foreground));
  outline: none;
}
.addon__info::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  padding: 10px 12px;
  background: hsl(var(--background-elev-2));
  color: hsl(var(--foreground));
  font-family: inherit;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 60;
  white-space: normal;
}
.addon__info:hover::after,
.addon__info:focus::after,
.addon__info.is-open::after {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 640px) {
  /* On mobile the tooltip escapes the row and becomes a viewport-fixed
     banner near the top of the screen (below the nav). The icon's
     position in the row varies based on addon name length, so anchoring
     to the icon's right edge pushed the tooltip off the left side of
     the viewport on long content. Fixed positioning sidesteps all that
     and is the standard mobile tooltip / toast pattern. */
  .addon__info::after {
    position: fixed;
    top: 80px;
    left: 16px;
    right: 16px;
    bottom: auto;
    transform: none;
    width: auto;
    max-width: none;
    font-size: 0.82rem;
    padding: 12px 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
    z-index: 999;
  }
}


/* Bar Size picker, portable-bar PDP. Three buttons in a row showing
   the size, "Standalone" subtitle, and per-size estimated lead time.
   Clicking a button is a regular link that reloads with ?sku=… so the
   page re-renders against the new SKU's PRODUCTS data. */
.size-picker {
  margin: 16px 0 4px;
}
.size-picker__label {
  font-family: var(--font-condensed);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-bottom: 10px;
}
.size-picker__btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.size-picker__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 6px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  text-align: center;
  cursor: pointer;
}
.size-picker__btn:hover {
  border-color: hsl(var(--border-strong));
  background: hsl(var(--background-elev-2));
}
.size-picker__btn.is-active {
  border-color: hsl(var(--primary));
  background: hsla(var(--primary), 0.07);
}
.size-picker__size {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}
.size-picker__sub {
  font-size: 0.62rem;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.size-picker__lead {
  margin-top: 4px;
  font-size: 0.66rem;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .size-picker__btn { padding: 10px 4px; }
  .size-picker__size { font-size: 1.1rem; }
  .size-picker__lead { font-size: 0.6rem; }
}

/* On mobile the PDP's .info container becomes display:contents and its
   children get explicit `order` values to control vertical layout (header
   first, gallery second, addons/CTA at order:3, etc.). The size picker
   is a direct child of .info, match the order:3 group so it sits
   right above the Optional Add-Ons block on phone viewports instead of
   jumping to the very top of the column (its default order:0). */
@media (max-width: 960px) {
  .info > .size-picker { order: 3; }
}


/* Wider variant of size picker, 5 buttons for use-case PDPs
   (coffee/juice/mocktail) where size AND installation both vary.
   Auto-fits at 110px min so it gracefully wraps to fewer columns on
   tablet + mobile. */
.size-picker__btns--5 {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
@media (max-width: 480px) {
  .size-picker__btns--5 { grid-template-columns: repeat(2, 1fr); }
}

/* ── ElevenLabs voice widget: mobile kill-switch ──────────────────────────
   shell.js already skips injecting the widget under 900px, but this CSS
   guarantees it can never render on mobile (cached scripts, orientation
   changes, tablet edge cases) where the fixed bottom bar lives. */
@media (max-width: 900px) {
  elevenlabs-convai { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE READABILITY
   The status pill and the product stage were coloured for a dark page and
   wash out on a pale one. Every value below was measured against its own
   tinted background and clears 4.5:1.
   ═══════════════════════════════════════════════════════════════════════ */

/* Scarcity pill: the 400-level status colours sit at 1.8-3.4:1 on light. */
html.light .kb-scarcity__row--green  { color: #15803d; }
html.light .kb-scarcity__row--yellow { color: #a16207; }
html.light .kb-scarcity__row--orange { color: #c2410c; }
html.light .kb-scarcity__row--red    { color: #b91c1c; }
html.light .kb-scarcity__dot--green  { background: #15803d; }
html.light .kb-scarcity__dot--yellow { background: #a16207; }
html.light .kb-scarcity__dot--orange { background: #c2410c; }
html.light .kb-scarcity__dot--red    { background: #b91c1c; }
html.light .kb-scarcity__note        { color: hsl(var(--muted-foreground)); }
/* Firmer tints so the pill still reads as a panel on the off-white page. */
html.light .kb-scarcity--healthy { border-color: rgba(21, 128, 61, 0.34);  background: rgba(21, 128, 61, 0.07); }
html.light .kb-scarcity--last    { border-color: rgba(185, 28, 28, 0.34);  background: rgba(185, 28, 28, 0.06); }
html.light .kb-scarcity--slots   { border-color: rgba(194, 65, 12, 0.34);  background: rgba(194, 65, 12, 0.07); }
html.light .kb-scarcity--booked  { border-color: rgba(185, 28, 28, 0.42);  background: rgba(185, 28, 28, 0.09); }

/* ── "Slots fill up fast" note ─────────────────────────────────────────
   Trails the slot count as quiet text rather than a bordered chip, which
   read as clutter inside a pill that is already outlined and tinted. It
   takes the row's own colour at reduced weight and opacity, so it recedes
   behind the slot count while still carrying the nudge, and follows the
   light-mode overrides above without a second set of rules.
   The two-class selector beats the base .kb-scarcity__row rule that each
   product page still carries inline, so the row can wrap onto a second
   line on narrow screens instead of overflowing the pill. */
.kb-scarcity .kb-scarcity__row { flex-wrap: wrap; row-gap: 2px; align-items: flex-start; }
/* The row text is now its own span so it can shrink and wrap in place. Before
   this it was a bare text node, i.e. an anonymous flex item, which cannot wrap
   beside a sibling: the moment it stopped fitting next to the dot the whole
   item dropped to the next line and left the dot sitting alone on its own row.
   min-width:0 is what actually permits the shrink; flex-basis alone does not. */
/* flex-basis MUST be 0, not auto. With wrap enabled the browser decides line
   breaks from the hypothetical main size, so an auto basis means the text is
   measured at its full width, does not fit beside the dot, and wraps to the
   next line before flex-shrink is ever consulted. A zero basis makes it always
   fit, then grow into the space left over. */
.kb-scarcity .kb-scarcity__text { flex: 1 1 0; min-width: 0; }
/* Rows are top-aligned now so the dot stays on the first line of wrapped text.
   The nudge re-centres the 8px dot against that first line. */
.kb-scarcity .kb-scarcity__dot { margin-top: 0.42em; }
.kb-scarcity__urgent {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: currentColor;
  opacity: 0.6;
}

/* Product stage only: the page itself stays white, but the panel the station
   hovers on gets a soft off-white field. The renders are near-black and read
   as cut-outs against pure white. The red bloom goes too, which showed as a
   pink smear once the page turned pale. */
html.light .gallery__main,
html.light .cbd-tt__stage {
  background: linear-gradient(180deg, hsl(40 14% 94%) 0%, hsl(42 12% 90%) 100%);
}

/* Quote form: the injected stylesheet hardcodes light-grey helper text that
   drops under 3:1 once the page is pale. */
html.light .kbq-modal__sub,
html.light .kbq-step-sub,
html.light .kbq-progress__label,
html.light .kbq-prod-price,
html.light .kbq-spec,
html.light .kbq-spec--dims,
html.light .kbq-opt { color: hsl(var(--muted-foreground)) !important; }
html.light .kbq-modal__close { color: hsl(var(--muted-foreground)) !important; }
html.light .kbq-prod-name,
html.light .kbq-step-title,
html.light .kbq-section__label { color: hsl(var(--foreground)) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   TOPICAL LINK MESH
   The in-content block that ties each page to its pillar and its siblings.
   Deliberately quiet: no underlines, no bold, so it reads as a related list
   rather than a call to action, while still being real links in the markup.
   ═══════════════════════════════════════════════════════════════════════ */
.kb-mesh {
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px 32px 40px;
  border-top: 1px solid hsl(var(--border));
}
.kb-mesh__label {
  display: block;
  font-family: var(--font-condensed, var(--font-sans));
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: hsl(var(--muted-foreground-2));
  margin-bottom: 14px;
}
.kb-mesh__links {
  display: flex; flex-wrap: wrap;
  gap: 10px 26px;
}
.kb-mesh__links a {
  font-size: 0.88rem;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  border-bottom: 0;
  transition: color 0.15s ease;
}
.kb-mesh__links a:hover { color: hsl(var(--primary)); }
.kb-mesh__links a:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 3px; }
@media (max-width: 700px) {
  .kb-mesh { padding: 26px 20px 30px; }
  .kb-mesh__links { gap: 9px 20px; }
}

/* ── Quote CTA ──────────────────────────────────────────────────────────
   The quote button used .btn--primary, the same crimson as Add to Cart, so
   the page's two calls to action competed rather than ranked. This uses
   --kobayashi-gold, already declared in the palette and otherwise unused, so
   it is on brand while clearly not the buy button.

   Dark ink on gold, not white: white on this gold is 2.25:1 and fails contrast
   outright, while near-black is 8.34:1 and passes AAA. It also reads like a
   brass plate rather than a warning label. */
.btn--quote {
  background: hsl(var(--kobayashi-gold));
  color: #121212;
  border-color: hsl(var(--kobayashi-gold));
  font-weight: 700;
}
.btn--quote:hover {
  background: hsl(43 74% 55%);
  border-color: hsl(43 74% 55%);
  color: #121212;
}
.btn--quote svg { color: #121212; }


/* ── Product page: timeline note + social proof ──────────────────────────
   Injected by shell.js on the station PDPs, so the styling lives here rather
   than inline in nine near-identical pages that would drift apart. */
.lead-note {
  margin: 0 0 8px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}
.social-proof {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 2px;
  font-size: 0.83rem; line-height: 1.5;
  color: hsl(var(--muted-foreground));
}
.social-proof__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid hsl(var(--border-strong));
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.74rem; font-weight: 500;
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.social-proof__chip:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.social-proof__chip svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Brand marks keep their own colour so each platform is recognisable at a
   glance; the hover state recolours the count, not the mark. */
.social-proof__chip--yt svg { color: #FF0000; }
.social-proof__chip--ig svg { color: #E1306C; }

/* Mobile reflow. The .info column is explicitly ordered below 960px, so an
   element without an order rule falls to 0 and jumps above the product title.
   6 matches the quote CTA, and DOM order keeps the note above it; 8 is the
   slot the removed design-help link left behind. */
@media (max-width: 960px) {
  .info > .lead-note    { order: 6; }
  .info > .social-proof { order: 8; }
}