/* Sparkling Pro: navigation bar fix.
   - Desktop: all 8 items + basket now fit inside the floating bar.
   - Anything narrower than 1180px (small laptops, tablets, phones) uses the tidy menu button instead of overflowing. */

/* ---------- desktop: compact so everything fits ---------- */
.site-header .nav-wrap{gap:12px;flex-wrap:nowrap}
.site-header .brand{min-width:0;flex:0 0 auto;gap:10px}
.site-header .brand-copy strong{white-space:nowrap;font-size:1.08rem}
.site-header .primary-nav{gap:5px;flex:0 1 auto;min-width:0;flex-wrap:nowrap}
.site-header .primary-nav a:not(.nav-cta){padding:9px 11px;font-size:.86rem;border-radius:12px}
.site-header .primary-nav .nav-cta{padding:10px 16px;font-size:.86rem;margin-left:4px}
.site-header .primary-nav .trolley-trigger--icon{flex:0 0 auto;margin-left:2px}
@media (min-width:1181px) and (max-width:1340px){
  .site-header .primary-nav a:not(.nav-cta){padding:8px 9px;font-size:.82rem}
  .site-header .primary-nav .nav-cta{padding:9px 13px;font-size:.82rem}
  .site-header .brand-copy strong{font-size:1rem}
  .site-header .brand-mark{width:46px!important;height:46px!important}
}

/* ---------- tablets, phones, small laptops: menu button ---------- */
@media (max-width:1180px){
  body.nav-open{overflow:hidden;height:100vh}
  .site-header .nav-wrap{min-height:68px}
  .site-header .primary-nav{
    display:flex;position:fixed;left:8px;right:8px;top:92px;bottom:8px;height:auto;
    padding:16px;border-radius:22px;background:#fff;border:1px solid #d6e6f0;
    box-shadow:0 22px 50px rgba(8,28,54,.28);flex-direction:column;align-items:stretch;gap:0;
    overflow-y:auto;z-index:300;transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .2s ease,opacity .2s ease,visibility 0s linear .2s;
  }
  .site-header .primary-nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform .2s ease,opacity .2s ease}
  .site-header .primary-nav a:not(.nav-cta){display:block;margin:5px 0;padding:14px 16px;font-size:1rem;border-radius:14px;text-align:left}
  .site-header .primary-nav .nav-cta{margin:12px 0 4px;padding:15px 18px;font-size:1rem;text-align:center;display:flex;justify-content:center}
  .site-header .primary-nav .shop-trigger,.site-header .primary-nav .trolley-trigger--icon{width:100%}
  .site-header .primary-nav .trolley-trigger--icon{margin:6px 0 0;justify-content:center;border-radius:16px!important;width:100%;height:auto;min-height:50px;padding:10px 16px;display:flex;align-items:center}
  .site-header .primary-nav .trolley-trigger--icon::after{content:"Checkout";margin-left:10px;font-weight:800}
  .site-header .primary-nav .trolley-trigger--icon .trolley-count{position:static;margin-left:10px}
  .site-header .menu-toggle{display:block}
  .site-header .mobile-trolley-trigger{display:flex}
  .site-header .brand-copy{display:grid}
  .site-header .brand-copy small{display:none}
}
@media (max-width:420px){
  .site-header .brand-copy strong{font-size:1rem}
  .site-header .brand-mark{width:44px!important;height:44px!important}
  .site-header .primary-nav{top:84px}
}
@media (prefers-reduced-motion:reduce){.site-header .primary-nav{transition:none!important}}

/* mobile menu fix (v3): the glass effect on the header trapped the fixed menu panel */
html body .site-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;filter:none!important;contain:none!important;will-change:auto!important}