/** Shopify CDN: Minification failed

Line 1902:0 Unexpected "}"

**/

:root{
  --accent:#f2c300;
  --bg:#101010;
  --panel:#1a1a1a;
  --text:#eaeaea;
  --muted:rgba(255,255,255,.72);
  --border:rgba(255,255,255,.10);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
a:visited{ color:inherit; }

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:9000;
  background:rgba(5,5,5,.92);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1240px;
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.brand img{ height:34px; width:auto; display:block; }

.nav{ flex:1; }
.menu{
  display:flex;
  align-items:center;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}
.menu > li{ position:relative; }
.menu-link{
  display:inline-flex;
  align-items:center;
  padding:8px 6px;
  font-family: Oswald, Inter, sans-serif;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:1.1px;
  font-weight:700;
  opacity:.9;
}
.menu-link:hover{ color:var(--accent); opacity:1; }
.menu-link.is-active{opacity:1; position:relative;}
.menu-link.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  bottom:-6px;
  background:var(--accent);
  border-radius:2px;
}

.header-actions{ display:flex; align-items:center; gap:10px; }
.cart-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;

  font-family: Oswald, Inter, sans-serif;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:1.1px;
  font-weight:700;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  padding:10px 12px;
  border-radius:999px;
}
.cart-btn:hover{ border-color:rgba(242,195,0,.45); color:var(--accent); }

.hamburger{
  display:none;
  height:38px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
}

/* Dropdowns */
.dropdown, .mega{
  display:none;
  position:absolute;
  top: calc(100% + 10px);
  left:0;
  background: rgba(10,10,10,.92);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.75);
  backdrop-filter: blur(14px);
  z-index:9500;
}
.has-dropdown:hover .dropdown{ display:block; }
.dropdown{
  min-width: 220px;
  padding:10px;
}
.dropdown a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px;
  border-radius:12px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  border:1px solid transparent;
}
.dropdown a::after{ content:"›"; opacity:.45; font-weight:900; }
.dropdown a:hover{
  color:var(--text);
  border-color:rgba(242,195,0,.22);
  background:rgba(242,195,0,.08);
}
.dropdown a:hover::after{ opacity:.9; color:var(--accent); }

.has-mega:hover .mega{ display:grid; }
.mega{
  padding:16px;
  width: min(680px, 92vw);
  display:none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
}
.mega-title{
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:800;
  margin:0 0 10px 0;
}
.mega-col a{
  position:relative;
  display:block;
  padding:10px 28px 10px 10px;
  border-radius:12px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  border:1px solid transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.mega-col a::after{
  content:"›";
  position:absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  opacity:.45;
  font-weight:900;
}
.mega-col a:hover{
  color:var(--text);
  border-color:rgba(242,195,0,.22);
  background:rgba(242,195,0,.08);
}
.mega-col a:hover::after{ opacity:.9; color:var(--accent); }
.mega-col a::after{ content:"›"; opacity:.45; font-weight:900; }
.mega-col a:hover{
  color:var(--text);
  border-color:rgba(242,195,0,.22);
  background:rgba(242,195,0,.08);
}
.mega-col a:hover::after{ opacity:.9; color:var(--accent); }

/* Announcement marquee */
.announcement{ border-bottom:1px solid rgba(255,255,255,.06); }
.marquee{ overflow:hidden; white-space:nowrap; }
.marquee__track{
  display:inline-block;
  padding:10px 0;
  font-family: Oswald, Inter, sans-serif;
  letter-spacing:1px;
  color:var(--accent);
  animation: marquee 20s linear infinite;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-33.333%); }
}

/* Hero */
.hero{
  max-width:1240px;
  margin:0 auto;
  padding:56px 18px 22px;
}
.hero__content{ max-width:720px; }
.hero__branding{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}
.hero__logoImg{
  width: clamp(44px, 5vw, 64px);
  height:auto;
  display:block;
}
.hero__brandText{
  font-family: Oswald, Inter, sans-serif;
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-weight:700;
  font-size:18px;
  opacity:.95;
}
.hero p{ color:var(--muted); margin: 10px 0 18px; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  font-family: Oswald, Inter, sans-serif;
  text-transform:uppercase;
  letter-spacing:1.1px;
  font-weight:700;
  font-size:12px;
  border:1px solid var(--border);
}
.btn--primary{
  background: rgba(242,195,0,.14);
  border-color: rgba(242,195,0,.35);
  color: var(--accent);
}
.btn--secondary{ background: rgba(255,255,255,.03); }
.hero__buttons{ display:flex; gap:12px; flex-wrap:wrap; }

/* Category tiles on homepage */
.grid{
  max-width:1240px;
  margin:0 auto;
  padding: 18px 18px 44px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}
.card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(60% 80% at 30% 15%, rgba(242,195,0,.12), transparent 55%), rgba(255,255,255,.02);
  padding:16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.card h3{
  margin:0 0 8px 0;
  font-family: Oswald, Inter, sans-serif;
  text-transform:uppercase;
  letter-spacing:1.1px;
}
.card p{ margin:0; color:var(--muted); }
.card:hover{ border-color: rgba(242,195,0,.28); }

/* Product grid */
.pgrid{
  max-width:1240px;
  margin:0 auto;
  padding:26px 18px 44px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
@media (min-width: 720px){ .pgrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; } }
@media (min-width: 1100px){ .pgrid{ grid-template-columns: repeat(5, minmax(0, 1fr)); gap:16px; } }

.ptile{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  overflow:hidden;
  transition: transform .14s ease, border-color .18s ease, background .18s ease;
}
.ptile:hover{
  border-color:rgba(242,195,0,.35);
  background: rgba(255,255,255,.035);
  transform: translateY(-2px);
}
.ptile__media{ aspect-ratio:1/1; background:#0b0b0b; }
.ptile__img{ width:100%; height:100%; object-fit:cover; display:block; }
.ptile__body{ padding:10px 10px 12px; }
.ptile__title{ font-size:12.5px; font-weight:900; line-height:1.25; color:var(--text); }
.ptile__price{ color:var(--accent); font-weight:900; margin-top:6px; font-size:13px; }

/* Footer basic */
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding: 18px 18px;
  position: relative;
  overflow: hidden;
}

.footer-watermark{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 420px;
  max-width: 70vw;
  opacity: .045;
  filter: blur(.2px);
  pointer-events:none;
}

.footer-inner{
  max-width:1240px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  /* Prevent the footer reading like two stacked bars on desktop */
  flex-wrap:nowrap;
  position:relative;
  z-index:1;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-brand img{ height:28px; width:auto; }
.footer-small{ color: rgba(255,255,255,.65); font-size:13px; }

@media (max-width: 980px){
  .footer-inner{ flex-wrap:wrap; }
}

/* Mobile */
@media (max-width: 920px){
  .nav{ display:none; }
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
}

/* Mobile drawer */
.mnav{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:none;
  z-index:10000;
}
.mnav.is-open{ display:block; }
.mnav__panel{
  position:absolute;
  top:0;
  right:0;
  width:min(420px, 92vw);
  height:100%;
  background:rgba(8,8,8,.96);
  border-left:1px solid var(--border);
  box-shadow:0 18px 60px rgba(0,0,0,.75);
  backdrop-filter: blur(14px);
  display:flex;
  flex-direction:column;
}
.mnav__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  border-bottom:1px solid var(--border);
}
.mnav__brand{display:flex;align-items:center;gap:10px;}
.mnav__brand img{height:22px;width:auto;display:block;opacity:.95;}
.mnav__close{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  border-radius:12px;
  padding:8px 12px;
}
.mnav__body{
  padding:14px 16px 18px;
  overflow:auto;
}
.mnav__item{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius:16px;
  padding:10px;
  margin-top:12px;
}
.mnav__summary{
  list-style:none;
  cursor:pointer;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 6px;
  color:var(--text);
}
.mnav__summary::-webkit-details-marker{ display:none; }
.mnav__item[open] .mnav__summary{ color: var(--accent); }
.mnav__links{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.mnav__links a{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color:rgba(255,255,255,.80);
  font-weight:700;
}
.mnav__links a:hover{
  border-color:rgba(242,195,0,.22);
  background:rgba(242,195,0,.08);
  color:var(--text);
}
.mnav__quick{ margin-top:16px; }


/* --- Dropdown linger + hover buffer --- */
.has-mega .mega,
.has-dropdown .dropdown{
  display:block; /* keep in flow for transitions */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .18s;
}

/* Buffer area so you can move cursor into the panel */
.has-mega .mega::before,
.has-dropdown .dropdown::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-14px;
  height:14px;
}

.has-mega:hover .mega,
.has-dropdown:hover .dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

/* JS-driven open state for the PARTS mega menu.
   Without this, the mega panel becomes non-interactive the moment the cursor
   leaves the trigger <li> (because :hover is lost), which feels like the menu
   "times out" instantly. */
