/* Purpose: Site header — announcement, top bar, category nav, clearance bar. Mobile-first. */

/* ---- Sticky header (all screens): reveal on scroll up, hide on scroll down ---- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  will-change: transform;
}
body.is-scrolled .site-header { box-shadow: var(--shadow-md); }
body.header-hidden .site-header { transform: translateY(-100%); }

/* ---- Row 1: announcement (marquee on mobile/tablet, static centered on desktop) ---- */
.announce { background: var(--color-primary); color: var(--color-on-navy-muted); overflow: hidden; }
.announce__viewport { overflow: hidden; }
.announce__track {
  display: flex; width: max-content;
  animation: announce-marquee 32s linear infinite;
}
.announce:hover .announce__track { animation-play-state: paused; }
.announce__group {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-6);
  padding-block: 8px; padding-inline-end: var(--space-6);
  font-size: var(--text-xs);
}
.announce__item { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.announce__track--slow { animation-duration: 46s; }
.announce__track--fast { animation-duration: 20s; }
@keyframes announce-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Desktop: no marquee — centered single row */
@media (min-width: 1200px) {
  .announce__track { width: 100%; animation: none; }
  .announce__group[aria-hidden="true"] { display: none; }
  .announce__group { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; padding-inline-end: 0; gap: var(--space-3) var(--space-6); }
}
/* Respect reduced motion — stop the scroll, center the content */
@media (prefers-reduced-motion: reduce) {
  .announce__track { animation: none; width: 100%; }
  .announce__group[aria-hidden="true"] { display: none; }
  .announce__group { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; padding-inline-end: 0; }
}
.announce__item .icon { width: 12px; height: 12px; color: var(--color-gold-light); }
.announce__accent { color: var(--color-gold-light); font-weight: var(--weight-medium); }
.announce__muted  { color: var(--color-on-navy-muted); font-weight: var(--weight-light); }

/* ---- Row 2: top bar ---- */
.topbar { background: #fff; border-bottom: 1px solid var(--color-border); }
/* Mobile/tablet: [hamburger] [logo] [icons] via space-between — equal gap on both sides of the logo (Figma 309:6788) */
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding-block: 10px;
}
.topbar__burger {
  display: inline-flex; align-items: center; justify-content: flex-start;
  width: 24px; height: 36px; flex: 0 0 auto;
  color: var(--color-primary); background: transparent; border: 0; padding: 0; cursor: pointer;
}
.topbar__burger .icon { width: 24px; height: 24px; stroke-width: 2; }
.topbar__burger:hover { color: var(--color-gold); }
.topbar__logo { flex: 0 0 auto; }
.topbar__logo img, .topbar__logo .custom-logo { height: 36px; width: auto; max-height: none; }
/* Icons: glyph 17px in 23.2px boxes, 8px gap — exact Figma 309:6790 (parent selector beats later .icon-btn base) */
@media (max-width: 1199px) {
  .topbar__icons { gap: 8px; }
  .topbar__icons .icon-btn { width: 23.2px; height: 36px; }
  .topbar__icons .icon-btn .icon { width: 17px; height: 17px; }
}
/* 600–1199: enough room to true-center the logo (screen centre), burger left / icons right */
@media (min-width: 600px) and (max-width: 1199px) {
  .topbar__inner { position: relative; }
  .topbar__logo { position: absolute; left: 50%; transform: translateX(-50%); }
}
@media (min-width: 1200px) {
  .topbar__burger { display: none; }
  .topbar__inner {
    position: static;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); padding-block: var(--space-4);
  }
  .topbar__logo { position: static; transform: none; }
  .topbar__logo img, .topbar__logo .custom-logo { height: auto; max-height: 44px; }
}
.topbar__util { display: none; }
@media (min-width: 1200px) { .topbar__util { display: flex; } }
.topbar__logo { flex: 0 0 auto; }
.util-menu { display: flex; flex-wrap: nowrap; gap: clamp(10px, 1vw, 16px); font-size: var(--text-sm); }
.util-menu > li { position: relative; white-space: nowrap; }
.util-menu a { color: var(--color-text); white-space: nowrap; }
.util-menu a:hover { color: var(--color-gold); }
/* "Shop Now!" (first item) + .is-sale = red */
.util-menu .is-sale, .util-menu a.is-sale,
.util-menu > li:first-child > a { color: var(--color-red); font-weight: var(--weight-medium); }
/* active page — bold text + gold underline (screenshot state) */
.util-menu .current-menu-item > a,
.util-menu .current_page_item > a,
.util-menu .current-menu-ancestor > a,
.util-menu .current-menu-parent > a { font-weight: var(--weight-semibold); }
.util-menu .current-menu-item::after,
.util-menu .current_page_item::after,
.util-menu .current-menu-ancestor::after,
.util-menu .current-menu-parent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--color-gold);
}
/* dropdown caret */
.util-menu .menu-item-has-children > a::after { content: " ▾"; opacity: 0.6; }
/* dropdown panel */
.util-menu .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 200px;
  display: flex; flex-direction: column; gap: 0;
  background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  padding: var(--space-2) 0; z-index: var(--z-dropdown);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base);
}
.util-menu > li:hover > .sub-menu,
.util-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.util-menu .sub-menu a { display: block; padding: var(--space-2) var(--space-4); color: var(--color-text); }
.util-menu .sub-menu a:hover { color: var(--color-gold); background: var(--color-bg-alt); }

