/* ---------------------------------------------------------------
   RARE SIGHT — site header

   One sticky bar across the whole store: mark left, categories in the
   middle, region + icons right.

   It is transparent over the hero on the home route and solid black on
   collection pages (store.js toggles .header--solid), which is how the
   reference behaves — the hero art runs full-bleed under it.

   Loaded after store.css so it overrides the older centred-wordmark
   header rules.
   --------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 900;

  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 22px;
  height: 56px;

  background: transparent;
  border-bottom: 0;
  color: #ffffff;
  transition: background 0.25s ease;
}

/* Inner pages: solid bar. */
.header--solid { background: #000000; }

.header__mark {
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- categories -------------------------------------------------------- */

.header .nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}

.header .nav__link {
  position: relative;
  color: #ffffff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.78;
  transition: opacity 0.16s ease;
}
.header .nav__link:hover { opacity: 1; }
.header .nav__link.is-current { opacity: 1; }
.header .nav__link:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }

/* --- region + icons ----------------------------------------------------- */

.header__end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.region {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  cursor: pointer;
  white-space: nowrap;
}
.region__flag { font-size: 13px; line-height: 1; }
.region__caret {
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.region:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.icon-btn svg {
  width: 19px; height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn:hover { opacity: 0.7; }
.icon-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.icon-btn__count {
  position: absolute;
  right: -4px; bottom: -2px;
  min-width: 14px; height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.header--solid .icon-btn__count { background: #ffffff; color: #000000; }

/* --- hero CTA ------------------------------------------------------------
   The white box from the reference, sitting over the hero art.
   -------------------------------------------------------------------------- */

.shop-here {
  display: inline-block;
  padding: 15px 30px;
  background: #ffffff;
  color: #000000;
  border-radius: 3px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease;
}
.shop-here:hover { background: #000000; color: #ffffff; }
.shop-here:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }

/* The hero runs under the transparent bar, so pull it up by the bar height. */
.hero--video { margin-top: -56px; }

/* --- announcement ---------------------------------------------------------
   Sits above the bar; keep it dark so the transparent header reads against it.
   -------------------------------------------------------------------------- */

.announce {
  position: relative;
  z-index: 901;
  background: #000000;
  color: #ffffff;
}

/* --- narrow ---------------------------------------------------------------
   The category row cannot fit beside the mark and the icons on a phone, so it
   drops to its own scrolling line under them.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .header {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 16px;
    row-gap: 10px;
  }
  .header__end { margin-left: auto; }
  .header .nav {
    order: 3;
    width: 100%;
    margin: 0;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .header .nav::-webkit-scrollbar { display: none; }

  .hero--video { margin-top: 0; }
  .header:not(.header--solid) { background: rgba(0, 0, 0, 0.82); }
}

@media (max-width: 460px) {
  .header { gap: 14px; }
  .header__mark { font-size: 13px; }
  .header__end { gap: 10px; }
  .region span:not(.region__flag):not(.region__caret) { display: none; }
}