:root {
  --navy:#0D3B7A; --navy-mid:#002b5b; --accent:#4a90d9; --accent-pale:#a9c7ff;
  --surface:#f7f9fb; --surface-low:#eceef0; --muted:#64748b; --text:#0f1c2e;
  --font-display:'Oswald', sans-serif; --font-body:'Inter', 'Barlow', sans-serif;
  --transition:.35s cubic-bezier(.25,.46,.45,.94);
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text);background:var(--surface);overflow-x:hidden}
img{display:block}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:-.02em}

/* ─── Navbar ── */
#mainNav{background:#fff;border-bottom:1px solid rgba(0,23,54,.08);transition:box-shadow var(--transition);padding:0}
#mainNav.scrolled{box-shadow:0 4px 32px rgba(0,23,54,.12)}
.navbar-brand{font-family:var(--font-display);font-weight:900;font-size:1.55rem;letter-spacing:.05em;color:var(--navy)!important;text-transform:uppercase;padding:0.6rem 0}
.nav-item-mega{position:static!important}
.main-nav-link{font-family:var(--font-display);font-weight:700;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;color:var(--navy)!important;padding:1.35rem .9rem!important;display:flex;align-items:center;gap:.3rem;text-decoration:none;border-bottom:3px solid transparent;transition:color var(--transition),border-color var(--transition);white-space:nowrap}
.main-nav-link:hover,.main-nav-link.active-drop,.main-nav-link.active-page{color:var(--navy-mid)!important;border-bottom-color:var(--accent)}
.main-nav-link .drop-arrow{font-size:.7rem;transition:transform var(--transition);opacity:.5}
.main-nav-link.active-drop .drop-arrow{transform:rotate(180deg);opacity:1}
.navbar-toggler{border:2px solid rgba(0,23,54,.3);border-radius:4px;padding:.4rem .6rem}
.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23001736' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
.nav-lang-switch{display:flex;align-items:center;gap:.25rem;white-space:nowrap}
.lang-btn{font-family:var(--font-display);font-weight:800;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:.3rem .5rem;border-radius:var(--radius-sm);transition:color var(--transition),background var(--transition)}
.lang-btn:hover{color:var(--navy)}.lang-btn.active{color:var(--navy);background:var(--surface-low)}
.lang-sep{color:#cbd5e1;font-weight:300;font-size:.9rem}
.mega-panel{display:none;position:absolute;top:100%;left:0;width:100%;background:#fff;border-top:3px solid var(--accent);box-shadow:0 24px 60px rgba(0,23,54,.15);z-index:1000;animation:megaFadeIn .22s ease}
.mega-panel.open{display:block}
@keyframes megaFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.mega-inner{padding:1.75rem 0 2.25rem}
.mega-sport-card{position:relative;border-radius:var(--radius-md);overflow:hidden;height:160px;cursor:pointer;display:block;text-decoration:none}
.mega-sport-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mega-sport-card:hover img{transform:scale(1.07)}
.mega-sport-card .msc-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,23,54,.88) 0%,rgba(0,23,54,.1) 60%,transparent 100%)}
.mega-sport-card .msc-label{position:absolute;bottom:0;left:0;right:0;padding:.9rem 1rem;font-family:var(--font-display);font-size:1.15rem;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.06em}
.mega-sport-card:hover .msc-label{color:var(--accent-pale)}
.mega-sport-card.all-sports{background:var(--navy);display:flex;align-items:center;justify-content:center}
.mega-sport-card.all-sports .msc-label{position:static;text-align:center;font-size:1rem;padding:0}
.mega-sport-card.all-sports:hover{background:var(--navy-mid)}
.simple-drop{display:none;position:absolute;top:100%;left:0;min-width:220px;background:#fff;border-top:3px solid var(--accent);box-shadow:0 16px 48px rgba(0,23,54,.13);border-radius:0 0 var(--radius-md) var(--radius-md);z-index:1000;padding:.5rem 0;animation:megaFadeIn .2s ease}
.simple-drop.open{display:block}
.simple-drop a{display:block;padding:.65rem 1.25rem;font-family:var(--font-display);font-weight:700;font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-decoration:none;transition:background var(--transition),color var(--transition),padding var(--transition)}
.simple-drop a:hover{background:var(--surface-low);color:var(--navy-mid);padding-left:1.6rem}
.simple-drop .drop-divider{height:1px;background:var(--surface-low);margin:.25rem 0}
@media(max-width:991.98px){
  .mega-panel,.simple-drop{position:static;box-shadow:none;border-top:none;animation:none}
  .mega-panel{border-left:3px solid var(--accent);margin-left:1rem;padding:.5rem 0}
  .mega-inner{padding:.75rem 0}.mega-sport-card{height:120px}
  .simple-drop{border-left:3px solid var(--accent);margin-left:1rem}
  .main-nav-link{padding:.75rem 1rem!important;border-bottom:none;border-left:3px solid transparent}
  .main-nav-link:hover,.main-nav-link.active-drop{border-left-color:var(--accent);border-bottom:none}
}

/* ─── Page Hero ── */
.page-hero{min-height:280px;position:relative;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:2.5rem}
.page-hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;transform:scale(1.04);transition:transform 8s ease}
.page-hero.loaded .hero-bg{transform:scale(1)}
.page-hero .hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,10,30,.9) 0%,rgba(0,10,30,.55) 55%,rgba(0,10,30,.2) 100%)}
.page-hero-content{position:relative;z-index:2}
.hero-breadcrumb{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:1rem}
.hero-breadcrumb a{color:rgba(255,255,255,.55);text-decoration:none;transition:color var(--transition)}
.hero-breadcrumb a:hover{color:#fff}
.hero-breadcrumb i{font-size:.6rem}

/* ─── Catalog Layout ── */
.catalog-layout{display:grid;grid-template-columns:280px 1fr;gap:2rem;align-items:start;padding:2.5rem 0 4rem}

/* ─── Sidebar ── */
.catalog-sidebar{position:sticky;top:80px;background:#fff;border-radius:var(--radius-lg);border:1px solid rgba(0,23,54,.07);overflow:hidden}

.sidebar-section{padding:1.25rem 1.5rem;border-bottom:1px solid var(--surface-low)}
.sidebar-section:last-child{border-bottom:none}
.sidebar-section-title{font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.sidebar-section-title i{font-size:.65rem;transition:transform var(--transition);color:var(--muted)}
.sidebar-section-title.collapsed i{transform:rotate(-90deg)}

/* Category tree */
.cat-list{list-style:none;padding:0;margin:0}
.cat-list li{margin-bottom:.15rem}
.cat-btn{display:flex;align-items:center;gap:.6rem;width:100%;padding:.45rem .6rem;border:none;background:transparent;border-radius:var(--radius-sm);font-family:var(--font-display);font-size:.88rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text);cursor:pointer;text-align:left;transition:background var(--transition),color var(--transition)}
.cat-btn:hover{background:var(--surface-low);color:var(--navy)}
.cat-btn.active{background:rgba(13,59,122,.08);color:var(--navy)}
.cat-btn .cat-count{margin-left:auto;font-size:.72rem;font-weight:800;color:var(--muted);background:var(--surface-low);border-radius:100px;padding:.1rem .5rem;transition:background var(--transition),color var(--transition)}
.cat-btn.active .cat-count{background:var(--navy);color:#fff}
.cat-btn .cat-icon{font-size:.9rem;color:var(--accent);width:18px;flex-shrink:0}

/* Filter checkboxes */
.filter-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.3rem}
.filter-cb{display:flex;align-items:center;gap:.6rem;cursor:pointer;padding:.3rem 0}
.filter-cb input[type="checkbox"]{width:16px;height:16px;accent-color:var(--navy);cursor:pointer;flex-shrink:0}
.filter-cb span{font-size:.88rem;color:var(--text);line-height:1.3}
.filter-cb .fc-count{margin-left:auto;font-size:.72rem;color:var(--muted)}

/* Sport pills */
.sport-pills{display:flex;flex-wrap:wrap;gap:.4rem}
.sport-pill{font-family:var(--font-display);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .85rem;border-radius:100px;border:1.5px solid var(--surface-low);background:#fff;color:var(--muted);cursor:pointer;transition:all var(--transition)}
.sport-pill:hover{border-color:var(--accent);color:var(--navy)}
.sport-pill.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* Reset btn */
.btn-reset-filters{font-family:var(--font-display);font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:transparent;border:1.5px solid var(--surface-low);border-radius:var(--radius-md);padding:.55rem 1.1rem;cursor:pointer;width:100%;transition:all var(--transition);display:flex;align-items:center;justify-content:center;gap:.4rem}
.btn-reset-filters:hover{border-color:var(--accent);color:var(--navy)}

/* ─── Toolbar ── */
.catalog-toolbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:#fff;border-radius:var(--radius-md);border:1px solid rgba(0,23,54,.07);margin-bottom:1.5rem;flex-wrap:wrap}
.toolbar-count{font-family:var(--font-display);font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:auto}
.toolbar-count strong{color:var(--navy)}
.toolbar-sort{display:flex;align-items:center;gap:.5rem}
.toolbar-sort label{font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sort-select{font-family:var(--font-display);font-size:.82rem;font-weight:700;color:var(--navy);border:1.5px solid var(--surface-low);border-radius:var(--radius-md);padding:.4rem .8rem;background:#fff;cursor:pointer;outline:none;transition:border-color var(--transition)}
.sort-select:focus{border-color:var(--accent)}
.view-toggle{display:flex;gap:.25rem}
.view-btn{width:34px;height:34px;border:1.5px solid var(--surface-low);border-radius:var(--radius-sm);background:#fff;color:var(--muted);font-size:.9rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition)}
.view-btn:hover{border-color:var(--accent);color:var(--navy)}
.view-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* ─── Active filter tags ── */
.active-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.active-filter-tag{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(13,59,122,.08);color:var(--navy);border-radius:100px;padding:.3rem .75rem;cursor:pointer;transition:background var(--transition)}
.active-filter-tag:hover{background:rgba(13,59,122,.16)}
.active-filter-tag i{font-size:.6rem}

/* ─── Product Grid ── */
#productGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
#productGrid.view-list{grid-template-columns:1fr}

/* Product Card — Grid view */
.product-card{background:#fff;border-radius:var(--radius-lg);border:1px solid rgba(0,23,54,.07);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(0,23,54,.11);border-color:rgba(13,59,122,.15)}
.product-card[data-hidden="true"]{display:none}

.pc-img{position:relative;height:200px;overflow:hidden;background:var(--surface-low);flex-shrink:0}
.pc-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .5s ease}
.product-card:hover .pc-img img{transform:scale(1.06)}
.pc-img .img-fallback{font-size:3rem;color:rgba(13,59,122,.12);position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pc-badge{position:absolute;top:.75rem;left:.75rem;display:flex;flex-direction:column;gap:.3rem}
.badge-new{font-family:var(--font-display);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:#fff;border-radius:100px;padding:.2rem .65rem}
.badge-featured{font-family:var(--font-display);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--navy);color:#fff;border-radius:100px;padding:.2rem .65rem}
.pc-sport{position:absolute;top:.75rem;right:.75rem;font-size:1rem;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.1)}

.pc-body{padding:1.1rem 1.25rem;display:flex;flex-direction:column;flex:1}
.pc-brand{font-family:var(--font-display);font-size:.68rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:.3rem}
.pc-name{font-family:var(--font-display);font-size:1.05rem;font-weight:800;color:var(--navy);text-transform:uppercase;line-height:1.2;margin-bottom:.5rem;letter-spacing:-.01em}
.pc-desc{font-size:.83rem;color:var(--muted);line-height:1.55;margin:0;flex:1}
.pc-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.75rem}
.pc-tag{font-family:var(--font-display);font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--surface-low);color:var(--muted);border-radius:100px;padding:.2rem .6rem}
.pc-footer{padding:.85rem 1.25rem;border-top:1px solid var(--surface-low);display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.btn-quote{font-family:var(--font-display);font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;background:var(--navy);color:#fff;border:none;border-radius:var(--radius-md);padding:.6rem 1.1rem;flex:1;cursor:pointer;transition:background var(--transition),transform var(--transition);text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:.4rem}
.btn-quote:hover{background:var(--navy-mid);color:#fff;transform:translateY(-1px)}
.btn-more{width:36px;height:36px;border:1.5px solid var(--surface-low);border-radius:var(--radius-md);background:#fff;color:var(--muted);font-size:.9rem;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:all var(--transition);flex-shrink:0}
.btn-more:hover{border-color:var(--accent);color:var(--navy)}

/* List view overrides */
#productGrid.view-list .product-card{flex-direction:row;height:140px}
#productGrid.view-list .pc-img{width:160px;height:100%;flex-shrink:0}
#productGrid.view-list .pc-body{padding:.9rem 1.1rem}
#productGrid.view-list .pc-name{font-size:.98rem}
#productGrid.view-list .pc-tags{display:none}
#productGrid.view-list .pc-footer{padding:.9rem 1.1rem;border-top:none;border-left:1px solid var(--surface-low);flex-direction:column;width:160px;flex-shrink:0;justify-content:center}
#productGrid.view-list .btn-quote{width:100%}
#productGrid.view-list .btn-more{width:100%;border-radius:var(--radius-md);justify-content:center;gap:.4rem;font-family:var(--font-display);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* No results */
.no-results{grid-column:1/-1;text-align:center;padding:4rem 1rem;color:var(--muted)}
.no-results i{font-size:2.5rem;opacity:.25;display:block;margin-bottom:1rem}
.no-results p{font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* ─── Mobile sidebar toggle ── */
.btn-filter-toggle{display:none;font-family:var(--font-display);font-weight:800;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;background:var(--navy);color:#fff;border:none;border-radius:var(--radius-md);padding:.7rem 1.2rem;cursor:pointer;align-items:center;gap:.5rem;margin-bottom:1rem}

/* ─── Footer ── */
footer{background:#020e1f;color:#8da0b8;font-size:.88rem}
footer .brand-name{font-family:var(--font-display);font-size:1.8rem;font-weight:900;color:#fff;letter-spacing:.04em}
footer h6{font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:1.25rem}
footer a{color:#8da0b8;text-decoration:none;transition:color var(--transition)}
footer a:hover{color:var(--accent-pale)}
.footer-divider{border-color:rgba(255,255,255,.07)}
.footer-contact-item{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:.9rem}
.footer-contact-item i{color:var(--accent);font-size:1.1rem;margin-top:.05rem;flex-shrink:0}

/* ─── Animations ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}

/* ─── Responsive ── */
@media(max-width:1199.98px){
  .catalog-layout{grid-template-columns:240px 1fr}
  #productGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:991.98px){
  .catalog-layout{grid-template-columns:1fr}
  .catalog-sidebar{position:static;display:none}
  .catalog-sidebar.open{display:block;margin-bottom:1.5rem}
  .btn-filter-toggle{display:flex}
  #productGrid{grid-template-columns:repeat(2,1fr)}
  #productGrid.view-list .product-card{flex-direction:column;height:auto}
  #productGrid.view-list .pc-img{width:100%;height:180px}
  #productGrid.view-list .pc-footer{border-left:none;border-top:1px solid var(--surface-low);flex-direction:row;width:100%}
}
@media(max-width:575.98px){
  #productGrid,#productGrid.view-list{grid-template-columns:1fr}
}
[id]{scroll-margin-top:90px}