/* =========================================================================
   ELITE AUTO: Design System
   Luxury automotive: matte black, brushed chrome, sharp condensed display.
   ========================================================================= */

/* ---- Fonts (Oswald = signage/display, Manrope = body) ------------------ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---- Tokens ------------------------------------------------------------ */
:root{
  --bg:        #0a0a0b;
  --bg-2:      #0e0e10;
  --surface:   #161619;
  --surface-2: #1d1d22;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);

  --text:      #f3f3f5;
  --text-dim:  #a6a6ad;
  --text-mute: #6c6c74;

  --accent:    #e7c877;          /* warm champagne-gold, used sparingly */
  --accent-dim:#a98f45;
  --danger:    #e5484d;
  --ok:        #3ecf8e;

  /* brushed-chrome gradient for headline text */
  --chrome: linear-gradient(180deg,#ffffff 0%,#e6e8ea 30%,#9aa0a6 52%,#f4f6f8 66%,#c3c7cc 100%);

  --radius:   16px;
  --radius-sm:10px;
  --maxw:     1200px;

  --shadow:   0 24px 60px -20px rgba(0,0,0,.75);
  --shadow-sm:0 8px 24px -10px rgba(0,0,0,.7);

  --ease:     cubic-bezier(.22,.61,.36,1);
  --font-body:'Manrope', system-ui, sans-serif;
  --font-disp:'Oswald', 'Manrope', sans-serif;
}

/* ---- Reset-ish --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* subtle film-grain overlay for tactile depth */
body::after{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---- Layout helpers ---------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,5vw,40px); }
.section{ position:relative; z-index:2; padding-block:clamp(64px,9vw,120px); }
/* The first section after the hero is pulled up so product cards reach the
   fold. Scoped to #shop so every other section keeps its full breathing room. */
.section#shop{ padding-top:clamp(20px,2.4vw,32px); }
/* The hero ends on rgba(0,0,0,.6) from its floor gradient while this section
   starts on plain --bg, which read as a hard line once the marquee that used to
   cover the seam was removed. This picks the darkening up at the same value and
   fades it out, so the two blend instead of butting together. */
.section#shop::before{
  content:""; position:absolute; inset:0 0 auto 0; height:260px; z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.section#shop .section-head{ margin-bottom:clamp(20px,2.4vw,28px); }
.eyebrow{
  font-family:var(--font-disp); text-transform:uppercase; letter-spacing:.32em;
  font-size:.72rem; color:var(--accent); font-weight:500; margin-bottom:14px;
}
.section-head{ max-width:640px; margin-bottom:clamp(32px,5vw,56px); }
.section-head h2{ margin-bottom:14px; }
.muted{ color:var(--text-dim); }

/* ---- Typography -------------------------------------------------------- */
h1,h2,h3{ font-family:var(--font-disp); font-weight:600; line-height:1.02; letter-spacing:-.01em; text-transform:uppercase; }
h1{ font-size:clamp(2.6rem,7vw,5.5rem); }
h2{ font-size:clamp(1.9rem,4.2vw,3.1rem); }
h3{ font-size:clamp(1.15rem,2vw,1.5rem); letter-spacing:.01em; }
p{ color:var(--text-dim); }
.lead{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--text-dim); max-width:52ch; }