.has-mega.is-open .mega{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

/* JS-driven open state (prevents instant close when traversing into panels) */
.has-dropdown.is-open .dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

/* Hover bridge for normal dropdowns (JS positions it between trigger and panel) */
.jr-dd-bridge{
  display:none;
  pointer-events:auto;
  background:transparent;
}

/* Make 'More parts' look like a subtle CTA */
.menu__more{
  margin-top: 10px;
  color: var(--accent);
  font-weight: 900;
  letter-spacing: .4px;
  opacity: 1 !important;
}


/* --- Brand strip --- */
.brand-strip{
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.brand-strip__inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.brand-strip__label{
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 11px;
  color: rgba(255,255,255,.72);
}
.brand-strip__logos{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.brand-strip__logos img{
  height: 34px;
  width:auto;
  object-fit: contain;
  opacity: .98;
  filter: none;
}
.brand-strip__logos img:hover{
  opacity: 1;
}
@media (max-width: 720px){
  .brand-strip__logos img{ height: 20px; }
}

/* Layout sanity */
html, body{ height:auto; }
body{ margin:0; }
main{ display:block; padding-bottom: 0 !important; }
.site-footer{ margin-top: 0; }


/* --- v6: mega menu polish + featured column --- */
.mega{
  width: min(880px, 92vw) !important;
  grid-template-columns: 1fr 1fr 0.9fr !important;
  align-items: start !important;
}
.mega__feature{ min-width: 0; }
.mega__card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 14px;
}
.mega__cardTitle{
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 11px;
  color: rgba(255,255,255,.75);
  margin-bottom: 10px;
}
.mega__brandGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mega__brandGrid img{
  width: 100%;
  height: 26px;
  object-fit: contain;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 6px 10px;
}
.mega__cta{
  display:inline-flex;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(242,195,0,.30);
  background: rgba(242,195,0,.10);
  color: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}
.mega__cta:hover{ background: rgba(242,195,0,.14); border-color: rgba(242,195,0,.45); }

@media (max-width: 1100px){
  .mega{
    grid-template-columns: 1.05fr .95fr 1fr !important;
    width: min(760px, 92vw) !important;
  }
  .mega__feature{ grid-column: 1 / -1; }
  .mega__brandGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mega__brandGrid img{ height: 28px; }
}
@media (max-width: 720px){
  .mega__brandGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* --- v6: brand strip motion + swipe --- */
@media (min-width: 900px){
  .brand-strip__logos img{
    transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  }
  .brand-strip__logos img:hover{
    transform: translateY(-1px);
    filter: saturate(1.15) contrast(1.05);
  }
}
@media (max-width: 899px){
  .brand-strip__logos{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .brand-strip__logos img{
    scroll-snap-align: start;
  }
  .brand-strip__logos::-webkit-scrollbar{ height: 6px; }
  .brand-strip__logos::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius: 999px; }
}


.mega{
  left: 0 !important;
  right: auto !important;
  transform: none !important;

  width: min(980px, 96vw) !important;
  grid-template-columns: 1fr 1fr 0.9fr !important;

  max-height: min(640px, 78vh) !important;
  overflow: auto !important;
}

.mega > div:not(.mega__feature){
  overflow: visible !important;
  max-height: none !important;
}

.mega{ align-items: start !important; }
.mega > div{ padding-right: 10px; }
.mega > div:last-child{ padding-right: 0; }

@media (min-width: 900px){
  .mega > div:not(.mega__feature){
    max-height: min(560px, 72vh);
    overflow-y: auto;
  }
}

.mega__feature{ display: block !important; }
.mega__card{ position: sticky; top: 0; }

.mega::-webkit-scrollbar{ height: 10px; width: 10px; }
.mega::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; }



.mega{
  left: 0 !important;
  width: min(1040px, 96vw) !important;
  grid-template-columns: 1.2fr 1fr 0.85fr !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Two-column list inside E-BIKE PARTS to fit everything */
.mega__list2col{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px 10px;
}
.mega__list2col a{
  margin-top: 0 !important;
}

/* Tighten row height a touch so everything fits */
.mega a{
  padding: 10px 10px !important;
  font-size: 12.5px !important;
}

/* If width is smaller, drop the internal 2-col back to 1-col */
@media (max-width: 980px){
  .mega{
    grid-template-columns: 1.05fr .95fr 1fr !important;
    width: min(860px, 96vw) !important;
  }
  .mega__feature{ grid-column: 1 / -1; }
  .mega__list2col{ grid-template-columns: 1fr; }
}



.mega{
  width: min(1120px, 96vw) !important;
  grid-template-columns: 1fr 1fr .9fr 1.05fr !important;
  gap: 18px !important;
  overflow: visible !important;
  max-height: none !important;
}

.mega__col{ min-width: 0; }
.mega__col--perf{ border-left: 1px solid rgba(255,255,255,.08); padding-left: 14px; }

.mega h4{
  margin: 2px 0 12px 0 !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.mega a{
  padding: 10px 12px !important;
  border-radius: 14px !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
}

.mega a + a{ margin-top: 8px; }

.mega__brandGrid--wide{
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.mega__brandGrid--wide img{
  height: 26px;
}

@media (max-width: 1100px){
  .mega{
    grid-template-columns: 1.05fr .95fr 1fr !important;
    width: min(900px, 96vw) !important;
  }
  .mega__col--perf{ border-left: 0; padding-left: 0; }
  .mega__feature{ grid-column: 1 / -1; }
  .mega__brandGrid--wide{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 720px){
  .mega{ grid-template-columns: 1fr !important; }
  .mega__feature{ grid-column: auto; }
  .mega__brandGrid--wide{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* --- v10: homepage category tiles (motorsport) --- */
.cat-tiles{
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.015);
}
.cat-tiles__inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.cat-tile{
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(80% 140% at 10% 10%, rgba(242,195,0,.16), transparent 55%),
              rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 16px;
  min-height: 120px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition: transform .14s ease, border-color .18s ease, background .18s ease;
}
.cat-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(242,195,0,.32);
  background: radial-gradient(80% 140% at 10% 10%, rgba(242,195,0,.22), transparent 55%),
              rgba(255,255,255,.04);
}
.cat-tile__kicker{
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1.2px;
  font-size: 11px;
  color: rgba(255,255,255,.70);
}
.cat-tile__title{
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: 1.4px;
  font-size: 16px;
  margin-top: 4px;
}
.cat-tile__meta{
  color: rgba(255,255,255,.72);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.35;
  max-width: 44ch;
}
@media (max-width: 900px){
  .cat-tiles__inner{ grid-template-columns: 1fr; }
  .cat-tile{ min-height: 108px; }
}


/* --- v11: Mega menu like reference (grid groups) --- */
.mega.mega--grid{
  width: min(1180px, 96vw);
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  padding: 18px;
  background: rgba(12,12,12,.97);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 40px 140px rgba(0,0,0,.85);
  backdrop-filter: blur(16px);
}

.mega__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px 22px;
  align-content: start;
}

.mega__group h4{
  margin: 2px 0 12px 0;
  color: rgba(255,255,255,.92);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 12px;
  font-weight: 950;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  position: relative;
}
.mega__group h4::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width: 44px;
  height: 2px;
  background: rgba(242,195,0,.75);
  border-radius: 999px;
}

.mega__group a{
  display:block;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,.70);
}
.mega__group a:hover{ color: var(--accent); }

.mega__aside .mega__card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 14px;
  height: 100%;
}

.mega__cardTitle{
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: 1px;
  font-size: 11px;
  color: rgba(255,255,255,.72);
  margin-bottom: 12px;
}

.mega__brandRow{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mega__brandRow img{
  height: 26px;
  width: auto;
  object-fit: contain;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 6px 10px;
}

.mega__cta{
  display:inline-flex;
  width: 100%;
  justify-content:center;
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(242,195,0,.32);
  background: rgba(242,195,0,.12);
  color: var(--accent);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
}
.mega__cta:hover{ background: rgba(242,195,0,.16); border-color: rgba(242,195,0,.45); }

@media (max-width: 1100px){
  .mega.mega--grid{ grid-template-columns: 1fr; }
  .mega__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 820px){
  .mega__grid{ grid-template-columns: 1fr; }
}


/* v15: homepage safe styles */

.home{
  padding: 34px 0 22px;
}
.home__wrap{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 18px;
}
.home__hero{
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(70% 140% at 10% 0%, rgba(242,195,0,.16), transparent 55%), rgba(255,255,255,.03);
  border-radius: 22px;
  padding: 28px;
}
.home__brand{
  display:flex;
  align-items:center;
  gap: 14px;
}
.home__logo{
  width: 54px;
  height: 54px;
  object-fit: contain;
}
.home__title{
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 14px;
  color: rgba(255,255,255,.92);
}
.home__tag{
  margin-top: 12px;
  color: rgba(255,255,255,.78);
  font-weight: 700;
  max-width: 58ch;
}
.home__cta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 16px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
}
.btn:hover{
  border-color: rgba(242,195,0,.30);
  background: rgba(242,195,0,.08);
  color: rgba(255,255,255,.95);
}
.btn--primary{
  border-color: rgba(242,195,0,.40);
  background: rgba(242,195,0,.14);
  color: var(--accent);
}
.home__brands{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.home__brandsLabel{
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: 1px;
  font-size: 11px;
  color: rgba(255,255,255,.72);
}
.home__brandsRow{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
}
.home__brandsRow img{
  height: 28px;
  width: auto;
  object-fit: contain;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 6px 10px;
}
@media (max-width: 640px){
  .home__hero{ padding: 18px; }
  .home__logo{ width: 44px; height: 44px; }
}


/* --- v16: Collection listing polish --- */
.page{
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px 18px 44px;
}
.page__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  padding: 6px 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 18px;
}
.page__title{
  margin: 0;
  font-weight: 950;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
}
.page__desc{
  max-width: 62ch;
  color: rgba(255,255,255,.72);
  font-weight: 650;
  margin-top: 10px;
}
@media (max-width: 720px){
  .page__head{ flex-direction:column; align-items:flex-start; }
}

/* Product tiles: more premium + consistent */
.ptile{
  display:block;
  text-decoration:none;
  color: inherit;
}
.ptile__media{
  aspect-ratio: 4 / 5;
  background: radial-gradient(80% 140% at 50% 0%, rgba(242,195,0,.10), transparent 55%), #0a0a0a;
}
.ptile__badge{
  position:absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(242,195,0,.35);
  background: rgba(242,195,0,.12);
  color: var(--accent);
  font-weight: 950;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ptile__media{ position: relative; }
.ptile__body{
  padding: 12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.ptile__title{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}
.ptile__meta{
  display:flex;
  align-items:baseline;
  gap: 10px;
}
.ptile__price{
  color: var(--accent);
  font-weight: 950;
  font-size: 14px;
}
.ptile__compare{
  color: rgba(255,255,255,.55);
  text-decoration: line-through;
  font-weight: 800;
  font-size: 12.5px;
}

/* Grid: tighter + better balance */
.pgrid{
  padding: 0;
}
.pgrid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px){
  .pgrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
  .pgrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* --- v17: Smaller product tiles + denser collection grid --- */
.collection__grid, .product-grid, .grid--collection{
  display: grid;
  gap: 14px !important;
}

@media (min-width: 1100px){
  .collection__grid, .product-grid, .grid--collection{
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  }
}
@media (min-width: 820px) and (max-width: 1099px){
  .collection__grid, .product-grid, .grid--collection{
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }
}
@media (min-width: 560px) and (max-width: 819px){
  .collection__grid, .product-grid, .grid--collection{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}
@media (max-width: 559px){
  .collection__grid, .product-grid, .grid--collection{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* Card density */
.product-card, .card-product, .product-tile{
  border-radius: 16px !important;
}
.product-card__media, .card-product__media, .product-tile__media{
  aspect-ratio: 1 / 1 !important; /* smaller visual block */
}
.product-card__body, .card-product__body, .product-tile__body{
  padding: 10px 10px 12px !important;
}
.product-card__title, .card-product__title, .product-tile__title{
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}
.product-card__price, .card-product__price, .product-tile__price{
  font-size: 12px !important;
}

/* Reduce collection heading size */
.collection__title, .collection-title, h1.collection-title{
  font-size: clamp(24px, 3.4vw, 40px) !important;
}


/* --- v18: Mega menu (simple columns like reference) --- */
.mega.mega--simple{
  width: min(1100px, 96vw);
  padding: 14px 16px;
  background: rgba(12,12,12,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 40px 140px rgba(0,0,0,.85);
  backdrop-filter: blur(14px);
}
.mega--simple .mega__title{
  font-weight: 950;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  font-size: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mega--simple .mega__cols{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px 18px;
}
.mega--simple .mega__head{
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  margin-bottom: 10px;
  position: relative;
  padding-bottom: 8px;
}
.mega--simple .mega__head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 44px;
  height: 2px;
  background: rgba(242,195,0,.75);
  border-radius: 999px;
}
.mega--simple a{
  display:block;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,.70);
}
.mega--simple a:hover{
  color: var(--accent);
}
.mega--simple a::before{
  content:"- ";
  color: rgba(242,195,0,.60);
}
.mega--simple .mega__bottom{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:flex-end;
}
@media (max-width: 1100px){
  .mega--simple .mega__cols{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 820px){
  .mega--simple .mega__cols{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .mega--simple .mega__cols{ grid-template-columns: 1fr; }
}

/* --- v18: Collection grid density (fix huge products) --- */
.pgrid{
  display:grid !important;
  gap: 14px !important;
}
@media (min-width: 1200px){
  .pgrid{ grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
}
@media (min-width: 980px) and (max-width: 1199px){
  .pgrid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (min-width: 640px) and (max-width: 979px){
  .pgrid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 639px){
  .pgrid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Make product cards more compact */
.product-card, .product-card__inner, .product-card__media{
  max-width: 100%;
}
.product-card__media img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* v18 ptile compact */
.ptile{
  display:block;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  overflow:hidden;
}
.ptile__media{ aspect-ratio: 1 / 1; background: rgba(0,0,0,.25); }
.ptile__img{ width:100%; height:100%; object-fit:cover; display:block; }
.ptile__body{ padding: 10px; }
.ptile__title{ font-size: 12.5px; font-weight: 900; line-height: 1.25; color: rgba(255,255,255,.92); }
.ptile__price{ margin-top: 6px; font-size: 12px; font-weight: 850; color: rgba(255,255,255,.78); }


/* --- v19: Tidy mega menu layout (no big gaps, clean columns) --- */
.mega.mega--simple{
  width: min(980px, 94vw) !important;
  padding: 14px 16px 12px !important;
}

.mega--simple .mega__title{
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
  font-size: 12px !important;
}

.mega--simple .mega__cols{
  grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
  gap: 12px 18px !important;
  align-items: start !important;
}

.mega--simple .mega__col{ min-width: 0; }

.mega--simple .mega__head{
  font-size: 11px !important;
  letter-spacing: 1.1px !important;
  margin-bottom: 8px !important;
  padding-bottom: 7px !important;
  white-space: nowrap;
}

.mega--simple a{
  padding: 5px 0 !important;
  font-size: 12.5px !important;
  line-height: 1.15 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mega--simple a::before{ content:""; display:none; }

.mega--simple a{
  position: relative;
  padding-left: 10px !important;
}
.mega--simple a::after{
  content:"";
  position:absolute;
  left:0;
  top: 50%;
  width: 6px;
  height: 2px;
  background: rgba(242,195,0,.60);
  transform: translateY(-50%);
  border-radius: 999px;
}

.mega--simple .mega__bottom{
  margin-top: 10px !important;
  padding-top: 10px !important;
  justify-content: flex-end !important;
}
.mega--simple .mega__cta{ max-width: 320px; }

@media (max-width: 1100px){
  .mega--simple .mega__cols{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .mega--simple a{ white-space: normal; }
}
@media (max-width: 820px){
  .mega--simple .mega__cols{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 520px){
  .mega--simple .mega__cols{ grid-template-columns: 1fr !important; }
}

/* --- v19: Footer/Home brand logos (no weird tile BG, no distortion) --- */
.home__brandsRow img,
.mega__brandRow img,
.brand-strip img,
.footer__brands img,
.footer-brands img{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.home__brandsRow img,
.footer__brands img,
.footer-brands img,
.brand-strip img{
  height: 28px !important;
  width: auto !important;
  object-fit: contain !important;
}

.home__brandsRow a,
.footer__brands a,
.footer-brands a{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* v22 search grid like 666 */
.srch{ padding: 34px 0 40px; }
.srch__wrap{ max-width: 1320px; margin: 0 auto; padding: 0 18px; }
.srch__title{ text-align:center; font-size: 32px; letter-spacing: 1px; text-transform: uppercase; font-weight: 950; margin: 0 0 18px; }
.srch__bar{ display:flex; justify-content:center; gap: 10px; margin-bottom: 18px; }
.srch__bar input{ width: min(760px, 100%); padding: 14px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.40); color: rgba(255,255,255,.92); }
.srch__bar button{ padding: 14px 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.srch__top{ display:flex; justify-content:space-between; align-items:center; gap: 14px; margin: 12px 0 22px; flex-wrap: wrap; }
.srch__filters{ display:flex; align-items:center; gap: 14px; flex-wrap: wrap; }
.srch__label, .srch__label2{ text-transform: uppercase; font-weight: 950; letter-spacing: 1px; color: rgba(255,255,255,.78); font-size: 12px; }
.srch__muted{ color: rgba(255,255,255,.55); font-weight: 700; }
.fdrop{ position: relative; }
.fdrop__sum{ list-style: none; cursor:pointer; padding: 10px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(0,0,0,.30); font-weight: 850; }
.fdrop[open] .fdrop__sum{ border-color: rgba(242,195,0,.30); }
.fdrop__panel{ position:absolute; top: calc(100% + 8px); left:0; min-width: 220px; background: rgba(12,12,12,.96); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 10px; z-index: 1000; box-shadow: 0 30px 120px rgba(0,0,0,.85); }
.fopt{ display:flex; gap: 10px; align-items:center; padding: 6px 6px; color: rgba(255,255,255,.80); font-weight: 800; }
.fopt em{ opacity: .7; font-style: normal; font-weight: 800; }
.fapply{ width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(242,195,0,.35); background: rgba(242,195,0,.10); color: rgba(255,255,255,.92); font-weight: 950; text-transform: uppercase; letter-spacing: 1px; }
.fprice{ display:flex; gap: 8px; }
.fprice input{ width: 100%; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.30); color: rgba(255,255,255,.88); }
.srch__sort{ display:flex; align-items:center; gap: 12px; flex-wrap: wrap; margin-left:auto; }
.srch__sort select{ padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.30); color: rgba(255,255,255,.92); font-weight: 850; min-width: 220px; }
.srch__count{ color: rgba(255,255,255,.70); font-weight: 850; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
.srch__grid{ display:grid; gap: 18px; grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 18px; }
@media (max-width: 1080px){ .srch__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px){ .srch__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } .srch__title{ font-size: 26px; } }
@media (max-width: 440px){ .srch__grid{ grid-template-columns: 1fr; } }

/* Product cards (match JR dark theme) */
.pcw{
  display:block;
  border-radius: 16px;
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.pcw:hover{ border-color: rgba(242,195,0,.28); }
.pcw__media{
  background: rgba(255,255,255,.02);
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px;
}
.pcw__media img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.pcw__body{ padding: 16px 16px 18px; }
.pcw__title{
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: 18px;
  line-height: 1.12;
}
.pcw__vendor{ margin-top: 8px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 800; }
.pcw__price{ margin-top: 12px; font-weight: 950; letter-spacing: 1px; font-size: 18px; }
.pcw__compare{ text-decoration: line-through; color: rgba(255,255,255,.45); margin-right: 10px; font-weight: 900; }

/* v24 product page motorsport (matches reference without Klarna) */
.pdp{
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 18px 44px;
  display:grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 22px;
}
@media (max-width: 980px){
  .pdp{ grid-template-columns: 1fr; }
}
.pdp__media{
  background: transparent;
}
.pdp__mediaInner{
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 18px;
  min-height: 520px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.pdp__img{
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  display:block;
}
.pdp__info{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px 18px 20px;
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}
.pdp__vendor{
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  font-weight: 850;
}
.pdp__title{
  margin: 8px 0 10px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.05;
  font-size: 34px;
}
@media (max-width: 980px){ .pdp__title{ font-size: 28px; } }
.pdp__pricing{
  display:flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 6px 0 6px;
}
.pdp__compare{
  text-decoration: line-through;
  color: rgba(255,255,255,.55);
  font-weight: 900;
  font-size: 20px;
}
.pdp__price{
  font-weight: 1000;
  font-size: 34px;
  letter-spacing: 1px;
}
.pdp__price--sale{ color: #ff3b30; }
.pdp__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,59,48,.20);
  border: 1px solid rgba(255,59,48,.45);
  color: rgba(255,255,255,.95);
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
}
.pdp__tax{
  color: rgba(255,255,255,.70);
  font-weight: 750;
  margin-bottom: 12px;
}
.pdp__features{
  background: rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px 14px;
  display:grid;
  gap: 10px;
  margin: 10px 0 14px;
}
.pdp__feature{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 950;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  font-size: 13px;
}
.pdp__ico{ width: 22px; text-align:center; font-size: 16px; }

.pdp__form{ display:grid; gap: 12px; }
.pdp__label{ font-weight: 900; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; color: rgba(255,255,255,.75); }
.pdp__select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  font-weight: 850;
}
.pdp__qtyRow{
  display:grid;
  grid-template-columns: 64px 1fr 64px;
  gap: 10px;
  align-items:center;
}
.pdp__qtyBtn{
  height: 54px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  font-size: 18px;
}
.pdp__qty{
  height: 54px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  text-align:center;
  font-weight: 950;
  font-size: 16px;
}
.pdp__atc{
  height: 56px;
  border-radius: 14px;
  border: 0;
  background: #ff3b30;
  color: #fff;
  font-weight: 1000;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 15px;
}
.pdp__atc[disabled]{ opacity: .5; cursor:not-allowed; }

.pdp__compat{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.pdp__compatLabel{
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 950;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  margin-bottom: 10px;
}
.pdp__chip{
  display:inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  background: #19c15a;
  color: #061a0d;
  font-weight: 1000;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
}

.pdp__acc{
  margin-top: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  overflow:hidden;
}
.pdp__acc summary{
  cursor:pointer;
  padding: 16px 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 1000;
  color: rgba(255,255,255,.92);
  display:flex;
  justify-content: space-between;
  align-items:center;
}
.pdp__accBody{
  padding: 0 16px 18px;
  color: rgba(255,255,255,.82);
  line-height: 1.55;
}


/* v26 mockup match: header/search/util row */
.hdr__top{
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 18px 12px;
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 18px;
  align-items: center;
}
.hdr__logo{ height: 42px; width: auto; object-fit: contain; }
.hdr__search{
  display:flex; align-items:center;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
}
.hdr__search input{
  flex:1; padding: 14px 16px;
  background: transparent; border:0; outline:0;
  color: rgba(255,255,255,.92);
  font-weight: 800;
}
.hdr__search button{
  width: 56px; height: 48px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(242,195,0,.18);
  border:0; color: rgba(255,255,255,.95);
  font-weight: 1000; cursor:pointer;
}
.hdr__util{ display:flex; gap: 18px; align-items:center; justify-content:flex-end; }
.hdr__utilLink{
  display:flex; gap: 8px; align-items:center;
  color: rgba(255,255,255,.88);
  font-weight: 850;
  text-decoration:none;
  white-space: nowrap;
}
.hdr__utilLink span{ opacity:.95; }
@media (max-width: 980px){
  .hdr__top{ grid-template-columns: 1fr; gap: 12px; }
  .hdr__util{ justify-content: space-between; }
}

/* v26: hero banner like mockup */
.homeHero{
  margin: 18px auto 0;
  max-width: 1320px;
  padding: 0 18px;
}
.homeHero__inner{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
  padding: 22px 22px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
}
.homeHero__kicker{
  font-weight: 1000;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  font-size: 12px;
}
.homeHero__title{
  margin: 6px 0 0;
  font-size: 34px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 1000;
}
.homeHero__title span{ color: rgba(242,195,0,.95); }
.homeHero__price{ margin-top: 10px; display:flex; gap: 12px; align-items:center; flex-wrap:wrap; }
.homeHero__was{ text-decoration: line-through; opacity:.7; font-weight: 900; }
.homeHero__now{ font-size: 26px; font-weight: 1100; color: rgba(242,195,0,.95); }
.homeHero__pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(235, 51, 51, .18);
  border: 1px solid rgba(235, 51, 51, .45);
  font-weight: 950;
  text-transform: uppercase;
  font-size: 12px;
}
.homeHero__cta{
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(235, 51, 51, 1);
  color: #fff;
  font-weight: 1000;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration:none;
  white-space: nowrap;
}
@media (max-width: 860px){
  .homeHero__inner{ flex-direction: column; align-items:flex-start; }
  .homeHero__title{ font-size: 28px; }
}


/* v27: home hero image like provided mockup */
.homeHero__inner--withArt{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 22px;
  padding: 22px;
}
.homeHero__sub{
  margin-top: 10px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  max-width: 58ch;
}
.homeHero__ctaRow{
  display:flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.homeHero__cta{ border-radius: 14px; padding: 14px 18px; font-weight: 1000; letter-spacing: 1px; text-transform: uppercase; text-decoration:none; }
.homeHero__cta--gold{
  background: rgba(242,195,0,1);
  color: #0b0b0b;
}
.homeHero__cta--ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
.homeHero__art{ position: relative; border: none; background: none; border-radius: 18px; overflow:hidden; }

.homeHero__art img{
  width:100%;
  height:auto;
  display:block;
}
@media (max-width: 980px){
  .homeHero__inner--withArt{ grid-template-columns: 1fr; }
}

/* v27: tidy mega menu like mockup (compact, aligned) */
.mega__panel{
  padding: 16px !important;
}
.mega__cols{
  gap: 18px !important;
  grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
}
.mega__head{
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.82) !important;
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.mega__col a{
  padding: 8px 0 !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  color: rgba(255,255,255,.76) !important;
}
.mega__col a:hover{
  color: rgba(242,195,0,.95) !important;
}
.mega__bottom{
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
@media (max-width: 1100px){
  .mega__cols{ grid-template-columns: repeat(2, minmax(180px, 1fr)) !important; }
}


.homeHero__artInner{ position: relative; width: 100%; height: 100%; overflow: hidden; }
.homeHero__artInner img{
  width: 100%;
  max-width: 100%;
  height: auto;
  display:block;
  transform: none;
  animation: none;
}

  to{ transform: translateX(0%); }
}
@media (max-width: 980px){
  .homeHero__artInner img{ width: 100%; transform: none; animation: none; }
}


/* v28: mega menu style to match reference image */
.mega__panel{
  max-width: 980px;
  margin: 0 auto;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(10,10,10,.94) !important;
  box-shadow: 0 40px 140px rgba(0,0,0,.80) !important;
}

/* v29: tighten mega menu + product cards (match JR dark theme) */
/* Parts mega menu: smaller, keep brands + Browse All visible */
.mega-menu--parts{
  min-width: 980px !important;
  max-width: 1080px !important;
  padding: 18px 22px !important;
  max-height: calc(100vh - 170px);
  overflow: auto;
}
.mega-menu--parts .megaGrid{
  grid-template-columns: 240px 240px 240px 1fr !important;
  gap: 28px !important;
}
.mega-menu--parts .megaHead{
  font-size: 13px !important;
  letter-spacing: 2px !important;
  margin-bottom: 10px !important;
}
.mega-menu--parts .megaLink{ 
  font-size: 14px !important;
  padding: 6px 0 !important;
}
.mega-menu--parts .megaBrands{
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 10px !important;
}
.mega-menu--parts .megaBrand{
  padding: 12px !important;
}
.mega-menu--parts .megaBrand img{
  height: 24px !important;
}
.mega-menu--parts .megaCta{
  position: sticky;
  bottom: 0;
  margin-top: 12px !important;
  padding-top: 12px !important;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0));
  backdrop-filter: blur(8px);
}
.mega-menu--parts .megaCtaBtn{
  max-width: 340px;
  padding: 12px 18px !important;
  font-size: 14px !important;
}

/* Product page media: remove white panel */
.pdp__mediaInner{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  padding: 14px !important;
  border-radius: 18px !important;
  min-height: 440px !important;
}

/* Product cards used across the site: keep dark + slightly smaller */
.pcw{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.92) !important;
}
.pcw__media{ background: rgba(0,0,0,.25) !important; padding: 16px !important; }
.pcw__title{ font-size: 15px !important; }
.pcw__vendor{ color: rgba(255,255,255,.60) !important; }
.pcw__price{ font-size: 16px !important; }
.pcw__compare{ color: rgba(255,255,255,.55) !important; }

/* Collection grids: a touch denser on desktop so cards feel smaller */
@media (min-width: 1200px){
  .pgrid{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; }
}

.mega__cols{
  display:grid !important;
  grid-template-columns: 1.2fr 1fr .9fr !important;
  gap: 28px !important;
  align-items: start !important;
}

.mega__col{ min-width: 0; }
.mega__head{
  font-weight: 1000 !important;
  letter-spacing: 1.5px !important;
  font-size: 12px !important;
  opacity: .92 !important;
  text-transform: uppercase !important;
  margin: 2px 0 12px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.mega__col ul{ margin: 0; padding: 0; list-style: none; }
.mega__col li{ margin: 0; padding: 0; }
.mega__col a{
  display:block !important;
  padding: 7px 0 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  color: rgba(255,255,255,.72) !important;
  text-decoration: none !important;
}
.mega__col a:hover{ color: rgba(242,195,0,.98) !important; }

/* brand logo grid inside mega menu */
.mega__brands{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.mega__brands a{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding: 8px !important;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.mega__brands img{
  width: 100%;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
  opacity: .95;
}

.mega__bottom{
  display:flex !important;
  justify-content:center !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
.mega__bottom a{
  font-weight: 1000 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(242,195,0,.28) !important;
  background: rgba(242,195,0,.10) !important;
  color: rgba(255,255,255,.92) !important;
}
@media (max-width: 1100px){
  .mega__panel{ max-width: 92vw; }
}
@media (max-width: 860px){
  .mega__cols{ grid-template-columns: 1fr !important; gap: 18px !important; }
  .mega__brands{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* v29: static hero image (no motion) */
.homeHero__artInner img{
  width: 100% !important;
  transform: none !important;
  animation: none !important;
}


/* v29: mega menu reference layout */
.mega--ref .mega__panel{
  padding: 18px !important;
}
.mega--ref .mega__cols{
  grid-template-columns: 1.25fr 1.05fr .85fr !important;
}
.mega--ref .mega__spacer{ height: 14px; }
.mega--ref .mega__col--brands{
  display:flex;
  flex-direction: column;
}
.mega--ref .mega__bottom--center{
  margin-top: 14px !important;
  padding-top: 14px !important;
}


/* v31: STATIC hero image (no motion) */
.homeHero__artInner img{
  animation: none !important;
  transform: none !important;
}

/* v31: mega menu rebuilt to match reference (compact columns, clickable, no overlap) */
li.mega{ position: relative; }
.mega-menu{
  display:none;
  position:absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 660px;
  max-width: 760px;
  padding: 22px 26px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,10,.96);
  box-shadow: 0 40px 140px rgba(0,0,0,.85);
  backdrop-filter: blur(14px);
  z-index: 9999;
}
li.mega:hover > .mega-menu,
li.mega:focus-within > .mega-menu{ display:block; }

/* keep open a moment when moving cursor */
.mega-menu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-14px; height:14px;
}

.megaGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr .9fr;
  gap: 22px;
  align-items: start;
}
.megaHead{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin: 0 0 10px;
}
.megaHead--spaced{ margin-top: 16px; }

.megaList{ list-style:none; margin:0; padding:0; }
.megaList li{ margin:0; padding:0; }
.megaList a{
  display:block;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.72);
  text-decoration:none;
}
.megaList a:hover{ color: rgba(242,195,0,.98); }

.megaBlock--brands{ display:flex; flex-direction:column; }
.megaBrands{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.megaBrand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6px;
  border-radius: 10px;
  border: none;
  background: transparent;
}
.megaBrand img{
  width:100%;
  height: 24px;
  object-fit: contain;
  opacity: .96;
}

.megaCta{ margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.10); }
.megaCtaBtn{
  display:block;
  text-align:center;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid rgba(242,195,0,.32);
  background: rgba(242,195,0,.10);
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
.megaCtaBtn:hover{ background: rgba(242,195,0,.16); }

@media (max-width: 980px){
  .mega-menu{ min-width: 94vw; max-width: 94vw; left: 50%; transform: translateX(-50%); padding: 18px 16px; }
  .megaGrid{ grid-template-columns: 1fr 1fr; gap: 16px; }
  .megaBrands{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .megaGrid{ grid-template-columns: 1fr; }
}


/* v35: split hero layout + controller image (static) */
.homeHero__inner--split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: center;
  padding: 22px;
}
.homeHero__artFrame{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  box-shadow: 0 22px 90px rgba(0,0,0,.65);
}
.homeHero__artImg{
  width: 100%;
  height: auto;
  display:block;
  object-fit: contain;
  background: rgba(0,0,0,.15);
  animation: none !important;
  transform: none !important;
}
@media (max-width: 980px){
  .homeHero__inner--split{ grid-template-columns: 1fr; }
}

/* v35: disable any leftover hero animations */
.homeHero__artInner img,.homeHero__art img{animation:none !important;transform:none !important;}


/* v35: mega menu match (compact like reference) */
.mega.mega--v35{
  width: min(980px, 92vw) !important;
  padding: 16px 16px 14px !important;
  border-radius: 18px !important;
  background: rgba(10,10,10,.94) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 40px 140px rgba(0,0,0,.80) !important;
}
.mega__cols--v35{
  display:grid !important;
  grid-template-columns: 1.05fr 1.2fr .95fr !important;
  gap: 26px !important;
  align-items:start !important;
}
.mega__cols--v35 .mega__head{
  font-weight: 1000 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.86) !important;
  margin: 2px 0 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.mega__cols--v35 ul{ margin:0; padding:0; list-style:none; }
.mega__cols--v35 li{ margin:0; padding:0; }
.mega__cols--v35 a{
  display:block !important;
  padding: 7px 0 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  color: rgba(255,255,255,.72) !important;
  text-decoration:none !important;
}
.mega__cols--v35 a:hover{ color: rgba(242,195,0,.98) !important; }
.mega__spacer{ height: 12px; }
.mega__brands{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.mega__brands a{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding: 10px !important;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.mega__brands img{
  width: 100%;
  height: 26px;
  object-fit: contain;
}
.mega__bottom--v35{
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
.mega__bottom--v35 .mega__cta{
  display:inline-flex;
  justify-content:center;
  width: 100%;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(242,195,0,.28) !important;
  background: rgba(242,195,0,.10) !important;
  font-weight: 1000 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
@media (max-width: 920px){
  .mega__cols--v35{ grid-template-columns: 1.05fr .95fr 1fr !important; }
  .mega__cols--v35 .mega__col:last-child{ grid-column: 1 / -1; }
  .mega__brands{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .mega__cols--v35{ grid-template-columns: 1fr !important; gap: 18px !important; }
  .mega__brands{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* v36: ensure hero static */
.homeHero__artImg{animation:none !important;transform:none !important;}

/* v38 home mockup */
:root{--jr-accent:#f0c400;}
.jrHome{padding:18px 0 34px;}
.jrHome__heroCard{position:relative;
  margin:18px auto 18px;
  width:min(1220px, calc(100% - 32px));
  border-radius:26px;
  overflow:hidden;

  /* Background: subtle gold glow + dark scrim + hero image */
  background-image:
    radial-gradient(900px 520px at 14% 18%, rgba(240, 196, 0, 0.10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.55)),
    var(--jr-hero-bg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:65% 55%;

  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
  overflow:hidden;
}


.jrHome__heroGrid{display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap:24px;
  padding:44px 44px;
  min-height:440px;
  position:relative;
}
.jrHome__kicker{letter-spacing:.22em;font-weight:700;color:rgba(255,255,255,0.85);font-size:12px;}
.jrHome__headline{margin:12px 0 12px;line-height:0.95;text-transform:uppercase;}
.jrHome__headlineA{display:block;font-size:clamp(36px,4.4vw,60px);font-weight:900;color:rgba(255,255,255,0.95);}

.jrHome__headlineB{display:block;font-size:clamp(36px,4.4vw,60px);font-weight:900;color:var(--jr-accent);}

.jrHome__sub{margin:14px 0 22px;color:rgba(255,255,255,0.72);font-size:18px;max-width:520px;}
.jrHome__actions{display:flex;gap:14px;flex-wrap:wrap;}
.jrBtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,0.18);text-decoration:none;transition:transform .12s ease,background .12s ease,border-color .12s ease;}
.jrBtn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,0.28);}
.jrBtn--primary{background:var(--jr-accent);color:#121212;border-color:rgba(0,0,0,0.25);}
.jrBtn--ghost{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.92);}
.jrHome__artWrap{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  min-height:440px;
}

.jrHome__artFrame{
  background:transparent;
  border:0;
  box-shadow:none;

  width:min(560px,100%);
  aspect-ratio:16/11;
  border-radius:22px;
  background:radial-gradient(120% 100% at 10% 0%, rgba(255,255,255,0.06), rgba(0,0,0,0.45));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.35), 0 24px 70px rgba(0,0,0,0.55);
  overflow:hidden;
}
.jrHome__artImg{width:100%;height:100%;object-fit:contain;object-position:center right;display:block;}
.jrHome__brandCard{
  width:min(1220px, calc(100% - 32px));
  margin:0 auto;
  border-radius:26px;
  padding:18px 22px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.10);
}

/* v39: exact reference marquee + hero background composition */

/* Announcement marquee (continuous scroll like reference) */
.site-header > .announcement-bar{overflow:hidden;}
.announcement-bar__viewport{
  width:100%;
  overflow:hidden;
  /* soft fade on edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.announcement-bar__track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:0;
  animation: jrMarquee 18s linear infinite;
  will-change: transform;
}
.announcement-bar__content{
  display:flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
  padding: 0 18px;
}
.announcement-bar__content > *{flex:0 0 auto;}
@keyframes jrMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .announcement-bar__track{animation:none;}
}

/* v55: marquee gapless + cart drawer + cart count */

/* Gapless marquee: JS sets --jr-marquee-shift to the width of one loop */
.announcement-bar__track{animation: jrMarqueeVar 22s linear infinite;}
@keyframes jrMarqueeVar{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-1 * var(--jr-marquee-shift, 50%))); }
}

/* Cart button count badge */
.cart-btn{position:relative;}
.cart-btn__count{
  position:absolute;
  top:6px;
  left:auto;
  right:12px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:600 11px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:#111;
  background:var(--jr-accent);
  border:1px solid rgba(0,0,0,.25);
}
.cart-btn__count:empty{display:none;}

/* Cart drawer */
.jr-cart{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index:10010;
  display:none;
}
.jr-cart.is-open{display:block;}
.jr-cart__panel{
  position:absolute;
  top:16px;
  right:16px;
  width:min(420px, calc(100vw - 32px));
  height:calc(100vh - 32px);
  border-radius:22px;
  background:rgba(16,16,16,.92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;

.jr-cart__panel::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--jr-logo-url) center/260px no-repeat;
  opacity:.06;
  pointer-events:none;
}
}
.jr-cart__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.jr-cart__close{
  width:36px;height:36px;border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#fff;
}
.jr-cart__body{padding:14px 16px; overflow:auto; flex:1;}
.jr-cart__loading{opacity:.8;}
.jr-cart__item{display:grid; grid-template-columns:64px 1fr auto; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07);}
.jr-cart__item img{width:64px; height:64px; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.08);} 
.jr-cart__title{font:600 14px/1.2 Inter, system-ui; margin:0 0 6px;}
.jr-cart__meta{opacity:.8; font:500 12px/1.2 Inter, system-ui;}
.jr-cart__qty{display:flex; align-items:center; gap:8px;}
.jr-cart__qty button{width:28px;height:28px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#fff;}
.jr-cart__qty input{width:44px; text-align:center; border-radius:10px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.25); color:#fff; padding:6px 0;}
.jr-cart__price{font:700 13px/1 Inter, system-ui;}
.jr-cart__remove{margin-top:8px; display:inline-block; opacity:.75; font:600 12px/1 Inter, system-ui;}
.jr-cart__foot{padding:14px 16px 16px; border-top:1px solid rgba(255,255,255,.08);} 
.jr-cart__subtotal{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; opacity:.95;}
.jr-cart__checkout, .jr-cart__view{
  display:flex; align-items:center; justify-content:center;
  height:46px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
  font:700 14px/1 Inter, system-ui;
}
.jr-cart__checkout{background:var(--jr-accent); color:#111; border-color:rgba(0,0,0,.25);} 
.jr-cart__view{margin-top:10px; background:rgba(255,255,255,.04); color:#fff;}
.jr-cart__checkout.is-disabled{opacity:.55; pointer-events:none; filter:saturate(.6);}


/* Mega menu heading pill highlight (matches reference screenshot)
   - Headings are accent yellow
   - Subtle pill backdrop to lift off the dark panel
*/
.mega--ref .mega__head{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(240,196,0,.06);
  color:var(--jr-accent);
  letter-spacing:.12em;
}

/* Hero: rebuild to match reference (texture bg + controller photo + left scrim) */
.jrHome__heroCard{
  background-image: none !important;
  background: var(--jr-hero-tex) center/cover no-repeat !important;
}
.jrHome__heroCard::before{
  content:"";
  position:absolute;
  inset:0;
  /* Fade like reference: keep texture visible under text */
  background:
    radial-gradient(900px 520px at 14% 18%, rgba(240,196,0,0.12), rgba(0,0,0,0) 60%),
    linear-gradient(90deg,
      rgba(0,0,0,0.68) 0%,
      rgba(0,0,0,0.56) 38%,
      rgba(0,0,0,0.22) 62%,
      rgba(0,0,0,0.08) 78%,
      rgba(0,0,0,0) 92%
    ),
    linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.40));
  pointer-events:none;
  z-index:2;
}
.jrHome__heroCard::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--jr-hero-controller) no-repeat;
  background-size: 760px auto;
  background-position: right 18px center;
  pointer-events:none;
  z-index:0;
}
.jrHome__heroGrid{
  grid-template-columns: 1fr !important;
  padding:44px 44px !important;
  min-height: 470px !important;
  position:relative;
  z-index:1;
}
@media (max-width: 980px){
  .jrHome__heroCard::after{ background-size: 560px auto; background-position: right 14px center; }
  .jrHome__heroGrid{ min-height: 440px !important; }
}
@media (max-width: 720px){
  .jrHome__heroCard::after{ background-size: 420px auto; background-position: right -40px center; opacity: .95; }
  .jrHome__heroGrid{ padding:34px 22px !important; min-height: 520px !important; }
}
.jrHome__brandLabel{font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:rgba(255,255,255,0.72);margin-bottom:14px;}
.jrHome__brandRow{display:flex;align-items:center;gap:22px;overflow-x:auto;padding-bottom:6px;}
.jrHome__brandRow img{height:34px;width:auto;opacity:.92;filter:drop-shadow(0 8px 18px rgba(0,0,0,0.55));}
@media (max-width:860px){
  .jrHome__heroGrid{grid-template-columns:1fr;padding:28px 22px;}
  .jrHome__artWrap{justify-content:center;}
  .jrHome__brandRow img{height:28px;}
}


/* jrHome hero spacing */
@media (max-width: 900px){
  .jrHome__heroGrid{padding:28px 22px; min-height:360px;}
  .jrHome__copy{padding-right:0; max-width:560px;}
}

.cart-btn__icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;}
.cart-btn__icon svg{width:18px;height:18px;display:block;}
.cart-btn__label{font-weight:700;}

/* Announcement */
.announcement{border-bottom:1px solid var(--border); background:rgba(0,0,0,.75);}
.announcement .marquee__track{color:var(--accent); font-family:Oswald, Inter, sans-serif; letter-spacing:.04em;}

/* Bottom pill */
.jrPill{
  width:min(1220px, calc(100% - 32px));
  margin:16px auto 0;
  border-radius:26px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 60px rgba(0,0,0,0.45);
}
.jrPill__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
}
.jrPill__label{
  font-family: Oswald, Inter, sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  color:rgba(255,255,255,0.7);
  font-size:12px;
  padding-left:6px;
}
.jrPill__tiles{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.jrPill__tile{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  text-decoration:none;
}
.jrPill__tile:hover{border-color:rgba(242,195,0,.35);transform:translateY(-1px);}
.jrPill__num{
  font-family: Oswald, Inter, sans-serif;
  font-weight:700;
  color:rgba(255,255,255,0.85);
  letter-spacing:.06em;
}
@media (max-width:860px){
  .jrPill__inner{flex-direction:column;align-items:flex-start;}
  .jrPill__tiles{justify-content:flex-start;}
}

.jrPill__icon{width:26px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.85);}
.jrPill__icon svg{width:26px;height:18px;display:block;}


/* ===== v-identical: header + announcement + hero match reference ===== */
.header{
  background:#050505;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.header__inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.brand{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);}
.brand img.logo{height:20px;width:auto;display:block;opacity:.95;}
.navToggle{display:none;}

.menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.menu__link{
  display:inline-flex;
  align-items:center;
  padding:10px 8px;
  font-family: Oswald, Inter, sans-serif;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:1.2px;
  font-weight:700;
  color:rgba(255,255,255,0.88);
}
.menu__link:hover{color:#fff;}
.menu__link.is-active{color:#fff;position:relative;}
.menu__link.is-active::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:2px;
  bottom:-8px;
  background:rgba(255,255,255,0.9);
  border-radius:2px;
}

.cart-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.cart-btn:hover{background:rgba(255,255,255,0.06);}
.cart-btn svg{width:18px;height:18px;opacity:.95;}

.announcement-bar{
  background:#050505;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.announcement-bar__inner{
  max-width:1240px;
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;
  color: rgba(240,196,0,0.95);
  font-weight:700;
  font-size:14px;
}
.announcement-bar__inner > *{flex:0 0 auto;}

.announcement-bar__inner .sep{opacity:.8}

/* HERO */
.jrHome{padding:0;}
.jrHome__heroCard{
  width:100%;
  margin:0;
  border-radius:0;
  border:0;
  box-shadow:none;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 42%, rgba(0,0,0,0.22) 70%, rgba(0,0,0,0.10) 100%),
    radial-gradient(900px 520px at 16% 18%, rgba(240, 196, 0, 0.10), rgba(0,0,0,0) 60%),
    var(--jr-hero-bg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}
.jrHome__heroGrid{
  max-width:1240px;
  margin:0 auto;
  padding:64px 18px 54px;
  min-height:520px;
  grid-template-columns: 1.05fr .95fr;
  gap:30px;
}
.jrHome__kicker{opacity:.55;font-size:14px;letter-spacing:.22em;}
.jrHome__headlineA{font-size:clamp(44px,5.0vw,74px);}
.jrHome__headlineB{font-size:clamp(44px,5.0vw,74px);}
.jrHome__sub{font-size:18px;color:rgba(255,255,255,0.78);max-width:560px;margin-top:10px;}
.jrBtn{border-radius:999px;padding:16px 26px;}
.jrBtn--primary{background:rgba(240,196,0,1); color:#121212;}
.jrBtn--ghost{border:1px solid rgba(255,255,255,0.28);background:rgba(0,0,0,0.18);}

.jrHome__artWrap{position:relative;}
.jrHome__heroProduct{
  position:absolute;
  right:-40px;
  bottom:0;
  width:min(860px, 58vw);
  max-height:420px;
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,0.65));
  transform: rotate(-2deg);
}


/* bottom pill placement more like reference */
.jrPill{max-width:1240px;margin:-26px auto 26px;padding:0 18px;}



/* === OVERRIDES: match reference hero + announcement === */
.announcement-bar{overflow:hidden;}
.announcement-bar__inner{
  animation:none !important;
  white-space:nowrap;
  flex-wrap:nowrap;
  justify-content:flex-start;
}
.announcement-bar__inner > *{flex:0 0 auto;}

.jrHome{padding:0;}
.jrHome__heroCard{
  width:100%;
  margin:0;
  border-radius:0;
  border:0;
  box-shadow:none;
  overflow:hidden;
  background-image:
    radial-gradient(900px 520px at 14% 18%, rgba(240, 196, 0, 0.10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
    var(--jr-hero-bg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:65% 55%;
}

.jrHome__heroGrid{
  width:100%;
  max-width:1380px;
  margin:0 auto;
  padding:78px 70px;
  min-height:560px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:56px;
  align-items:center;
}

.jrHome__copy{max-width:640px;}
.jrHome__kicker{letter-spacing:.24em;font-weight:700;color:rgba(255,255,255,0.65);font-size:12px;}
.jrHome__headline{margin:14px 0 14px;line-height:0.92;text-transform:uppercase;}
.jrHome__headlineA{display:block;font-size:clamp(48px,5.3vw,82px);font-weight:900;color:rgba(255,255,255,0.96);}
.jrHome__headlineB{display:block;font-size:clamp(48px,5.3vw,82px);font-weight:900;color:var(--jr-accent);}

.jrHome__sub{margin:16px 0 26px;font-size:18px;max-width:520px;color:rgba(255,255,255,0.82);}

.jrHome__artWrap{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:100%;
}

.jrHome__heroProduct{
  width:min(820px, 60vw);
  max-width:none;
  height:auto;
  display:block;
  transform:translateX(130px) translateY(10px);
  filter:drop-shadow(0 28px 60px rgba(0,0,0,.65));
  pointer-events:none;
  user-select:none;
}

@media (max-width: 990px){
  .jrHome__heroGrid{
    grid-template-columns:1fr;
    padding:56px 22px 34px;
    min-height:unset;
    gap:22px;
  }
  .jrHome__heroProduct{width:min(760px, 92vw); transform:none;}
  .announcement-bar__inner{white-space:normal; flex-wrap:wrap;}
}

/* ===== FINAL OVERRIDES: lock header + announcement to reference PNG ===== */
.site-header{
  background:#050505 !important;
  backdrop-filter:none !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
}

.header-inner{
  max-width:1240px;
  margin:0 auto;
  padding:14px 18px !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}

.brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}
.brand img{
  height:20px !important;
  width:auto;
  display:block;
  opacity:.95;
}

.menu{gap:26px !important;}
.menu-link{
  padding:10px 8px !important;
  font-family: Oswald, Inter, sans-serif;
  text-transform:uppercase;
  font-size:13px !important;
  letter-spacing:1.2px;
  font-weight:700;
  color:rgba(255,255,255,0.88);
  opacity:1 !important;
}
.menu-link:hover{color:#fff !important;}
.menu-link.is-active{color:#fff !important;}
.menu-link.is-active::after{
  bottom:-8px !important;
  background:rgba(255,255,255,0.92) !important;
}

/* ===== FINAL POLISH: logo sizing + announcement bolt + mobile nav tidy ===== */
/* Logo was too small (make it visible but not huge) */
.brand{width:50px !important; height:50px !important;}
.brand img{height:26px !important; opacity:1 !important;}

@media (max-width: 920px){
  .brand{width:46px !important; height:46px !important;}
  .brand img{height:24px !important;}
}

/* Announcement bar: restore bolt icon + clean typography */
.announcement-bar__content{align-items:center !important;}
.announcement-bar__content .bolt{display:inline-flex; align-items:center; justify-content:center;}
.announcement-bar__content .bolt img{width:14px; height:14px; display:block; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));}

/* Mobile nav: clearer structure */
.mnav__links .mnav__primary{
  border-color: rgba(242,195,0,.26) !important;
  background: rgba(242,195,0,.10) !important;
  color: rgba(255,255,255,.92) !important;
}

.header-actions{gap:14px !important;}
.cart-btn{
  padding:12px 18px !important;
  gap:10px !important;
  border-radius:999px;
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.92);
}
.cart-btn:hover{background:rgba(255,255,255,0.06) !important; border-color:rgba(255,255,255,0.16) !important; color:#fff !important;}
.cart-btn__icon svg{width:18px;height:18px;display:block;}

.announcement-bar{
  background:#050505;
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.announcement-bar__inner{
  max-width:1240px;
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;
  color: rgba(240,196,0,0.95);
  font-weight:700;
  font-size:14px;
}
.announcement-bar__inner > *{flex:0 0 auto;}
.announcement-bar__inner .sep{opacity:.85}

/* ===== FIXES (Feb 2026): hero + pill placement + announcement visibility ===== */
/* Ensure announcement is always visible (it was previously inside the mega menu) */
.site-header > .announcement-bar{position:relative; z-index:50;}

/* Hero background should be the controller photo on the right, with a left-to-right dark fade behind the copy */
.jrHome{padding:0;}
.jrHome__heroCard{
  position:relative;
  border-radius:0 !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:hidden;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.72) 42%, rgba(0,0,0,0.28) 72%, rgba(0,0,0,0.10) 100%),
    radial-gradient(900px 520px at 16% 18%, rgba(240,196,0,0.10), rgba(0,0,0,0) 60%),
    var(--jr-hero-bg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position: right center;
}

/* Remove the right-column “boxed image” layout – the image is in the background now */
.jrHome__heroGrid{
  max-width:1240px;
  margin:0 auto;
  padding:64px 18px 74px;
  min-height:520px;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}

/* Keep the copy sitting comfortably on the left like the reference */
.jrHome__copy{max-width:680px; padding-right:0;}

/* Pill should sit directly under the hero and overlap it (not drift down to the footer) */
.jrPill{
  position:relative;
  z-index:10;
  width:min(1220px, calc(100% - 32px));
  margin:-34px auto 26px;
}

@media (max-width: 900px){
  .jrHome__heroGrid{padding:42px 18px 64px; min-height:420px;}
  .jrHome__headlineA,.jrHome__headlineB{font-size:clamp(40px,8vw,64px);}
}

/* ===== v50: HARD LOCK to reference PNG (hero / marquee / mega menu) ===== */

/* Ensure homepage block reserves space so the pill never overlaps footer */
.jrHome{padding:18px 0 70px !important;}

/* Hero card matches reference: rounded, centered, full-bleed background behind text */
.jrHome__heroCard{
  width:min(1220px, calc(100% - 32px)) !important;
  margin:18px auto 0 !important;
  border-radius:26px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  box-shadow:0 18px 60px rgba(0,0,0,0.55) !important;
  background: var(--jr-hero-tex) center/cover no-repeat !important;
}

/* Fade/scrim must NOT kill the texture on the left – keep it visible like the reference */
.jrHome__heroCard::before{
  background:
    radial-gradient(900px 520px at 14% 18%, rgba(240, 196, 0, 0.12), rgba(0,0,0,0) 62%),
    linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.52) 42%, rgba(0,0,0,0.20) 66%, rgba(0,0,0,0.06) 78%, rgba(0,0,0,0) 92%),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55))
    !important;
}

/* Controller photo is a layer ON TOP of texture and must extend behind the copy */
.jrHome__heroCard::after{
  background: var(--jr-hero-controller) no-repeat !important;
  background-size: 760px auto !important;
  background-position: right 26px center !important;
  opacity: 1 !important;
}

/* Copy spacing like reference */
.jrHome__heroGrid{
  padding:72px 70px 78px !important;
  min-height: 560px !important;
  grid-template-columns: 1fr !important;
}

/* Bottom pill overlaps hero but stays ABOVE footer */
.jrPill{
  width:min(1220px, calc(100% - 32px)) !important;
  margin:-44px auto 0 !important;
  position:relative !important;
  z-index: 5 !important;
}

/* Announcement bar: brand colors + smooth marquee */
.announcement-bar{
  background: rgba(0,0,0,0.70) !important;
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
}
.announcement-bar__viewport{padding:8px 0 !important;}
.announcement-bar__content{
  font-family: Oswald, Inter, sans-serif !important;
  font-weight:700 !important;
  letter-spacing: .04em !important;
  color: rgba(240,196,0,0.95) !important;
}
.announcement-bar__content .sep{color: rgba(240,196,0,0.95) !important; opacity: .95 !important;}
.announcement-bar__track{animation-duration: 22s !important;}

/* Fix squished PARTS mega menu: correct width + 4 columns + spacing */
.mega-menu--parts{
  width:min(1240px, calc(100vw - 52px)) !important;
  left:50% !important;
  transform: translateX(-50%) !important;
  right:auto !important;
  top: calc(100% + 12px) !important;
  padding:26px 26px 22px !important;
  border-radius:26px !important;
}
.mega-menu--parts .megaGrid{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap:44px !important;
  align-items:start !important;
}
.mega-menu--parts .megaBlock{min-width:0 !important;}
.mega-menu--parts .megaHead{margin-bottom:14px !important;}
.mega-menu--parts .megaLink{padding:8px 0 !important;}
.mega-menu--parts .megaBrands{grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap:12px !important;}
.mega-menu--parts .megaCta{margin-top:18px !important; justify-content:flex-end !important;}

@media (max-width: 980px){
  .jrHome__heroGrid{padding:56px 38px 70px !important; min-height:520px !important;}
  .jrHome__heroCard::after{background-size: 600px auto !important; background-position: right 12px center !important;}
  .mega-menu--parts .megaGrid{grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:28px !important;}
  .mega-menu--parts .megaBlock:last-child{grid-column: 1 / -1 !important;}
}
@media (max-width: 720px){
  .jrHome__heroGrid{padding:42px 22px 76px !important; min-height:560px !important;}
  .jrHome__heroCard::after{background-size: 430px auto !important; background-position: right -40px center !important; opacity:.95 !important;}
  .mega-menu--parts{width:calc(100vw - 24px) !important; padding:18px 16px !important;}
  .mega-menu--parts .megaGrid{grid-template-columns: 1fr !important; gap:18px !important;}
  .mega-menu--parts .megaBrands{grid-template-columns: repeat(3, minmax(0,1fr)) !important;}
}


/* v40: Parts mega menu sizing (match reference wide panel) */
.mega-menu--parts{
  min-width: 1120px;
  max-width: 1240px;
  left: 50%;
  transform: translateX(-50%);
}
.mega-menu--parts .megaGrid{
  grid-template-columns: 280px 280px 280px 1fr;
  gap: 44px;
}
.mega-menu--parts .megaHead{ white-space: normal; }
@media (max-width: 980px){
  .mega-menu--parts{ min-width: 94vw; max-width: 94vw; left: 50%; transform: translateX(-50%); }
  .mega-menu--parts .megaGrid{ grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* v41: final hero + mega menu corrections (reference match) */
.jrHome__heroCard{ position:relative !important; }
.jrHome__heroCard::after{ z-index:0 !important; }
.jrHome__heroCard::before{ z-index:1 !important; pointer-events:none !important; content:"" !important; position:absolute !important; inset:0 !important;
  background:
    radial-gradient(900px 520px at 14% 18%, rgba(240,196,0,0.12), rgba(0,0,0,0) 60%),
    linear-gradient(90deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.56) 38%, rgba(0,0,0,0.22) 62%, rgba(0,0,0,0.08) 78%, rgba(0,0,0,0) 92%),
    linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.40))
    !important;
}
.jrHome__heroGrid{ position:relative !important; z-index:2 !important; }

/* Parts mega menu: wide 4-column grid like reference */
.mega-menu--parts{ min-width: 1120px !important; max-width: 1240px !important; left:50% !important; transform: translateX(-50%) !important; }
.mega-menu--parts .megaGrid{ grid-template-columns: 280px 280px 280px 1fr !important; gap: 44px !important; }
.mega-menu--parts .megaBrands{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
.mega-menu--parts .megaBrand img{ height: 26px !important; }

/* =========================================================
   REFERENCE LOCK v42 (do not remove)
   Fixes: hero background behind text + Parts mega menu sizing
   ========================================================= */

/* HERO: ensure texture + controller sit behind ALL copy (no solid block) */
.template-index .jrHome__heroCard{
  background-image: var(--jr-hero-tex) !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
}
.template-index .jrHome__heroCard::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background-image: var(--jr-hero-controller) !important;
  background-repeat: no-repeat !important;
  background-size: 820px auto !important;
  background-position: right 14px center !important;
  opacity: 1 !important;
  z-index: 0 !important;
  pointer-events:none !important;
}
.template-index .jrHome__heroCard::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  /* Match reference: dark left fade BUT keep texture visible under text */
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.80) 0%,
      rgba(0,0,0,.58) 34%,
      rgba(0,0,0,.30) 54%,
      rgba(0,0,0,.12) 66%,
      rgba(0,0,0,0) 78%),
    radial-gradient(1200px 700px at 35% 18%, rgba(0,0,0,.18), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.38));
  z-index: 1 !important;
  pointer-events:none !important;
}
.template-index .jrHome__heroGrid{ position:relative !important; z-index:2 !important; }
.template-index .jrHome__heroGrid{
  min-height: 560px !important;
  padding: 64px 62px 92px !important;
}
@media (max-width: 980px){
  .template-index .jrHome__heroCard::after{ background-size: 600px auto !important; background-position: right 10px center !important; }
  .template-index .jrHome__heroGrid{ min-height: 520px !important; padding: 52px 34px 88px !important; }
}
@media (max-width: 720px){
  .template-index .jrHome__heroCard::after{ background-size: 460px auto !important; background-position: right -30px center !important; }
  .template-index .jrHome__heroGrid{ min-height: 560px !important; padding: 44px 20px 96px !important; }
}

/* PARTS mega menu: the LIVE header uses .mega.mega--ref in layout/theme.liquid.
   Force it to the correct reference size and prevent "squished" columns. */
.site-header .has-mega{ position:relative !important; }
.site-header .has-mega > .mega.mega--ref{
  /* Dropdown positioning: keep fixed so it sits under the header,
     but align to the PARTS trigger (not centered like a modal). */
  position:fixed !important;
  top: var(--jr-mega-top, 98px) !important;
  left: var(--jr-mega-left, 24px) !important;
  transform: none !important;
  width: min(760px, calc(100vw - 32px)) !important;
  padding: 0 !important;
  display: none !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  background: none !important;
  z-index: 9999 !important;
}
.site-header .has-mega:hover > .mega.mega--ref,
.site-header .has-mega:focus-within > .mega.mega--ref,
.site-header .has-mega.is-open > .mega.mega--ref{ display:block !important; }

/* Hover bridge (JS positions this element dynamically between trigger and panel) */
.jr-mega-bridge{
  display:none;
  pointer-events:auto;
  background:transparent;
}

.site-header .mega--ref .mega__title{
  position:absolute !important;
  left: 24px !important;
  top: 18px !important;
  z-index: 2 !important;
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.92) !important;
}

.site-header .mega--ref .mega__titleLogo{
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  padding: 6px !important;
  object-fit: contain !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.55) !important;
}
.site-header .mega--ref .mega__panel{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding: 58px 26px 18px !important; /* space for title */
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(10,10,10,.94) !important;
  box-shadow: 0 40px 140px rgba(0,0,0,.80) !important;
  backdrop-filter: blur(12px) !important;
}
.site-header .mega--ref .mega__cols{
  display:grid !important;
  grid-template-columns: 1.05fr .95fr 1fr !important;
  gap: 28px !important;
  align-items: start !important;
}
.site-header .mega--ref .mega__brands{ grid-template-columns: repeat(5, minmax(0,1fr)) !important; }

/* Browse All Parts centered at the bottom, like the reference */
.site-header .mega--ref .mega__bottom--center{
  margin-top: 18px !important;
  display:flex !important;
  justify-content:center !important;
}
.site-header .mega--ref .mega__cta{
  width: min(360px, 100%) !important;
  text-align:center !important;
}

@media (max-width: 980px){
  .site-header .has-mega > .mega.mega--ref{ width: min(720px, calc(100vw - 24px)) !important; }
  .site-header .mega--ref .mega__cols{ grid-template-columns: 1fr 1fr !important; gap: 22px !important; }
  .site-header .mega--ref .mega__brands{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (max-width: 720px){
  .site-header .mega--ref .mega__cols{ grid-template-columns: 1fr !important; gap: 18px !important; }
  .site-header .mega--ref .mega__brands{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* FOOTER: bring brand logos strip back */
.footer-logos{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;
  flex-wrap: wrap;
  opacity: .9;
}
.footer-logos img{
  height: 22px;
  width:auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.55));
}

/* INDEX: bring footer closer (reduce extra empty space under hero) */
.template-index .jrHome{ padding: 0 0 12px !important; }
.template-index .jrHome__heroCard{ margin-bottom: 0 !important; }
@media (max-width: 820px){
  .footer-logos{ display:none; }
}

/* ==============================
   JR Finishing: header extras
   ============================== */

/* Announcement bolt should be clearly visible in theme gold */
.announcement-bar__content .bolt img{
  width: 14px;
  height: 14px;
  display: block;
  margin: 0 6px;
  filter: brightness(0) saturate(100%) invert(78%) sepia(58%) saturate(625%) hue-rotate(1deg) brightness(100%) contrast(98%);
}

/* Search pill beside cart */
.header-actions{
  display:flex;
  align-items:center;
  gap: 12px;
}
.header-search{
  position: relative;
  display:flex;
  align-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  border-radius: 999px;
  padding: 8px 10px;
  min-width: 220px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}

/* Scrollable hint text inside the search pill (before focus/click) */
.header-search__marquee{
  position:absolute;
  left: 14px;
  right: 46px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events:none;
  overflow:hidden;
  white-space: nowrap;
  opacity: .78;
}
.header-search__marquee span{
  display:inline-block;
  padding-left: 100%;
  animation: jrSearchMarquee 8.5s linear infinite;
  font-size: 13px;
  color: rgba(255,255,255,.58);
}
@keyframes jrSearchMarquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}
.header-search.is-active .header-search__marquee{ opacity: 0; }
.header-search__input{
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: rgba(255,255,255,.9);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .02em;
  position: relative;
  z-index: 2;
}
.header-search__input::placeholder{ color: rgba(255,255,255,.45); }
.header-search__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 0;
  background: transparent;
  color: rgba(240,196,0,.95);
  padding: 0 2px 0 8px;
  cursor: pointer;
}
.header-search__btn svg{ width: 18px; height: 18px; }
@media (max-width: 820px){
  .header-search{ display:none; }
}

/* Social icons beside ACCESSORIES */
.has-social{ display:flex; align-items:center; gap: 10px; }
.has-social .menu-link{ margin-right: 4px; }

/* Social icons in header actions (next to search) */
.header-social{ display:flex; align-items:center; gap: 10px; margin-right: 12px; }
@media (max-width: 820px){
  .header-social{ display:none; }
}
.social-link{
  width: 32px;
  height: 32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(240,196,0,.95);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.social-link svg{ width: 16px; height: 16px; }
.social-link:hover{
  transform: translateY(-1px);
  background: rgba(240,196,0,.08);
  border-color: rgba(240,196,0,.35);
}

/* Mega menu hover buffer so it doesn't "drop" while moving cursor */
.mega.mega--ref::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-18px;
  height:18px;
}

/* Loader (on-brand)
   Black screen + big spinning logo, subtle glow, and a clean progress bar.
   When load completes: lightning flash + quick logo spin, then fade out.
*/
.jr-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}

/* Announcement bar – keep it on-brand (white text, accent separators + bolt) */
.announcement-bar{
  color: rgba(236,236,236,.92) !important;
}
.announcement-bar__content span{ color: inherit !important; }
.announcement-bar__content .sep{ color: var(--jr-accent) !important; opacity: .95 !important; }
.announcement-bar__content .bolt img{
  width: 18px !important;
  height: 18px !important;
  /* Use the original bolt artwork (no forced gold tint) */
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)) !important;
}

