/* ─── Header-specific styles ─────────────────────────────────────────────── */

/* Search bar hidden/visible toggle (replaces Framer Motion height animation) */
.search-bar-hidden {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}
/* When JS removes this class the transition kicks in via CSS */
#search-bar:not(.search-bar-hidden) {
  max-height: 300px;
  opacity: 1;
  pointer-events: auto;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Nav active underline — gradient bar under active item */
.nav-underline {
  display: block;
}

/* Header scroll shadow — added by JS */
#site-header.scrolled {
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
}

/* Mobile nav drawer */
#mobile-nav {
  will-change: transform;
}

/* Cart drawer */
#cart-drawer {
  will-change: transform;
}

#cart-drawer-scroll {
  scrollbar-width: none;
}
#cart-drawer-scroll::-webkit-scrollbar {
  display: none;
}

/* Checkout drawer/bottom-sheet styles now live entirely in checkout.css
   (the 2026 redesign). Keeping them out of here avoids ID-specificity
   conflicts with the new .co-* design system. */

/* Custom logo image reset inside header circle */
#site-header .custom-logo-link,
#site-header .custom-logo-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Font utility (Manrope for latin text) */
.font-latin {
  font-family: var(--font-manrope, 'Manrope', system-ui, sans-serif);
}

/* ─── Missing brand/danger Tailwind utilities ─────────────────────────────── */
.bg-brand\/8 { background-color: hsl(var(--brand) / 0.08); }
.bg-brand\/15 { background-color: hsl(var(--brand) / 0.15); }
.text-brand\/80 { color: hsl(var(--brand) / 0.8); }
.text-brand\/90 { color: hsl(var(--brand) / 0.9); }
.ring-brand\/20 { --tw-ring-color: hsl(var(--brand) / 0.2); }
.border-danger\/40 { border-color: hsl(var(--danger) / 0.4); }
.bg-danger\/\[0\.04\] { background-color: hsl(var(--danger) / 0.04); }
.ring-danger\/20 { --tw-ring-color: hsl(var(--danger) / 0.2); }
.hover\:border-danger\/30:hover { border-color: hsl(var(--danger) / 0.3); }
.hover\:bg-danger\/10:hover { background-color: hsl(var(--danger) / 0.1); }
.hover\:text-danger:hover { color: hsl(var(--danger)); }

/* ─── Thank-you page — phone notice gold styling ──────────────────────────── */
.store-ty-phone-notice {
  border: 1px solid hsl(var(--brand) / 0.2);
  background-color: hsl(var(--brand) / 0.08);
}
.store-ty-phone-notice .store-ty-phone-icon {
  color: hsl(var(--brand));
}
.store-ty-phone-notice .store-ty-phone-text {
  color: hsl(var(--brand) / 0.9);
}

.ty-page .text-brand,
#checkout-modal .text-brand {
  color: hsl(var(--brand));
}