.chrome{
  background:var(--chrome);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

/* ---- Buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-disp); text-transform:uppercase; letter-spacing:.14em;
  font-weight:600; font-size:.9rem;
  padding:15px 30px; border-radius:var(--radius-sm);
  min-height:52px; transition:transform .18s var(--ease), background .2s, box-shadow .25s, opacity .2s;
  will-change:transform;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{
  background:linear-gradient(180deg,#ffffff,#d7dade);
  color:#0a0a0b; box-shadow:0 10px 30px -12px rgba(255,255,255,.35);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(255,255,255,.45); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line-2); }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.05); transform:translateY(-2px); }
.btn-gold{ background:linear-gradient(180deg,#f0d488,var(--accent-dim)); color:#1a1406; }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -14px rgba(231,200,119,.5); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---- Header ------------------------------------------------------------ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,11,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.site-header.scrolled{ border-bottom-color:var(--line); background:rgba(10,10,11,.9); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:12px; }
/* Kept for when a reworked logo goes back into the header. Currently unused. */
.brand .logo-img{ height:38px; width:auto; }
.brand .wordmark{ display:flex; flex-direction:column; line-height:.9; }
.brand .wordmark b{
  font-family:var(--font-disp); font-weight:700; font-size:1.25rem; letter-spacing:.06em;
  font-style:italic; text-transform:uppercase;
}
.brand .wordmark .chrome{ font-style:italic; }
.brand .wordmark span{
  font-family:var(--font-disp); font-size:.6rem; letter-spacing:.5em; color:var(--text-mute);
  text-transform:uppercase; padding-left:2px;
}
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-family:var(--font-disp); text-transform:uppercase; letter-spacing:.14em;
  font-size:.82rem; color:var(--text-dim); transition:color .2s; position:relative; padding:6px 0;
}
.nav-links a:hover,.nav-links a.active{ color:var(--text); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent);
}
.nav-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  position:relative; width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center; border:1px solid var(--line);
  transition:border-color .2s, background .2s;
}
.icon-btn:hover{ border-color:var(--line-2); background:var(--surface); }
.icon-btn svg{ width:20px; height:20px; stroke:var(--text); }
.cart-count{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  background:var(--accent); color:#100c02; border-radius:999px;
  font-size:.68rem; font-weight:800; display:grid; place-items:center;
  transform:scale(0); transition:transform .25s var(--ease);
}
.cart-count.show{ transform:scale(1); }
.nav-toggle{ display:none; }

/* ---- Hero -------------------------------------------------------------- */
.hero{ position:relative; z-index:2; overflow:hidden; padding-top:clamp(40px,5.5vw,78px); }
.hero::before{ /* radial spotlight */
  content:""; position:absolute; z-index:-1; top:-20%; left:50%; transform:translateX(-50%);
  width:min(1100px,120vw); height:900px;
  background:radial-gradient(ellipse at center, rgba(231,200,119,.10), rgba(231,200,119,0) 60%);
}
.hero::after{ /* floor gradient */
  content:""; position:absolute; inset:auto 0 0 0; height:340px; z-index:-1;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.6));
}
/* min-height trimmed from 78vh so the product grid is not pushed a full screen
   down; typography is unchanged, only the surrounding whitespace. */
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,60px); align-items:center;
  min-height:clamp(420px,54vh,620px); padding-block:clamp(34px,4.4vw,64px); }
.hero-copy .eyebrow{ margin-bottom:clamp(14px,1.4vw,20px); }
/* Generous gap under the headline: this is the seam that read as jumbled. */
.hero h1{ margin-bottom:clamp(42px,5vw,76px); line-height:1.2; }
.hero h1 .line{ display:block; }
.hero .lead{ margin-bottom:clamp(44px,4.6vw,68px); line-height:1.85; }
.hero-cta{ display:flex; gap:clamp(18px,1.6vw,26px); flex-wrap:wrap; }
.hero-trust{ display:flex; gap:clamp(40px,4.4vw,68px); margin-top:clamp(44px,4.8vw,72px); flex-wrap:wrap; }
.hero-trust .stat b{ font-family:var(--font-disp); font-size:1.7rem; display:block; }
.hero-trust .stat span{ font-size:.78rem; color:var(--text-mute); text-transform:uppercase; letter-spacing:.14em; }

.hero-visual{ position:relative; display:grid; place-items:center; }
.hero-medallion{
  /* Sized so it never exceeds the hero's min-height, otherwise the medallion,
     not the copy, becomes what pushes the product grid below the fold. */
  position:relative; width:min(480px,100%); aspect-ratio:1; border-radius:50%;
  container-type:inline-size;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, #26262b, #0c0c0e 72%);
  border:1px solid var(--line); box-shadow:var(--shadow), inset 0 0 80px rgba(0,0,0,.7);
  animation:float 7s ease-in-out infinite;
}
.hero-medallion::before{
  content:""; position:absolute; inset:-2px; border-radius:50%; padding:2px;
  background:conic-gradient(from 210deg,#5b5b62,#e9ebee,#4d4d54,#c9ccd1,#5b5b62);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55;
}
.hero-medallion img{ width:72%; height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.6)); }
.hero-medallion .fallback{ font-family:var(--font-disp); text-align:center; }
/* cqw = % of the circle's own width, so the wordmark scales with it.
   The clamp stays as a fallback where container units are unsupported. */