.jr-loader__stage{
  position: relative;
  width: min(680px, 94vw);
  padding: 18px 18px 22px;
  text-align:center;
}

/* subtle in-theme texture + glow (kept very restrained) */
.jr-loader__fx{
  position:absolute;
  inset:-40px;
  pointer-events:none;
  background:
    radial-gradient(45% 40% at 50% 40%, rgba(240,196,0,.16) 0%, rgba(240,196,0,0) 58%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 10px, rgba(255,255,255,0) 10px 20px);
  opacity: .55;
  filter: blur(.2px);
}

.jr-loader__logo{
  position: relative;
  display:block;
  margin: 0 auto;
  height: 140px;
  width: auto;
  opacity: .98;
  transform-origin: 50% 50%;
  animation: jrLogoSpin 2.2s linear infinite;
  filter:
    drop-shadow(0 26px 70px rgba(0,0,0,.9))
    drop-shadow(0 0 22px rgba(240,196,0,.16));
}

.jr-loader__stage::before{
  content:"";
  position:absolute;
  left:50%;
  top: 64px;
  width: 320px;
  height: 320px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(240,196,0,.12) 0%, rgba(240,196,0,0) 62%);
  filter: blur(2px);
  opacity: .9;
  pointer-events:none;
}

@media (max-width: 560px){
  .jr-loader__logo{ height: 112px; }
  .jr-loader__stage::before{ width: 250px; height: 250px; top: 58px; }
}

