/** Shopify CDN: Minification failed

Line 1236:6 Unexpected "/"

**/

a[target="_blank"]:after {
    content: " (opens in new window)";
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media screen and (min-width: 1025px) {
    body.ol-body a.link, .ais-filter-pills-list li , .custom-sort-selected-value, .aa-ClearButton, .button.link, .gm-submenu .gm-links li.gm-item > a{
      text-decoration: underline 0.09em rgba(0,0,0,0); /* transparent to start */
      text-underline-offset: 0.2em;
      transition: text-decoration-color 240ms ease;
    }

    body.ol-body a.link:hover, .ais-filter-pills-list li:hover , .aa-ClearButton:hover, .custom-sort-selected-value:hover, button.link:hover, .gm-submenu .gm-links li.gm-item > a:hover{
      text-decoration-color: currentColor;              /* fade in smoothly */
    }
}

:first-child:is(p, h1, h2, h3, h4, h5, h6):not(.nosto-title),
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6):not(.nosto-title) {
  margin-block-start: 0;
}

/* Custom-Wrapper CSS */
.page-width-content.content-wrapper {
  display: flex;
  width: 100vw;
  max-width: 100vw;
  margin: 0;
}

shopify-section:not(.header-section) :is(.section, .cart__summary-container) {
  background: transparent;
  padding-right: 0;
}

.is-plp-page .ai-breadcrumb-amxllv0tmunbwukdjuaigenblockf15b1167cvbne {
  padding: 10px !important;
  @media screen and (max-width: 768px) {
    padding: 5px !important;
  }
}
@media screen and (max-width: 768px) {
  .section-content-wrapper.section-content-wrapper {
    /* padding-left: 20px; */
  }
}

.skip-to-content-link {
  position: absolute;
  overflow: hidden;
  height: 1px;
  left: -99999px;
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

.skip-to-content-link:focus {
  z-index: var(--layer-temporary);
  overflow: auto;
  width: auto;
  height: auto;
  padding: var(--padding-lg) var(--padding-4xl);
  left: var(--margin-lg);
  top: var(--margin-lg);
  background-color: var(--color-background);
  box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
}

span, button {
  font-family: var(--font-body--family);
}

.builder-block :where(span, p, a, button) {
    font-family: inherit; /* use builder font  */
}

.price, .compare-at-price {
  font-size: var(--font-size-16);
}
.ais-hit .price, .ais-hit .compare-at-price {
  font-size: var(--font-size-13);
  font-weight: 600;
}
/* .builder-block.ais-hit--details a span {
    color: var(--secondary-color);
} */

.builder-block.ais-hit--details .ais-hit--price {
   font-size: var(--font-size-13);
}
.sale-price .price {
  color: var(--sale-price-color);
}

tax-note.tax-note.tax-note > small {
  font-size: inherit;
}
.charity-message-block {
  background: #9fb0cd80;
  padding: 20px;  
  margin: 36px 0 25px;
  font-size: var(--font-size-12);
  letter-spacing: 0;
  @media screen and (max-width: 768px) {
      margin: 18px 0 16px;
  }
}

.quantity-selector .quantity-minus[disabled],
.quantity-selector .quantity-plus[disabled] {
  pointer-events: none;
}

.product-details .quantity-selector {
  border-radius: var(--style-border-radius-buttons-primary);
}

.quantity-selector.cart-primary-typography > button, 
.quantity-selector.cart-primary-typography > input {
  width: 26px;
  height: 28px;
}
.quantity-selector svg {
  width: 10px;
  height: 10px;
}

.product-information .quantity-selector {
  display: none;
}

/* Custom-Display CSS */
.d-none {
  display: none !important;
}
.d-inline-flex {
  display: inline-flex !important;
}

.product-badge-pdp .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 4px;
  height: 25px;
  font-size: var(--font-size-10);
  text-transform: uppercase;
  margin-right: 1.4rem;
}

.product-badge-pdp .badge-curated {
  background: var(--main-color);
  color: var(--color-white);
}

.product-badge-pdp .final-sale {
  background: #F6F1E8;
  color: var(--color-font-base);
}

.size-guide-btn-pdp {
  font-size: var(--font-size-10);
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
  text-underline-offset: 5px;
  -webkit-tap-highlight-color: transparent;
}
.size-guide-btn-pdp:hover{
  text-decoration: none;
}
.size-guide-btn-pdp:focus-visible,
.size-guide-btn-pdp:focus {
  outline: none;
}


.header__row.header__row--bottom.section.section--full-width-margin.section--full-width > *{
  @media screen and (min-width: 750px) {
    padding-left: 0 !important;
    padding-right: 0 !important ;
  }
}

.cart-compare-at-price {
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
}

.sale-price .cart-price {
  color: var(--sale-price-color);
}

.yotpo-widget-campaign-widget.yotpo-widget-override-css.yotpo-widget-clear {
  margin-top: 100px !important;
}