.hero-medallion .fallback b{ font-size:clamp(2.6rem,3.6vw,3.9rem); font-size:14cqw; font-style:italic; display:block; letter-spacing:.04em; }
.hero-medallion .fallback span{ letter-spacing:.5em; font-size:clamp(.8rem,1.05vw,1.1rem); font-size:4.3cqw; color:var(--text-mute); }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

/* marquee strip */
.marquee{
  border-block:1px solid var(--line); background:var(--bg-2);
  overflow:hidden; position:relative; z-index:2; padding-block:16px;
}
/* No gap here: spacing lives inside each group so the seam is uniform. */
.marquee-track{ display:flex; width:max-content; animation:scroll 46s linear infinite; }
.marquee-group{ display:flex; align-items:center; gap:56px; padding-right:56px; white-space:nowrap; }
.marquee span{ font-family:var(--font-disp); text-transform:uppercase; letter-spacing:.28em; font-size:.85rem; color:var(--text-mute); display:inline-flex; align-items:center; gap:56px; }
.marquee span::after{ content:"◆"; color:var(--accent); font-size:.6rem; }
/* -25% of a 4-group track = exactly one group, so the seam stays invisible. */
@keyframes scroll{ from{ transform:translateX(0) } to{ transform:translateX(-25%) } }

/* ---- Product grid / cards --------------------------------------------- */
.grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow-sm); }
.card .thumb{
  position:relative; aspect-ratio:1; overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#212127,#0d0d0f);
  display:grid; place-items:center;
}
/* contain, not cover: product photos are cut out on transparency, so the whole
   product must sit inside the square with breathing room instead of being
   cropped to fill it. */
.card .thumb img{
  width:100%; height:100%; box-sizing:border-box; padding:12%;
  object-fit:contain; object-position:center;
  transition:transform .5s var(--ease);
}
.card:hover .thumb img{ transform:scale(1.06); }
.thumb.no-img img{ display:none; }
.thumb .ph{ display:none; color:var(--text-mute); font-family:var(--font-disp); letter-spacing:.24em; text-transform:uppercase; font-size:.75rem; }
.thumb.no-img .ph{ display:grid; place-items:center; gap:10px; }
.thumb .ph svg{ width:44px; height:44px; stroke:var(--text-mute); opacity:.6; }

.badge{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--font-disp); text-transform:uppercase; letter-spacing:.14em;
  font-size:.66rem; font-weight:600; padding:6px 12px; border-radius:999px;
  background:var(--accent); color:#160f00;
}
.badge.out{ background:var(--surface-2); color:var(--text-dim); border:1px solid var(--line-2); }

.card-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card .brand-tag{ font-family:var(--font-disp); text-transform:uppercase; letter-spacing:.22em; font-size:.66rem; color:var(--accent); }
.card h3{ font-size:1.12rem; }
.card .blurb{ font-size:.88rem; color:var(--text-mute); flex:1; }
/* Sale pricing: the deal has to read at a glance. The old price was too dim
   to register and there was no savings figure, so $29.99 looked like a plain
   price rather than a discount. */
