/**
 * clarity-header.css v6.6 — production-candidate
 *
 * Safe rules learned the hard way:
 * - Never MutationObserver on header.class (Safari freeze)
 * - Never overflow-x on html/body (breaks sticky/scroll on iOS)
 * - Never put flyouts inside backdrop-filter glass
 * - Mega width 25% of centered .container-xl (matches slideshow pad)
 * - No blur on small screens
 */

/* ========== tokens ========== */
.clarity-header-redesign.ds-header {
  --ch-pad-y: 0.4rem;
  --ch-glass-y: 0.4rem;
  --ch-glass-x: 0.9rem;
  --ch-logo: 54px;
  --ch-icon: 22px;
  --ch-hit: 44px;
  --ch-radius: 24px;
  --ch-gap: 0.65rem;
  --ch-controls: 0.75rem;

  background: transparent !important;
  box-shadow: none !important;
  padding: var(--ch-pad-y) 0 !important;
  z-index: 12300 !important;
  overflow: visible !important;
  transition: padding 0.2s ease;
}

.clarity-header-redesign.ds-header.sticky-top {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
}

.light-theme .clarity-header-redesign.ds-header,
.dark-theme .clarity-header-redesign.ds-header {
  background: transparent !important;
}

.clarity-header-redesign > .container-xl {
  position: relative;
  z-index: 2;
  overflow: visible !important;
}

/* ========== promo ========== */
#oct-infobar .py-3 {
  padding-top: 0.28rem !important;
  padding-bottom: 0.28rem !important;
}

/* ========== glass ========== */
.clarity-header-glass {
  position: relative;
  z-index: 3;
  border-radius: var(--ch-radius);
  padding: var(--ch-glass-y) var(--ch-glass-x);
  overflow: visible;
  background: rgba(186, 188, 196, 0.38);
  border: 1px solid rgba(110, 112, 122, 0.28);
  box-shadow:
    0 8px 26px rgba(20, 20, 28, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(80, 80, 90, 0.12);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  transition: padding 0.2s ease, border-radius 0.2s ease;
}

.clarity-header-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(210, 212, 220, 0.2) 45%,
    rgba(150, 152, 165, 0.28) 100%
  );
}

.clarity-header-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--ch-gap);
}

.clarity-header-side {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--ch-controls);
}

.clarity-header-left { justify-content: flex-start; }
.clarity-header-right { justify-content: flex-end; }

/* ========== logo ========== */
.clarity-header-logo {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  max-width: min(320px, 56vw);
}

.clarity-header-logo a,
.clarity-header-logo span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.clarity-header-redesign #logo,
.clarity-header-logo #logo {
  content: unset !important;
  background: none !important;
  display: block !important;
  height: var(--ch-logo) !important;
  width: auto !important;
  max-width: 280px !important;
  max-height: var(--ch-logo) !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain;
  transition: height 0.2s ease, max-height 0.2s ease;
}

/* ========== chrome ========== */
.clarity-header-redesign .ds-header-phone-button,
.clarity-header-redesign .ds-header-wishlist-button,
.clarity-header-redesign .ds-header-compare-button,
.clarity-header-redesign .ds-header-viewed-button,
.clarity-header-redesign .ds-header-catalog-button {
  display: none !important;
}

.clarity-header-redesign .ds-header-menu-button,
.clarity-header-redesign .ds-header-search-toggle-button,
.clarity-header-redesign .ds-header-cart-button,
.clarity-header-account .ds-header-user-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  width: var(--ch-hit);
  height: var(--ch-hit);
  min-width: var(--ch-hit);
  min-height: var(--ch-hit);
  flex: 0 0 var(--ch-hit);
  position: relative;
}

.clarity-header-redesign .ds-header-cart-button {
  width: var(--ch-hit) !important;
  height: var(--ch-hit) !important;
}