@media screen and (max-width: 749px) {
  .yotpo-widget-campaign-widget.yotpo-widget-override-css.yotpo-widget-clear {
    margin-top: 144px !important;
  }
}

.yotpo-action-buttons-wrapper {
  margin-bottom: 30px;
}
.yotpo-widget-hero-section.yotpo-widget-override-css {
  margin-bottom: 0 !important;
}
.yotpo-custom-step-icon,
.page-width-content.content-wrapper{
  width: auto !important;
} 

.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-layout-container.yotpo-logged-in-customer .yotpo-is-mobile.yotpo-text-on-background:before{
  top: 0 !important;
  margin-top: 20px;
}
/* Rewards page initial loader css */
.loading-spinner {
  border: 8px solid #eee;
  border-top: 8px solid #2F2F30;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin: auto;
}
@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
/* PWA modal SVG logo size */
.pwa-modal {
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background: rgba(0, 0, 0, 0.61);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pwa-modal > div {
  background: rgba(249, 248, 247, 1);
  padding:47px 20px 65px;
  border-radius:10px;
  max-width:90vw; 
  width: 259px; 
  min-height:232px; 
  text-align:center;
  position:relative;
}
.pwa-modal p {
  margin-top: 20px;
  font-size: var(--font-size-12);
}
.pwa-svg-wrapper svg {
  width: 142px;
  height: 29px;
  display: block;
  margin: 0 auto;
}
.yotpo-widget-campaign-widget .yotpo-widget-campaign-widget-container{
  max-width: 100vw !important;
}

/* Impact drawer opens from left */
.impact-drawer {
  height: 100dvh;
  position: fixed;
  top: 0;
  right: 0;
  width: 548px;
  max-width: 100vw;
  background: var(--color-white);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
  z-index: 10000;
  padding: 27px 33px;
  overflow: auto;
}

.impact-drawer.open {
  transform: translateX(0);
}

.impact-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9;
  overflow-y: auto;
}

.impact-drawer-overlay.open {
  display: block;
}

/* impact drawer header layout */
.impact-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 26px;
}

.is-pwa .impact-drawer-header {
  margin-top: 17px;
}

.is-pwa .yotpo-loyalty-popup-overlay {
  padding-top: 20px;
}

.is-pwa .yotpo-logged-in-view {
  display: flex !important;
  flex-direction: column !important;
}

.is-pwa .yotpo-logged-in-view .yotpo-customized-text.yotpo-headline {
  order: 1 !important;
}

.is-pwa .yotpo-logged-in-view .yotpo-description {
  order: 2 !important;
}

.is-pwa .yotpo-logged-in-view .yotpo-action-buttons-tile {
  order: 3 !important;
}

.impact-drawer-header>div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.impact-drawer-title {
  font-size: var(--font-size-18);
}

.impact-desc {
  font-size: var(--font-size-14)
}

/* Drawer cross button */
.impact-close {
  margin-left: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.impact-close svg {
  width: 10px;
  height: 10px;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .impact-close svg {
    width: 12px;
    height: 12px;
  }
  /* PWA: Add top padding to impact drawer so content clears the native app icons */
  .is-pwa .impact-drawer {
    padding-top: 47px;
  }
}

.charity_img {
  width: 9.8rem;
  height: 9.8rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border: 0.15rem rgb(216, 211, 211) solid;
  cursor: pointer;
  background-color: var(--color-white);
}

.charity_img > img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  position: absolute;
  object-fit: contain;
}

.impact_not_logged_in_msg {
  font-size: var(--font-size-12);
  background-color: var(--color-signin-background);
  padding: 16px;
  border-radius: 2px;
  margin-bottom: 25px;
}

.impact_not_logged_in_msg > a {
  border-bottom: 1px solid currentColor;
  text-decoration: none !important;
}

.inner_wrapper {
  position: relative;
  margin-top: 40px;
}

.pillar_title {
  display: flex;
}

.pillar_title .category {
  flex: 60%;
  font-size: var(--font-size-14);
}

.charity_name {
  color: var(--color-impact);
  text-align: right;
  font-size: var(--font-size-12);
}

.inner_wrapper ul {
  display: inline-flex;
  overflow: auto;
  width: 100%;
  padding: 0 1rem 0 0;
  cursor: pointer;
  margin-top: 2.4rem;
}

.inner_wrapper ul > li {
  margin: 0 1rem 1.5rem 0;
  list-style: none;
}