.price-row{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.price{ font-family:var(--font-disp); font-size:1.85rem; line-height:1; color:var(--text); }
.compare{
  font-size:1rem; color:var(--text-dim);
  text-decoration:line-through;
  text-decoration-color:rgba(231,200,119,.8);
  text-decoration-thickness:2px;
}
.save-chip{
  font-family:var(--font-disp); text-transform:uppercase; letter-spacing:.12em;
  font-size:.64rem; font-weight:600; line-height:1; white-space:nowrap;
  color:var(--accent);
  background:rgba(231,200,119,.12);
  border:1px solid rgba(231,200,119,.34);
  padding:6px 10px; border-radius:999px;
}
.card-actions{ display:flex; gap:10px; margin-top:14px; }
.card-actions .btn{ padding:12px 16px; min-height:46px; font-size:.78rem; flex:1; }

/* ---- Product detail page ---------------------------------------------- */
.pdp{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:start; }
.gallery{ display:flex; flex-direction:column; gap:14px; position:sticky; top:96px; }
.gallery .main{
  aspect-ratio:1; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:radial-gradient(circle at 50% 40%,#212127,#0c0c0e); display:grid; place-items:center;
}
/* Gallery photos are white-backdrop shots and every source is square, so cover
   fills the square frame edge to edge without cropping anything. */
.gallery .main img{ width:100%; height:100%; object-fit:cover; }
.gallery .main.no-img img{ display:none; }
.gallery .thumbs{ display:flex; gap:12px; }
.gallery .thumbs button{
  width:80px; aspect-ratio:1; border-radius:12px; overflow:hidden; border:1px solid var(--line);
  background:#141418; transition:border-color .2s;
}
.gallery .thumbs button.active{ border-color:var(--accent); }
.gallery .thumbs img{ width:100%; height:100%; object-fit:cover; }

.pdp-info .brand-tag{ font-family:var(--font-disp); text-transform:uppercase; letter-spacing:.24em; font-size:.72rem; color:var(--accent); margin-bottom:12px; display:block; }
.pdp-info h1{ font-size:clamp(2rem,4vw,3rem); margin-bottom:16px; }
.pdp-price{ display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.pdp-price .price{ font-size:2.6rem; }
.pdp-price .compare{ font-size:1.15rem; }
.pdp-price .save-chip{ font-size:.72rem; padding:7px 12px; }
.pdp-desc{ white-space:pre-line; margin-bottom:26px; }
.features{ display:grid; gap:10px; margin-bottom:30px; }
.features li{ display:flex; gap:12px; align-items:flex-start; color:var(--text-dim); font-size:.95rem; }
.features li svg{ width:18px; height:18px; stroke:var(--accent); flex-shrink:0; margin-top:3px; }
.qty{ display:flex; align-items:center; gap:0; border:1px solid var(--line-2); border-radius:var(--radius-sm); width:fit-content; margin-bottom:16px; }
.qty button{ width:46px; height:52px; font-size:1.3rem; color:var(--text-dim); transition:color .2s; }
.qty button:hover{ color:var(--text); }
.qty span{ width:44px; text-align:center; font-family:var(--font-disp); font-size:1.1rem; }
.pdp-buy{ display:flex; gap:12px; flex-wrap:wrap; }
.pdp-buy .btn{ flex:1; min-width:180px; }
.pdp-meta{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); display:grid; gap:12px; }
.pdp-meta .row{ display:flex; gap:12px; align-items:center; color:var(--text-dim); font-size:.9rem; }
.pdp-meta svg{ width:20px; height:20px; stroke:var(--accent); flex-shrink:0; }

/* ---- Feature / trust band --------------------------------------------- */
.features-band{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.feature{ padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); transition:border-color .3s, transform .3s; }
.feature:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.feature .ico{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:var(--surface-2); margin-bottom:16px; }
.feature .ico svg{ width:24px; height:24px; stroke:var(--accent); }
.feature h3{ font-size:1.05rem; margin-bottom:8px; }
.feature p{ font-size:.9rem; }

/* ---- CTA banner -------------------------------------------------------- */
.cta-banner{ position:relative; z-index:2; text-align:center; padding:clamp(48px,7vw,90px) 0; overflow:hidden; }
.cta-banner::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(231,200,119,.12), transparent 65%); }
.cta-banner h2{ margin-bottom:18px; }
.cta-banner p{ max-width:46ch; margin:0 auto 30px; }

/* ---- Footer ------------------------------------------------------------ */
.site-footer{ position:relative; z-index:2; border-top:1px solid var(--line); background:var(--bg-2); padding-block:52px 30px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:40px; }
.footer-brand p{ font-size:.9rem; margin-top:14px; max-width:34ch; }
.footer-col h4{ font-family:var(--font-disp); text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; color:var(--text); margin-bottom:16px; }
.footer-col a{ display:block; color:var(--text-dim); font-size:.9rem; padding:5px 0; transition:color .2s; }
.footer-col a:hover{ color:var(--text); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap; }
.footer-bottom p{ font-size:.82rem; color:var(--text-mute); }
.socials{ display:flex; gap:10px; }

/* ---- Cart drawer ------------------------------------------------------- */
.overlay{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; backdrop-filter:blur(2px); }
.overlay.open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; z-index:100; height:100%; width:min(420px,100vw);
  background:var(--bg-2); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 22px; border-bottom:1px solid var(--line); }
