/* ==========================================================================
   IRONBEASTS - HEADER
   Ported from the static draft (new-theme-draft/assets/css/components.css).
   Depends on the design tokens in base.css.
   ========================================================================== */

/* Mobile browsers flash a translucent blue box over whatever is tapped. */
.site-header a,
.site-header button,
.mobile-nav a,
.mobile-nav button,
.overlay {
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   COUNTDOWN STRIP
   A coupon on its way out, above the header. Drawn only when there is one --
   see IronBeasts_Coupon_Countdown.
   ========================================================================== */
.countdown {
  background: var(--countdown-bg);
  color: var(--ib-white);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: var(--lh-body);
}

.countdown__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: .625rem;
}

.countdown__clock {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Each unit in its own chip, so the numbers do not run together as the
   seconds change. */
.countdown__clock span {
  display: inline-block;
  margin-right: 2px;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--countdown-chip);
}

@media (max-width: 768px) {
  .countdown__inner {
    flex-direction: column;
    gap: var(--sp-1);
    text-align: center;
  }
}

/* ==========================================================================
   HEADER SHELL
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: none;
  transition: box-shadow var(--t);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.header__logo img {
  height: 64px;
  width: auto;
}

/* ==========================================================================
   PRIMARY NAV
   ========================================================================== */
/* Full height, so a top-level item reaches the header's bottom edge -- which
   is exactly where its panel begins. The link is shorter than the header, and
   with the items only as tall as their links there was a strip of dead header
   between the two: the pointer crossed it on the way down, the menu stopped
   counting as hovered, and the panel shut just as you reached it. */
.nav {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  gap: clamp(.6rem, 1.6vw, 1.6rem);
  margin-inline: auto;
}

/* Static, so the panel measures itself against the header and spans its full
   width. Flex, so the link still sits centred now the item is header-height. */
.nav__item {
  position: static;
  display: flex;
  align-items: center;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: var(--ls-7);
  text-transform: uppercase;
  font-size: var(--fs-13);
  padding: 1.4rem .2rem;
  color: var(--text);
  transition: color var(--t);
}

/* Thin underline on hover / current page (no layout shift) */
.nav__link::after {
  content: "";
  position: absolute;
  left: .2rem;
  right: .2rem;
  bottom: .95rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t);
}

.nav__item:hover > .nav__link::after,
.nav__link[aria-current="page"]::after,
.nav__link.is-current::after {
  transform: scaleX(1);
}

.nav__link .chev {
  display: none;
}

.nav__item:hover .chev {
  transform: rotate(180deg);
}

/* ==========================================================================
   MEGA MENU (full-width dropdown)
   ========================================================================== */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--ib-white);
  color: var(--ib-900);
  border-top: 1px solid var(--border);
  box-shadow: 0 30px 50px var(--shade-2);
  opacity: 0;
  visibility: hidden;
  /* Nothing to hit while it is closed. `visibility` stays `visible` for the
     whole fade, so for a quarter of a second after the pointer left, the panel
     was invisible and still catching it -- sweeping back across the space it
     had been in put it straight back. The panel is a child of .nav__item, so
     anything the panel catches counts as hovering the menu. */
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  z-index: 40;
}

.nav__item:hover .mega,
.nav__item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.mega__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 3.5vw, 3rem);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

/* No feature column -> links span the full panel width. */
.mega__inner:not(:has(.mega__feature)) {
  grid-template-columns: 1fr;
}

.mega__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.6rem;
}

.mega__col h4 {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--ls-7);
  text-transform: uppercase;
  color: var(--ib-ink);
  margin-bottom: .8rem;
}

.mega__col a {
  display: block;
  padding: .36rem 0;
  font-size: var(--fs-15);
  color: var(--text-muted);
  transition: color var(--t), transform var(--t);
}

.mega__col a:hover {
  color: var(--ib-ink);
  transform: translateX(3px);
}

.mega__col a.is-all {
  color: var(--ib-red);
  font-weight: 600;
  margin-top: .3rem;
}

.mega__feature {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
}

.mega-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--ib-white);
}

.mega-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
}

.mega-card:hover img {
  transform: scale(1.06);
}

.mega-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--shade-5) 0%, var(--shade-2) 55%, transparent 100%);
}

.mega-card__body {
  position: relative;
  z-index: 1;
  padding: 1rem 1.1rem 1.1rem;
}

.mega-card__body h5 {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-size: var(--fs-16);
  letter-spacing: var(--ls-2);
  text-transform: uppercase;
  color: var(--ib-white);
  margin-bottom: .45rem;
}