.selected_charity .charity_img {
  border: 0.4rem solid var(--color-impact) !important; 
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

.selected_charity .selected_tick {
  display: block;
}

.selected_tick {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: none;
}

.selected_tick svg {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
}

.separator {
  padding-bottom: 15px;
  border-bottom: 0.5px solid #2F2F3030;
}

.impact_cta_container {
  display: flex;
  flex-direction: column;
}

.impact_cta_container > button {
  width: 100%;
}

.impact_cta_container .skip_button {
  margin-top: 2rem;
}

.logged-in .yotpo-vip-tiers-progress-bar-wrapper{
  display: none !important;
}

.logged-in .yotpo-vip-tiers-widget .yotpo-widget-clear > div{
  background-color: #f9f7f6 !important;
}

.yotpo-vip-progresss-only.logged_out .yotpo-vip-tiers-widget.yotpo-widget-override-css {
  margin-top: 0;
}
.yotpo-vip-progresss-only .yotpo-vip-tiers-grid-container,
.yotpo-vip-progresss-only .yotpo-vip-tiers-headline {
  display: none !important;
}

.nosto_element#productpage-nosto-2 {
  margin-top: 25px;
}

.nosto_element#productpage-nosto-3 {
  margin-top: 15px;
  margin-bottom: 30px;
}

.nosto_element#bag-recommendations{
  margin: 22px 0 32px 0;
}

.nosto_element#searchpage, .nosto_element#searchpage-no-results, .nosto_element#categorypage-nosto-1{
  padding: 30px 0 32px 0;
  background: #f7f7f794;
}

/* Wishlist header icon*/
.wishlist-hero-header-icon {
  align-items: center;
  background: none;
  border: none;
  color: var(--color-foreground, currentColor);
  height: var(--button-size);
  padding: 0;
  position: relative;
  text-decoration: none;
  width: var(--button-size);
}
/* Match wishlist count badge to cart bubble */
/* .wishlist-hero-header-icon .wishlist-hero-items-count {
  position: absolute !important;
  top: 4.8px;
  right: 3.5px;
  min-width: 18px;
  height: 18px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background-color: #7E93AA;
  color: var(--color-background, #fff);
  font-family: var(--font-paragraph--family);
  font-weight: var(--font-paragraph--weight);
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1;
  padding-inline: 2px;
  pointer-events: none;
} */
.wishlist-hero-header-icon > :not(svg),
.header__row--top .site-header__icon span.wishlist-hero-items-count.wishlist-hero-items-count-exists {
  display: none !important;
}

.wishlist-hero-share-icons > div > div {
  display: none;
}
 
.wishlist-hero-share-icons > div > div.SocialMediaShareButton[aria-label="facebook"],
.wishlist-hero-share-icons > div > div.SocialMediaShareButton[aria-label="twitter"],
.wishlist-hero-share-icons > div > div.SocialMediaShareButton[aria-label="whatsapp"],
.wishlist-hero-share-icons > div > div.SocialMediaShareButton[aria-label="pinterest"] {
  display: inline-block;
  padding: 1%;
  cursor: pointer;
}
.wishlist-hero-share-icons .SocialMediaShareButton--pinterest > div {
  width: 50px !important;
  height: 50px !important;
}
.wishlist-hero-share-icons .SocialMediaShareButton--pinterest svg {
  width: 50px !important;
  height: 50px !important;
}
.wishlist-hero-share-icons > div:nth-child(4),
.wishlist-hero-share-icons > div:nth-child(5),
.wishlist-hero-share-icons > div:nth-child(6) {
  padding: 0 !important;
}

/* =============================================
   PARALLAX-STYLE SCROLL EFFECTS — Homepage
   ============================================= */

/* ── Homepage transparent menu bar ──
   Parallax-style: uses a ::before pseudo-element with opacity transition
   for ultra-smooth transparent ↔ white fading.
   Toggle: controlled by "Transparent menu bar (homepage)" in theme editor.
*/

/* Position context for the ::before overlay */
header-component.header--transparent-menu,
header-component.header--transparent-menu .header__row,
header-component.header--transparent-menu .header__row--top,
header-component.header--transparent-menu .header__row--bottom {
  position: relative;
}

/* The white background lives on ::before — we transition its opacity */
header-component.header--transparent-menu .header__row--top::before,
header-component.header--transparent-menu .header__row--bottom::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-background, #fff);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
}

/* Ensure all header content sits above the ::before */
header-component.header--transparent-menu .header__row--top > *,
header-component.header--transparent-menu .header__row--bottom > * {
  position: relative;
  z-index: 1;
}

/* Force ALL backgrounds transparent so the ::before shows through */
header-component.header--transparent-menu:not([data-sticky-state="active"]),
header-component.header--transparent-menu:not([data-sticky-state="active"]) .header__row,
header-component.header--transparent-menu:not([data-sticky-state="active"]) .header__row--top,
header-component.header--transparent-menu:not([data-sticky-state="active"]) .header__row--bottom,
header-component.header--transparent-menu:not([data-sticky-state="active"]) .header__row--top[class*="color-"],
header-component.header--transparent-menu:not([data-sticky-state="active"]) .header__row--bottom[class*="color-"],
header-component.header--transparent-menu:not([data-sticky-state="active"]) .header__columns,
header-component.header--transparent-menu:not([data-sticky-state="active"]) .header-menu,
header-component.header--transparent-menu:not([data-sticky-state="active"]) .header-menu__inner,
header-component.header--transparent-menu:not([data-sticky-state="active"]) .menu-list {
  background-color: transparent !important;
  background: transparent !important;
}
header-component.header--transparent-menu:not([data-sticky-state="active"]) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--layer-overlay);
}

