/* ============================================================================
   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%);
}
.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); }
.sbs-shop-route .header .hamburger,
.sbs-checkout-route .header .hamburger { display: none !important; }

/* 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;
  }
}