/* Final UX hotfix: sticky header, mobile search, working mobile mega menu,
   sticky category/shop filters, one-line category chips, 2-column mobile cards,
   and compare bar that shows immediately without hiding behind filters.
   This file must load LAST. */

:root{
  --ux-header-height:76px;
  --ux-mobile-search-height:0px;
  --ux-sticky-gap:12px;
  --ux-sticky-top:calc(var(--ux-header-height) + var(--ux-sticky-gap));
  --ux-compare-height:0px;
}

html{
  scroll-padding-top:calc(var(--ux-header-height) + 12px);
}

html{
  max-width:100%;
  overflow-x:clip;
}

body{
  max-width:100%;
  overflow-x:clip;
  overflow-y:visible;
}

@supports not (overflow:clip){
  html,
  body{
    overflow-x:hidden;
  }
}

body.has-compare-items{
  padding-bottom:calc(var(--ux-compare-height, 74px) + env(safe-area-inset-bottom)) !important;
}

/* ------------------------------
   Header: real sticky, high layer
------------------------------ */
body > .site-header.custom-header,
body > .site-header,
.site-header.custom-header,
.site-header{
  position:-webkit-sticky !important;
  position:sticky !important;
  top:0 !important;
  z-index:10050 !important;
  width:100% !important;
  background:rgba(255,255,255,.98) !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.08) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  isolation:isolate;
}

.custom-site-disclosure,
.site-disclosure{
  position:relative;
  z-index:10;
}

.custom-header-inner,
.header-inner.custom-header-inner{
  position:relative !important;
  min-height:64px !important;
}

.mobile-header-search-wrap{
  display:none;
}

body > .site-disclosure,
body > .site-header,
#main-content,
.shop-layout,
.compact-shop-layout,
.ux-shop-layout,
.shop-content{
  overflow:visible !important;
}

#main-content{
  position:relative;
  z-index:1;
}

/* Desktop header remains normal */
@media (min-width:981px){
  .custom-header-search,
  .header-search.custom-header-search{
    display:flex !important;
  }

  .custom-nav.site-nav,
  .site-nav.custom-nav{
    display:flex !important;
  }
}