@keyframes jrLogoSpin{
  0%{ transform: rotate(0deg) scale(1); }
  100%{ transform: rotate(360deg) scale(1); }
}

.jr-loader__bar{
  position: relative;
  width: min(460px, 86vw);
  height: 12px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0,0,0,.55);
}

.jr-loader__barFill{
  position:absolute;
  inset: 0;
  transform: translateX(-60%);
  background: linear-gradient(90deg,
    rgba(240,196,0,0) 0%,
    rgba(240,196,0,.22) 20%,
    rgba(240,196,0,.95) 45%,
    rgba(240,196,0,.24) 70%,
    rgba(240,196,0,0) 100%);
  filter: drop-shadow(0 0 14px rgba(240,196,0,.25));
  animation: jrBarSweep 1.0s ease-in-out infinite;
}

@keyframes jrBarSweep{
  0%{ transform: translateX(-65%); }
  100%{ transform: translateX(65%); }
}

/* Lightning FX (hidden until complete) */
.jr-loader__zap{
  position:absolute;
  left:50%;
  top: 50%;
  width: 340px;
  transform: translate(-50%,-50%) rotate(-12deg);
  opacity: 0;
  pointer-events:none;
}
.jr-loader__zap img{
  width:100%;
  height:auto;
  filter: invert(78%) sepia(97%) saturate(630%) hue-rotate(5deg) brightness(1.06) contrast(1.05)
          drop-shadow(0 18px 55px rgba(240,196,0,.28));
}

