/* ============================================================================
   sbs-chrome.css — app-standard overrides for the SHARED site chrome (the cart
   button + its count badge, header bar polish), so the revamped pages wear the
   iOS app's look instead of the legacy gold-pill chrome.

   Loaded LAST (after global.css / cart-overlay.css / mobile-menu.css) so these
   win by source order. Everything here is additive + class-scoped, so dropping
   this <link> onto any page propagates the app chrome without touching its HTML.
   ========================================================================== */

/* ---- Shared buyer masthead ---------------------------------------------------
   The native app keeps one contained 72pt crown bar. Website navigation,
   account links and marketing CTAs belong in the overflow / dock, not beside
   the purchase path. */
.header,
header.header {
  --sbs-header-safe-top: env(safe-area-inset-top, 0px);
  position: sticky;
  top: 0;
  z-index: 90;
  isolation: isolate;
  contain: paint;
  min-height: calc(72px + var(--sbs-header-safe-top));
  padding: 0 !important;
  /* Keep desktop hero/product artwork below the masthead. A translucent
     backdrop made imagery appear to overlap the header in macOS Safari. */
  background: #050505 !important;
  background: linear-gradient(180deg, #090909 0%, var(--sbs-bg-black, #000) 100%) !important;
  border-bottom: 1px solid var(--sbs-hairline-gold, rgba(212, 175, 55, 0.22)) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header .nav {
  position: relative !important;
  min-height: 72px;
  margin-top: var(--sbs-header-safe-top);
  padding: 0 var(--sbs-md, 16px) !important;
}

.header .nav-left,
.header .nav-right {
  position: static !important;
  display: contents !important;
}

.header .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  width: 60px;
  height: 52px;
  place-items: center;
  transform: translate(-50%, -50%);
}

.header .logo img {
  display: block;
  width: 52px;
  max-height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.34));
}

/* Website links are deliberately moved out of the fixed chrome. */
.header .nav-right .nav-link {
  display: none !important;
}

/* ---- Cart button: a clean icon button, NOT a loud labelled gold pill --------
   The app shows a single bag glyph with a small count pip. We collapse the
   112px uppercase pill to a 44×44 icon target on a dark surface. font-size:0
   swallows any stray text node (e.g. a leftover emoji); the badge + svg carry
   their own explicit sizes so they're unaffected. */
