/* =============================================================================
   ANNOUNCEMENT BAR + HEADER

   ⚠ The announcement bar's colour could NOT be read from the computed-style
   capture: the wrapper measured `rgba(0,0,0,0)` because the paint comes from a
   Shopify colour-scheme class. The real values are in base.css under
   `.color-scheme-784cadd9-a70d-474f-bcab-83f7305b6bef`:
       --scheme-background-color: #b8006d   (brand magenta)
       --scheme-text-color:       #ffffff
   This is why the source CSS had to be downloaded — measurement alone would
   have produced a transparent bar with dark text, which is simply wrong.
   ============================================================================= */

.th-announce {
  position: relative;
  z-index: 101;                  /* source: section z-index 101, above the 100 header */
  display: block;
  line-height: 1.2;
  background: #b8006d;
  color: #fff;
  font-weight: var(--th-fw-semi);   /* measured 600 on the source bar */
}

.th-announce__inner {
  /* ⚠ Block only: the carousel arrows sat at x=0 against the screen edge.
     .th-container supplies the side gutter. */
  padding-block: 1rem;             /* source: .content-wrapper padding */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.th-announce__viewport {
  position: relative;
  flex: 1 1 auto;
  display: grid;                   /* slides stack, so the bar never jumps height */
}
.th-announce__msg { grid-area: 1 / 1; opacity: 0; pointer-events: none; }
.th-announce__msg.is-active { opacity: 1; pointer-events: auto; }

.th-announce__arrow {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1;
}
.th-announce__arrow:hover { opacity: .75; }

.th-announce__msg {
  margin: 0;
  text-align: center;
  font-family: var(--th-font);
  font-size: var(--th-fs-announce);   /* steps 14px -> 12px at 38em */
  line-height: var(--th-lh-announce);
  font-weight: var(--th-fw-semi);     /* 600 — source sets this explicitly */
  color: #fff;
}

/* =============================================================================
   HEADER — measured 84.8px, sticky, z-index 100, transparent, no border/shadow
   ============================================================================= */
.th-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--th-bg);
}

.th-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--th-header-h);
}

/* ---- logo, centred (source renders it 150x54 at x=645 on a 1440 viewport) ----
   ⚠ The wrapper must CENTRE its image, not just shrink-wrap. With the wrapper
   left-aligning a 120px logo, the mark sat at x=83 on a 390 viewport where it
   should be ~135 — visibly off-centre, while the wrapper itself measured
   correctly. Measure the IMAGE, not the box. */
.th-header__logo {
  flex: 0 0 auto;
  order: 2;
  display: flex;
  justify-content: center;
}
.th-logo { display: block; }
.th-logo__img { width: 150px; height: auto; display: block; }
.th-logo--text { font-weight: var(--th-fw-bold); font-size: 20px; }

.th-nav--left { order: 1; flex: 1 1 0; }
.th-header__utils { order: 3; flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

/* ---- primary nav ---- */
.th-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.th-nav__item { display: flex; align-items: center; }

/* ⚠ The MEGA panel must NOT be positioned by its own <li>.
   `.th-nav__item { position: relative }` made the absolutely-positioned mega
   anchor to the narrow SHOP item instead of the header, so `left:0; right:0`
   collapsed it to ~120px and all five columns stacked on top of each other,
   overlapping into unreadable text. Keeping the item STATIC lets the panel
   resolve against `.th-header` (which is `position: sticky`, and so is
   itself a containing block) and span the full width, as the source does.
   The LEARN dropdown is different — it IS anchored to its item, below. */
.th-nav__item--has-mega { position: static; }
.th-nav__item--has-dropdown { position: relative; }

.th-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;                   /* measured nav item height */
  padding: 0 10px;
  font-family: var(--th-font);
  font-size: var(--th-fs-base);
  line-height: var(--th-lh-base);
  /* Measured 700 on the live source (#header a.nav-1) ABOVE 48em; it drops to
     400 below that. The Phase 0 token dump reported 400 for the header as a
     whole, which is the container's value. Diffed, not assumed. */
  font-weight: var(--th-fw-nav);
  color: var(--th-text);
  background: none;
  border: 0;
  white-space: nowrap;
}
.th-nav__link:hover { text-decoration: none; }

/* SHOP's disclosure is a SEPARATE sibling button on the source — the label
   itself stays a real link to /collections/products. */
.th-nav__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 52px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--th-text);
}

.th-caret {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

/* ---- SHOP BEST SELLERS ----
   ⚠ A 20px PILL, black on white, 12px/600, height 25px — NOT the square
   brand CTA the global tokens imply. Straight from the source's own
   .btn-menu rule in an inline <style> block; the token dump could not show
   this. Hidden below 767px, also per source. */
.th-btn-menu {
  display: flex;
  align-items: center;
  height: 25px;
  padding: 0 15px;
  background-color: #000;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 20px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: var(--th-fw-semi);
  line-height: 0;
  white-space: nowrap;
}
.th-btn-menu:hover {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .th-header .th-btn-menu { display: none; }
}

/* ---- utility icons ---- */
.th-util {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 36px;
  background: none;
  border: 0;
  color: var(--th-text);
  position: relative;
}
.th-util:hover { text-decoration: none; }

/* ⚠ Measured BLACK on the source (rgb(0,0,0)), not the brand magenta —
   an easy and plausible thing to get wrong, since every other accent on the
   site is #b8006d. */
.th-cart-count {
  position: absolute;
  top: 2px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 10px;
  font-weight: var(--th-fw-bold);
  line-height: 16px;
  text-align: center;
}
.th-cart-count[hidden] { display: none; }

/* ---- burger (mobile) ---- */
.th-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  background: none;
  border: 0;
}
.th-burger-bar { display: block; width: 20px; height: 2px; background: currentColor; }

