/* ============================================================
   Header — adaptive "difference" blend (original design language)
   ------------------------------------------------------------
   mix-blend-mode lives on header.bar itself. header.bar is
   position:fixed, so it forms its own stacking context; the blend
   therefore composites the header against the PAGE behind it,
   giving the logo + nav their automatic light/dark adaptation.
   The white logo & white links invert against whatever section
   scrolls underneath — no JS theme switching required.

   The year-search panel (#year-menu) is intentionally NOT a child
   of this header, so it is excluded from this blend group. See its
   isolated styling below.
   ============================================================ */
header.bar {
  position:fixed; top:20px; left:0; right:0; height:var(--header-h); z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px;
  mix-blend-mode:difference;          /* adaptive logo + nav */
}
header.bar .logo-slot { width:230px; height:100%; position:relative; }
.logo-home { position:absolute; inset:0; z-index:5; cursor:pointer; }
header.bar .links { display:flex; gap:28px; align-items:center; font-size:14px; font-weight:500; letter-spacing:0.02em; }
header.bar .links a { color:var(--text); text-decoration:none; opacity:0.92; transition:opacity .2s; }
header.bar .links a:hover { opacity:1; }
.nav-dropdown-btn { transition:opacity .25s; }

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; padding:0; background:none; border:none; cursor:pointer; z-index:61; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--text); }

/* Mobile slide-in nav panel (sits outside the header blend layer) */
.mobile-nav { position:fixed; top:0; right:0; width:min(78vw,320px); height:100vh; z-index:70;
  background:rgba(15,15,15,0.55); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-left:1px solid rgba(255,255,255,0.12);
  padding:96px 32px 40px; display:flex; flex-direction:column; gap:6px;
  transform:translateX(100%); transition:transform .3s ease; }
.mobile-nav.open { transform:translateX(0); }
.mobile-nav a { color:#fff; text-decoration:none; font-size:20px; font-weight:500; letter-spacing:0.01em;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.12); }

/* "Search by car" accordion toggle — matches the mobile nav links */
.mobile-nav .mn-acc-toggle {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  font-family:inherit; color:#fff; font-size:20px; font-weight:500; letter-spacing:0.01em;
  padding:14px 0; border:none; border-bottom:1px solid rgba(255,255,255,0.12);
  background:none; cursor:pointer; text-align:left;
}
.mn-acc-caret { font-size:24px; font-weight:300; line-height:1; transition:transform .25s ease; }
.mn-acc-toggle[aria-expanded="true"] .mn-acc-caret { transform:rotate(45deg); }

/* Collapsible panel holding the year + body selects */
.mn-car-search {
  max-height:0; overflow:hidden; opacity:0;
  border-bottom:1px solid rgba(255,255,255,0.12);
  transition:max-height .3s ease, opacity .25s ease, padding .3s ease;
}
.mn-car-search.open { max-height:420px; opacity:1; padding:18px 0 20px; }
.mn-car-search .yd-go { width:100%; justify-content:center; margin-top:10px; }
.mobile-nav-close { position:absolute; top:24px; right:26px; width:40px; height:40px; padding:0;
  background:none; border:none; color:#fff; font-size:34px; line-height:1; cursor:pointer; }
.mobile-nav-overlay { position:fixed; inset:0; z-index:65; background:rgba(0,0,0,0.35);
  opacity:0; visibility:hidden; transition:opacity .3s; }
.mobile-nav-overlay.open { opacity:1; visibility:visible; }

/* while the menu is open, hide the hamburger so only the panel's × shows */
body.nav-open .nav-toggle { display:none !important; }

@media(max-width:760px){
  header.bar .links { display:none; }
  header.bar { padding:0 22px; }
  .nav-toggle { display:flex; }
}

/* Dropdown trigger — stays inside the blended header (adapts like the nav) */
.nav-dropdown { position:relative; outline:none; }
.nav-dropdown-btn { cursor:default; font-family:inherit;
  font-size:14px; font-weight:500; letter-spacing:0.02em; color:var(--text);
  opacity:0.92; }
.nav-dropdown:hover .nav-dropdown-btn,
.nav-dropdown:focus-within .nav-dropdown-btn { opacity:1; }

/* ============================================================
   Year-search panel — isolated floating layer (NO blend)
   ------------------------------------------------------------
   Rendered at body level, above the header, in its own stacking
   context (isolation:isolate). Because it is not inside the
   blended header subtree, no difference math is ever applied to
   it: its dark frosted-glass background sits above the page.
   Visibility is driven by JS (see initYearMenu) since it no
   longer shares a DOM parent with its trigger.
   ============================================================ */
#year-menu {
  position:fixed; top:0; right:40px; z-index:300;
  isolation:isolate;                  /* own stacking context — excluded from header blend */
  min-width:248px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events:none;
}
#year-menu.open {
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
#year-menu .yd-inner {
  /* dark frosted glass — more translucent */
  background:rgba(12,12,14,0.62);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:8px; padding:22px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.40);
}
/* Solid (more translucent) fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  #year-menu .yd-inner { background:rgba(11,11,13,0.92); }
}
.yd-label { font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(255,255,255,0.55); display:block; margin-bottom:10px; }
.yd-select { font-family:var(--mono); font-size:13px; padding:10px 14px; width:100%;
  background:rgba(255,255,255,0.04); color:var(--text); border:1px solid rgba(255,255,255,0.16);
  border-radius:4px; cursor:pointer; margin-bottom:12px; }
.yd-select:focus { outline:none; border-color:rgba(255,255,255,0.45); }
.yd-go { width:100%; justify-content:center; font-size:11px; padding:11px; margin-top:4px; }

/* ============================================================
   SEARCH BY GEN — desktop flyout panel + mobile accordion
   ============================================================ */
