/** Shopify CDN: Minification failed

Line 1869:27 Unexpected "*"

**/
/* ============================================
   SPACING SCALE — Site-wide design tokens
   ============================================ */
:root {
  --space-2xs: 0.25rem;   /* 4px  — micro: icon offsets, badge padding */
  --space-xs:  0.5rem;    /* 8px  — tight: small gaps, button padding */
  --space-sm:  0.75rem;   /* 12px — form elements, inline gaps */
  --space-md:  1rem;      /* 16px — component gaps, card padding */
  --space-lg:  1.5rem;    /* 24px — element margins, group gaps */
  --space-xl:  2rem;      /* 32px — section internal spacing */
  --space-2xl: 3rem;      /* 48px — section margins, large separations */
  --space-3xl: 4rem;      /* 64px — major section breaks */

  /* Z-INDEX SCALE — Layering system */
  --z-base: 1;
  --z-above: 5;
  --z-nav: 10;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 1000;
  --z-overlay: 5000;
  --z-modal: 10000;
  --z-toast: 15000;

  /* TYPOGRAPHY — Luxury treatment override */
  --font-heading-weight: 300;

  /* FONT OVERRIDE — Chakra Petch site-wide */
  --font-body-family: 'Chakra Petch', sans-serif;
  --font-heading-family: 'Chakra Petch', sans-serif;
}

/* Chakra Petch — catch-all for elements not using CSS variables */
body,
body input,
body textarea,
body select,
body button {
  font-family: 'Chakra Petch', sans-serif;
}

/* Luxury heading typography — wide tracking site-wide */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Chakra Petch', sans-serif;
  letter-spacing: 0.08em;
}


/* ============================================
   Z-INDEX FIXES — Dawn modals vs custom header
   Dawn's modals use z-index ~101 but our header
   is at 1000, so they get buried. Promote them.
   ============================================ */
.quick-add-modal[open],
.modal-video[open] {
  z-index: var(--z-modal) !important;
}

/* Product image viewer must sit ABOVE the quick-add modal + its close button */
.product-media-modal[open],
.product-popup-modal[open],
product-media-modal[open],
product-popup-modal[open] {
  z-index: calc(var(--z-modal) + 5) !important;
}

.quick-add-modal__toggle {
  z-index: calc(var(--z-modal) + 1) !important;
}

/* Product image viewer close sits above everything */
.product-media-modal__toggle,
.product-popup-modal__toggle {
  z-index: calc(var(--z-modal) + 6) !important;
}

/* Hide quick-add close button when any image viewer is open on top */
body.lightbox-open .quick-add-modal__toggle,
body:has(.product-media-modal[open]) .quick-add-modal__toggle,
body:has(.product-popup-modal[open]) .quick-add-modal__toggle,
body:has(product-media-modal[open]) .quick-add-modal__toggle,
body:has(product-popup-modal[open]) .quick-add-modal__toggle,
body:has(modal-dialog[open] ~ .quick-add-modal__toggle) .quick-add-modal__toggle {
  display: none !important;
}

/* If two close toggles overlap, hide the one underneath */
.quick-add-modal[open] .product-media-modal__toggle ~ .quick-add-modal__toggle,
quick-add-modal[open] .product-media-modal__toggle ~ .quick-add-modal__toggle {
  display: none !important;
}


.drawer {
  z-index: calc(var(--z-header) + 1) !important;
}

.disclosure-has-popup[open] > summary + * {
  z-index: var(--z-overlay) !important;
}

.quantity-popover__info.global-settings-popup {
  z-index: var(--z-overlay) !important;
}

/* ============================================
   GLOBAL GLASS MORPHISM BUTTONS
   Matching Featured Collection Button Style
   Background: 10% white, Blur: 5px, Radius: 24px
   ============================================ */

/* ============================================
   BASE GLASS EFFECT - ALL BUTTONS
   ============================================ */
body .button,
body .button--primary,
body .button--secondary,
body .button--tertiary,
body button.button,
body a.button,
body .shopify-challenge__button,
body .product-form__submit,
body .product-form .product-form__submit,
body .product-form__buttons .product-form__submit,
body .product-form__buttons button[type="submit"],
body button[name="add"],
body #ProductSubmitButton,
body [id^="ProductSubmitButton"],
body .cart__submit,
body .cart__checkout-button,
body .quick-add__submit,
body .quick-add .button,
body .quick-add button,
body .newsletter-form__button,
body .newsletter-form .field__button,
body .newsletter-form button[type="submit"],
body button#Subscribe,
body .localization-form__button,
body .customer button,
body .customer .button,
body .customer a.button,
body .customer input[type="submit"],
body .cart-drawer .button,
body .cart-drawer__footer .button,
body .cart-drawer__checkout,
body .cart__ctas .button,
body .cart__ctas button,
body .facets__button,
body .predictive-search__button,
body .share-button__button,
body .banner__button .button,
body .slideshow__button .button,
body .image-with-text__button .button,
body .banner__buttons .button,
body .slideshow__buttons .button,
body .rich-text .button,
body .multicolumn .button,
body .collection-card .button,
body .collection .button,
body .gift-card__buttons .button,
body .footer .button,
body .footer-block .button {
  background: transparent !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 50px !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  outline: none !important;
  box-shadow: none; /* non-important so the .gg-glow click-bloom can show */
  padding: 12px 36px !important;
  min-height: auto !important;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;

  /* UNIFIED BUTTON TEXT — same everywhere */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-family: 'Chakra Petch', sans-serif !important;
}

/* UNIFIED TEXT — catch section-specific button classes too */
body [class*="-cta-"],
body [class*="-add-to-cart-"],
body [class*="-view-all-"],
body [class*="-tabbtn-"],
body [class*="-tab-btn-"],
body [class*="-glow-btn-"],
body [class*="-tier-select-"],
body [class*="-parallax-cta-"] {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-family: 'Chakra Petch', sans-serif !important;
}

/* Hover State - All Buttons */
body .button:hover,
body .button--primary:hover,
body .button--secondary:hover,
body .button--tertiary:hover,
body button.button:hover,
body a.button:hover,
body .product-form__submit:hover,
body .cart__submit:hover,
body .cart__checkout-button:hover,
body .quick-add__submit:hover,
body .quick-add .button:hover,
body .newsletter-form__button:hover,
body .customer button:hover,
body .customer .button:hover,
body .cart-drawer .button:hover,
body .cart__ctas .button:hover,
body .banner__button .button:hover,
body .slideshow__button .button:hover,
body .rich-text .button:hover,
body .multicolumn .button:hover,
body .footer .button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px);
}

/* Remove Dawn ::before pseudo-elements (::after reserved for gold glow) */
body .button::before,
body .button--primary::before,
body .button--secondary::before,
body .product-form__submit::before,
body .cart__submit::before,
body .quick-add__submit::before,
body .shopify-challenge__button::before,
body .cart-drawer .button::before,
body .cart__ctas .button::before,
body .customer button::before,
body .customer .button::before,
body .rich-text .button::before,
body .multicolumn .button::before,
body .banner__button .button::before,
body .slideshow__button .button::before {
  display: none;
}