/* Globo dim overlay: must not cover the nav bar.
   Never capture pointer events (Globo handles hover via the menu items themselves).
   On desktop, push the overlay below the header using the same max() fallback as the submenu. */
header-component.header--transparent-menu .gm-custom-overlay {
  pointer-events: none !important;
}

/* @media (min-width: 750px) {
  header-component.header--transparent-menu .gm-custom-overlay.gm-active,
  header-component.header--transparent-menu .gm-custom-overlay.gm-active-mob {
    position: fixed !important;
    top: max(var(--header-group-height, 0px), var(--header-height, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
  }
} */

/* Force ALL descendants transparent — beats Globo Menu and any app specificity */
/* BUT exclude menu drawer contents when menu is open, and exclude Globo overlay active state */
header-component.header--transparent-menu:not([data-sticky-state="active"]):not(:has(details[open])):not(:has(#Details-menu-drawer-container[open])):not(.mobile-menu-open):not(:has(.gm-custom-overlay.gm-active)) *:not(.global-banner):not(.global-banner *):not(.menu-drawer__backdrop):not(.menu-drawer__backdrop *) {
  background-color: transparent !important;
  background: transparent !important;
}

/* Global banner exception — keep its background and ensure visibility */
header-component.header--transparent-menu .global-banner,
header-component.header--transparent-menu .global-banner * {
  background-color: unset !important;
  background: unset !important;
}

.global-banner {
  position: relative;
  z-index: 1 !important;
}

/* ── Light mode: white text/icons when transparent (DESKTOP ONLY) ── */
@media (min-width: 750px) {
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) {
    --color-foreground: 255, 255, 255;
    color: rgb(255, 255, 255);
  }

  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header__row--top,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header__row--bottom {
    --color-foreground: 255, 255, 255;
    color: rgb(255, 255, 255);
  }

  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) a,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) button,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) span,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .menu-list__link,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item > a,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item > a span,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-level-0 > a,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-level-0 > a *,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-has-submenu > a,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-has-submenu > a *,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-submenu-mega > a,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-submenu-mega > a * {
    color: rgb(255, 255, 255) !important;
  }

  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg {
    color: rgb(255, 255, 255) !important;
  }

  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg path,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg line,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg circle,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg rect,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg polyline,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg polygon {
    stroke: rgb(255, 255, 255) !important;
  }

  /* Light mode: show inverse logo (white), hide original logo */
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo__image-container--original {
    display: none !important;
  }

  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo__image-container--inverse {
    display: block !important;
  }
}

/* Light mode: if no inverse logo exists, invert the original logo using CSS filter (DESKTOP ONLY) */
@media (min-width: 750px) {
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo:not(:has(.header-logo__image-container--inverse)) .header-logo__image-container--original {
    display: block !important;
  }

  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo:not(:has(.header-logo__image-container--inverse)) .header-logo__image-container--original img,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo:not(:has(.header-logo__image-container--inverse)) .header-logo__image-container--original svg {
    filter: brightness(0) invert(1) !important;
  }
}

/* ── Dark mode: black text/icons when transparent ── */
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) {
  --color-foreground: 47, 47, 48;
  color: #2f2f30;
}

header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header__row--top,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header__row--bottom {
  --color-foreground: 47, 47, 48;
  color: #2f2f30;
}

header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) a,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) button,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) span,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .menu-list__link,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item > a,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item > a span,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-level-0 > a,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-level-0 > a *,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-has-submenu > a,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-has-submenu > a *,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-submenu-mega > a,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-submenu-mega > a * {
  color: #2f2f30 !important;
}

header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg {
  color: #2f2f30 !important;
}

header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg path,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg line,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg circle,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg rect,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg polyline,
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg polygon {
  stroke: #2f2f30 !important;
}

/* Dark mode: show original logo (black), hide inverse logo */
header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo__image-container--inverse {
  display: none !important;
}

header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo__image-container--original {
  display: block !important;
}

