/* Static site overrides */

/* ========================================
   SLIDESHOW
   ======================================== */

.slideshow {
  display: block !important;
}

/* Override the inline --mobile-height/--desktop-height CSS variables so
   .slideshow__asset's padding-top also uses the safe viewport unit. */
[data-section-type="slideshow"] {
  --mobile-height: 100svh !important;
  --desktop-height: 100svh !important;
}

.slideshow__slides {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  height: 100vh !important;
  height: 100svh !important;
}

.slideshow__slides.is-hidden {
  visibility: visible !important;
}

.slideshow__cell {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100svh !important;
  transition: opacity 0.5s ease-in-out !important;
}

.slideshow__cell[style*="display: block"] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
}

/* ========================================
   PRODUCT PAGE LAYOUT
   ======================================== */

.product__details {
  position: sticky !important;
  top: 100px !important;
  align-self: flex-start !important;
  z-index: 1 !important;
}

.product__meta,
.product__description,
.product__description-content,
.product__controls-group,
.product__option {
  position: static !important;
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
}

.product__description {
  margin-top: 30px !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.product__description-content {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.product__description-content p {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.rte--product {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.product__block {
  position: static !important;
}

.product__controls-group {
  margin-bottom: 40px !important;
  display: block !important;
  position: static !important;
}

.product__option {
  margin-bottom: 40px !important;
  display: block !important;
  position: static !important;
}

.product__label-wrapper {
  margin-bottom: 15px !important;
  display: block !important;
  width: 100% !important;
  position: static !important;
}

.product__color-swatch-value {
  display: inline !important;
  position: static !important;
  margin-left: 10px !important;
  float: none !important;
}

.product__chip.selected,
.product__chip {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

.product__color-swatch.selected,
.product__color-swatch {
  border: 1px solid #000000 !important;
  opacity: 1 !important;
}

.product__media-container {
  position: relative !important;
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

/* The announcement bar, header wrapper, and overlay group all carry the
   .section class, which on mobile gives them margin:40px 0. Since .page is a
   flex container those margins don't collapse — they stack and create a large
   gap below the fixed header. Zero them out here. */
.announcement-bar__outer,
.header__outer-wrapper,
.section-group-overlay-group {
  margin: 0 !important;
  padding: 0 !important;
}

/* The first real content section inside main also gets .section margin-top.
   Because main is a flex container, these margins do not collapse — they add
   up directly. The body padding-top already offsets for the fixed header, so
   the first section needs no additional top margin. */
.main > .section:first-child {
  margin-top: 0 !important;
}
.main > .section:first-child > .section {
  margin-top: 0 !important;
}

.header,
.section-header,
[data-section-type="header"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
  transform: none !important;
  transition: none !important;
}

/* The no-js fallback menu is never needed on this static site — JS is required. */
.no-js-menu,
.no-js-menu--desktop {
  display: none !important;
}

body {
  padding-top: 80px !important;
}

/* Hide "Contact" link from desktop nav and mobile drawer */
.header__links-list a[href="/pages/contact.html"],
.header__links-list a[href*="contact"],
nav a[href="/pages/contact.html"],
.navigation a[href*="contact"],
.drawer-menu a[href="/pages/contact.html"],
.drawer-menu a[href*="/pages/contact"] {
  display: none !important;
}

.header__links-list li:has(a[href="/pages/contact.html"]),
.drawer-menu__item:has(a[href="/pages/contact.html"]) {
  display: none !important;
}


/* ========================================
   MOBILE DRAWER MENU
   ======================================== */

.header__menu-icon,
button[data-js-menu-button],
.header__icon-menu {
  display: flex !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 100 !important;
}

@media (min-width: 1024px) {
  .header__menu-icon,
  button[data-js-menu-button],
  .header__icon-menu {
    display: none !important;
  }

  .header__links,
  .header__links-list,
  .navigation {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

.drawer-menu,
[data-drawer-menu] {
  display: block !important;
  opacity: 0 !important;
  transform: translateX(-100%) !important;
  transition: all 0.3s ease !important;
}

.drawer-menu.active,
.drawer-menu.visible {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

.drawer-menu__overlay {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.drawer-menu.active .drawer-menu__overlay,
.drawer-menu.visible .drawer-menu__overlay {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.drawer-menu__panel {
  transform: translateX(-100%) !important;
  transition: transform 0.3s ease !important;
}

.drawer-menu.active .drawer-menu__panel,
.drawer-menu.visible .drawer-menu__panel {
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

.drawer-menu__link,
.drawer-menu a {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ========================================
   PRODUCT IMAGE LIGHTBOX
   ======================================== */

.media--has-lightbox::after,
.media--has-lightbox .media__icon,
.media__icon--zoom {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.media--has-lightbox:hover::after {
  display: none !important;
}

a[data-open] {
  cursor: default !important;
}

.media--has-lightbox a {
  cursor: default !important;
}

/* ========================================
   FIREFOX / THEME.JS MODULE FAILURE FIXES
   theme.min.js aborts on import errors in Firefox; these ensure the
   page is visible without that JS executing.
   ======================================== */

.js-enabled {
  display: block !important;
}

/* Override every opacity:0 that theme.css sets via :not(.animation-initialized).
   Using the same compound selector ensures equal or higher specificity. */
.animation .animation-fade-up-reveal,
.animation .animation-fade-down-reveal,
.animation .animation-fade-up-split-reveal,
.animation .animation-fade-up-split-reveal__line,
.animation .animation-scale-reveal,
.animation .animation-image-reveal,
.animation .image,
.animation .product-item__product-title,
.animation .product-item__price-wrapper,
.animation .product-item__badges,
.animation-fade-up-reveal,
.animation-fade-down-reveal,
.animation-fade-up-split-reveal,
.animation-fade-up-split-reveal__line,
.animation-scale-reveal,
.animation-image-reveal {
  opacity: 1 !important;
}

#page-transition-overlay {
  display: none !important;
}

/* ========================================
   iOS SAFARI & CROSS-BROWSER FIXES
   ======================================== */

@supports (-webkit-touch-callout: none) {
  .slideshow__slides,
  .slideshow__cell {
    height: -webkit-fill-available !important;
  }
}

.drawer-menu__panel {
  -webkit-overflow-scrolling: touch !important;
  overflow-y: auto !important;
}

button,
a,
[data-js-menu-button],
[data-drawer-menu] a {
  touch-action: manipulation;
}

@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-top: calc(80px + env(safe-area-inset-top)) !important;
  }

  .header,
  .section-header,
  [data-section-type="header"] {
    padding-top: env(safe-area-inset-top) !important;
  }
}