html,body{font-family:"graphik","proxima","Segoe UI Symbol","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Noto Sans Symbols 2","Noto Sans Symbols","DejaVu Sans",sans-serif;}
/* Prevent navbar-collapse.js's pre-measurement state from widening the
   viewport: until the script moves overflowing items into "More ▾",
   .nav-list's content would otherwise push the page wider than the screen.
   .container-nav crops horizontally; dropdowns (.dropdown-content, .more-menu)
   remain visible because they're positioned absolutely and escape clipping. */
.container-nav{overflow-x:clip}
body{overflow-x:clip}

/* Float Olena's WhatsApp button above everything (modals, banners, .scroll-to-top).
   The bare .sticky.whatsapp-icon rule in index.css has no z-index, so it ended up
   under cookie/buyer-protection layers. */
div.sticky.whatsapp-icon{z-index:9999}

.grid-horizontal{align-items:stretch}
.grid-horizontal>.categories-padding,.grid>.categories-padding{display:flex !important;flex-direction:column;height:100%}
.categories-padding>a{display:flex !important;flex-direction:column;height:100%;width:100%}
.categories-padding>a>figure,.categories-padding>a>.img{flex:0 0 auto}
.categories-padding>a>h2,.categories-padding>a>h3{flex:1 1 auto;display:block;text-align:center;margin:0 !important;padding:8px 4px;align-self:center}
.categories-padding>a>h2>span,.categories-padding>a>h3>span{white-space:nowrap}

#watch-categories{align-items:stretch !important}
#watch-categories>li{display:table !important;width:100%;height:100%;box-sizing:border-box;border:1px solid transparent;border-spacing:0}
#watch-categories>li.category-item--mobile{display:none !important}
#watch-categories>li>a{margin:0 !important;width:100%;height:100%;box-sizing:border-box;display:table-cell !important;vertical-align:middle;text-align:center;padding:8px 10px !important;line-height:1.3}
#watch-categories>li>a>span.badge{margin-left:.25em;white-space:nowrap;display:inline}

ul.products li.hidden{display:none}
.filter-item.unavailable{opacity:.35;pointer-events:none}
.filter-item.selected-filter{background:var(--colorPrimary,#00AA86);color:#fff;border-radius:4px}
.filter-item{padding:4px 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid #ddd;border-radius:4px;margin:2px;cursor:pointer;font-size:14px}
.filter-item input{margin:0}
.filter-flags--wrapper{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.filter{margin-bottom:8px}
.filter-type{display:inline-block;min-width:140px}
.button-price--active{background-color:var(--colorPrimary,#00AA86)!important;color:#fff!important}

@media (max-width: 960px){
    .fixed-whatsapp,.whatsapp-fixed,a[href*="wa.me"]{z-index:9999 !important}
    body:not(.category) .options__filters-accordion{display:flex !important;align-items:center;justify-content:space-between;width:100%;gap:12px}
    body:not(.category) .accordion-mobile{display:block !important;flex:1 1 auto;max-width:none !important;margin:0 !important}
    .options__button-price{flex:0 0 auto;display:flex;justify-content:flex-end}
    #filter-accordion{width:100%}
    /* On category pages the chip-based .filters-bar already covers all filters,
       so the "Filters ▾" accordion duplicate is hidden. */
    body.category .options__filters-accordion,
    body.category .accordion-mobile,
    body.category #filter-accordion{display:none !important}
}
#filter-accordion .accordion__header{cursor:pointer}

/* Hide product-page carousels until they're fully laid out by Flickity AND
   images are decoded. The .flickity-enabled class fires too early (before
   the imagesLoaded callback re-runs the layout), so we use a custom class
   .flickity-ready added by a tiny inline hook on the page. We clip the
   container with max-height + overflow:hidden so the pre-init stacked
   cells don't blow up the page height; we keep cells in normal flow
   (no display:none) so Flickity reads correct offsetWidth and computes
   proper translateX positions for each cell. */
.main-carousel:not(.flickity-ready){
  visibility:hidden;min-height:600px;max-height:600px;overflow:hidden}
.carousel-nav:not(.flickity-ready){
  visibility:hidden;min-height:80px;max-height:80px;overflow:hidden}