/* Prevent flash of unstyled overlays and broken layouts on refresh */
.coupon-overlay,.picker-overlay,.coupon-modal,.picker,.info-overlay,.info-modal{
  opacity:0;visibility:hidden;
  position:fixed;top:0;left:0;right:0;bottom:0;
  pointer-events:none;
}
.coupon-modal,.picker,.info-modal{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%) scale(.95)}
/* Hide search dropdown until JS attaches */
#ch-main-header .srch-dropdown{display:none}
#ch-main-header .srch-dropdown.open{display:flex}
/* ── FOUC FIX: hide mega-menu panel until JS opens it (prevents the big category-text flash before mega-menu.css loads) ── */
#chmm,.chmm,.chmm-wrap,.chmm-root,.chmm-panel,.chmm-overlay,.chmm-mega,.chmm-flyout,[data-chmm],[data-chmm-panel],.mega-panel,.mega-menu,.mega-menu-panel,.mega-overlay{display:none}
#chmm.open,.chmm.open,.chmm.active,.chmm-wrap.open,.chmm-root.open,.chmm-panel.open,.chmm-overlay.open,.chmm-open .chmm,.mega-panel.open,.mega-menu.open,.mega-overlay.open{display:block}
/* Also keep the inline info-panels hidden from first paint */
.info-panel{display:none}.info-panel.on{display:block}
/* Hide mobile elements on desktop & desktop on mobile - prevents both showing during load */
@media (min-width:981px){.m-wrap,.mob-nav,.m-promo,.m-drawer-overlay,.m-drawer{display:none!important}}
@media (max-width:980px){#perks,#ch-main-header,#ch-cat-nav{display:none!important}}
/* Prevent unstyled SVGs from collapsing */
#ch-main-header.hdr svg,#ch-cat-nav.cat-nav svg,#perks svg{display:inline-block;vertical-align:middle;flex-shrink:0}
/* Logo placeholder dimensions to reserve space */
#ch-main-header .logo,.m-logo{display:inline-flex;align-items:center;flex-shrink:0}
#ch-main-header.hdr .logo-img{height:64px;width:auto;max-height:64px;max-width:200px;object-fit:contain}

/* ── Category strip layout protection ───────────────────────────────────────
   .cat-nav-list lives in main.css, but on pages that also load product.css the
   row lost its flex layout and all 30 links collapsed on top of each other.
   These four declarations are layout only — every colour, size and spacing
   decision still belongs to main.css. */
#ch-cat-nav.cat-nav .cat-nav-list{
  display:flex!important; align-items:center;
  flex-wrap:nowrap!important; white-space:nowrap;
  overflow-x:auto; overflow-y:hidden;
  position:relative; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
#ch-cat-nav.cat-nav .cat-nav-list::-webkit-scrollbar{display:none}
#ch-cat-nav.cat-nav .cat-nav-list>a,
#ch-cat-nav.cat-nav .cat-nav-list>.cn-sep{
  flex:0 0 auto!important; white-space:nowrap;
}
#ch-cat-nav.cat-nav .cat-nav-list>.cn-ind{position:absolute}

/* Search button protection - prevents product page CSS from overriding */
#ch-main-header.hdr .srch-btn{background:linear-gradient(135deg,var(--ch-p-lift,#FF7A30),var(--ch-p,#FA5B00))!important;color:#fff!important;border-radius:99px!important;border:0!important}
#ch-main-header.hdr .srch-cam{background:transparent!important;border:0!important;color:#52525B}
#ch-main-header.hdr .srch-btn svg,#ch-main-header.hdr .srch-cam svg{display:inline-block!important}
/* Hide all initially-collapsed UI states until CSS loads */
#ch-main-header .cart-badge,.act-cart-badge,.m-cart-badge,.mob-cart-badge,#ch-main-header .act-badge{display:none}
/* Header include must not globally reset the homepage layout */

/* FINAL SAFETY: closed nav modals must never cover homepage sections or Load More */
.coupon-overlay:not(.open),.coupon-modal:not(.open),.info-overlay:not(.open),.info-modal:not(.open),.picker-overlay:not(.open),.picker:not(.open){display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}
.coupon-overlay.open,.info-overlay.open,.picker-overlay.open{display:block!important;pointer-events:auto!important;visibility:visible!important;opacity:1!important;}
.coupon-modal.open,.info-modal.open{display:block!important;pointer-events:auto!important;visibility:visible!important;opacity:1!important;}
.picker.open{display:flex!important;pointer-events:auto!important;visibility:visible!important;opacity:1!important;}