.cart-toggle,
.btn-basket {
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  gap: 0;
  background: var(--sbs-bg-card, #0a0a0a);
  border: 1px solid var(--sbs-border-subtle, rgba(212, 175, 55, 0.22));
  border-radius: 50%;   /* circular icon button — matches app-shell's pill buttons + the iOS toolbar look */
  color: var(--sbs-gold, #d4af37);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;
}

.header .cart-toggle,
.header .btn-basket {
  position: absolute !important;
  right: var(--sbs-md, 16px);
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

/* The app toolbar uses one icon family and one 44pt circular hit target.
   Keep the shared website menu from reintroducing three bespoke gold bars. */
.hamburger {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 3px !important;
  gap: 0 !important;
  border: 1px solid var(--sbs-border-subtle, rgba(212, 175, 55, 0.15)) !important;
  border-radius: 50% !important;
  background: var(--sbs-bg-card, #0a0a0a) !important;
  color: var(--sbs-gold-text, #d4af37) !important;
  transition: background var(--sbs-dur-fast, 180ms) var(--sbs-ease-out, ease), transform var(--sbs-dur-fast, 180ms) var(--sbs-ease-out, ease) !important;
}
.hamburger:hover { background: var(--sbs-bg-hover, #1a1a1a) !important; }
.hamburger:active { transform: scale(0.95); }
.hamburger svg,
.hamburger i[data-lucide] {
  width: var(--sbs-icon-size, 18px) !important;
  height: var(--sbs-icon-size, 18px) !important;
  stroke-width: 2 !important;
}
.hamburger.active svg { transform: rotate(90deg); }

.header .nav-right .nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--sbs-r-pill, 999px) !important;
  color: var(--sbs-text-secondary, #ccc);
}
.header .nav-right .nav-link:hover { color: var(--sbs-gold-text, #d4af37); }

.cart-toggle:hover,
.btn-basket:hover {
  background: var(--sbs-bg-hover, #1a1a1a);
  border-color: var(--sbs-gold, #d4af37);
  color: var(--sbs-gold-bright, #FFD700);
  box-shadow: var(--sbs-shadow-soft, 0 4px 12px rgba(0, 0, 0, .25));
}

.header .cart-toggle:hover,
.header .btn-basket:hover { transform: translateY(-50%); }

.cart-toggle:active,
.btn-basket:active {
  transform: scale(var(--sbs-press-scale, 0.96));
  box-shadow: none;
}
.header .cart-toggle:active,
.header .btn-basket:active { transform: translateY(-50%) scale(var(--sbs-press-scale, 0.96)); }

.cart-toggle svg,
.cart-toggle [data-lucide],
.btn-basket svg {
  width: 22px;
  height: 22px;
  stroke-width: var(--sbs-icon-stroke, 2.25);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The iOS convention is bag.fill, not a thin empty outline. */
.cart-toggle svg {
  fill: currentColor;
}

/* Count pip → small gold dot on the dark button (on-brand; black text is AA on
   gold). cart-manager already hides it at 0 via visibility, so no 0-state here. */
.cart-toggle .cart-count,
.btn-basket .btn-basket__badge {
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--sbs-gold, #d4af37);
  color: var(--sbs-bg-black, #000);
  border: 2px solid var(--sbs-bg-black, #000);
  border-radius: 999px;
  font-size: var(--sbs-fs-micro, 0.6875rem);
  font-weight: var(--sbs-fw-heavy, 800);
}

/* Hide the count pip when the basket is empty (cart-manager sets data-count) —
   also kills the initial "0" flash before cart-manager's first update. */
.cart-toggle .cart-count[data-count="0"],
.btn-basket .btn-basket__badge[data-count="0"] { display: none; }

/* The leading utility lives in the same 44pt lane as the native header's
   socials / close control. */
.hamburger {
  position: absolute !important;
  left: var(--sbs-md, 16px);
  top: 50%;
  z-index: 2;
  /* mobile-menu.css pins a GPU layer with translateZ(0) !important. Keep that
     optimisation without letting it erase the vertical centring transform. */
  -webkit-transform: translateY(-50%) translateZ(0) !important;
  transform: translateY(-50%) translateZ(0) !important;
}
.hamburger:active {
  -webkit-transform: translateY(-50%) translateZ(0) scale(var(--sbs-press-scale, 0.96)) !important;
  transform: translateY(-50%) translateZ(0) scale(var(--sbs-press-scale, 0.96)) !important;
}

/* Light theme: keep the same shape, theme-aware surfaces. */
:root[data-theme="light"] .cart-toggle,
:root[data-theme="light"] .btn-basket {
  background: var(--sbs-bg-card, #fff);
  border-color: var(--sbs-border-subtle, rgba(203, 213, 225, 0.8));
  color: var(--sbs-gold-text, #8A6D1A);
}
:root[data-theme="light"] .cart-toggle:hover,
:root[data-theme="light"] .btn-basket:hover {
  background: var(--sbs-bg-hover, #E9EDF2);
}

/* ---- Native buyer header lanes -------------------------------------------
   The feed's left lane is the actual iOS social/updates trio, while sheet
   routes use the same 44pt close/basket geometry. Keep every glyph in one
   locally-owned symbol family instead of mixing a hamburger with web icons. */
.sbs-header-leading {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 6px;
  display: inline-flex;
  align-items: center;
  transform: translateY(-50%);
}

/* The leading chip (bell) and the burger were designed for the SAME 44pt
   lane — only one ever showed while the dock owned shop navigation. With
   the dock retired (22 Aug) both render, so on routes where the burger is
   visible the bell steps right of it: burger 16-60px, bell from 64px. */
.sbs-shop-route .sbs-header-leading,
.sbs-checkout-route .sbs-header-leading {
    left: 64px;
}
.sbs-header-chip,
.sbs-header-close,
.sbs-header-static-bag {
  position: relative;
  display: grid;
  width: var(--sbs-control-hit, 44px);
  height: var(--sbs-control-hit, 44px);
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--sbs-gold, #d4af37);
  background: transparent;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.header .cart-toggle,
.header .btn-basket {
  /* Keep the cart in the same 44pt hit lane as the social/update controls.
     Its visual disc lives on the shared 38pt inset below. */
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.sbs-header-chip::before,
.sbs-header-close::before,
.sbs-header-static-bag::before,
.header .cart-toggle::before,
.header .btn-basket::before {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--sbs-gold, #d4af37) 25%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--sbs-bg-card, #0a0a0a) 72%, transparent);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .08);
  content: "";
}
.sbs-header-chip .sbs-symbol,
.sbs-header-close .sbs-symbol,
.sbs-header-static-bag .sbs-symbol,
.header .cart-toggle svg,
.header .btn-basket svg {
  position: relative;
  width: 18px;
  height: 18px;
  color: currentColor;
}
.header .cart-toggle:hover,
.header .btn-basket:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.header .cart-toggle:hover::before,
.header .btn-basket:hover::before {
  border-color: color-mix(in srgb, var(--sbs-gold, #d4af37) 48%, transparent);
  background: var(--sbs-bg-hover, #1a1a1a);
}
.sbs-header-close {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: var(--sbs-md, 16px);
  transform: translateY(-50%);
  color: var(--sbs-text-secondary, #ccc);
}
.sbs-header-static-bag {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: var(--sbs-md, 16px);
  transform: translateY(-50%);
}
.sbs-header-chip:active,
.sbs-header-close:active { transform: scale(.94); }/* The burger was hidden here because the floating dock owned navigation on
   these routes. The dock was retired 22 Aug, so hiding it left shop and
   checkout with NO navigation at all. The burger is the nav again. */

/* Product detail owns its close/crown/basket overlay at every width. Keeping
   the shared masthead here created a second crown and two competing exits on
   desktop, while the mobile route was already correctly single-chrome. */
.sbs-product-route > .header { display: none !important; }

@media (max-width: 699px) {
  .sbs-shop-route .header .nav { padding-inline: 6px !important; }
}

/* Three 44pt social/update targets consume the centred crown's lane on the
   narrowest supported phones. Keep the useful updates control there and leave
   the external social links available at every normal phone width. */
@media (max-width: 359px) {
  .sbs-shop-route .sbs-header-leading .sbs-header-chip:not(.sbs-notification-trigger) {
    display: none;
  }
}