.mega-card__shop {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
  color: var(--ib-white);
  border-bottom: 2px solid var(--ib-red);
  padding-bottom: 2px;
}

/* Collections mega: one link column + a row of image cards. Triggered by the
   `showcase` CSS class on a menu item inside the panel. */
.mega__inner:has(.showcase) {
  grid-template-columns: 210px 1fr;
}

.mega__inner:has(.showcase) .mega__links {
  grid-template-columns: 1fr;
}

.mega__inner:has(.showcase) .mega__feature {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1120px) {
  .mega__inner {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   HEADER ACTIONS
   ========================================================================== */
/* Right-aligned by the auto margins on `.nav`, which absorb all free space
   between the logo and here. `.nav` is always rendered (even with no menu
   assigned) so this holds on every page -- see template-parts/header.php. */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--text);
  transition: background var(--t), color var(--t);
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--ib-red);
}

.icon-btn svg {
  width: 22px;
  height: 22px;
}

/* Larger hit area and glyphs in the header, to sit right against the 90px bar.
   Scoped so the drawer close buttons keep the default size. */
.site-header .icon-btn {
  width: 48px;
  height: 48px;
}

.site-header .icon-btn svg {
  width: 26px;
  height: 26px;
}

/* Search only — account and cart stay at 26px. */
.site-header .icon-btn--search svg {
  width: 30px;
  height: 30px;
}

.cart-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--ib-red);
  color: var(--ib-white);
  font-size: var(--fs-11);
  font-weight: 700;
  font-family: var(--font-body);
  border-radius: 999px;
  display: grid;
  place-items: center;
  line-height: var(--lh-tight);
}

.cart-total {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-14);
  color: var(--text);
  letter-spacing: var(--ls-1);
  padding: 0 .15rem;
  white-space: nowrap;
  transition: color var(--t);
}

/* Icon and total are one link, so they sit flush rather than being pulled
   apart by .header__actions' gap. */
.cart-link {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding-right: .25rem;
}

@media (max-width: 480px) {
  .cart-total {
    display: none;
  }
}

/* Header text stays white: the header background is #191919. */
.site-header .nav__link,
.site-header .icon-btn,
.site-header .cart-total {
  color: var(--ib-white);
}

/* No hover circle in the header. `background: none` is needed to cancel the
   base .icon-btn:hover rule, which would otherwise show through. */
.site-header .icon-btn:hover {
  background: none;
  color: var(--ib-white);
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
.nav-toggle {
  display: none;
}

@media (max-width: 1024px) {
  .nav {
    display: none;
  }

  /* Logo left, cart next, burger last on the right. DOM order is
     toggle > logo > nav > actions, so `order` does the rearranging;
     margin-right on the logo absorbs the free space (the hidden .nav
     can no longer do it). */
  .header__logo {
    order: 1;
    margin-right: auto;
  }

  /* A little smaller than on desktop, beside the cart and the burger. */
  .header__logo img {
    height: 52px;
  }

  .header__actions {
    order: 2;
  }

  .nav-toggle {
    display: grid;
    order: 3;
  }

  /* Account and search live at the top of the drawer instead. */
  .site-header .icon-btn--desktop {
    display: none;
  }
}

.mobile-nav {
  position: fixed;
  inset: 0 0 0 30%;
  z-index: var(--z-drawer);
  background: var(--ib-ink);
  color: var(--ib-cream);
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t);
}

.mobile-nav.is-open {
  transform: none;
}

/* The drawer takes focus when it opens, so kill the ring it would otherwise
   draw around the whole panel. Individual controls keep their own. */
.mobile-nav:focus {
  outline: none;
}

/* ---- Head ---------------------------------------------------------------- */
.mobile-nav__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--on-dark-line-1);
}

.mobile-nav__head strong {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: var(--ls-8);
  color: var(--on-dark-muted);
}

/* Plain glyph, no circle, no inherited hover colour. */
.mobile-nav__close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: -6px;
  background: none;
  border: 0;
  color: var(--ib-cream);
  transition: color var(--t);
}

.mobile-nav__close:hover {
  background: none;
  color: var(--ib-white);
}

.mobile-nav__close svg {
  width: 22px;
  height: 22px;
}

/* ---- Account / search ---------------------------------------------------- */
.mobile-nav__actions {
  display: grid;
  gap: 2px;
  margin-bottom: var(--sp-5);
}