/* Focus States — Luxury gold glow on keyboard focus */
body .button:focus-visible,
body .button.focused,
body .product-form__submit:focus-visible,
body .cart__submit:focus-visible,
body .quick-add__submit:focus-visible {
  outline: none !important;
  box-shadow: 0 0 6px rgba(197, 168, 95, 0.4), 0 0 18px rgba(197, 168, 95, 0.22) !important;
}

/* Remove all effects on mouse/touch click */
body .button:focus:not(:focus-visible),
body .product-form__submit:focus:not(:focus-visible),
body .cart__submit:focus:not(:focus-visible),
body .quick-add__submit:focus:not(:focus-visible) {
  outline: none !important;
}
/* Kill the default focus box-shadow on click — but NOT while the gold
   click-bloom (.gg-glow) is playing, so cart buttons can glow.
   (!important box-shadow:none would otherwise override the @keyframes.) */
body .button:focus:not(:focus-visible):not(.gg-glow),
body .product-form__submit:focus:not(:focus-visible):not(.gg-glow),
body .cart__submit:focus:not(:focus-visible):not(.gg-glow),
body .quick-add__submit:focus:not(:focus-visible):not(.gg-glow) {
  box-shadow: none !important;
}

/* Active/Pressed States — scale-down (gold glow handled globally via filter) */
body .button:active,
body .button--primary:active,
body .button--secondary:active,
body .product-form__submit:active,
body .cart__submit:active,
body .cart__checkout-button:active,
body .quick-add__submit:active,
body .quick-add .button:active,
body .customer button:active,
body .customer .button:active,
body .cart-drawer .button:active,
body .cart__ctas .button:active,
body .banner__button .button:active,
body .slideshow__button .button:active,
body .rich-text .button:active,
body .multicolumn .button:active,
body .footer .button:active,
body .newsletter-form__button:active,
body .shopify-payment-button__button:active {
  transform: translateY(0) scale(0.98);
  transition: transform 0.1s ease;
}

/* ============================================
   SHOPIFY PAYMENT BUTTONS (Buy Now)
   ============================================ */
/* Outer container — strip everything so it doesn't create a double border */
.shopify-payment-button,
.shopify-payment-button__more-options {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Inner button — the actual visible element */
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded,
.shopify-payment-button__button--branded,
.cart__dynamic-checkout-buttons .shopify-payment-button__button {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
  color: #ffffff !important;
  padding: 12px 36px !important;
  min-height: auto !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-family: 'Chakra Petch', sans-serif !important;
}

/* Buy Now button text color - ensure white text */
.shopify-payment-button__button span,
.shopify-payment-button__button--unbranded span,
.shopify-payment-button__button--branded span,
.shopify-payment-button__button *,
[class*="shopify-payment"] span {
  color: #ffffff !important;
}

.shopify-payment-button__button:hover,
.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button__button--branded:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05) !important;
  transform: translateY(-2px) !important;
}

.shopify-payment-button__button::before {
  display: none !important;
}

/* ============================================
   QUANTITY SELECTOR - COMPLETE FIX
   ============================================ */