.drawer-head h3{ font-size:1.15rem; }
.drawer-body{ flex:1; overflow-y:auto; padding:14px 22px; }
.cart-empty{ text-align:center; padding:60px 20px; color:var(--text-mute); }
.cart-empty svg{ width:54px; height:54px; stroke:var(--text-mute); opacity:.5; margin:0 auto 16px; }
.cart-item{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); align-items:center; }
.cart-item .ci-thumb{ width:64px; height:64px; border-radius:10px; overflow:hidden; background:#141418; display:grid; place-items:center; }
.cart-item .ci-thumb img{
  width:100%; height:100%; box-sizing:border-box; padding:8%;
  object-fit:contain; object-position:center;
}
.cart-item .ci-thumb.no-img img{ display:none; }
.cart-item .ci-thumb.no-img::after{ content:"🔑"; font-size:1.3rem; opacity:.5; }
.ci-name{ font-family:var(--font-disp); text-transform:uppercase; letter-spacing:.05em; font-size:.92rem; }
.ci-price{ font-size:.85rem; color:var(--text-mute); margin-top:2px; }
.ci-qty{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.ci-qty button{ width:26px; height:26px; border:1px solid var(--line-2); border-radius:7px; color:var(--text-dim); font-size:.95rem; line-height:1; }
.ci-qty button:hover{ color:#fff; border-color:#fff; }
.ci-qty span{ font-size:.9rem; min-width:18px; text-align:center; }
.ci-remove{ font-size:.72rem; color:var(--text-mute); text-transform:uppercase; letter-spacing:.1em; margin-top:8px; transition:color .2s; }
.ci-remove:hover{ color:var(--danger); }
.ci-line{ font-family:var(--font-disp); font-size:1rem; }
.drawer-foot{ padding:20px 22px calc(20px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg-2); }
.subtotal{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.subtotal .label{ color:var(--text-dim); text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; font-family:var(--font-disp); }
.subtotal .val{ font-family:var(--font-disp); font-size:1.6rem; }
.drawer-foot .note{ font-size:.76rem; color:var(--text-mute); margin-bottom:14px; }

/* ---- Toast ------------------------------------------------------------- */
.toast-wrap{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast{
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--text);
  padding:13px 20px; border-radius:12px; font-size:.9rem; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:10px;
  transform:translateY(20px); opacity:0; transition:transform .3s var(--ease), opacity .3s;
}
.toast.show{ transform:translateY(0); opacity:1; }
.toast svg{ width:18px; height:18px; stroke:var(--ok); }

/* ---- Reveal on scroll -------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---- Page header (shop/legal) ------------------------------------------ */
.page-head{ position:relative; z-index:2; padding-top:clamp(48px,6vw,80px); }
.page-head h1{ font-size:clamp(2.4rem,6vw,4rem); }
.crumbs{ display:flex; gap:8px; align-items:center; font-size:.8rem; color:var(--text-mute); margin-bottom:16px; text-transform:uppercase; letter-spacing:.14em; font-family:var(--font-disp); }
.crumbs a:hover{ color:var(--text); }

/* ---- Success / status page -------------------------------------------- */
.status-wrap{ min-height:70vh; display:grid; place-items:center; text-align:center; position:relative; z-index:2; }
.status-card{ max-width:520px; }
.status-icon{ width:88px; height:88px; border-radius:50%; display:grid; place-items:center; margin:0 auto 26px; background:var(--surface); border:1px solid var(--line-2); }
.status-icon svg{ width:40px; height:40px; stroke:var(--ok); }
.status-icon.warn svg{ stroke:var(--accent); }
.status-card h1{ margin-bottom:16px; }
.status-card p{ margin-bottom:28px; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ order:2; }
  .hero-visual{ order:1; }
  .hero-cta,.hero-trust{ justify-content:center; }
  .hero .lead{ margin-inline:auto; }
  /* Stacked layout: the medallion sits above the copy, so its full desktop
     size pushes everything down a whole extra screen. */
  .hero-medallion{ width:min(260px,58%); }
  .hero-grid{ min-height:0; gap:clamp(20px,4vw,32px); }
  .pdp{ grid-template-columns:1fr; }
  .gallery{ position:static; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1/-1; }
}
@media (max-width:720px){
  .nav-links{
    position:fixed; inset:72px 0 auto 0; flex-direction:column; gap:0;
    background:var(--bg-2); border-bottom:1px solid var(--line); padding:8px 0;
    transform:translateY(-120%); transition:transform .32s var(--ease); z-index:49;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:16px 24px; width:100%; font-size:1rem; }
  .nav-links a.active::after{ display:none; }
  .nav-toggle{ display:grid; }
  /* Phones: drop the secondary CTA. Two buttons stacked eat most of the
     intro, and "Why Elite" only jumps to a section further down the page. */
  .hero-cta .btn-ghost{ display:none; }
  .hero-trust{ gap:22px; margin-top:30px; }
  .hero-copy .eyebrow{ margin-bottom:18px; }
  .hero h1{ margin-bottom:26px; }
  .hero .lead{ margin-bottom:30px; }
  .hero-trust .stat b{ font-size:1.4rem; }
  .footer-top{ grid-template-columns:1fr; }
  .card-actions{ flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- product options (variants) ---------- */
.fitment{
  font-family:var(--font-disp); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-mute); margin:-12px 0 22px;
}
.variants{ margin-bottom:22px; }
.variants-label{
  display:block; font-family:var(--font-disp); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-mute); margin-bottom:10px;
}
.variant-opts{ display:flex; gap:10px; flex-wrap:wrap; }
.variant{
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:12px 16px 12px 18px; border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:transparent; color:var(--text-dim); cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.variant b{ font-size:.92rem; font-weight:600; color:inherit; }
.variant .v-price{ font-family:var(--font-disp); font-size:.9rem; color:var(--text-mute); }

/* Free-shipping perk badge, bottom-right inside the option. The nudge animation
   runs a few times and stops rather than looping forever, so it draws the eye
   without becoming a distraction while someone is reading prices. */
.variant .v-ship{
  display:inline-flex; align-items:center; gap:5px; margin-top:5px;
  font-family:var(--font-disp); text-transform:uppercase; letter-spacing:.1em;
  font-size:.58rem; font-weight:600; line-height:1;
  color:var(--ok);
  background:rgba(62,207,142,.12);
  border:1px solid rgba(62,207,142,.34);
  padding:4px 8px; border-radius:999px; white-space:nowrap;
  animation:shipShake 2.6s var(--ease) 1.2s 3;
}
.variant .v-ship svg{ width:12px; height:12px; stroke:var(--ok); }
@keyframes shipShake{
  0%,72%,100%{ transform:translateX(0) rotate(0deg); }
  76%{ transform:translateX(-2px) rotate(-4deg); }
  80%{ transform:translateX(2px) rotate(4deg); }
  84%{ transform:translateX(-2px) rotate(-3deg); }
  88%{ transform:translateX(2px) rotate(3deg); }
  92%{ transform:translateX(-1px) rotate(0deg); }
}
.variant.active .v-ship{ background:rgba(62,207,142,.18); border-color:rgba(62,207,142,.5); }
.variant:hover{ border-color:#fff; background:rgba(255,255,255,.05); color:var(--text); }
.variant.active{
  border-color:var(--accent); background:rgba(231,200,119,.09); color:var(--text);
}
.variant.active span{ color:var(--accent); }
@media (max-width:520px){
  .variant-opts{ flex-direction:column; }
  .variant{ width:100%; flex-direction:row; justify-content:space-between; align-items:center; flex-wrap:wrap; }
  .variant .v-ship{ margin-top:0; }
}

/* ---------- order reference (order.html) ---------- */
.order-ref{
  display:flex; flex-direction:column; gap:6px; align-items:center;
  margin:0 auto 28px; padding:18px 26px; max-width:420px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
}
.order-ref-label{
  font-family:var(--font-disp); font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-mute);
}
.order-ref b{
  font-family:var(--font-disp); font-size:1.35rem; letter-spacing:.08em; color:var(--accent);
}
.order-ref-note{ font-size:.82rem; color:var(--text-mute); }

/* ---------- free shipping meter (cart drawer) ---------- */
.ship-meter{
  padding:12px 14px; margin-bottom:14px;
  border:1px solid rgba(231,200,119,.28);
  background:rgba(231,200,119,.07);
  border-radius:var(--radius-sm);
}
.ship-msg{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-disp); text-transform:uppercase; letter-spacing:.14em;
  font-size:.68rem; color:var(--text-dim); margin-bottom:9px;
}
.ship-msg b{ color:var(--accent); font-weight:600; }
.ship-msg svg{ width:15px; height:15px; stroke:var(--ok); flex-shrink:0; }
.ship-bar{ height:4px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; }
.ship-bar i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  transition:width .45s var(--ease);
}
/* Cleared the threshold: switch to the success colour so it reads as earned. */
.ship-meter.unlocked{
  border-color:rgba(62,207,142,.34);
  background:rgba(62,207,142,.08);
}
.ship-meter.unlocked .ship-msg{ color:var(--ok); }
.ship-meter.unlocked .ship-bar i{ background:var(--ok); }