/* ------------------------------
   Desktop/tablet filter sidebar
   901px+ stays as a sticky sidebar
------------------------------ */
@media (min-width:901px){
  .shop-layout.compact-shop-layout.ux-shop-layout,
  .shop-layout.compact-shop-layout,
  .compact-shop-layout,
  .category-shop-layout{
    display:grid !important;
    grid-template-columns:minmax(240px,280px) minmax(0,1fr) !important;
    gap:22px !important;
    align-items:start !important;
    overflow:visible !important;
    min-height:calc(100vh - var(--ux-header-height, 72px));
  }

  .shop-content,
  .category-shop-layout .shop-content{
    min-width:0 !important;
    overflow:visible !important;
  }

  .shop-sidebar.sticky-sidebar,
  .ux-filter-sidebar,
  .category-shop-layout .shop-sidebar{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:calc(var(--ux-header-height, 72px) + 14px) !important;
    align-self:start !important;
    height:max-content !important;
    max-height:calc(100dvh - var(--ux-header-height, 72px) - 28px) !important;
    overflow:auto !important;
    z-index:60 !important;
    transform:none !important;
    border-radius:18px !important;
    overscroll-behavior:contain;
  }

  @supports not (height:100dvh){
    .shop-sidebar.sticky-sidebar,
    .ux-filter-sidebar,
    .category-shop-layout .shop-sidebar{
      max-height:calc(100vh - var(--ux-header-height, 72px) - 28px) !important;
    }
  }

  .category-shop-layout .shop-toolbar.compact-toolbar{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:calc(var(--ux-header-height, 72px) + 14px) !important;
    z-index:55 !important;
    background:#fff !important;
    box-shadow:0 10px 26px rgba(15,23,42,.08) !important;
    display: none;
  }

  .shop-sidebar .filter-panel,
  .ux-filter-sidebar .filter-panel{
    border:1px solid var(--line,#e5e7eb) !important;
    box-shadow:0 14px 36px rgba(15,23,42,.07) !important;
    background:#fff !important;
  }

  .filter-drawer-toggle,
  .ux-filter-toggle{
    display:none !important;
  }

  .filter-drawer-head{
    display:none !important;
  }
}

/* ------------------------------
   Category chips: one-line scroll
------------------------------ */
.category-chip-row,
.category-chip-row.ux-category-scroll{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  padding:2px 2px 12px !important;
  margin:0 0 16px !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

.category-chip-row .tag,
.category-chip-row a,
.ux-category-scroll .tag,
.ux-category-scroll a{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

.category-chip-row::after,
.ux-category-scroll::after{
  content:"";
  flex:0 0 6px;
}

/* ------------------------------
   Product grid + card fixes
------------------------------ */
.shop-content .product-grid.ux-product-grid,
.shop-content .product-grid,
.product-grid.ux-product-grid,
.product-grid{
  display:grid !important;
  width:100% !important;
  min-width:0 !important;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
}

.product-card.product-card-v3{
  min-width:0 !important;
  overflow:hidden !important;
}

.product-card-v3 .card-check-price-cta,
.product-card-v3 .card-review-cta{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.product-card-v3 .card-check-price-cta::first-letter,
.product-card-v3 .card-review-cta::first-letter{
  text-transform:uppercase;
}

/* ------------------------------
   Compare bar: never behind filter
------------------------------ */
.compare-bar,
.ux-compare-bar{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:10040 !important;
  display:block !important;
  padding:10px 0 calc(10px + env(safe-area-inset-bottom)) !important;
  background:linear-gradient(180deg,var(--secondary,#132f4c),var(--secondary-dark,#0f243d)) !important;
  box-shadow:0 -14px 36px rgba(15,23,42,.22) !important;
  transform:translateY(0) !important;
}

.compare-bar[hidden],
.ux-compare-bar[hidden]{
  display:none !important;
}

.compare-bar-inner{
  min-height:50px !important;
}

.compare-bar .muted,
.compare-bar .small{
  color:rgba(255,255,255,.76) !important;
}

.compare-bar .btn{
  min-height:40px !important;
}

.compare-bar .btn.disabled,
.compare-bar .btn[aria-disabled="true"]{
  opacity:.62 !important;
  pointer-events:none !important;
}

/* ------------------------------
   Mobile header + menu
------------------------------ */
@media (max-width:980px){
  :root{
    --ux-mobile-search-height:56px;
  }

  .custom-header-inner,
  .header-inner.custom-header-inner,
  .header-inner{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    min-height:56px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;
  }

  .custom-brand,
  .brand.custom-brand{
    min-width:0 !important;
    max-width:100% !important;
  }

  .custom-brand .logo-img,
  .brand .logo-img{
    height:38px !important;
    width:auto !important;
    flex:0 0 auto !important;
  }

  .custom-brand .brand-copy{
    min-width:0 !important;
  }

  .custom-brand .brand-copy strong{
    max-width:48vw !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .custom-header-search,
  .header-search.custom-header-search{
    display:none !important;
  }

  .mobile-menu-toggle.custom-mobile-toggle,
  .mobile-menu-toggle,
  .custom-mobile-toggle{
    display:inline-flex !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:14px !important;
    align-items:center !important;
    justify-content:center !important;
    background:var(--secondary,#132f4c) !important;
    color:#fff !important;
    border:0 !important;
    z-index:10070 !important;
  }

  .mobile-header-search-wrap{
    display:block !important;
    background:#fff !important;
    border-top:1px solid rgba(15,23,42,.06) !important;
    padding:0 0 9px !important;
  }

  .mobile-header-search{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:44px !important;
    border:1px solid var(--line,#e5e7eb) !important;
    border-radius:999px !important;
    overflow:hidden !important;
    background:#f8fafc !important;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.02) !important;
  }

  .mobile-header-search input{
    flex:1 1 auto !important;
    min-width:0 !important;
    height:44px !important;
    padding:0 14px !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:var(--text,#0f172a) !important;
    font-size:.92rem !important;
  }

  .mobile-header-search button{
    flex:0 0 auto !important;
    height:44px !important;
    padding:0 16px !important;
    border:0 !important;
    background:var(--secondary,#132f4c) !important;
    color:#fff !important;
    font-weight:850 !important;
  }

  .custom-nav.site-nav,
  .site-nav.custom-nav,
  .site-nav{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:var(--ux-mobile-nav-top, calc(var(--ux-header-height, 112px) + 8px)) !important;
    width:auto !important;
    max-height:calc(100vh - var(--ux-mobile-nav-top, 122px) - 14px) !important;
    overflow:auto !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    padding:12px !important;
    background:#fff !important;
    border:1px solid #e2e8f0 !important;
    border-radius:18px !important;
    box-shadow:0 26px 70px rgba(15,23,42,.24) !important;
    z-index:10065 !important;
    -webkit-overflow-scrolling:touch;
  }

  .custom-nav.site-nav.open,
  .site-nav.custom-nav.open,
  .site-nav.open{
    display:flex !important;
  }

  body.mobile-nav-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:10045;
    background:rgba(15,23,42,.28);
  }

  .site-nav > .mega-item > a,
  .site-nav > a,
  .custom-nav-link,
  .site-nav > .custom-mega-item > .custom-nav-link,
  .site-nav > .custom-nav-link{
    display:flex !important;
    width:100% !important;
    min-height:46px !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:0 12px !important;
    border-radius:14px !important;
    background:#f8fafc !important;
    border:1px solid #e2e8f0 !important;
    color:#0f172a !important;
    font-size:.94rem !important;
    line-height:1.2 !important;
    white-space:normal !important;
    text-decoration:none !important;
  }

  .custom-mega-item,
  .mega-item{
    position:relative !important;
    width:100% !important;
  }

  .custom-mega-item::after,
  .mega-item::after{
    display:none !important;
  }

  .custom-mega-menu,
  .mega-menu.custom-mega-menu,
  .mega-menu,
  .custom-mega-item:hover > .custom-mega-menu,
  .custom-mega-item:focus-within > .custom-mega-menu{
    position:static !important;
    display:none !important;
    width:100% !important;
    min-width:0 !important;
    max-height:none !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    margin:8px 0 0 !important;
    padding:0 !important;
    border-radius:16px !important;
    border:1px solid #e2e8f0 !important;
    box-shadow:none !important;
    background:#fff !important;
  }

  .custom-mega-item.open > .custom-mega-menu,
  .mega-item.open > .mega-menu{
    display:block !important;
  }

  .custom-mega-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    min-height:0 !important;
  }

  .custom-mega-links{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    padding:10px !important;
  }

  .custom-mega-promos{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:10px !important;
    border-left:0 !important;
    border-top:1px solid #e2e8f0 !important;
    background:#f8fafc !important;
  }

  .custom-mega-empty-promo,
  .custom-mega-promo{
    padding:12px !important;
    border-radius:14px !important;
  }

  .custom-mega-link{
    grid-template-columns:34px minmax(0,1fr) auto !important;
    padding:9px !important;
    border-radius:14px !important;
    background:#fff !important;
    border:1px solid #e2e8f0 !important;
  }

  .mega-link-icon{
    width:34px !important;
    height:34px !important;
    border-radius:12px !important;
  }

  .mega-link-copy strong{
    white-space:normal !important;
    font-size:.9rem !important;
  }

  .mega-link-copy small{
    -webkit-line-clamp:1 !important;
    font-size:.76rem !important;
  }
}

/* ------------------------------
   Mobile shop UX
------------------------------ */
@media (max-width:900px){
  .shop-layout.compact-shop-layout.ux-shop-layout,
  .shop-layout.compact-shop-layout,
  .compact-shop-layout{
    display:block !important;
    padding-top:14px !important;
  }

  .filter-drawer-toggle,
  .ux-filter-toggle{
    display:flex !important;
    position:-webkit-sticky !important;
    position:sticky !important;
    top:calc(var(--ux-header-height, 112px) + 8px) !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    z-index:1000 !important;
    width:100% !important;
    min-height:46px !important;
    margin:0 0 12px !important;
    border-radius:14px !important;
    justify-content:center !important;
  }

  .shop-sidebar.sticky-sidebar,
  .ux-filter-sidebar,
  .shop-sidebar{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    max-height:min(82dvh, calc(100dvh - var(--ux-header-height, 112px) - 12px)) !important;
    overflow:auto !important;
    padding:16px 16px calc(18px + env(safe-area-inset-bottom)) !important;
    background:#fff !important;
    border-radius:24px 24px 0 0 !important;
    box-shadow:0 -26px 70px rgba(15,23,42,.28) !important;
    transform:translateY(110%) !important;
    transition:transform .24s ease !important;
    z-index:10075 !important;
    -webkit-overflow-scrolling:touch;
  }

  .shop-sidebar.open,
  body.filter-drawer-open .shop-sidebar{
    transform:translateY(0) !important;
  }

  @supports not (height:100dvh){
    .shop-sidebar.sticky-sidebar,
    .ux-filter-sidebar,
    .shop-sidebar{
      max-height:min(82vh, calc(100vh - var(--ux-header-height, 112px) - 12px)) !important;
    }
  }

  .category-shop-layout .shop-toolbar.compact-toolbar{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:calc(var(--ux-header-height, 112px) + 62px) !important;
    z-index:850 !important;
    background:#fff !important;
    box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
    display: none;
  }

  .category-shop-layout .results-summary-row{
    position:relative;
    z-index:1;
  }

  .shop-sidebar .filter-panel{
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    background:transparent !important;
  }

  .filter-drawer-head{
    display:flex !important;
    position:sticky !important;
    top:0 !important;
    z-index:3 !important;
    background:#fff !important;
    padding:0 0 12px !important;
  }

  .filter-drawer-overlay{
    position:fixed !important;
    inset:0 !important;
    display:none !important;
    background:rgba(15,23,42,.38) !important;
    z-index:10070 !important;
  }

  .filter-drawer-overlay.show,
  body.filter-drawer-open .filter-drawer-overlay{
    display:block !important;
  }

  body.filter-drawer-open{
    overflow:hidden !important;
  }

  .shop-toolbar.compact-toolbar{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    padding:10px !important;
    margin-bottom:12px !important;
  }

  .shop-toolbar.compact-toolbar input{
    grid-column:1/-1 !important;
  }

  .shop-toolbar.compact-toolbar .manual-apply-btn{
    display:none !important;
  }

  #filterDrawer .manual-apply-btn,
  .ux-filter-sidebar .manual-apply-btn{
    display:flex !important;
    width:100% !important;
    min-height:48px !important;
    align-items:center !important;
    justify-content:center !important;
    margin:12px 0 10px !important;
    border-radius:14px !important;
  }

  .results-summary-row{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    font-size:.82rem !important;
  }

  .shop-content .product-grid.ux-product-grid,
  .shop-content .product-grid,
  .product-grid.ux-product-grid,
  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .product-card-v3 .product-image-link,
  .product-card-v3 .card-image-v3{
    height:118px !important;
    min-height:118px !important;
    max-height:118px !important;
  }

  .product-card-v3 .product-image-link img,
  .product-card-v3 .card-image-v3 img{
    padding:9px !important;
  }

  .product-card-v3 .product-content,
  .product-card-v3 .card-content-v3{
    padding:10px !important;
  }

  .product-card-v3 .product-meta-top,
  .product-card-v3 .card-meta-v3{
    margin-bottom:7px !important;
  }

  .product-card-v3 .chip,
  .product-card-v3 .card-chip-v3,
  .product-card-v3 .rating-chip,
  .product-card-v3 .card-rating-v3{
    font-size:.66rem !important;
    padding:5px 7px !important;
  }

  .product-card-v3 .card-title-v3,
  .product-card-v3 .product-content h2,
  .product-card-v3 .product-content h3{
    font-size:.84rem !important;
    line-height:1.25 !important;
    min-height:2.5em !important;
    margin-bottom:6px !important;
  }

  .product-card-v3 .card-desc-v3,
  .product-card-v3 .product-content p{
    font-size:.74rem !important;
    line-height:1.38 !important;
    -webkit-line-clamp:1 !important;
    min-height:1.38em !important;
    margin-bottom:7px !important;
  }

  .product-card-v3 .price-row,
  .product-card-v3 .card-price-v3{
    margin:0 0 8px !important;
  }

  .product-card-v3 .price-row strong,
  .product-card-v3 .card-price-v3 strong{
    font-size:.82rem !important;
  }

  .product-card-v3 .product-actions,
  .product-card-v3 .card-actions-v3{
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    margin-bottom:7px !important;
  }

  .product-card-v3 .product-actions .btn,
  .product-card-v3 .card-actions-v3 .btn{
    min-height:32px !important;
    padding:6px 5px !important;
    border-radius:10px !important;
    font-size:.7rem !important;
    line-height:1.05 !important;
  }

  .product-card-v3 .compare-row,
  .product-card-v3 .card-compare-v3{
    min-height:18px !important;
    gap:6px !important;
  }

  .product-card-v3 .compare-toggle{
    font-size:.72rem !important;
  }

  .product-card-v3 .external-link-note{
    display:none !important;
  }

  .compare-bar-inner{
    min-height:48px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
  }

  .compare-bar-inner strong{
    font-size:.9rem !important;
  }

  .compare-bar-actions{
    display:flex !important;
    gap:7px !important;
    align-items:center !important;
    width:auto !important;
    flex-wrap:nowrap !important;
  }

  .compare-bar-actions .btn{
    width:auto !important;
    min-height:36px !important;
    padding:8px 10px !important;
    font-size:.78rem !important;
    border-radius:11px !important;
    white-space:nowrap !important;
  }
}

@media (max-width:520px){
  .wrap,
  .container{
    width:min(100% - 18px,1240px) !important;
  }

  .custom-site-disclosure{
    font-size:.72rem !important;
  }

  .custom-brand .brand-copy{
    display:none !important;
  }

  .mobile-header-search-wrap{
    padding-bottom:8px !important;
  }

  .mobile-header-search,
  .mobile-header-search input,
  .mobile-header-search button{
    min-height:42px !important;
    height:42px !important;
  }

  .shop-toolbar.compact-toolbar{
    grid-template-columns:1fr !important;
  }

  .shop-content .product-grid.ux-product-grid,
  .shop-content .product-grid,
  .product-grid.ux-product-grid,
  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  .product-card.product-card-v3{
    border-radius:14px !important;
  }

  .product-card-v3 .product-image-link,
  .product-card-v3 .card-image-v3{
    height:104px !important;
    min-height:104px !important;
    max-height:104px !important;
  }

  .product-card-v3 .floating-badge,
  .product-card-v3 .card-badge-v3{
    top:7px !important;
    left:7px !important;
    padding:5px 7px !important;
    font-size:.62rem !important;
    max-width:calc(100% - 14px) !important;
  }

  .product-card-v3 .product-content,
  .product-card-v3 .card-content-v3{
    padding:8px !important;
  }

  .product-card-v3 .product-meta-top,
  .product-card-v3 .card-meta-v3{
    display:none !important;
  }

  .product-card-v3 .card-title-v3,
  .product-card-v3 .product-content h2,
  .product-card-v3 .product-content h3{
    font-size:.78rem !important;
  }

  .product-card-v3 .card-desc-v3,
  .product-card-v3 .product-content p{
    display:none !important;
  }

  .product-card-v3 .price-row strong,
  .product-card-v3 .card-price-v3 strong{
    font-size:.78rem !important;
  }

  .product-card-v3 .product-actions,
  .product-card-v3 .card-actions-v3{
    grid-template-columns:1fr 1fr !important;
    gap:5px !important;
  }

  .product-card-v3 .product-actions .btn,
  .product-card-v3 .card-actions-v3 .btn{
    min-height:30px !important;
    font-size:.66rem !important;
    padding:6px 4px !important;
  }

  .product-card-v3 .compare-toggle{
    font-size:.68rem !important;
  }

  .compare-bar-inner{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .compare-bar-actions{
    width:100% !important;
  }

  .compare-bar-actions .btn{
    flex:1 1 0 !important;
    text-align:center !important;
    justify-content:center !important;
  }
}

@media (max-width:380px){
  .shop-content .product-grid.ux-product-grid,
  .shop-content .product-grid,
  .product-grid.ux-product-grid,
  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .product-card-v3 .product-image-link,
  .product-card-v3 .card-image-v3{
    height:96px !important;
    min-height:96px !important;
    max-height:96px !important;
  }

  .product-card-v3 .product-actions .btn,
  .product-card-v3 .card-actions-v3 .btn{
    font-size:.62rem !important;
  }
}

/* ------------------------------------------------------------------
   FINAL FIX: mobile filter drawer layering + clickability.
   Desktop sticky sidebar remains controlled by the 901px+ block above.
------------------------------------------------------------------ */
@media (max-width:900px){
  body.filter-drawer-open #main-content{
    position:relative !important;
    z-index:10080 !important;
    isolation:isolate !important;
    overflow:visible !important;
  }

  .filter-drawer-overlay{
    position:fixed !important;
    inset:0 !important;
    display:none !important;
    background:rgba(15,23,42,.42) !important;
    z-index:10060 !important;
    pointer-events:none !important;
    opacity:0 !important;
    transition:opacity .18s ease !important;
  }

  .filter-drawer-overlay.show,
  body.filter-drawer-open .filter-drawer-overlay{
    display:block !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  #filterDrawer,
  .shop-sidebar.sticky-sidebar#filterDrawer,
  .ux-filter-sidebar#filterDrawer,
  body.filter-drawer-open #filterDrawer{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:min(86dvh, calc(100dvh - 18px)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    padding:16px 16px calc(18px + env(safe-area-inset-bottom)) !important;
    background:#fff !important;
    color:#0f172a !important;
    border-radius:24px 24px 0 0 !important;
    border:1px solid rgba(226,232,240,.92) !important;
    box-shadow:0 -28px 80px rgba(15,23,42,.34) !important;
    transform:translate3d(0,110%,0) !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:10090 !important;
    pointer-events:auto !important;
    isolation:isolate !important;
    touch-action:pan-y !important;
    transition:transform .24s ease !important;
  }

  @supports not (height:100dvh){
    #filterDrawer,
    .shop-sidebar.sticky-sidebar#filterDrawer,
    .ux-filter-sidebar#filterDrawer,
    body.filter-drawer-open #filterDrawer{
      max-height:min(86vh, calc(100vh - 18px)) !important;
    }
  }

  #filterDrawer.open,
  .shop-sidebar.open#filterDrawer,
  body.filter-drawer-open #filterDrawer{
    transform:translate3d(0,0,0) !important;
  }

  #filterDrawer,
  #filterDrawer *,
  body.filter-drawer-open #filterDrawer,
  body.filter-drawer-open #filterDrawer *{
    pointer-events:auto !important;
  }

  #filterDrawer .filter-panel{
    display:block !important;
    position:relative !important;
    z-index:2 !important;
    background:transparent !important;
  }

  #filterDrawer input,
  #filterDrawer select,
  #filterDrawer button,
  #filterDrawer a{
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  #filterDrawer .manual-apply-btn{
    display:flex !important;
    width:100% !important;
    min-height:50px !important;
    align-items:center !important;
    justify-content:center !important;
    margin:12px 0 10px !important;
    border-radius:14px !important;
    font-weight:850 !important;
  }

  #filterDrawer .filter-drawer-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    position:sticky !important;
    top:0 !important;
    z-index:5 !important;
    margin:-16px -16px 12px !important;
    padding:16px 16px 12px !important;
    background:#fff !important;
    border-radius:24px 24px 0 0 !important;
  }

  #filterDrawer .filter-drawer-head::before{
    content:"";
    position:absolute;
    top:8px;
    left:50%;
    width:54px;
    height:5px;
    border-radius:999px;
    background:#cbd5e1;
    transform:translateX(-50%);
  }

  #filterDrawer .filter-drawer-close{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:46px !important;
    height:46px !important;
    border:0 !important;
    border-radius:16px !important;
    background:#f1f5f9 !important;
    color:#0f172a !important;
    font-size:1.4rem !important;
    line-height:1 !important;
    position:relative !important;
    z-index:6 !important;
  }

  body.filter-drawer-open{
    overflow:hidden !important;
  }

  body.filter-drawer-open .compare-bar,
  body.filter-drawer-open .ux-compare-bar{
    z-index:10040 !important;
  }
}


/* ---------------------------------------------------------
   Category page cover image below breadcrumb.
   Uses affiliate_categories.image. No image = no placeholder.
--------------------------------------------------------- */
.category-image-banner{
  padding:28px 0 22px !important;
  background:#fff !important;
  border-bottom:1px solid var(--line-soft,#eef2f7) !important;
}

.category-image-banner.no-category-cover{
  padding-bottom:18px !important;
}

.category-image-banner .breadcrumb{
  margin:0 0 16px !important;
}

.category-landing-title-visually-hidden{
  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;
}

.category-cover-image-wrap{
  display:block !important;
  width:100% !important;
  height:clamp(210px, 24vw, 340px) !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:24px !important;
  background:#f8fafc !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 18px 48px rgba(15,23,42,.09) !important;
}

.category-cover-image{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}

@media (max-width:900px){
  .category-image-banner{
    padding:18px 0 16px !important;
  }

  .category-image-banner .breadcrumb{
    margin-bottom:12px !important;
    font-size:.82rem !important;
  }

  .category-cover-image-wrap{
    height:190px !important;
    border-radius:18px !important;
  }
}

@media (max-width:520px){
  .category-image-banner{
    padding:14px 0 12px !important;
  }

  .category-cover-image-wrap{
    height:145px !important;
    border-radius:16px !important;
  }
}