/* Parent wrapper - make completely transparent */
.product-form__quantity,
.product-form__input--quantity,
.quantity-wrapper,
.quantity__wrapper,
product-info .quantity,
.product__quantity {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

/* Main quantity container - glass effect */
.quantity,
quantity-input,
.quantity.cart-quantity,
.cart-item__quantity quantity-input,
cart-remove-button + quantity-input {
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  overflow: visible;
  box-shadow: none;
  outline: none;
}

/* Remove any pseudo-element outlines on quantity */
.quantity::before,
.quantity::after,
quantity-input::before,
quantity-input::after,
.product-form__quantity::before,
.product-form__quantity::after {
  display: none;
  content: none;
}

/* Quantity buttons - glass effect without shape changes */
.quantity__button,
.quantity button,
quantity-input button,
button[name="minus"],
button[name="plus"],
.quantity__button--minus,
.quantity__button--plus {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  outline: none;
}

/* Remove pseudo-elements from quantity buttons */
.quantity__button::before,
.quantity__button::after,
button[name="minus"]::before,
button[name="minus"]::after,
button[name="plus"]::before,
button[name="plus"]::after {
  display: none;
  content: none;
  border: none;
  box-shadow: none;
}

.quantity__button:hover,
button[name="minus"]:hover,
button[name="plus"]:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Quantity input - transparent */
.quantity__input,
quantity-input input,
input.quantity__input,
.quantity input[type="number"] {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

/* Quantity input pseudo-elements */
.quantity__input::before,
.quantity__input::after {
  display: none;
}

/* ============================================
   NEWSLETTER/SUBSCRIBE FORM - COMPLETE FIX
   ============================================ */

/* Parent wrappers - make completely transparent */
.footer-block__newsletter,
.newsletter-form,
.newsletter-form__field-wrapper,
.footer__content-bottom .newsletter-form,
footer .newsletter-form,
.footer-block--newsletter {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

/* Remove pseudo-elements from newsletter wrappers */
.newsletter-form::before,
.newsletter-form::after,
.newsletter-form__field-wrapper::before,
.newsletter-form__field-wrapper::after,
.footer-block__newsletter::before,
.footer-block__newsletter::after {
  display: none;
  content: none;
  border: none;
}

/* Main newsletter field container - glass effect */
.newsletter-form .field,
.footer-block__newsletter .field,
.newsletter-form__field-wrapper .field {
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  overflow: visible;
  box-shadow: none;
  outline: none;
}

/* Newsletter input - hide floating label to prevent double text */
.newsletter-form .field__label,
.footer-block__newsletter .field__label {
  display: none;
}

/* Remove pseudo-elements from newsletter field */
.newsletter-form .field::before,
.newsletter-form .field::after,
.footer-block__newsletter .field::before,
.footer-block__newsletter .field::after {
  display: none;
  content: none;
  border: none;
}

/* Newsletter field container - flex alignment for cursor centering */
.newsletter-form .field,
.footer-block__newsletter .field,
.newsletter-form__field-wrapper .field {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* Newsletter inputs - transparent inside container with centered cursor */
.newsletter-form__field-wrapper .field__input,
.newsletter-form .field__input,
.footer-block__newsletter .field__input,
input[id^="NewsletterForm"],
.newsletter-form input[type="email"] {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  line-height: 1.4;
  padding: 10px 70px 10px 12px;
  height: auto;
  vertical-align: middle;
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
}

/* Newsletter submit button - glass effect without shape changes */
.newsletter-form__button,
.newsletter-form .field__button,
.footer-block__newsletter .field__button,
button#Subscribe,
.newsletter-form button[type="submit"] {
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  box-shadow: none;
  outline: none;
}

/* Remove pseudo-elements from newsletter button */
.newsletter-form__button::before,
.newsletter-form__button::after,
.newsletter-form .field__button::before,
.newsletter-form .field__button::after {
  display: none;
  content: none;
  box-shadow: none;
}

.newsletter-form__button:hover,
.newsletter-form .field__button:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================
   SEARCH BAR - COMPLETE FIX
   Matches Newsletter/Subscribe Input Style Exactly
   Fixes: Mobile layout, whitish part, duplicate styling
   ============================================ */

/* ---- Parent Wrappers - Transparent ---- */
.header__search,
details-modal.header__search,
.header__search details {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.header__search::before,
.header__search::after {
  display: none !important;
  content: none !important;
}

/* ---- Search Modal Overlay ---- */
.search-modal {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.search-modal__content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 15px !important;
}

.search-modal::before,
.search-modal::after,
.search-modal__content::before,
.search-modal__content::after {
  display: none !important;
  content: none !important;
}

/* Hide white overlay */
.modal-overlay,
.modal-overlay::after,
.header__search .modal-overlay,
details[open] .modal-overlay::after {
  background: transparent !important;
  background-color: transparent !important;
  display: none !important;
}

/* Hide problematic close icon in search header only */
.header__search details[open] .header__icon-close {
  display: none !important;
}

/* ---- Main Search Form Container ---- */
.search,
.search-modal__form,
.search-modal__form .search,
.template-search__search .search {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---- Search Field - Glass Effect (Identical to Newsletter) ---- */
.search .field,
.search-modal__form .field,
.template-search__search .field {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50px !important;
  box-shadow: none !important;
  outline: none !important;
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Remove pseudo-elements causing rectangular outline */
.search .field::before,
.search .field::after,
.search-modal__form .field::before,
.search-modal__form .field::after,
.template-search__search .field::before,
.template-search__search .field::after {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* ---- CRITICAL: Hide floating label (causes whitish left part) ---- */
.search .field__label,
.search-modal__form .field__label,
.template-search__search .field__label {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ---- Search Input - Clean (Identical to Newsletter) ---- */
.search__input,
.search .field__input,
.search-modal__form .field__input,
.template-search__search .field__input,
input.search__input,
input[type="search"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  /* Clean padding - no extra left space */
  padding: var(--space-sm) var(--space-md) !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 44px !important;
  line-height: 1.4 !important;
  /* Cursor fix */
  caret-color: currentColor !important;
}

/* Override focused state padding (prevents whitish area shift) */
.search__input:focus,
.search__input:not(:placeholder-shown),
.search .field__input:focus,
.search .field__input:not(:placeholder-shown),
.search-modal__form .field__input:focus,
.search-modal__form .field__input:not(:placeholder-shown),
.template-search__search .field__input:focus,
.template-search__search .field__input:not(:placeholder-shown),
input.search__input:focus,
input[type="search"]:focus,
input[type="search"]:not(:placeholder-shown) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  /* Keep same padding when focused - prevents layout shift */
  padding: var(--space-sm) var(--space-md) !important;
  margin: 0 !important;
}

/* ---- Search Field Focus Glow ---- */
.search .field:focus-within,
.search-modal__form .field:focus-within,
.template-search__search .field:focus-within {
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05) !important;
}

/* ---- Search Buttons ---- */
.search__button,
.search .field__button,
.search-modal__form .field__button,
.template-search__search .field__button,
button.search__button {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: none !important;
  border-radius: 50px !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.search__button::before,
.search__button::after,
.search .field__button::before,
.search .field__button::after {
  display: none !important;
  content: none !important;
}

.search__button:hover,
.search .field__button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05) !important;
  transform: scale(1.05) !important;
}

.search__button:active,
.search .field__button:active {
  transform: scale(0.95) !important;
  box-shadow: none !important;
  transition: all 0.1s ease !important;
}

/* Reset button */
.reset__button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.reset__button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  transform: scale(1.05) !important;
}

.reset__button:active {
  transform: scale(0.95) !important;
  transition: all 0.1s ease !important;
}

.reset__button::after {
  display: none !important;
  border: none !important;
}

/* ---- Close Button ---- */
.search-modal__close-button {
  position: relative !important;
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-left: 10px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

.search-modal__close-button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05) !important;
  transform: scale(1.05) !important;
}

.search-modal__close-button:active {
  transform: scale(0.93) !important;
  box-shadow: none !important;
  transition: all 0.1s ease !important;
}

.search-modal__close-button .svg-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.search-modal__close-button svg {
  width: 18px !important;
  height: 18px !important;
}

/* ---- Predictive Search Dropdown ---- */
.predictive-search,
.predictive-search.predictive-search--header {
  background: rgba(30, 30, 30, 0.9) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: none !important;
  border-radius: 20px !important;
  margin-top: 10px !important;
  box-shadow: none !important;
}

.predictive-search__result-group {
  background: transparent !important;
}

.predictive-search__item {
  background: transparent !important;
}

.predictive-search__item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ---- MOBILE SEARCH BAR - COMPLETE FIX ---- */
@media screen and (max-width: 989px) {
  /* Override base.css padding that causes compression */
  .search-modal__content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Search form wrapper - full width */
  .search-modal__form,
  predictive-search.search-modal__form,
  search-form.search-modal__form {
    flex: 1 1 0% !important;
    width: calc(100% - 50px) !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Inner search form */
  .search-modal__form .search,
  .search-modal__form form.search {
    width: 100% !important;
  }

  /* Search field - full width */
  .search-modal__form .field,
  .search .field {
    width: 100% !important;
    flex: 1 1 0% !important;
  }

  /* Search input - full width */
  .search-modal__form .search__input,
  .search-modal__form .field__input,
  .search__input,
  .search .field__input {
    width: 100% !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  /* Close button - fixed size */
  .search-modal__close-button {
    position: relative !important;
    flex: 0 0 40px !important;
    margin-left: 10px !important;
    right: auto !important;
  }

  /* Predictive search dropdown */
  .predictive-search--header {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ---- TEMPLATE SEARCH PAGE (Second search bar on results page) ---- */
.template-search__search {
  width: 100% !important;
}

.template-search__search .search {
  margin-top: 2rem !important;
}

.template-search__search .field {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50px !important;
}

/* ============================================
   FIELD INPUTS - GENERAL (outline removal only)
   ============================================ */
.field {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove field pseudo-elements */
.field::before,
.field::after {
  display: none !important;
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Field input - glass effect without shape changes */
.field__input {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove field input pseudo-elements */
.field__input::before,
.field__input::after {
  display: none !important;
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Field button - glass effect without shape changes */
.field__button {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove field button pseudo-elements */
.field__button::before,
.field__button::after {
  display: none !important;
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}

.field__button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ============================================
   ICON & SLIDER BUTTONS - glass effect
   ============================================ */
.slider-button,
.icon-button {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  outline: none !important;
}

.slider-button:hover,
.icon-button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05) !important;
}

/* ============================================
   MODAL & DRAWER BUTTONS - glass effect
   ============================================ */
.drawer__close,
.modal__close-button,
.cart-notification__close,
.search-modal__close-button,
.quick-add-modal__toggle,
.product-media-modal__toggle,
.product-popup-modal__toggle {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 0.8rem !important;
  width: auto !important;
}

.drawer__close:hover,
.modal__close-button:hover,
.search-modal__close-button:hover,
.quick-add-modal__toggle:hover,
.product-media-modal__toggle:hover,
.product-popup-modal__toggle:hover {
  background: transparent !important;
  color: #ffffff !important;
}

/* Remove underline/decoration effects on close button SVGs */
.quick-add-modal__toggle svg,
.quick-add-modal__toggle .icon,
.product-media-modal__toggle svg,
.product-media-modal__toggle .icon,
.product-popup-modal__toggle svg,
.product-popup-modal__toggle .icon,
.drawer__close svg,
.modal__close-button svg,
.search-modal__close-button svg {
  text-decoration: none !important;
  width: 1.6rem !important;
  height: 1.6rem !important;
}

.quick-add-modal__toggle::before,
.product-media-modal__toggle::before,
.product-popup-modal__toggle::before {
  display: none !important;
  content: none !important;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination__item {
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: none;
}

.pagination__item:hover {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

.pagination__item--current {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   DROPDOWNS & SELECT
   ============================================ */
.select__select,
select,
.localization-form__select {
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  box-shadow: none;
}

/* ============================================
   FORM INPUTS
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50px !important;
  box-shadow: none !important;
  outline: none !important;
}

textarea {
  border-radius: 20px !important;
}

/* ============================================
   CUSTOMER ACCOUNT FIELDS
   ============================================ */
.customer .field input,
.customer .field textarea {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50px !important;
  box-shadow: none !important;
}

.customer .field textarea {
  border-radius: 20px !important;
}

/* ============================================
   SOCIAL LINKS
   ============================================ */
.list-social__link {
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: none;
}

.list-social__link:hover {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
  transform: scale(1.05);
}

/* ============================================
   HEADER ICONS
   ============================================ */
.header__icon:hover {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 50% !important;
}

/* ============================================
   VARIANT PICKER
   ============================================ */
.product-form__input input[type="radio"] + label,
.variant-input label,
.swatch-input label {
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: none;
}

.product-form__input input[type="radio"] + label:hover,
.variant-input label:hover,
.swatch-input label:hover {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.product-form__input input[type="radio"]:checked + label,
.variant-input input:checked + label,
.swatch-input input:checked + label {
  background: rgba(255, 255, 255, 0.9);
  color: #000000;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}

/* Variant picker - ensure text is always white (unchecked) */
.product-form__input label,
.variant-input label,
.swatch-input label,
.product-form__input input[type="radio"] + label {
  color: #ffffff;
}

/* Variant picker - checked state text must be black on white bg */
.product-form__input input[type="radio"]:checked + label,
.variant-input input:checked + label,
.swatch-input input:checked + label {
  color: #000000;
}

/* Variant picker - disabled state */
.product-form__input input[type="radio"]:disabled + label,
.variant-input input:disabled + label,
.swatch-input input:disabled + label {
  opacity: 0.25;
  cursor: not-allowed;
  text-decoration: line-through;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* ============================================
   DISABLED STATES
   ============================================ */
.button:disabled,
.button[aria-disabled="true"],
.button.disabled,
.product-form__submit:disabled {
  background: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.3;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* ============================================
   LOADING STATE
   ============================================ */
.button.loading {
  background: transparent;
}

/* ============================================
   SEARCH MODAL STYLES - Additional Overrides
   ============================================ */
.search-modal__form .search__input,
.search-modal__form .field__input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ============================================
   COMPREHENSIVE OUTLINE CLEANUP
   Removes any remaining white square outlines
   ============================================ */

/* ── GLOBAL FOCUS & TAP TREATMENT ──
   Kill the default blue rectangle everywhere.
   -webkit-tap-highlight-color kills the mobile tap flash.
   Keyboard focus (:focus-visible) gets a subtle gold glow.
   Mouse/touch clicks (:focus:not(:focus-visible)) get nothing. */
* {
  -webkit-tap-highlight-color: transparent;
}

*:focus:not(:focus-visible):not(:active) {
  outline: none !important;
}

/* Gold glow on click/tap — a soft HALO that hugs each element's shape.
   We use box-shadow (not outline): box-shadow follows the element's
   border-radius, so rounded pills / tabs / buttons get a glow that sticks
   to their outline instead of a detached rectangle. box-shadow draws
   outside the border-box and is NOT clipped by the element's own
   overflow:hidden, and it does not conflict with backdrop-filter or
   filter:blur() used by the glass / 3D-carousel sections.
   The first 0 0 0 1px layer is a crisp gold rim on the edge; the blurred
   layers are the halo. Elements that already carry `transition: all`
   (every glass button/tab/pill) fade this glow out smoothly on release. */
button:active,
summary:active,
label:active,
[role="button"]:active,
.button:active {
  outline: none !important;
  /* Pure SOFT halo — no hard 0-blur rim layer (that reads as an outline).
     Full gold-glow system lives in assets/gold-glow.css. */
  box-shadow:
    0 0 4px rgba(197, 168, 95, 0.55),
    0 0 13px rgba(197, 168, 95, 0.5),
    0 0 26px rgba(197, 168, 95, 0.28) !important;
}

/* Header logo — gold glow around the transparent text GLYPHS only.
   The logo is a transparent PNG, so drop-shadow() follows its alpha channel
   and never paints a rectangle. text-shadow covers the text-only fallback
   (when no image logo is set). Glows on click of the logo link, then fades. */
.header__heading-logo {
  transition: filter 0.45s ease;
}
.header__heading-link:active .header__heading-logo {
  filter:
    drop-shadow(0 0 5px rgba(197, 168, 95, 0.9))
    drop-shadow(0 0 15px rgba(197, 168, 95, 0.55)) !important;
}
.header__heading-link:active .header__heading,
a.header__heading-link:active {
  text-shadow:
    0 0 6px rgba(197, 168, 95, 0.7),
    0 0 16px rgba(197, 168, 95, 0.45) !important;
  transition: text-shadow 0.45s ease;
}

*:focus-visible {
  outline: none !important;
  box-shadow: 0 0 6px rgba(197, 168, 95, 0.35), 0 0 14px rgba(197, 168, 95, 0.18) !important;
}

/* Remove Dawn theme default borders from form elements */
.form__input-wrapper,
.form__input,
.form__label,
.form-status,
.input-wrapper {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

/* Input/select/textarea focus — gold glow instead of browser default */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: 0 0 6px rgba(197, 168, 95, 0.35), 0 0 14px rgba(197, 168, 95, 0.18) !important;
  outline: none !important;
}

input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  box-shadow: none !important;
  outline: none !important;
}

/* Product form wrappers - remove borders */
.product-form__input,
.product-form__input--quantity,
.product-form__buttons,
.product-form__buttons > *,
product-form,
product-info {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

/* Cart quantity wrappers */
.cart-item__quantity,
.cart-item__quantity-wrapper,
cart-remove-button {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Remove Dawn's input borders from specific states */
.field--with-error,
.customer .field--with-error,
.field--error {
  border: none;
  box-shadow: none;
}

/* Footer form wrappers */
.footer-block__details-content,
.footer-block form,
footer form {
  background: transparent;
  border: none;
}

/* Predictive search cleanup */
.predictive-search,
.predictive-search--header,
.predictive-search__results,
.predictive-search__result {
  border: none;
  box-shadow: none;
}

/* Remove bottom borders from any element with --inputs-border CSS variable */
[style*="--inputs-border"] {
  border: none;
}

/* Template-specific form fixes */
.template-collection .field,
.template-cart .field {
  background: transparent;
  border: none;
}

/* Ensure no inner shadows on inputs creating fake borders */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  box-shadow: 0 0 0 1000px transparent inset;
  border: none;
}

/* Remove any remaining border-top/bottom that creates partial outlines */
.quantity,
quantity-input,
.newsletter-form .field {
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

/* Fallback: remove decorative borders from common wrapper classes */
[class*="wrapper"],
[class*="container"],
[class*="form__"] {
  border: none;
  outline: none;
}

/* Shopify specific: inputs-border-width variable override */
.field,
.field__input,
.quantity,
quantity-input,
.newsletter-form .field {
  --inputs-border-width: 0;
}

/* ============================================
   DAWN THEME BOX-SHADOW BORDER REMOVAL
   Dawn uses box-shadow to create borders
   ============================================ */

/* Remove the box-shadow borders from quantity selector */
.quantity,
.quantity::before,
.quantity::after,
quantity-input,
quantity-input::before,
quantity-input::after,
.quantity__button,
.quantity__input,
.product-form__quantity .quantity {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Remove the box-shadow borders from newsletter form */
.newsletter-form .field,
.newsletter-form .field::before,
.newsletter-form .field::after,
.newsletter-form .field__input,
.newsletter-form .field__button,
.footer-block__newsletter .field,
.footer-block__newsletter .field__input {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Remove the box-shadow borders from search pseudo-elements only */
.search .field::before,
.search .field::after,
.search-modal__form .field::before,
.search-modal__form .field::after {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Aggressive: Remove ALL box-shadows that use --inputs-border-width */
.field:focus-within,
.field:focus,
.field:hover,
.field__input:focus,
.field__input:focus-visible,
.quantity:focus-within,
.quantity:focus,
quantity-input:focus-within,
quantity-input:focus {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}

/* Override Dawn's ::before/::after pseudo-element borders */
.quantity::before,
quantity-input::before,
.field::before,
.newsletter-form .field::before,
.search .field::before,
.search-modal__form .field::before {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

.quantity::after,
quantity-input::after,
.field::after,
.newsletter-form .field::after,
.search .field::after,
.search-modal__form .field::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Set opacity on inputs border to 0 */
.quantity,
quantity-input,
.field,
.newsletter-form .field,
.search .field {
  --inputs-border-opacity: 0 !important;
}

/* ============================================
   ULTRA-SPECIFIC OVERRIDES FOR DAWN THEME
   These target the exact selectors in base.css
   ============================================ */

/* Override base.css .quantity:after (line 1886) - the white outline */
.quantity:after,
.quantity::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  border: none !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Override base.css .quantity:before (line 1901) - white background */
.quantity:before,
.quantity::before {
  background: transparent !important;
  content: '' !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Override base.css .field:after and .field:before */
.field:after,
.field::after,
.field:before,
.field::before {
  content: '' !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Force glass gradient background on quantity component */
.quantity {
  background: transparent !important;
  border-radius: 50px !important;
}

/* Ensure newsletter and search fields use glass effect properly */
.newsletter-form .field,
.footer-block__newsletter .field {
  background: transparent !important;
  border-radius: 50px !important;
}

.newsletter-form .field:after,
.newsletter-form .field::after,
.newsletter-form .field:before,
.newsletter-form .field::before,
.footer-block__newsletter .field:after,
.footer-block__newsletter .field::after,
.footer-block__newsletter .field:before,
.footer-block__newsletter .field::before {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  content: '' !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* Search field pseudo-element overrides */
.search .field:after,
.search .field::after,
.search .field:before,
.search .field::before,
.search-modal__form .field:after,
.search-modal__form .field::after,
.search-modal__form .field:before,
.search-modal__form .field::before {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  content: '' !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* ============================================
   TEXT & BUTTON FIXES
   ============================================ */

/* All buttons - ensure text is white */
.button,
.button--primary,
.button--secondary,
.button--tertiary,
.product-form__submit,
.cart__submit,
.cart__checkout-button {
  color: #ffffff !important;
}

/* Shopify dynamic checkout / Buy Now - force white text */
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded,
.shopify-payment-button__button--branded,
[class*="shopify-payment-button"] {
  color: #ffffff !important;
}

.shopify-payment-button__button span,
.shopify-payment-button__button--unbranded span,
.shopify-payment-button__button--branded span,
[class*="shopify-payment-button"] span,
[class*="shopify-payment-button"] * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ============================================
   MOBILE MENU OVERLAY FIX
   Glass effect with starfield visible
   ============================================ */

/* Mobile hamburger menu - glass effect to show starfield.
   transform: translateZ(0) forces GPU compositing to prevent
   the backdrop-filter flicker on open. */
.menu-drawer,
menu-drawer {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Mobile facets (filter/sort) wrapper must NOT have backdrop-filter, transform,
   filter, OR will-change because ALL of those create a new containing block,
   breaking position:fixed on the inner form.mobile-facets overlay — causing the
   drawer to render inline/tiny instead of as a full-screen panel.
   NOTE: will-change:transform alone is enough to trap fixed positioning, so it
   MUST be reset here (it's inherited from the .menu-drawer rule above). */
menu-drawer.mobile-facets__wrapper {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
  perspective: none !important;
  contain: none !important;
}

.menu-drawer__inner-container {
  background: transparent !important;
}

.menu-drawer__navigation-container,
.menu-drawer__navigation {
  background: transparent !important;
}

/* Menu drawer overlay - transparent to show starfield */
.menu-drawer__overlay,
.drawer__overlay {
  background: transparent !important;
}

/* Menu items */
.menu-drawer__menu-item,
.menu-drawer__menu li {
  background: transparent !important;
}

/* Menu links */
.menu-drawer__menu-item a,
.menu-drawer__menu a {
  color: #ffffff !important;
}

/* Submenu styling - glass effect */
.menu-drawer__submenu,
.menu-drawer__submenu-list {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Hide main content when menu is open to only show starfield */
@media screen and (max-width: 989px) {
  /* When menu drawer is open, hide main content */
  body:has(.menu-drawer[open]) #MainContent,
  body:has(.menu-drawer[open]) main#MainContent,
  body:has(.menu-drawer[open]) .shopify-section-group-body-content,
  body:has(menu-drawer[open]) #MainContent,
  body:has(menu-drawer[open]) main#MainContent {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* Also hide header content except the menu drawer itself */
  body:has(.menu-drawer[open]) .header__heading,
  body:has(.menu-drawer[open]) .header__icons:not(:has(.header__icon--menu)),
  body:has(.menu-drawer[open]) .header-wrapper > *:not(menu-drawer):not(.menu-drawer),
  body:has(menu-drawer[open]) .header__heading,
  body:has(menu-drawer[open]) .header__icons:not(:has(.header__icon--menu)) {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Hide footer when menu is open */
  body:has(.menu-drawer[open]) footer,
  body:has(.menu-drawer[open]) .footer,
  body:has(menu-drawer[open]) footer,
  body:has(menu-drawer[open]) .footer {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* ============================================
   Z-INDEX FIX FOR BLOCKS BEHIND MOBILE MENU
   These ensure custom block elements stay behind
   the mobile menu overlay without breaking header
   ============================================ */

/* Glass video slider - contain stacking context */
[class*="ai-slider-container-"] {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

/* Slider navigation arrows - stay within their container's context */
[class*="ai-slider-nav-"] {
  z-index: 10 !important;
}

/* Luxury hero banner - contain stacking context */
[class*="ai-luxury-hero-"] {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

/* Hero content stays within its container's context */
[class*="ai-luxury-hero-content-"] {
  z-index: 3 !important;
}

/* FT Liquid Gold hero - same contained stacking context (position comes from its section styles) */
[class*="ft-lg-hero-"] {
  z-index: 1;
  isolation: isolate;
}
[class*="ft-lg-content-"] {
  z-index: 3 !important;
}

/* Main content area should be below header/menu overlays */
#MainContent,
main#MainContent,
.main-content,
#shopify-section-template--*,
.shopify-section-group-body-content,
.shopify-section-group-main-content,
[class*="ai-collection-logos"],
[class*="collection-logos"] {
  position: relative;
  z-index: 1 !important;
}

/* All shopify sections in body should be below header */
.shopify-section:not(.section-header):not(.shopify-section-group-header-group) {
  position: relative;
  z-index: 1 !important;
}

/* Header group container */
.shopify-section-group-header-group {
  position: relative !important;
}

/* Only the actual header section should be fixed - HIGHEST z-index */
#shopify-section-header,
.section-header,
.header-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: var(--z-header) !important;
  pointer-events: auto !important;
}

/* Header element z-index */
header.header,
sticky-header,
.header {
  z-index: var(--z-header) !important;
  pointer-events: auto !important;
}

/* Collection logos section - LOW z-index, below header */
#shopify-section-1760545719000e01fd,
#shopify-section-header ~ .shopify-section,
.shopify-section-group-header-group .shopify-section:not(#shopify-section-header) {
  position: relative !important;
  z-index: var(--z-base) !important;
  margin-top: 140px !important;
}

/* ============================================
   GLOBAL HEADER SPACING - ALL PAGES
   Ensures all sections below header have proper spacing
   ============================================ */

/* First section in main content — flush against hero/banner */
#MainContent > .shopify-section:first-child {
  padding-top: 0 !important;
}

/* Target collection logos classes directly */
[class*="ai-collection-logos-"] {
  position: relative !important;
  z-index: var(--z-base) !important;
}

/* Header icons and interactive elements must be clickable - HIGHEST */
.header__icons,
.header__icon,
.header__heading,
.header__inline-menu,
.list-menu,
.list-menu__item,
.header__menu-item,
.header__search,
.header a,
.header button,
.header summary {
  position: relative !important;
  z-index: var(--z-overlay) !important;
  pointer-events: auto !important;
}

/* Mobile menu and drawer must be above everything */
@media screen and (max-width: 989px) {
  /* Menu drawer - ensure it's above all content */
  .menu-drawer,
  menu-drawer,
  .header__icon--menu[aria-expanded="true"] ~ .menu-drawer {
    z-index: var(--z-modal) !important;
  }

  /* Header icons (like hamburger button) */
  .header__icons,
  .header__icon--menu {
    position: relative;
    z-index: var(--z-header);
  }
}

/* ============================================
   HAMBURGER CLOSE ICON FIX
   Dawn uses .menu-opening class as an animation gate:
   .js details[open]:not(.menu-opening) hides the close icon.
   When scroll handlers fire alongside the menu open, the
   setTimeout that adds .menu-opening can fail, leaving the
   X hidden. A JS failsafe in header.liquid adds .menu-opening
   on the toggle event; this CSS is the belt to that suspender.
   ============================================ */
.js #Details-menu-drawer-container[open] > .header__icon--menu .icon-close {
  visibility: visible !important;
  opacity: 1 !important;
  transform: scale(1) !important;
  display: block !important;
  color: #fff !important;
  fill: #fff !important;
}

.js #Details-menu-drawer-container[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Close X button inside the menu drawer — always accessible fallback
   when the summary icon is hidden by z-index or scroll state issues */
.menu-drawer-close-x {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 10;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgb(var(--color-foreground));
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.menu-drawer-close-x:hover,
.menu-drawer-close-x:focus {
  opacity: 1;
}

.menu-drawer-close-x svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   HIDE HEADER WHEN FULLSCREEN IMAGE VIEWER IS OPEN
   The lightbox lives inside a section with z-index: 1
   so it can never visually beat the fixed header.
   Solution: hide the header entirely during viewing.
   ============================================ */
body.lightbox-open #shopify-section-header,
body.lightbox-open .section-header,
body.lightbox-open .header-wrapper,
body.lightbox-open sticky-header {
  display: none !important;
}

/* Also cover Dawn's native product image viewer modals */
body:has(.product-media-modal[open]) #shopify-section-header,
body:has(.product-media-modal[open]) .section-header,
body:has(.product-media-modal[open]) .header-wrapper,
body:has(.product-media-modal[open]) sticky-header,
body:has(product-media-modal[open]) #shopify-section-header,
body:has(product-media-modal[open]) .section-header,
body:has(product-media-modal[open]) .header-wrapper,
body:has(product-media-modal[open]) sticky-header,
body:has(.product-popup-modal[open]) #shopify-section-header,
body:has(.product-popup-modal[open]) .section-header,
body:has(.product-popup-modal[open]) .header-wrapper,
body:has(.product-popup-modal[open]) sticky-header {
  display: none !important;
}

/* ============================================
   SECTION DIVIDERS — subtle glass-edge glow
   ============================================ */
#MainContent > .shopify-section + .shopify-section::before {
  content: '';
  display: block;
  height: 1px;
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(90deg,
    transparent 5%,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.06) 75%,
    transparent 95%
  );
}

/* ============================================
   COLLECTION PAGE - DESCRIPTION VISIBILITY FIX
   Ultra-aggressive fix for text visibility
   ============================================ */

/* Collection hero section - ensure visibility above starfield */
.collection-hero,
.collection-hero.color-scheme-1,
.collection-hero.color-scheme-2,
.collection-hero.color-scheme-3,
.collection-hero.color-scheme-4,
.collection-hero.color-scheme-5,
.collection-hero[class*="color-"] {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  background-color: transparent !important;
}

.collection-hero__inner {
  position: relative !important;
  z-index: 1 !important;
}

.collection-hero__text-wrapper {
  position: relative !important;
  z-index: 1 !important;
}

/* Collection title - ensure white text */
.collection-hero__title,
.collection-hero__title * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Collection description - FORCE visibility and white text */
.collection-hero__description,
.collection-hero__description.rte,
.collection-hero .rte,
div.collection-hero__description,
div.collection-hero__description.rte {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* RTE content within collection description - ALL elements */
.collection-hero__description *,
.collection-hero .rte *,
.collection-hero__description p,
.collection-hero__description span,
.collection-hero__description div,
.collection-hero__description li,
.collection-hero__description ul,
.collection-hero__description ol,
.collection-hero__description h1,
.collection-hero__description h2,
.collection-hero__description h3,
.collection-hero__description h4,
.collection-hero__description h5,
.collection-hero__description h6,
.collection-hero__description strong,
.collection-hero__description em,
.collection-hero__description b,
.collection-hero__description i,
.collection-hero .rte p,
.collection-hero .rte span,
.collection-hero .rte div,
.collection-hero .rte li,
.collection-hero .rte ul,
.collection-hero .rte ol,
.collection-hero .rte strong,
.collection-hero .rte em {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Links in collection description */
.collection-hero__description a,
.collection-hero .rte a {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

.collection-hero__description a:hover,
.collection-hero .rte a:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Override any color scheme that might hide text */
[class*="color-"] .collection-hero__description,
[class*="color-"] .collection-hero__description *,
[class*="color-"] .collection-hero .rte,
[class*="color-"] .collection-hero .rte * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* General RTE visibility fix across the site */
.rte {
  color: inherit !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Force text visibility on all main content areas */
#MainContent .rte,
#MainContent .rte *,
main .rte,
main .rte * {
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================
   QUICK-ADD MODAL — Glass Treatment
   ============================================ */

/* Lock scroll on html when quick-add modal is open */
body.overflow-hidden {
  overflow: hidden !important;
  touch-action: none;
}

body.overflow-hidden html,
html:has(body.overflow-hidden) {
  overflow: hidden !important;
}

/* Backdrop — dark blur overlay */
.quick-add-modal[open] {
  background: rgba(0, 0, 0, var(--quick-add-overlay-opacity, 0.3)) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Modal content — glass card with rounded corners */
.quick-add-modal__content {
  background: rgba(0, 0, 0, 0.75) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  overflow: auto !important;
  overflow-x: hidden !important;
  max-height: 90vh !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
  scrollbar-width: none !important;
}

.quick-add-modal__content::-webkit-scrollbar {
  display: none !important;
}

/* Product image — rounded all 4 corners */
quick-add-modal .product__media-item,
quick-add-modal .product__media-list,
quick-add-modal .product__column-sticky,
quick-add-modal .product__media-wrapper,
quick-add-modal .media,
quick-add-modal .product-media-container,
quick-add-modal .global-media-settings {
  border-radius: 16px !important;
  overflow: hidden !important;
}

quick-add-modal .product__media-item img,
quick-add-modal .media img {
  border-radius: 16px !important;
}

/* Scrollable content area — transparent bg */
.quick-add-modal__content-info {
  background: transparent !important;
}

/* Close button — plain X, no enclosing */
.quick-add-modal__toggle {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8rem !important;
  top: 1.2rem !important;
  right: 1.2rem !important;
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  cursor: pointer;
}

.quick-add-modal__toggle:hover {
  background: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.quick-add-modal__toggle svg,
.quick-add-modal__toggle .icon {
  width: 1.8rem !important;
  height: 1.8rem !important;
  stroke: #fff;
}

/* ── Font sizing — scale up all text to be readable ── */
quick-add-modal .product__title,
quick-add-modal .product__text,
quick-add-modal h1 {
  font-size: 2.2rem !important;
  line-height: 1.3 !important;
}

quick-add-modal .price,
quick-add-modal .price-item,
quick-add-modal .price-item--regular,
quick-add-modal .price-item--sale {
  font-size: 1.8rem !important;
}

quick-add-modal .price-item--compare {
  font-size: 1.5rem !important;
}

quick-add-modal .product-form__input label,
quick-add-modal fieldset legend,
quick-add-modal .product-form__group-label,
quick-add-modal .form__label {
  font-size: 1.5rem !important;
}

quick-add-modal .product-form__input--pill input[type='radio'] + label {
  font-size: 1.4rem !important;
  padding: 1rem 2rem !important;
}

quick-add-modal .quantity__input,
quick-add-modal .quantity__button {
  font-size: 1.5rem !important;
}

quick-add-modal .product-form__submit,
quick-add-modal .shopify-payment-button__button,
quick-add-modal .button {
  font-size: 1.5rem !important;
  padding: 1.4rem 2.8rem !important;
}

quick-add-modal .accordion__title,
quick-add-modal summary span,
quick-add-modal .product__accordion .accordion .summary__title {
  font-size: 1.6rem !important;
}

quick-add-modal .accordion__content p,
quick-add-modal .accordion__content,
quick-add-modal .product__description,
quick-add-modal .rte {
  font-size: 1.5rem !important;
  line-height: 1.6 !important;
}

/* ── Font sizing — PRODUCT PAGE (not just modal) ── */
.product__title {
  font-size: 2.4rem !important;
  line-height: 1.3 !important;
}

.product .price,
.product .price-item,
.product .price-item--regular,
.product .price-item--sale {
  font-size: 2rem !important;
}

.product .price-item--compare {
  font-size: 1.6rem !important;
}

.product-form__input .form__label,
.product-form__group-label,
product-info .form__label {
  font-size: 1.5rem !important;
}

.product-form__submit,
.product-form__submit span,
.shopify-payment-button__button {
  font-size: 1.6rem !important;
}

.product__accordion .accordion__title,
.product__accordion summary span {
  font-size: 1.7rem !important;
}

.product__accordion .accordion__content,
.product__accordion .accordion__content p,
.product__description,
product-info .rte {
  font-size: 1.5rem !important;
  line-height: 1.7 !important;
}

/* Variant pills — glass style */
quick-add-modal .product-form__input label,
quick-add-modal fieldset label {
  border-radius: 50px !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

quick-add-modal .product-form__input label:hover,
quick-add-modal fieldset label:hover {
  border-color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

quick-add-modal .product-form__input label.active,
quick-add-modal .product-form__input input:checked + label,
quick-add-modal input[type='radio']:checked + label,
quick-add-modal [class*="lps-variant-input"]:checked + [class*="lps-variant-pill"] {
  border-color: rgba(197, 168, 95, 0.5) !important;
  background: rgba(197, 168, 95, 0.08) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(197, 168, 95, 0.2), inset 0 0 8px rgba(197, 168, 95, 0.05) !important;
}

/* Quantity selector — rounded */
quick-add-modal .quantity {
  border-radius: 50px !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Collapsible tabs (Description, Features, Usage) — clean borders */
quick-add-modal .product__accordion .accordion,
quick-add-modal details[id^="Details-"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* View details link */
quick-add-modal .product__view-details a {
  border-radius: 50px !important;
}

/* ============================================
   VARIANT PILL — Selected state: glass glow for dark theme
   ============================================ */
.product-form__input--pill input[type='radio']:checked + label {
  background-color: rgba(197, 168, 95, 0.08) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  color: #fff !important;
  border-color: rgba(197, 168, 95, 0.5) !important;
  box-shadow: 0 0 14px rgba(197, 168, 95, 0.2), inset 0 0 8px rgba(197, 168, 95, 0.05) !important;
}

.product-form__input--pill input[type='radio']:checked + label::before {
  box-shadow: none !important;
}

.product-form__input--pill input[type='radio'] + label {
  background: transparent !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transition: all 0.3s ease !important;
}

.product-form__input--pill input[type='radio'] + label:hover {
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.08) !important;
}

/* ============================================
   PRODUCT IMAGE — Rounded corners + thin white outline (global)
   Covers Dawn product media AND luxury-product-showcase gallery
   ============================================ */
.product__media-item .product-media-container,
.product__media-item .global-media-settings,
.product__media-item .media,
quick-add-modal .product__media-item .product-media-container,
quick-add-modal .product__media-item .global-media-settings,
quick-add-modal .product__media-item .media,
quick-add-modal [class*="lps-gallery-"] {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  aspect-ratio: 1 / 1 !important;
}

.product__media-item img,
quick-add-modal .product__media-item img,
quick-add-modal [class*="lps-slide-"] img {
  border-radius: 14px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* ============================================
   PRODUCT IMAGE NAVIGATION ARROWS — Force visible everywhere
   Override ALL Dawn hiding rules: component-slider.css, section-main-product.css,
   .small-hide utility, and adjacent-sibling selectors.
   ============================================ */

/* Nuclear override: EVERY context that hides .slider-buttons */
.slider-buttons,
.slider-buttons.small-hide,
.slider-buttons.quick-add-hidden,
.slider--mobile + .slider-buttons,
.slider--mobile + .slider-buttons.small-hide,
.product__media-container .slider-buttons,
slider-component .slider-buttons,
media-gallery .slider-buttons,
quick-add-modal .slider-buttons,
quick-add-modal slider-component .slider-buttons {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  justify-content: space-between !important;
  pointer-events: none !important;
  z-index: 10 !important;
  padding: 0 8px !important;
}

/* Ensure slider-component has positioning context */
slider-component,
quick-add-modal slider-component {
  position: relative !important;
  display: block !important;
}

/* Hide the "1 / 3" counter between arrows */
.slider-counter,
quick-add-modal .slider-counter {
  display: none !important;
}

/* Style ALL arrow/nav buttons — no circles, no borders, clean chevrons.
   Covers: Dawn slider-buttons, carousel-nav, lightbox-nav, gallery-nav,
   and ANY button inside quick-add-modal that acts as navigation. */
slider-component .slider-button,
media-gallery .slider-button,
quick-add-modal .slider-button,
.slider-button,
[class*="carousel-nav-"],
[class*="lightbox-nav-"],
[class*="gallery-nav-"],
quick-add-modal [class*="gallery-nav-"],
quick-add-modal [class*="lightbox-nav-"],
quick-add-modal button[data-lps-gallery-prev],
quick-add-modal button[data-lps-gallery-next],
quick-add-modal button[data-lps-lb-prev],
quick-add-modal button[data-lps-lb-next],
quick-add-modal button[data-carousel-prev],
quick-add-modal button[data-carousel-next] {
  pointer-events: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: color 0.3s ease !important;
  padding: 0 !important;
}

slider-component .slider-button:hover,
quick-add-modal .slider-button:hover,
[class*="carousel-nav-"]:hover,
[class*="gallery-nav-"]:hover,
quick-add-modal button[data-lps-gallery-prev]:hover,
quick-add-modal button[data-lps-gallery-next]:hover {
  color: rgba(255, 255, 255, 0.6) !important;
}

slider-component .slider-button:disabled,
quick-add-modal .slider-button:disabled {
  opacity: 0.15 !important;
  cursor: default !important;
}

slider-component .slider-button .icon,
slider-component .slider-button svg,
quick-add-modal .slider-button .icon,
quick-add-modal .slider-button svg {
  width: 100% !important;
  height: 100% !important;
  color: inherit !important;
}

/* ============================================
   MOBILE SWIPE — Ensure scroll-snap on all product image sliders
   ============================================ */
.product__media-list.slider.slider--mobile,
quick-add-modal .product__media-list,
quick-add-modal .slider.slider--mobile {
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
}

.product__media-list .slider__slide,
quick-add-modal .slider__slide {
  scroll-snap-align: start !important;
  flex-shrink: 0 !important;
}

/* Quick-add modal — show arrows too */
quick-add-modal .slider-buttons.quick-add-hidden,
quick-add-modal .slider-buttons {
  display: flex !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  justify-content: space-between !important;
  pointer-events: none !important;
  z-index: 5 !important;
  padding: 0 8px !important;
}

quick-add-modal .slider-counter {
  display: none !important;
}

quick-add-modal .slider-button {
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  opacity: 0.7;
}

quick-add-modal .slider-button:hover {
  background: rgba(0, 0, 0, 0.6) !important;
  opacity: 1;
}

/* Ensure the media wrapper has relative positioning for arrow placement */
.product__media-container,
.product__media-wrapper,
quick-add-modal .product__media-wrapper {
  position: relative !important;
}

/* Mobile — larger touch targets + swipable */
@media screen and (max-width: 749px) {
  .product__media-container .slider-button {
    width: 36px !important;
    height: 36px !important;
  }

  /* Ensure mobile slider is swipable */
  .product__media-list.slider--mobile {
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-x: auto !important;
  }

  .product__media-list.slider--mobile .slider__slide {
    scroll-snap-align: center !important;
  }
}

/* ============================================
   PRODUCT MEDIA MODAL — Horizontal swipe lightbox
   JS wraps each media item in a slide div,
   CSS handles the horizontal snap scrolling.
   ============================================ */

.product-media-modal__dialog {
  background: rgba(0, 0, 0, 0.95) !important;
}

.product-media-modal__content.lightbox-swipe {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  height: 100vh !important;
  align-items: center !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-bottom: 0 !important;
}

.product-media-modal__content.lightbox-swipe::-webkit-scrollbar {
  display: none !important;
}

/* Override Dawn hiding non-active images — show all slides for swipe */
.product-media-modal__content.lightbox-swipe > .lightbox-slide {
  display: flex !important;
}

.product-media-modal__content.lightbox-swipe > .lightbox-slide > * {
  display: block !important;
}

.lightbox-slide {
  flex: 0 0 100vw !important;
  width: 100vw !important;
  height: 100vh !important;
  scroll-snap-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 20px !important;
  box-sizing: border-box !important;
}

.lightbox-slide img {
  max-width: 90% !important;
  max-height: 85vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Lightbox arrow nav */
.lightbox-nav {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: calc(var(--z-modal) + 10) !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  outline: none !important;
  transition: color 0.3s ease !important;
}

.lightbox-nav:hover { color: rgba(255, 255, 255, 0.6) !important; }
.lightbox-nav--prev { left: 16px !important; }
.lightbox-nav--next { right: 16px !important; }

.lightbox-nav svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================
   PRODUCT GRID CARDS — Rounded edges + clickable images
   ============================================ */

/* Make entire card clickable */
.card-wrapper,
.product-card-wrapper {
  position: relative !important;
  cursor: pointer !important;
}

/* Rounded card images */
.card .media,
.card-wrapper .media,
.card__media,
.card__inner,
.card--media .card__inner,
.card--standard .card__inner,
.product-card-wrapper .card,
.product-card-wrapper .card__inner {
  border-radius: 14px !important;
  overflow: hidden !important;
}

.card .media img,
.card-wrapper .media img,
.card__media img {
  border-radius: 14px !important;
}

/* Card outer container */
.card--media,
.card--standard,
.card-wrapper .card {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}

/* Remove Dawn's default card background/border */
.card__inner {
  background: transparent !important;
}

.card__inner::after {
  display: none !important;
}

/* Card hover — subtle lift */
.card-wrapper:hover .card,
.product-card-wrapper:hover .card {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Card text styling */
.card__heading,
.card__heading a,
.card-information__text,
.card-information__wrapper {
  color: #fff !important;
}

.card__heading a {
  text-decoration: none !important;
}

.card__heading a:hover {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Price text */
.price, .price-item, .price-item--regular {
  color: rgba(255, 255, 255, 0.8) !important;
}


/* ============================================
   FT IMPERIAL HEADINGS — Cinzel caps on every
   section heading, matching the hero's
   "The Craft of Fragrance" engraving.
   ============================================ */
[class^="bfq-heading-"],
[class^="bbs-heading-"],
[class^="bhc-heading-"],
[class^="bts-title-"],
[class^="ds-heading-"],
[class^="ds-heading-"] h2,
[class^="lps-product-title-"],
[class^="brv-heading-"],
[class^="bnl-heading-"],
[class^="bsq-t-heading-"],
[class^="bsq-heading-"],
.testimonial-section__heading,
.ft-section-title,
.ftg-hero-title,
.fts-road-title,
.rv-heading,
.ftfn__heading,
h2.title,
.related-products__heading {
  font-family: 'Cinzel', 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: #f4eee0;
}