.topbar__logo { flex-shrink: 0; }
.topbar__logo img { max-height: 44px; width: auto; }
.topbar__logo-text { font-weight: var(--weight-semibold); font-size: var(--text-xl); color: var(--color-primary); }

.topbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.topbar__cta { display: none; }
@media (min-width: 1200px) { .topbar__cta { display: inline-flex; padding: var(--space-3) var(--space-3); } }

.topbar__icons { display: flex; align-items: center; gap: var(--space-2); }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 36px; color: var(--color-primary);
  padding: 0; border: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.icon-btn .icon { width: 18px; height: 18px; }
.icon-btn:hover { color: var(--color-gold); }
.icon-btn__badge {
  position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--radius-full);
  background: var(--color-gold); color: var(--color-primary);
  font-size: 10px; font-weight: var(--weight-semibold);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* ---- Row 3: category nav ---- */
.catbar { background: var(--color-primary); color: var(--color-on-navy-muted); }
.catbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
/* Mobile/tablet: no visible category bar — hamburger (in top bar) opens the drawer instead */
@media (max-width: 1199px) {
  .catbar__inner { padding-block: 0; }
  .catbar { position: relative; }   /* anchor for the drawer below the main bar */
}

.catbar__nav { display: none; }
@media (min-width: 1200px) { .catbar__nav { display: block; flex: 1 1 auto; min-width: 0; } }
.cat-menu { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-light); }
@media (min-width: 1200px) {
  .cat-menu { flex-wrap: nowrap; gap: clamp(9px, 1.33vw, 21px); }
  .cat-menu a, .cat-menu li { white-space: nowrap; }
}
.cat-menu a { color: var(--color-on-navy-muted); }
.cat-menu a:hover,
.cat-menu .current-menu-item > a,
.cat-menu .current-menu-ancestor > a { color: var(--color-gold-light); }
.cat-menu .menu-item-has-children > a::after { content: " ▾"; opacity: 0.7; }

/* ===== Mobile off-canvas drawer (<1200): slides in from the left, fixed width, backdrop + close ===== */
@media (max-width: 1199px) {
  .catbar__nav {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(360px, 86vw); height: 100dvh;
    background: var(--color-primary);
    padding: var(--space-4) var(--space-5) var(--space-8);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(-100%); visibility: hidden;
    transition: transform var(--duration-base) var(--ease-out), visibility var(--duration-base);
    z-index: var(--z-modal); box-shadow: var(--shadow-lg);
  }
  body.nav-open .catbar__nav { transform: translateX(0); visibility: visible; }
  body.nav-open { overflow: hidden; }   /* lock page scroll while drawer open */

  .cat-menu { display: none; }              /* desktop category bar — not in the drawer */
  .catbar__mobextra { display: block; margin-top: var(--space-5); }
}

/* Drawer menu (Mobile location) — vertical list; shown in the drawer, hidden on desktop catbar */
.catbar__mobmenu { display: block; }
@media (min-width: 1200px) { .catbar__mobmenu { display: none; } }
.drawer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.drawer-menu a {
  display: block; padding: var(--space-2) 0; font-size: var(--text-base); line-height: 1.4;
  color: var(--color-on-navy-muted); border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color var(--duration-base) var(--ease-out);
}
.drawer-menu a:hover { color: var(--color-gold-light); }
.drawer-menu .menu-item-has-children > a::after {
  content: " ▾"; opacity: 0.6; display: inline-block;
  transition: transform var(--duration-base) var(--ease-out);
}
.drawer-menu .menu-item-has-children.is-open > a::after { transform: rotate(180deg); }
/* Accordion submenu — collapsed by default, expands when parent has .is-open */
.drawer-menu .sub-menu {
  list-style: none; margin: 0; padding-left: var(--space-4);
  overflow: hidden; max-height: 0;
  transition: max-height var(--duration-base) var(--ease-out);
}
.drawer-menu .menu-item-has-children.is-open > .sub-menu { max-height: 60vh; }
.drawer-menu .sub-menu a { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.55); }
.drawer-menu img { max-height: 22px; width: auto; vertical-align: middle; }
/* Active menu item — gold */
.drawer-menu .current-menu-item > a,
.drawer-menu .current_page_item > a,
.drawer-menu .current-menu-ancestor > a,
.drawer-menu .current-menu-parent > a {
  color: var(--color-gold-light); font-weight: var(--weight-medium);
}