.nav-dropdown-plus { font-weight:300; opacity:0.7; margin-left:1px; }

/* Desktop floating panel (body-level, isolated from header blend) */
.gen-menu {
  position:fixed; top:0; left:0; z-index:300; isolation:isolate;
  min-width:248px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events:none;
}
.gen-menu.open { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.gd-inner {
  background:rgba(12,12,14,0.62);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:8px; padding:8px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.40);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .gd-inner { background:rgba(11,11,13,0.92); }
}

/* "All Products" row + divider between it and generation list */
.gen-all-products .gen-name { opacity:0.65; }
.gen-all-products:hover .gen-name { opacity:1; }
.gen-divider { height:1px; background:rgba(255,255,255,0.08); margin:4px 8px; }

/* generation rows — each links straight to its filtered collection */
.gen-item { position:relative; }
.gen-row {
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; cursor:pointer; font-family:inherit; text-decoration:none;
  color:#fff; font-size:14px; font-weight:500; text-align:left;
  padding:11px 12px; border-radius:5px;
}
.gen-row:hover { background:rgba(255,255,255,0.07); }
.gen-name  { flex:0 0 auto; }
.gen-years { font-family:var(--mono); font-size:11px; color:rgba(255,255,255,0.5); margin-left:auto; }

/* ---- Mobile: lives in the hamburger; single-level accordion ---- */
@media(max-width:760px){
  .gen-menu { display:none; }                 /* desktop panel never shows on mobile */

  .mn-gen {
    max-height:0; overflow:hidden; opacity:0;
    border-bottom:1px solid rgba(255,255,255,0.12);
    transition:max-height .35s ease, opacity .25s ease;
  }
  .mn-gen.open { max-height:1400px; opacity:1; }

  .mn-gen .gen-item { border-bottom:1px solid rgba(255,255,255,0.08); }
  .mn-gen .gen-item:last-child { border-bottom:none; }
  .mn-gen .gen-row { font-size:16px; padding:14px 6px; border-radius:0; }
  .mn-gen .gen-row:hover { background:none; }
  .mn-gen .mn-all-products { font-size:16px; padding:14px 6px; border-bottom:1px solid rgba(255,255,255,0.08); }
  .mn-gen .gen-divider { display:none; }
}

/* Crisp logo */
#crisp-logo { position:absolute; inset:0; display:flex; align-items:center; opacity:0; }

/* Views */
.view { display:none; }
.view.active { display:block; }

/* Block / inner */
section.block { background:var(--bg); padding:120px 40px; border-top:1px solid var(--line); position:relative; }
section.block .inner { max-width:1100px; margin:0 auto; }
section.block h2 { font-family:var(--display); font-weight:500; font-size:clamp(26px,4vw,44px); letter-spacing:-0.02em; }
section.block p { margin-top:22px; color:var(--muted); max-width:54ch; line-height:1.8; font-size:14px; }
section.block.pagetop { padding-top:calc(var(--header-h) + 72px); }
section.block.soft { border-top:none; }

/* Typography */
/* Sentence case for headings — all lowercase, first letter capitalized */
.hero-copy h1, section.block h2, h2.bighead, .fw-h2, .feat-title,
.pstep h3, .light-zone .pstep h3, .cart-h h3 { text-transform:lowercase; }
.hero-copy h1::first-letter, section.block h2::first-letter, h2.bighead::first-letter,
.fw-h2::first-letter, .feat-title::first-letter, .pstep h3::first-letter,
.light-zone .pstep h3::first-letter, .cart-h h3::first-letter { text-transform:uppercase; }

.kicker    { font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
h2.bighead { font-family:var(--display); font-weight:500; font-size:clamp(30px,5vw,60px); letter-spacing:-0.02em; }
.lead      { margin-top:18px; font-size:15px; color:var(--muted); line-height:1.8; max-width:52ch; }

/* Buttons */
.btn { font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  padding:13px 26px; border-radius:3px; cursor:pointer; text-decoration:none;
  transition:all .18s; border:1px solid var(--text); display:inline-flex; align-items:center; }
.btn-solid { background:var(--text); color:var(--bg); }
.btn-solid:hover { background:transparent; color:var(--text); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--text); }
#crisp-logo svg {
  display: block;
  width: auto;
  height: 56px;
}