/* Completion sequence */
.jr-loader.is-complete .jr-loader__logo{
  animation: jrLogoFinish .85s cubic-bezier(.2,.9,.2,1) 1;
}
.jr-loader.is-complete .jr-loader__barFill{ animation: none; opacity: .95; }
.jr-loader.is-complete .jr-loader__zap{ animation: jrZap .75s ease-out 1; }
.jr-loader.is-complete .jr-loader__stage::after{
  content:"";
  position:absolute;
  inset:-60px;
  background: linear-gradient(115deg, rgba(240,196,0,0) 0%, rgba(240,196,0,.30) 38%, rgba(240,196,0,0) 70%);
  transform: translateX(-60%) skewX(-12deg);
  animation: jrLoaderFlash .72s ease-out 1;
  pointer-events:none;
}

@keyframes jrLogoFinish{
  0%{ transform: rotate(0deg) scale(1); }
  65%{ transform: rotate(290deg) scale(1.08); }
  100%{ transform: rotate(360deg) scale(1); }
}

@keyframes jrZap{
  0%{ opacity: 0; transform: translate(-50%,-50%) rotate(-12deg) scale(.92); }
  15%{ opacity: .95; }
  55%{ opacity: .9; }
  100%{ opacity: 0; transform: translate(-50%,-56%) rotate(-12deg) scale(1.04); }
}

@keyframes jrLoaderFlash{
  0%{ transform: translateX(-60%) skewX(-12deg); opacity: 0; }
  15%{ opacity: 1; }
  100%{ transform: translateX(70%) skewX(-12deg); opacity: 0; }
}

.jr-loader.is-done{ opacity: 0; transition: opacity .5s ease; }

@media (prefers-reduced-motion: reduce){
  .jr-loader__logo, .jr-loader__barFill{ animation: none !important; }
}
/* Fallback brand text in mega menu */
.mega__brandText{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;padding:10px 12px;font:600 12px/1.1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);}


/* ===== HOTFIX: desktop header should NEVER stack vertically ===== */
@media (min-width: 921px){
  .site-header .header-inner{ flex-wrap: nowrap !important; }
  .site-header .nav{ display:block !important; }
  .site-header .menu{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; }
  .site-header .menu > li{ display:block !important; }
  /* Never show the mobile drawer on desktop (even if it somehow has .is-open) */
  .mnav{ display:none !important; }
  .hamburger{ display:none !important; }
}

/* Guardrail: keep primary nav horizontal unless we are explicitly in mobile breakpoint */
@media (min-width: 1100px){
  .site-header .menu{ gap: 26px !important; }
}