.mobile-nav__action {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .65rem .75rem;
  background: var(--on-dark-fill-1);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--ls-7);
  text-transform: uppercase;
  text-align: left;
  color: var(--on-dark-text);
  transition: background var(--t), color var(--t);
}

.mobile-nav__action svg {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: .75;
}

.mobile-nav__action:hover {
  background: var(--on-dark-fill-2);
  color: var(--ib-white);
}

/* ---- Menu ---------------------------------------------------------------- */
.mobile-nav__list,
.mobile-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--on-dark-line-1);
}

.mobile-nav__item > a {
  padding: .95rem 0;
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-size: var(--fs-16);
  font-weight: 500;
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
  color: var(--ib-cream);
  transition: color var(--t);
}

.mobile-nav__item > a:hover,
.mobile-nav__item > a[aria-current="page"] {
  color: var(--ib-white);
}

.mobile-nav__item > a.is-sale {
  color: var(--ib-red);
}

/* ---- Expand toggle ------------------------------------------------------- */
.mobile-nav__toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  color: var(--on-dark-muted);
  transition: color var(--t), transform var(--t);
}

.mobile-nav__toggle svg {
  width: 14px;
  height: 14px;
}

.mobile-nav__toggle:hover {
  color: var(--ib-white);
}

.mobile-nav__item.is-open .mobile-nav__toggle {
  transform: rotate(180deg);
  color: var(--ib-white);
}

/* ---- Sub-level ----------------------------------------------------------- */
.mobile-nav__sub {
  grid-column: 1 / -1;
  display: none;
  padding: .2rem 0 .9rem;
}

.mobile-nav__item.is-open > .mobile-nav__sub {
  display: block;
}

.mobile-nav__subitem > a {
  display: block;
  padding: .5rem 0 .5rem .9rem;
  border-left: 1px solid var(--on-dark-line-1);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-1);
  text-transform: none;
  color: var(--on-dark-muted);
  transition: color var(--t), border-color var(--t);
}

.mobile-nav__subitem > a:hover,
.mobile-nav__subitem > a[aria-current="page"] {
  color: var(--ib-white);
  border-left-color: var(--on-dark-line-2);
}

/* The desktop panel's red for "Shop all" is too dim on the dark drawer. */
.mobile-nav__subitem > a.is-all {
  color: var(--ib-white);
}

@media (max-width: 520px) {
  .mobile-nav {
    inset: 0 0 0 12%;
  }
}


/* ==========================================================================
   OVERLAY (shared with drawers)
   ========================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--shade-4);
  backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}

.overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   SEARCH
   A panel under the header, not a modal. Search on a shop is a step in
   browsing, and a box that darkens the page treats it as an interruption.
   ========================================================================== */
.site-search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.site-search__inner {
  padding-block: var(--sp-4);
}

/* No rule of its own under the row. The panel already carries a border along
   its bottom edge, so a second line a few pixels above it reads as a mistake --
   and its padding was what pushed the row off centre, leaving more space below
   the field than above it. Without it the row sits centred in the panel. */
.site-search__form {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.site-search__icon {
  flex: 0 0 auto;
  color: var(--text-muted);
}

/* No border of its own: the rule under the row is the field's edge, which
   keeps the row reading as one thing rather than a box inside a box. */
.site-search__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--text);
}

.site-search__input::placeholder {
  color: var(--text-muted);
}

/* The shared ring in base.css offsets itself inward on the assumption that a
   field has a border for it to sit on. This one has none, so the ring drew a
   rectangle around the whole row -- and because opening the panel puts the
   cursor straight in the field, that rectangle was on screen the entire time
   the panel was. A permanently visible focus ring is just a border, and an
   ugly one. The panel opening is itself the signal that the field is ready. */
.site-search__input:focus-visible {
  outline: none;
}

.site-search__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  transition: color var(--t);
}

.site-search__close:hover {
  color: var(--heading);
}

/* ---- Results ------------------------------------------------------------- */
.site-search__results:not(:empty) {
  margin-top: var(--sp-3);
}

.site-search__hit {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  text-decoration: none;
  color: var(--text);
}

.site-search__hit:hover {
  color: var(--heading);
}

.site-search__hit-media {
  flex: 0 0 auto;
  width: 48px;
}

.site-search__hit-media img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
}

.site-search__hit-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.site-search__hit-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-14);
  letter-spacing: var(--ls-1);
  line-height: var(--lh-snug);
  color: var(--heading);
}

.site-search__hit-price {
  font-size: var(--fs-13);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.site-search__all {
  display: block;
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-5);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--heading);
}