/* ---- mega menu ---- */
.th-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--th-bg);
  border-top: 1px solid var(--th-border);
  box-shadow: var(--th-shadow-sm);
  z-index: 99;
}
.th-mega[hidden] { display: none; }

.th-mega__inner {
  display: grid;
  /* three text columns, then two narrower image cards — as the source lays
     it out, not five equal columns. */
  grid-template-columns: repeat(3, minmax(0, 1fr)) 190px 190px;
  gap: 32px;
  padding-block: 32px 40px;
  align-items: start;
}

/* Headings are MAGENTA on the source, not black. */
.th-mega__heading {
  font-size: var(--th-fs-base);
  font-weight: var(--th-fw-bold);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 4px;
  padding-bottom: 8px;
  color: var(--th-btn-bg);
  border-bottom: 1px solid var(--th-border);
}
.th-mega__heading a { color: inherit; }

.th-mega__list { list-style: none; margin: 0; padding: 0; }

/* Each row is separated by a hairline, as the source has it. */
.th-mega__list li { border-bottom: 1px solid var(--th-border); }
.th-mega__list a {
  display: block;
  padding: 11px 0;
  font-size: var(--th-fs-base);
  color: var(--th-text);
}
.th-mega__list a:hover { color: var(--th-btn-bg); text-decoration: none; }

/* TRENDING / NEW carry an image above the heading. */
.th-mega__media { display: block; margin-bottom: 12px; }
.th-mega__media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---- LEARN dropdown — measured 224x178 ---- */
.th-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 224px;
  background: var(--th-bg);
  border: 1px solid var(--th-border);
  box-shadow: var(--th-shadow-sm);
  z-index: 99;
}
.th-dropdown[hidden] { display: none; }
.th-dropdown__list { list-style: none; margin: 0; padding: 8px 0; }
.th-dropdown__item a { display: block; padding: 8px 16px; font-size: var(--th-fs-sm); }

/* ---- search bar ---- */
.th-searchbar {
  border-top: 1px solid var(--th-border);
  background: var(--th-bg);
}
.th-searchbar[hidden] { display: none; }
.th-searchbar__inner { display: flex; align-items: center; gap: 8px; padding-block: 12px; }
.th-searchbar__form { display: flex; align-items: center; flex: 1 1 auto; gap: 8px; }
.th-searchbar__input {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--th-field-border);
  background: var(--th-field-bg);
  font-family: var(--th-font);
  font-size: var(--th-fs-base);
}
.th-searchbar__submit,
.th-searchbar__close {
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--th-text);
}

/* ---- responsive ---- */
@media (max-width: 991px) {
  .th-header .th-nav--left { display: none; }
  .th-header .th-header__burger { display: flex; }

  /* Measured on the source: the mobile header is 59px tall, not the 85px of
     desktop. */
  .th-header .th-header__inner { min-height: 59px; }

  /* ⚠ GRID, not flex, for the mobile header.
     Equal `flex: 1 1 0` sides do NOT centre the logo here: the right side
     carries three 46px icons and the left carries one 36px burger, so the
     wider side wins the shrink negotiation and drags the middle off-centre
     (measured 54px left of centre on a 375 viewport; the source is within 4px).
     ⚠ And it must be `minmax(0, 1fr)`, NOT plain `1fr`. A bare `1fr` is
     `minmax(auto, 1fr)`, so a track cannot shrink below its own content: the
     right track holds three 46px icons (146px) and simply refused to equal
     the 36px burger track, which dragged the logo 55px off-centre. The
     computed tracks came out "36px 111px 146px" — content-sized — which
     looks like the rule was not applying at all. `minmax(0, …)` lets the
     side tracks be genuinely equal, so the middle is dead centre.
     Same idiom as every other grid in this theme, for the same reason. */
  .th-header .th-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;   /* the base flex rule sets space-between */
  }
  .th-header .th-header__burger { grid-column: 1; justify-self: start; }
  .th-header .th-header__logo   { grid-column: 2; justify-self: center; }
  .th-header .th-header__utils  { grid-column: 3; justify-self: end; }

  /* ⚠ THE SIDE TRACKS CAN SHRINK BELOW THEIR CONTENT — that is the whole
     point of `minmax(0, 1fr)`, and it is also how this OVERLAPPED.
     At 360 the right track resolved to 95px while the icons need 138, so
     `justify-self: end` pushed them LEFT, straight over the logo —
     51px of overlap at 360, 36px at 390, 16px at 430.
     Measuring each element's position individually never caught it;
     only INTERSECTING their boxes does.

     So the content has to actually fit inside equal side tracks:
       360 − 24 gutter = 336 available
       burger 32 + utils 3×38 = 146  ->  side tracks must be ≥ 146
       336 − 110 logo = 226 ... still short, so the gutter and the icon
       footprint come down together until it fits at the narrowest width
       we support (360). Verified by intersection at 360/390/430/500. */
  .th-header .th-container { padding-inline: 12px; }
  .th-header .th-util { width: 38px; height: 34px; }
  .th-header .th-header__burger { width: 32px; height: 32px; }
  .th-header .th-logo__img { width: 104px; }
}

/* Below 400 the three icons plus a legible logo genuinely do not fit side by
   side at any sensible size, so the logo steps down once more rather than
   letting anything collide. */
@media (max-width: 400px) {
  .th-header .th-logo__img { width: 92px; }
  .th-header .th-util { width: 34px; }
}