:root {
  --ink:#080a09;
  --panel:#101311;
  --panel-soft:#161a17;
  --paper:#f5f6f1;
  --muted:#aeb5ad;
  --acid:#a6ff00;
  --line:rgba(255,255,255,.14);
  --display:'Bebas Neue',Impact,sans-serif;
  --body:'Montserrat',Arial,sans-serif;
  color-scheme:dark;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--ink); color:var(--paper); font-family:var(--body); margin:0; overflow-x:hidden; }
body,button { font-family:var(--body); }
a { color:inherit; }
img { max-width:100%; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--acid); outline-offset:4px; }

.shell { margin-inline:auto; max-width:1240px; padding-inline:clamp(1.25rem,4vw,3rem); width:100%; }
.section { padding-block:clamp(4.5rem,9vw,8rem); }
.visually-hidden { clip:rect(0 0 0 0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }
.skip-link { background:var(--acid); color:var(--ink); font-weight:800; left:1rem; padding:.8rem 1rem; position:fixed; top:-5rem; z-index:100; }
.skip-link:focus { top:1rem; }

.site-header { background:rgba(8,10,9,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.header-inner { align-items:center; display:flex; min-height:76px; }
.brand { display:inline-flex; width:clamp(8rem,13vw,10.5rem); }
.brand img { display:block; height:auto; width:100%; }
.header-inner nav { display:flex; gap:clamp(1rem,2.5vw,2.2rem); margin-left:auto; }
.header-inner nav a,.cart-link { align-items:center; display:inline-flex; font-size:.72rem; font-weight:700; letter-spacing:.1em; min-height:44px; text-decoration:none; text-transform:uppercase; }
.header-inner nav a:hover,.cart-link:hover { color:var(--acid); }
.cart-link { gap:.5rem; margin-left:clamp(1rem,3vw,2.5rem); }
.cart-link span { align-items:center; background:var(--acid); border-radius:999px; color:var(--ink); display:inline-flex; font-size:.66rem; height:1.5rem; justify-content:center; min-width:1.5rem; padding:.2rem; }

.hero { background:linear-gradient(90deg,rgba(5,7,6,.98) 0%,rgba(5,7,6,.84) 46%,rgba(5,7,6,.42) 100%),url('assets/crispaf/backgrounds/crispaf-midnight-garage-no-car.png') center/cover; border-bottom:1px solid rgba(166,255,0,.22); min-height:680px; }
.hero-layout { align-items:center; display:grid; gap:clamp(2rem,6vw,6rem); grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); min-height:680px; padding-block:clamp(4rem,8vw,7rem); }
.eyebrow { color:var(--acid); font-size:.7rem; font-weight:800; letter-spacing:.2em; margin:0 0 1rem; text-transform:uppercase; }
h1,h2 { font-family:var(--display); font-weight:400; letter-spacing:.02em; margin:0; text-transform:uppercase; }
h1 { font-size:clamp(5rem,10vw,9rem); line-height:.78; }
h1 em,h2 em { color:var(--acid); font-style:normal; }
.hero-tagline { color:var(--paper); font-family:var(--display); font-size:clamp(1.75rem,3vw,2.7rem); letter-spacing:.08em; margin:1.4rem 0 .5rem; }
.hero-lede { color:#d5d9d3; font-size:clamp(.95rem,1.4vw,1.08rem); line-height:1.75; margin:0 0 2rem; max-width:34rem; }
.hero-art { margin:0; }
.hero-art img { display:block; filter:drop-shadow(0 2rem 1.5rem rgba(0,0,0,.68)); width:100%; }
.button { align-items:center; border:1px solid var(--acid); display:inline-flex; font-size:.76rem; font-weight:800; gap:1rem; justify-content:center; letter-spacing:.12em; min-height:52px; padding:.85rem 1.35rem; text-decoration:none; text-transform:uppercase; }
.button-primary { background:var(--acid); color:var(--ink); }
.button-primary:hover { background:var(--paper); border-color:var(--paper); }
.button-outline:hover { background:var(--acid); color:var(--ink); }

.shop-lineup { background:linear-gradient(180deg,#111411,#080a09); }
.section-heading { align-items:end; display:flex; gap:2rem; justify-content:space-between; margin-bottom:2.2rem; }
h2 { font-size:clamp(3.2rem,6vw,5.6rem); line-height:.88; }
.carousel-controls { display:flex; gap:.6rem; }
.carousel-controls button { background:transparent; border:1px solid var(--line); color:var(--paper); cursor:pointer; font-size:1.3rem; height:48px; width:48px; }
.carousel-controls button:hover { background:var(--acid); border-color:var(--acid); color:var(--ink); }
.product-track { display:grid; gap:1rem; grid-auto-columns:calc((100% - 3rem)/4); grid-auto-flow:column; overflow-x:auto; overscroll-behavior-inline:contain; padding:.2rem .2rem 1.3rem; scroll-snap-type:inline mandatory; scrollbar-color:var(--acid) var(--panel); scrollbar-width:thin; }
.product-card { background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; min-width:0; scroll-snap-align:start; }
.product-image { align-items:center; background:radial-gradient(circle at 50% 45%,#222821,#080a09 72%); display:flex; height:clamp(21rem,31vw,28rem); justify-content:center; overflow:hidden; padding:.6rem; }
.product-image img { display:block; height:100%; object-fit:contain; transition:transform .2s ease; width:100%; }
.product-image--bottle img { height:84%; max-width:none; width:auto; }
.product-image:hover img { transform:scale(1.02); }
.product-copy { display:flex; flex:1; flex-direction:column; padding:1.25rem; }
.product-family { color:var(--muted); font-size:.62rem; font-weight:700; letter-spacing:.16em; margin:0 0 .35rem; text-transform:uppercase; }
.product-card h3 { font-family:var(--display); font-size:1.8rem; font-weight:400; letter-spacing:.04em; margin:0; }
.product-variant { display:block; font-family:var(--body); font-size:.42em; font-weight:700; letter-spacing:.1em; line-height:1.35; }
.product-card h3 a { text-decoration:none; }
.product-card h3 a:hover { color:var(--acid); }
.product-status { color:var(--acid); font-size:.68rem; font-weight:800; letter-spacing:.12em; margin:.5rem 0 1.25rem; text-transform:uppercase; }
.product-buy { align-items:center; display:flex; gap:.75rem; justify-content:space-between; margin-top:auto; }
.product-buy p { font-family:var(--display); font-size:1.75rem; margin:0; }
.product-buy button { background:var(--acid); border:1px solid var(--acid); color:var(--ink); cursor:pointer; font-size:.64rem; font-weight:800; letter-spacing:.08em; min-height:44px; padding:.65rem .8rem; text-transform:uppercase; }
.product-buy button:disabled { background:transparent; border-color:#4b514c; color:#9ba09b; cursor:not-allowed; }
.is-coming-soon .product-image img { opacity:.82; }
.commerce-status { color:var(--muted); font-size:.8rem; min-height:1.3em; }
.text-link { color:var(--acid); display:inline-flex; font-size:.72rem; font-weight:800; gap:.75rem; letter-spacing:.12em; margin-top:.8rem; text-decoration:none; text-transform:uppercase; }
.text-link:hover { color:var(--paper); }

.home-apparel { background:linear-gradient(145deg,#080a09,#121612); border-top:1px solid rgba(166,255,0,.2); }
.home-apparel-heading { align-items:end; display:flex; gap:2rem; justify-content:space-between; margin-bottom:2.2rem; }
.home-apparel-heading > p { color:var(--muted); font-size:.78rem; line-height:1.7; margin:0; max-width:24rem; text-align:right; }
.home-apparel-grid { display:grid; gap:1rem; grid-template-columns:repeat(4,minmax(0,1fr)); }
.home-apparel-card { background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; min-width:0; transition:border-color .2s ease,transform .2s ease; }
.home-apparel-card:hover { border-color:var(--acid); transform:translateY(-.2rem); }
.home-apparel-image { align-items:center; aspect-ratio:1 / 1; background:radial-gradient(circle at 50% 45%,#222821,#080a09 72%); display:flex; justify-content:center; overflow:hidden; padding:.75rem; }
.home-apparel-image img { display:block; height:100%; object-fit:contain; transition:transform .2s ease; width:100%; }
.home-apparel-card:hover .home-apparel-image img { transform:scale(1.02); }
.home-apparel-copy { display:flex; flex:1; flex-direction:column; padding:1.1rem; }
.home-apparel-copy h3 { font-family:var(--display); font-size:1.65rem; font-weight:400; letter-spacing:.03em; line-height:1; margin:0; text-transform:uppercase; }
.home-apparel-copy h3 a { text-decoration:none; }
.home-apparel-copy h3 a:hover { color:var(--acid); }
.home-apparel-copy p { color:var(--paper); font-size:.78rem; font-weight:700; margin:.75rem 0 1.2rem; }
.home-apparel-link { color:var(--acid); font-size:.67rem; font-weight:800; letter-spacing:.1em; margin-top:auto; min-height:44px; padding-block:.75rem; text-decoration:none; text-transform:uppercase; }
.home-apparel-link:hover { color:var(--paper); }
.home-apparel-cta { display:flex; justify-content:center; margin-top:2.25rem; }

.garage { background:linear-gradient(110deg,rgba(7,9,8,.96),rgba(15,19,16,.88)),url('assets/crispaf/backgrounds/crispaf-midnight-garage-continuous-desktop.webp') center/cover; border-block:1px solid var(--line); }
.garage-layout { align-items:center; display:grid; gap:clamp(3rem,8vw,8rem); grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr); }
.garage-copy { border-left:2px solid var(--acid); padding-left:clamp(1.5rem,3vw,2.5rem); }
.garage-copy p { color:#d5d9d3; line-height:1.8; margin:0; }
.garage-copy p + p { margin-top:1rem; }

.community { background:#0b0d0c; }
.community-layout { align-items:center; display:grid; gap:clamp(3rem,8vw,8rem); grid-template-columns:minmax(0,.85fr) minmax(18rem,1.15fr); }
.community-copy > p:not(.eyebrow) { color:#d5d9d3; line-height:1.8; margin:1.5rem 0 2rem; max-width:34rem; }
.community figure { margin:0; }
.community figure img { border:1px solid rgba(166,255,0,.25); display:block; width:100%; }
.community figcaption { color:var(--muted); font-size:.62rem; letter-spacing:.12em; margin-top:.8rem; text-transform:uppercase; }

.site-footer { background:#050605; border-top:1px solid rgba(166,255,0,.3); padding-top:4rem; }
.footer-layout { display:grid; gap:2.5rem; grid-template-columns:1.5fr repeat(3,1fr); padding-bottom:3rem; }
.footer-layout > div:first-child p { color:var(--acid); font-family:var(--display); font-size:1.25rem; letter-spacing:.08em; }
.footer-layout h2 { color:var(--paper); font-family:var(--body); font-size:.68rem; font-weight:800; letter-spacing:.16em; margin:0 0 1rem; }
.footer-layout nav { align-items:flex-start; display:flex; flex-direction:column; }
.footer-layout nav a { color:var(--muted); font-size:.78rem; line-height:2.2; text-decoration:none; }
.footer-layout nav a:hover { color:var(--acid); }
.footer-social p { color:var(--muted); font-size:.74rem; line-height:1.6; margin:0; max-width:13rem; }
.footer-bottom { align-items:center; border-top:1px solid var(--line); color:#858b85; display:flex; font-size:.7rem; justify-content:space-between; padding-block:1.25rem; }
.footer-bottom p { margin:0; }
.footer-bottom a { min-height:44px; padding-block:1rem; }

.shop-page { min-height:100vh; }
.shop-hero { background:linear-gradient(100deg,rgba(5,7,6,.98),rgba(5,7,6,.72)),url('assets/crispaf/backgrounds/crispaf-midnight-garage-no-car.png') center/cover; border-bottom:1px solid rgba(166,255,0,.25); padding-block:clamp(4rem,8vw,7rem); }
.shop-hero p:last-child { color:#d5d9d3; line-height:1.7; max-width:38rem; }
.product-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
.product-grid .product-image { height:27rem; }
.product-grid + .commerce-status { margin-top:1rem; }

@media (max-width:900px) {
  .header-inner nav { display:none; }
  .cart-link { margin-left:auto; }
  .hero,.hero-layout { min-height:0; }
  .hero-layout { grid-template-columns:1fr; padding-block:5rem 3rem; }
  .hero-art { margin-inline:auto; max-width:42rem; }
  .product-track { grid-auto-columns:calc((100% - 1rem)/2); }
  .home-apparel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .garage-layout,.community-layout { grid-template-columns:1fr; }
  .community figure { max-width:44rem; }
  .footer-layout { grid-template-columns:repeat(2,1fr); }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:600px) {
  .shell { padding-inline:1rem; }
  .site-header .brand { width:8rem; }
  .hero { background-image:linear-gradient(180deg,rgba(5,7,6,.98),rgba(5,7,6,.7)),url('assets/crispaf/backgrounds/crispaf-midnight-garage-continuous-mobile.webp'); }
  .hero-layout { gap:2.2rem; padding-block:4rem 2.5rem; }
  h1 { font-size:clamp(3.75rem,20vw,6rem); }
  h2 { font-size:clamp(3.25rem,16vw,4.7rem); }
  .section { padding-block:4.5rem; }
  .section-heading { align-items:flex-end; }
  .section-heading .eyebrow { margin-bottom:.65rem; }
  .carousel-controls button { height:44px; width:44px; }
  .product-track { grid-auto-columns:67%; }
  .product-image { height:21rem; }
  .product-copy { padding:1rem; }
  .product-buy { align-items:stretch; flex-direction:column; }
  .product-buy button { width:100%; }
  .home-apparel-heading { align-items:flex-start; flex-direction:column; }
  .home-apparel-heading > p { text-align:left; }
  .home-apparel-image { padding:.4rem; }
  .home-apparel-copy { padding:.85rem; }
  .home-apparel-copy h3 { font-size:1.3rem; }
  .garage { background-position:center; }
  .garage-copy { margin-left:.2rem; }
  .community-layout { gap:2.5rem; }
  .footer-layout { grid-template-columns:1fr 1fr; }
  .footer-layout > div:first-child { grid-column:1 / -1; }
  .footer-social { grid-column:1 / -1; }
  .product-grid { grid-template-columns:1fr; }
  .product-grid .product-image { height:27rem; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .product-image img { transition:none; }
}