/* Close button (top of drawer) */
.catbar__close {
  align-self: flex-end; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-bottom: var(--space-2);
  background: transparent; border: 0; padding: 0; cursor: pointer; color: #fff;
  transition: color var(--duration-base) var(--ease-out);
}
.catbar__close .icon { width: 22px; height: 22px; stroke-width: 2; }
.catbar__close:hover { color: var(--color-gold-light); }
@media (min-width: 1200px) { .catbar__close, .catbar__mobextra { display: none !important; } }

/* Backdrop */
.nav-backdrop {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(8, 16, 28, 0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base);
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
@media (min-width: 1200px) { .nav-backdrop { display: none; } }
.catbar__mobutil-menu { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.catbar__mobutil-menu a { display: block; padding-block: var(--space-2); color: var(--color-on-navy-muted); font-size: var(--text-sm); border-bottom: 1px solid rgba(255,255,255,0.08); }
.catbar__mobutil-menu a:hover { color: var(--color-gold-light); }
.catbar__mobutil-menu .is-sale, .catbar__mobutil-menu > li:first-child > a { color: var(--color-red); font-weight: var(--weight-medium); }
.catbar__mobctas { display: flex; flex-direction: column; gap: var(--space-3); }
.catbar__mobctas .btn { width: 100%; justify-content: center; }
.catbar__mobctas .catbar__promo { justify-content: center; }

.catbar__promos { display: none; gap: var(--space-3); align-items: center; }
@media (min-width: 1200px) {
  .catbar__promos {
    display: flex;
    flex-shrink: 0;
    padding-left: var(--space-4);
  }
}
.catbar__promo {
  display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
  padding: var(--space-3) var(--space-3); font-size: var(--text-sm);
  font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0;
  white-space: nowrap;
}
.catbar__promo--gold { background: var(--color-gold-12); border: 1px solid var(--color-gold-30); }
.catbar__promo--gold span { color: var(--color-gold-light); }
.catbar__promo--outline { border: 1px solid #fff; color: #fff; }
.catbar__promo--outline:hover { background: #fff; color: var(--color-primary); }

/* ---- Row 4: clearance (responsive on all screens) ---- */
.clearbar { background: var(--color-cream); border-bottom: 1px solid var(--color-gold-30); }
.clearbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-2) var(--space-4); padding-block: var(--space-3); text-align: center;
}
@media (min-width: 1024px) {
  .clearbar__inner { flex-wrap: nowrap; justify-content: space-between; text-align: left; padding-block: var(--space-2); }
}
.clearbar__text { font-size: var(--text-xs); font-weight: var(--weight-light); color: var(--color-text); line-height: 1.5; }
.clearbar__text p { margin: 0; }
.clearbar__text strong { font-weight: var(--weight-semibold); }
.clearbar__cta { flex-shrink: 0; padding: var(--space-2) var(--space-4); }
@media (max-width: 1199px) { .clearbar { display: none; } }

/* ===== Product search overlay ===== */
/* Absolute dropdown under the header so it overlays the page instead of pushing the header/catbar down. */
.searchbar {
  position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-overlay);
  background: #fff; border-top: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 100%); overflow: hidden;
}
.searchbar[hidden] { display: none; }
.searchbar__inner { padding-block: var(--space-4); display: flex; flex-direction: column; max-height: inherit; }
.searchbar__form { display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-3); }
.searchbar__icon { display: inline-flex; color: var(--color-primary); flex: 0 0 auto; }
.searchbar__icon .icon { width: 20px; height: 20px; }
.searchbar__input { flex: 1 1 auto; min-width: 0; border: none; background: none; font-family: var(--font-body); font-size: var(--text-md); color: var(--color-text); padding: 6px 0; }
.searchbar__input:focus { outline: none; }
/* Hide browser-native search clear (✕) so only our own close button shows */
.searchbar__input::-webkit-search-cancel-button,
.searchbar__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.searchbar__input::-ms-clear { display: none; }
.searchbar__close { display: inline-flex; background: none; border: none; color: var(--color-text-muted); cursor: pointer; flex: 0 0 auto; }
.searchbar__close .icon { width: 18px; height: 18px; }
.searchbar__close:hover { color: var(--color-primary); }
.searchbar__results { margin-top: var(--space-3); display: flex; flex-direction: column; overflow-y: auto; }
.search-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; color: var(--color-text); }
.search-item + .search-item { border-top: 1px solid var(--color-border); }
.search-item:hover { color: var(--color-gold); }
.search-item__img { width: 48px; height: 48px; object-fit: cover; flex: 0 0 auto; background: var(--color-bg-alt); border: 1px solid var(--color-border); }
.search-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-item__title { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item__price { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); }
.search-item__price .woocommerce-Price-amount { font-family: var(--font-body); }
.searchbar__all { display: inline-block; margin-top: var(--space-3); font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-primary); }
.searchbar__all:hover { color: var(--color-gold); }
.searchbar__empty { padding: var(--space-3) 0; color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--text-sm); }