.light-theme .clarity-header-redesign.ds-header .button-icon:not(.button-icon-arrow-down),
.dark-theme .clarity-header-redesign.ds-header .button-icon:not(.button-icon-arrow-down),
.clarity-header-redesign .button-icon:not(.button-icon-arrow-down) {
  background: #111 !important;
  box-shadow: none !important;
  filter: none !important;
  width: var(--ch-icon) !important;
  height: var(--ch-icon) !important;
  flex: 0 0 var(--ch-icon) !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

.clarity-header-redesign .ds-header-cart-button .badge,
.clarity-header-redesign .ds-header-cart-button .ds-cart-qty {
  top: 4px !important;
  right: 2px !important;
  left: auto !important;
  height: 16px !important;
  min-width: 16px !important;
  padding: 0 4px !important;
  font-size: 10px !important;
  line-height: 16px !important;
  z-index: 3;
  transform: none !important;
}

/* Account — absolute under toggle (NOT fixed: backdrop-filter makes fixed
   resolve against the glass, so viewport coords from JS drift on desktop). */
.clarity-header-glass,
.clarity-header-bar,
.clarity-header-side,
.clarity-header-right {
  overflow: visible !important;
}

.clarity-header-account {
  display: inline-flex !important;
  position: relative !important;
  align-items: center;
  flex: 0 0 auto;
  z-index: 6;
}

.clarity-header-account .ds-header-user-button {
  width: auto !important;
  flex: 0 0 auto;
  gap: 0.35rem;
  padding: 0 0.3rem 0 0.15rem !important;
}

.clarity-header-account .ds-header-user-button .dark-text {
  display: none !important;
}

.light-theme .clarity-header-redesign.ds-header .clarity-header-account .button-icon-arrow-down,
.dark-theme .clarity-header-redesign.ds-header .clarity-header-account .button-icon-arrow-down,
.clarity-header-account .button-icon-arrow-down {
  display: block !important;
  position: static !important;
  width: 11px !important;
  height: 7px !important;
  min-width: 11px !important;
  flex: 0 0 11px !important;
  margin: 0 !important;
  background: #111 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

.clarity-header-account.ds-dropdown-box.active .ds-dropdown {
  position: absolute !important;
  top: calc(100% + 0.45rem) !important;
  left: auto !important;
  right: 0 !important;
  width: min(300px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  margin: 0 !important;
  -webkit-transform: none !important;
  transform: none !important;
  z-index: 13060 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Phone: ~94% width, centered under sticky header */
@media (max-width: 767.98px) {
  .clarity-header-account.ds-dropdown-box.active .ds-dropdown {
    position: fixed !important;
    top: calc(var(--clarity-sticky-offset, 4.25rem) + 0.35rem) !important;
    left: 3vw !important;
    right: 3vw !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    -webkit-transform: none !important;
    transform: none !important;
  }

  .clarity-header-account.ds-dropdown-box.active .ds-dropdown-inner {
    min-width: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - var(--clarity-sticky-offset, 4.25rem) - 1rem) !important;
  }
}

.clarity-header-account:not(.active) .ds-dropdown {
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  margin: 0 !important;
}

/* Search — in-flow under glass */
.clarity-header-redesign .ds-header-search {
  display: none !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0.55rem 0 0 !important;
  padding: 0 !important;
  flex-grow: 0 !important;
  z-index: 13050 !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  border-radius: 16px;
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  overflow: visible !important;
}

.clarity-header-redesign .ds-header-search.active {
  display: block !important;
}

.clarity-header-redesign .ds-header-search .form-control {
  height: 2.75rem;
  padding: 0 2.75rem !important;
  border: 0;
  background: transparent;
  color: #111;
}

.clarity-header-redesign .ds-header-search-close,
.clarity-header-redesign .ds-header-search-button {
  top: 0 !important;
  height: 2.75rem !important;
  width: 2.75rem !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.clarity-header-redesign .ds-header-search-close { left: 0 !important; }
.clarity-header-redesign .ds-header-search-button { right: 0 !important; }
.clarity-header-redesign .ds-header-search-close svg path { stroke: #111; }
.clarity-header-redesign .ds-header-search-button svg path { fill: #111; }

/* Mega host */
.clarity-header-menu {
  display: contents;
}

/* Compact sticky (~12%) */
.clarity-header-redesign.clarity-header-compact {
  --ch-pad-y: 0.28rem;
  --ch-glass-y: 0.28rem;
  --ch-glass-x: 0.75rem;
  --ch-logo: 47px;
  --ch-icon: 20px;
  --ch-hit: 40px;
  --ch-radius: 20px;
}

/* Product sticky tabs — theme uses fixed top:51px / one-shot stickyProduct().
   Keep them flush under the live sticky header (esp. when compact shrinks). */
body:has(.clarity-header-redesign) .ds-product-tabs.sticky-top {
  top: var(--clarity-sticky-offset, 56px) !important;
  transition: top 0.2s ease;
  z-index: 12100;
}

body:has(.clarity-header-redesign) .ds-product-block.sticky-md-top {
  transition: top 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .clarity-header-redesign.ds-header,
  .clarity-header-glass,
  .clarity-header-redesign #logo,
  body:has(.clarity-header-redesign) .ds-product-tabs.sticky-top,
  body:has(.clarity-header-redesign) .ds-product-block.sticky-md-top {
    transition: none !important;
  }
}

/* ========== desktop mega ========== */
@media (min-width: 1200px) {
  .clarity-header-menu {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    width: 25%;
    z-index: 13020;
    pointer-events: none;
  }

  .clarity-header-menu .ds-menu-catalog.ds-menu-main-catalog,
  .clarity-header-menu .ds-menu-catalog.ds-menu-main-catalog.with-slideshow {
    position: absolute !important;
    left: 0 !important;
    top: 1rem !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: translateX(0) !important;
    pointer-events: auto;
  }
}

/* ========== tablet / phone menu containment ========== */
@media (max-width: 1199.98px) {
  .clarity-header-redesign.ds-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
  }

  .clarity-header-redesign > .container-xl {
    max-width: 100%;
  }

  .clarity-header-menu {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    z-index: 13020;
    pointer-events: none;
  }

  .clarity-header-menu .ds-menu-catalog.ds-menu-main-catalog {
    pointer-events: auto;
    width: min(460px, 100vw) !important;
    max-width: min(460px, 100vw) !important;
    left: 0 !important;
    transform: none !important;
    overflow-x: hidden !important;
  }

  .clarity-header-menu .ds-menu-catalog.ds-menu-main-catalog:not(.active) {
    display: none !important;
  }

  .clarity-header-menu .ds-menu-catalog .ds-menu-catalog,
  .clarity-header-menu .ds-menu-catalog-wide {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
}

/* ========== phone tokens + search sanitize ========== */
@media (max-width: 767.98px) {
  #oct-infobar .py-3 {
    padding-top: 0.18rem !important;
    padding-bottom: 0.18rem !important;
  }

  #oct-infobar .oct-infobar-text,
  #oct-infobar .oct-infobar-text a,
  #oct-infobar .oct-infobar-text span {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .clarity-header-glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(220, 222, 228, 0.96);
  }

  .clarity-header-redesign.ds-header {
    --ch-pad-y: 0.35rem;
    --ch-glass-y: 0.38rem;
    --ch-glass-x: 0.65rem;
    --ch-logo: 48px;
    --ch-icon: 22px;
    --ch-hit: 42px;
    --ch-radius: 20px;
    --ch-gap: 0.45rem;
    --ch-controls: 0.55rem;
  }

  .clarity-header-logo {
    max-width: min(210px, 52vw);
  }

  .clarity-header-redesign #logo,
  .clarity-header-logo #logo {
    max-width: 200px !important;
  }

  .clarity-header-redesign.clarity-header-compact {
    --ch-pad-y: 0.24rem;
    --ch-glass-y: 0.26rem;
    --ch-logo: 42px;
    --ch-icon: 20px;
    --ch-hit: 38px;
    --ch-radius: 16px;
  }

  /* Neutralize theme openMobileSearch() inline geometry */
  .clarity-header-redesign .ds-header-search,
  .clarity-header-redesign .ds-header-search.active {
    height: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
}

@media (min-width: 768px) {
  .clarity-header-redesign .ds-header-search.active {
    width: min(560px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 575.98px) {
  .clarity-header-redesign.ds-header {
    --ch-pad-y: 0.32rem;
    --ch-glass-y: 0.35rem;
    --ch-glass-x: 0.55rem;
    --ch-logo: 46px;
    --ch-hit: 40px;
    --ch-radius: 18px;
    --ch-controls: 0.45rem;
  }

  .clarity-header-logo {
    max-width: min(190px, 50vw);
  }

  .clarity-header-redesign #logo,
  .clarity-header-logo #logo {
    max-width: 180px !important;
  }
}