/* ── Reveal white background: sticky scroll ── */
header-component.header--transparent-menu[data-sticky-state="active"] .header__row--top::before,
header-component.header--transparent-menu[data-sticky-state="active"] .header__row--bottom::before {
  opacity: 1;
}
header-component.header--transparent-menu[data-sticky-state="active"] {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* PWA: Ensure sticky header has solid background on homepage with immersive hero */
.is-pwa header-component.header--transparent-menu[data-sticky-state="active"],
.is-pwa header-component.header--transparent-menu[data-sticky-state="active"] .header__row--top,
.is-pwa header-component.header--transparent-menu[data-sticky-state="active"] .header__row--bottom {
  background-color: var(--color-background, #fff) !important;
}

/* Restore backgrounds on ALL descendants when sticky */
header-component.header--transparent-menu[data-sticky-state="active"] *:not(.cart-bubble__background) {
  background-color: unset;
  background: unset;
}

/* ── Reveal white background: Globo overlay active (menu hovered) ── */
header-component.header--transparent-menu:has(.gm-custom-overlay.gm-active) .header__row--top::before,
header-component.header--transparent-menu:has(.gm-custom-overlay.gm-active) .header__row--bottom::before {
  opacity: 1;
}

/* Restore backgrounds on ALL descendants when overlay is active — but not the overlay itself */
header-component.header--transparent-menu:has(.gm-custom-overlay.gm-active) *:not(.cart-bubble__background):not(.gm-custom-overlay) {
  background-color: unset;
  background: unset;
}

/* ── Hide bag count when immersive hero is in viewport (transparent header) ── */
/* Show it when header becomes solid (on scroll or menu hover) */
header-component.header--transparent-menu:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .cart-bubble {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

header-component.header--transparent-menu[data-sticky-state="active"] .cart-bubble,
header-component.header--transparent-menu:has(.gm-custom-overlay.gm-active) .cart-bubble {
  opacity: 1;
  visibility: visible;
}

/* ── Mobile: Light mode - white text/icons (same as desktop light mode) ── */
@media (max-width: 749px) {
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) {
    --color-foreground: 255, 255, 255;
    color: rgb(255, 255, 255);
  }

  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header__row--top,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header__row--bottom {
    --color-foreground: 255, 255, 255;
    color: rgb(255, 255, 255);
  }

  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) a,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) button,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) span,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .menu-list__link,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item > a,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item > a span,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-level-0 > a,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-level-0 > a *,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-has-submenu > a,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-has-submenu > a *,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-submenu-mega > a,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-submenu-mega > a * {
    color: rgb(255, 255, 255) !important;
  }

  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg {
    color: rgb(255, 255, 255) !important;
  }

  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg path,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg line,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg circle,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg rect,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg polyline,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg polygon {
    stroke: rgb(255, 255, 255) !important;
  }

  /* Light mode: show inverse logo (white), hide original logo */
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo__image-container--original {
    display: none !important;
  }

  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo__image-container--inverse {
    display: block !important;
  }

  /* Light mode: if no inverse logo exists, invert the original logo using CSS filter */
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo:not(:has(.header-logo__image-container--inverse)) .header-logo__image-container--original {
    display: block !important;
  }

  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo:not(:has(.header-logo__image-container--inverse)) .header-logo__image-container--original img,
  header-component.header--transparent-menu-light:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo:not(:has(.header-logo__image-container--inverse)) .header-logo__image-container--original svg {
    filter: brightness(0) invert(1) !important;
  }

  /* ── Mobile: Dark mode - black text/icons ── */
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) {
    --color-foreground: 47, 47, 48 !important;
    color: #2f2f30 !important;
  }

  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header__row--top,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header__row--bottom {
    --color-foreground: 47, 47, 48 !important;
    color: #2f2f30 !important;
  }

  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) a,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) button,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) span,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .menu-list__link,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item > a,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item > a span,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-level-0 > a,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-level-0 > a *,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-has-submenu > a,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-has-submenu > a *,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-submenu-mega > a,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .gm-menu .gm-item.gm-submenu-mega > a * {
    color: #2f2f30 !important;
  }

  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg {
    color: #2f2f30 !important;
  }

  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg path,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg line,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg circle,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg rect,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg polyline,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) svg polygon {
    stroke: #2f2f30 !important;
  }

  /* Dark mode: show original logo (black), hide inverse */
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo__image-container--original {
    display: block !important;
  }

  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo__image-container--inverse {
    display: none !important;
  }

  /* Dark mode: if no inverse logo exists, show original without filter */
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo:not(:has(.header-logo__image-container--inverse)) .header-logo__image-container--original {
    display: block !important;
  }

  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo__image-container--original img,
  header-component.header--transparent-menu-dark:not([data-sticky-state="active"]):not(:has(.gm-custom-overlay.gm-active)) .header-logo__image-container--original svg {
    filter: none !important;
  }

  /* Mobile: when menu drawer opens, show white header background and black icons */
  /* Skip the fade transition so the background appears instantly — avoids the
     flash where child element backgrounds become visible before ::before fades in */
  header-component.header--transparent-menu:has(details[open]) .header__row--top::before,
  header-component.header--transparent-menu:has(details[open]) .header__row--bottom::before,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) .header__row--top::before,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) .header__row--bottom::before,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) .header__row--top::before,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) .header__row--bottom::before,
  /* JS fallback class for browsers that don't fully support :has() */
  header-component.header--transparent-menu.mobile-menu-open .header__row--top::before,
  header-component.header--transparent-menu.mobile-menu-open .header__row--bottom::before {
    opacity: 1 !important;
    transition: none !important;
  }

  /* Mobile: when menu opens, change header icons/text to black */
  header-component.header--transparent-menu:has(details[open]),
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]),
  header-component.header--transparent-menu:has(.menu-drawer-container[open]),
  header-component.header--transparent-menu.mobile-menu-open {
    --color-foreground: 47, 47, 48 !important;
    color: #2f2f30 !important;
  }

  header-component.header--transparent-menu:has(details[open]) .header__row--top,
  header-component.header--transparent-menu:has(details[open]) .header__row--bottom,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) .header__row--top,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) .header__row--bottom,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) .header__row--top,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) .header__row--bottom,
  header-component.header--transparent-menu.mobile-menu-open .header__row--top,
  header-component.header--transparent-menu.mobile-menu-open .header__row--bottom {
    --color-foreground: 47, 47, 48 !important;
    color: #2f2f30 !important;
  }

  header-component.header--transparent-menu:has(details[open]) a,
  header-component.header--transparent-menu:has(details[open]) button,
  header-component.header--transparent-menu:has(details[open]) span,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) a,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) button,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) span,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) a,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) button,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) span,
  header-component.header--transparent-menu.mobile-menu-open a,
  header-component.header--transparent-menu.mobile-menu-open button,
  header-component.header--transparent-menu.mobile-menu-open span {
    color: #2f2f30 !important;
  }

  header-component.header--transparent-menu:has(details[open]) .signin-link.button a,
  header-component.header--transparent-menu:has(details[open]) .signin-link.button span,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) .signin-link.button a,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) .signin-link.button span,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) .signin-link.button a,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) .signin-link.button span,
  header-component.header--transparent-menu.mobile-menu-open .signin-link.button a,
  header-component.header--transparent-menu.mobile-menu-open .signin-link.button span {
    color: unset !important;
    background-color: unset !important;
  }

  header-component.header--transparent-menu:has(details[open]) svg,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) svg,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) svg,
  header-component.header--transparent-menu.mobile-menu-open svg {
    color: #2f2f30 !important;
  }

  header-component.header--transparent-menu:has(details[open]) svg path,
  header-component.header--transparent-menu:has(details[open]) svg line,
  header-component.header--transparent-menu:has(details[open]) svg circle,
  header-component.header--transparent-menu:has(details[open]) svg rect,
  header-component.header--transparent-menu:has(details[open]) svg polyline,
  header-component.header--transparent-menu:has(details[open]) svg polygon,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) svg path,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) svg line,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) svg circle,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) svg rect,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) svg polyline,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) svg polygon,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) svg path,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) svg line,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) svg circle,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) svg rect,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) svg polyline,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) svg polygon,
  header-component.header--transparent-menu.mobile-menu-open svg path,
  header-component.header--transparent-menu.mobile-menu-open svg line,
  header-component.header--transparent-menu.mobile-menu-open svg circle,
  header-component.header--transparent-menu.mobile-menu-open svg rect,
  header-component.header--transparent-menu.mobile-menu-open svg polyline,
  header-component.header--transparent-menu.mobile-menu-open svg polygon {
    stroke: #2f2f30 !important;
  }

  /* Mobile: when menu opens, show original logo (black), hide inverse logo */
  header-component.header--transparent-menu:has(details[open]) .header-logo__image-container--original,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) .header-logo__image-container--original,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) .header-logo__image-container--original,
  header-component.header--transparent-menu.mobile-menu-open .header-logo__image-container--original {
    display: block !important;
  }

  header-component.header--transparent-menu:has(details[open]) .header-logo__image-container--inverse,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) .header-logo__image-container--inverse,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) .header-logo__image-container--inverse,
  header-component.header--transparent-menu.mobile-menu-open .header-logo__image-container--inverse {
    display: none !important;
  }

  /* Mobile: when menu opens, remove filter from original logo */
  header-component.header--transparent-menu:has(details[open]) .header-logo__image-container--original img,
  header-component.header--transparent-menu:has(details[open]) .header-logo__image-container--original svg,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) .header-logo__image-container--original img,
  header-component.header--transparent-menu:has(#Details-menu-drawer-container[open]) .header-logo__image-container--original svg,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) .header-logo__image-container--original img,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) .header-logo__image-container--original svg,
  header-component.header--transparent-menu.mobile-menu-open .header-logo__image-container--original img,
  header-component.header--transparent-menu.mobile-menu-open .header-logo__image-container--original svg {
    filter: none !important;
  }

  /* Mobile: ensure menu drawer backdrop is visible when menu opens */
  header-component.header--transparent-menu:has(details[open]) .menu-drawer__backdrop,
  header-component.header--transparent-menu:has(.menu-drawer-container[open]) .menu-drawer__backdrop,
  header-component.header--transparent-menu.mobile-menu-open .menu-drawer__backdrop {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
    pointer-events: auto !important;
  }

  /* Mobile submenu/drawer backdrop — white background */
  header-component.header--transparent-menu .gm-submenu,
  header-component.header--transparent-menu .menu-drawer,
  header-component.header--transparent-menu .header-drawer,
  header-component.header--transparent-menu details[open] > .menu-drawer__inner,
  header-component.header--transparent-menu .menu-drawer-container .menu-drawer {
    background-color: var(--color-background, #fff) !important;
    background: var(--color-background, #fff) !important;
  }

  /* Mobile: restore all backgrounds when menu is open */
  header-component.header--transparent-menu:has(details[open]) *,
  header-component.header--transparent-menu.mobile-menu-open *,
  header-component.header--transparent-menu .menu-drawer *,
  header-component.header--transparent-menu .header-drawer * {
    background-color: unset;
    background: unset;
  }

  /* Mobile: snap sticky background instantly — prevents the same flash where
     child backgrounds become visible before ::before finishes fading in */
  header-component.header--transparent-menu[data-sticky-state="active"] .header__row--top::before,
  header-component.header--transparent-menu[data-sticky-state="active"] .header__row--bottom::before {
    transition: none !important;
  }
}

/* Tiffany-style fixed hero — hero is fixed, content scrolls over */
builder-component[name="homepage-hero-carousel"].hero-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/*
  iOS Safari compositing bug: GPU-promoted fixed elements absorb touch events
  regardless of z-index when another fixed element (the backdrop) is active.
  Disable pointer events on the hero whenever the nav drawer is open so that
  taps on the header icons (X, account) are never captured by the hero layer.
*/
html[scroll-lock] builder-component[name="homepage-hero-carousel"].hero-fixed {
  pointer-events: none !important;
}

/* Spacer takes up the hero's space in the document flow */
.hero-parallax-spacer {
  display: block;
}

/* Scroll reveal animations - scoped to parallax/hero sections only */
builder-component[name="homepage-hero-carousel"] .scroll-reveal,
.hero-parallax-spacer + * .scroll-reveal,
.shopify-section-group-header-group .scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

builder-component[name="homepage-hero-carousel"] .scroll-reveal--visible,
.hero-parallax-spacer + * .scroll-reveal--visible,
.shopify-section-group-header-group .scroll-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.cart-page--empty .cart-items__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-start: 0;
  text-align: center;
}
.cart-page__title + .cart-page__items.cart-page--empty {
  margin-top: 1.7rem !important;
}
.cart-page__title + .cart-page__items.cart-page--empty .cart-items__wrapper > a {
  width: 24.9rem;
  margin-bottom: 1.3rem;
  height: 4.4rem;
}
.cart-page__title + .cart-page__items {
  margin-block-start: var(--margin-lg);
  margin-top: 6.5rem;
}

@media screen and (max-width: 768px) {
  .cart-page__title + .cart-page__items {
    margin-top: 1.6rem;
  }
}

/* Globo Menu — full-width submenu panel */
/* The submenu is position:absolute relative to .gm-item (position:relative),
   which sits inside the nav bar rather than at the viewport left edge.
   Switching to position:fixed anchored to --header-group-height mirrors the overlay approach.
   On transparent pages --header-group-height is 0 (the header is excluded from the height
   calculation), so we fall back to --header-height so the panel never starts at top:0. */
/* @media screen and (min-width: 750px) {
  .gm-item.gm-level-0 > .gm-submenu {
    position: fixed !important;
    /* Pull submenu up enough to cover rounding seams between header and submenu */
    /* top: calc(max(var(--header-group-height, 0px), var(--header-height, 0px)) - var(--submenu-overlap)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    max-height: calc(100vh - max(var(--header-group-height, 0px), var(--header-height, 0px)) + var(--submenu-overlap)) !important;
    overflow-y: auto !important;
    z-index: 101 !important;
    background-color: var(--color-background, #fff) !important;
  }
} */ */

/* OS-7386: Cart add-to-bag uses the cart drawer, not the popup notification.
   Force-hide the popup everywhere in case a cached/legacy element renders it. */
cart-popup-notification {
  display: none !important;
}

/* =============================================
   FOOTER — Upgraded Theme Fixes
   ============================================= */

/* The hero carousel is position:fixed z-index:0. Footer sections sit in normal
   document flow but need z-index:1 to create a stacking context that paints
   solidly above the hero. Without this the beige background is behind the hero. */
.shopify-section-group-footer-group {
  z-index: 1 !important;
  background-color: #f9f7f6 !important;
}

/* Section-background inside footer: also set to beige so it matches when the
   stacking context causes it to paint over the footer's own background-color. */
.shopify-section-group-footer-group .section-background {
  background-color: #f9f7f6 !important;
}

.shopify-section-group-footer-group .section {
  display: block !important;
}

.footer-content {
  gap: 0 !important;
}

/* Desktop padding: 29px vertical, 5.77% horizontal */
@media screen and (min-width: 1025px) {
  footer .section-wrapper {
    padding: 29px 5.77% !important;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  footer .section-wrapper {
    padding: 29px 2.77% !important;
  }
}
@media screen and (max-width: 768px) {
  footer .section-wrapper {
    padding: 29px 0 !important;
  }
  .shopify-section-group-footer-group .email-signup__input-group {
    width: 98% !important;
  }
}

.button {
  border-radius: 2px !important;
}

.email-signup__input-group {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 0 !important;
}

.email-signup__input {
  background-color: var(--input-border-color, #F3F3F3) !important;
}

/* Prevent iOS Safari auto-zoom on focus: any focused input with font-size < 16px
   triggers a forced zoom on tap. Footer email signup uses --font-size-12, so
   bump it to 16px on mobile only. */
@media screen and (max-width: 768px) {
  .email-signup__input {
    font-size: 16px !important;
  }
}

.email-signup__button:not(.button-unstyled) {
  background-color: #2F2F30 !important;
  font-size: var(--font-size-12) !important;
  width: 105px !important;
  height: 40px !important;
}

slideshow-component slideshow-arrows {
  display: none;
}

slideshow-component[dragging] slideshow-arrows {
  display: none;
}

/* Desktop: hide theme drawer backdrop — gm-custom-overlay used instead.
   Mobile: keep it — gm-custom-overlay has stacking-context issues on mobile
   (body-level z-index beats the drawer inside header-section). */
@media screen and (min-width: 750px) {
  .menu-drawer__backdrop {
    display: none !important;
  }
}

/* Remove X close button and shadow inside drawer (mobile + tablet) */
@media screen and (max-width: 1024px) {
  .menu-drawer > .menu-drawer__close-button {
    display: none !important;
  }

  .menu-drawer {
    box-shadow: none !important;
  }
}

/* =============================================
   PDP — Upgraded Theme Fixes
   ============================================= */

@media screen and (min-width: 750px) {
  /* Position when there is media */
  .product-information__grid:not(.product-information--media-none) {
    /* Media on the left side */
    &.product-information--media-left {
      .product-information__media {
        padding-right: 0 !important;
      }
      .product-details {
        padding-left: 0 !important;
      }
    }
  }
}
.variant-option__swatch-value {
  padding: 0 !important;
}
.accordion .details__header {
  min-height: 69px !important;
}

@media screen and (max-width: 768px) {
  .product-details>div {
    padding: 37px 20px !important;
  }
}

.variant-option + .variant-option {
    margin-top: 0 !important;
}
/* Product card layout — full-card link coverage */
.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
  cursor: pointer;
}

/* Badge anchor — keeps absolutely-positioned badges relative to the image, not the outer card */
.product-card .card-gallery {
  position: relative;
}


/* product-tags (e.g. "Made to order") flows after price, not overlaid on the image */
/* 3-class specificity (0,3,0) beats algolia-custom.css's .ais-hit .product-tags (0,2,0) */
.product-card .product-card__content .product-tags {
  position: static !important;
  top: unset !important;
}

/* Force 4:5 aspect ratio on the image container — drives height up through the slideshow chain */
.product-card .card-gallery .product-media-container {
  aspect-ratio: 4 / 5;
  width: 100%;
}

.product-card .card-gallery .product-media-container img {
  width: 100%;
  height: 100%;
}

.cart-items-component {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px 0 15px;
}

/* Cart drawer: overlay product badge on thumbnail image */
.cart-items__media-container {
  position: relative;
}

.cart-items__media-container .product-badges {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 1;
  background: #fff;
  padding: 4px 7px;
  font-size: var(--font-size-10);
  letter-spacing: 0.5px;
  text-transform: none;
  border-radius: 4px;
}

html {
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background) !important;
}

.cart__total .cart-secondary-typography {
  font-weight: 600 !important;
}

button.predictive-search__search-button{
  display: none;
}

.social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: 2.5rem !important;
}

/* OS-7390: Rewards page — content spills horizontally on mobile.
   The Yotpo widgets render with a fixed pixel width (~1200px, set in the Yotpo
   editor). .section-content-wrapper is a grid item whose default min-width:auto
   lets that fixed-width child blow the wrapper out to 1200px instead of shrinking
   to the viewport. min-width:0 lets it shrink; the child clamps keep every widget
   inside the viewport; overflow-x:clip is a backstop against any remaining spill. */
main[data-template="page.rewards-page-template"] .section-content-wrapper.section-content-wrapper {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

main[data-template="page.rewards-page-template"] .section-content-wrapper > *,
main[data-template="page.rewards-page-template"] .yotpo-widget-instance,
main[data-template="page.rewards-page-template"] .yotpo-widget-instance > div {
  min-width: 0;
  max-width: 100% !important;
}

.nosto_element .card-gallery {
  container-type: inline-size;
}

.nosto_element .product-media-container {
  max-height: calc(100cqi * 5 / 4) !important;
  overflow: hidden !important;
}