/* =========================================================================
   JEEP CLUB INDIA — Overland Spec design system
   Graphite + Olive + Amber · Barlow Condensed / Work Sans / JetBrains Mono
   ========================================================================= */

:root{
  /* Palette (from DESIGN.md Components/Colors section) */
  --graphite:      #15181C;
  --graphite-2:    #1E232A;
  --olive:         #7A8A3A;
  --olive-dim:     #6a792f;
  --amber:         #E0952B;
  --canvas:        #ECEEEA;
  --stage:         #F5F6F4;
  --white:         #FFFFFF;
  --hairline:      #DCDFE2;
  --ink:           #191C1F;
  --ink-soft:      #6B7169;
  --dark-text:     #FFFFFF;
  --dark-text-2:   #A0A6AD;

  /* Radii — industrial 4px */
  --r-sm: 3px;
  --r:    4px;
  --r-pill: 9999px;

  /* Fonts */
  --f-head: "Barlow Condensed", system-ui, sans-serif;
  --f-body: "Work Sans", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Elevation */
  --e1: 0 1px 3px rgba(21,24,28,.06), 0 4px 12px rgba(21,24,28,.03);
  --e2: 0 4px 16px rgba(21,24,28,.08), 0 1px 0 var(--olive);
  --e3: 0 8px 24px rgba(21,24,28,.22), 0 2px 6px rgba(21,24,28,.12);

  --maxw: 1280px;
  --ticker-h: 32px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--f-body);
  background:var(--canvas);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }

/* ---------------- Typography helpers ---------------- */
.u-mono{ font-family:var(--f-mono); letter-spacing:.05em; text-transform:uppercase; }
.u-head{ font-family:var(--f-head); text-transform:uppercase; letter-spacing:.03em; }
.label-caps{ font-family:var(--f-head); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.875rem; }

h1,h2,h3{ font-family:var(--f-head); text-transform:uppercase; margin:0; color:var(--ink); }
.page-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1rem; }
@media(min-width:768px){ .page-wrap{ padding:0 2.5rem; } }

/* ============================ MARQUEE TICKER ============================ */
.ticker{
  background:var(--graphite);
  border-bottom:1px solid rgba(255,255,255,.08);
  height:var(--ticker-h);
  overflow:hidden;
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center;
}
.ticker__track{
  display:inline-flex; align-items:center;
  white-space:nowrap;
  font-family:var(--f-mono);
  font-size:.6875rem; font-weight:700; letter-spacing:.12em;
  color:var(--white);
  /* left -> right slow scroll */
  animation:ticker-scroll 40s linear infinite;
  will-change:transform;
}
.ticker__track span{ padding-right:0; }
.ticker__dot{ display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--amber); margin:0 1.1rem; flex:none; }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }
}
@media(prefers-reduced-motion:reduce){ .ticker__track{ animation-duration:120s; } }

/* ============================== HEADER ================================= */
.header{
  background:var(--white);
  border-bottom:1px solid var(--hairline);
  position:sticky; top:var(--ticker-h); z-index:190;
}
.header__bar{
  display:flex; align-items:center; justify-content:space-between;
  height:60px; max-width:var(--maxw); margin:0 auto; padding:0 1rem;
}
@media(min-width:768px){ .header__bar{ padding:0 2.5rem; } }
.icon-btn{
  background:none; border:none; padding:8px; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
}
.icon-btn svg{ width:24px; height:24px; }
.header__logo{ display:flex; align-items:center; gap:8px; }
.brand-logo{ height:30px; width:auto; }
@media(min-width:768px){ .brand-logo{ height:34px; } }
.footer__logo{ height:40px; width:auto; margin:.2rem auto .4rem; }

/* Seven-slot grille motif (small, for header) */
.grille{ display:inline-flex; align-items:center; gap:2.5px; height:20px; }
.grille i{ display:block; width:3.5px; height:18px; border-radius:2px; background:var(--graphite); }
.grille--olive i{ background:var(--olive); }
.grille--light i{ background:var(--canvas); }
.header__logo .grille i{ height:16px; width:3px; }


/* ============================ CATEGORY RAIL ============================ */
.cat-rail{
  display:flex; gap:.5rem; overflow-x:auto; padding:.75rem 1rem;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  max-width:var(--maxw); margin:0 auto;
}
.cat-rail::-webkit-scrollbar{ display:none; }
@media(min-width:768px){ .cat-rail{ padding:.75rem 2.5rem; } }
.cat-pill{
  flex:none; background:var(--graphite-2); color:var(--dark-text);
  border:none; border-radius:var(--r);
  font-family:var(--f-head); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  font-size:.8rem; padding:.55rem .9rem; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.cat-pill.is-active{ background:var(--olive); border-bottom-color:var(--amber); color:#fff; }

/* ============================= BUTTONS ================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-head); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  border-radius:var(--r); padding:.8rem 1.1rem; font-size:.95rem; border:none;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn--dark{ background:var(--graphite); color:#fff; width:100%; }
.btn--amber{ background:var(--amber); color:var(--graphite); }
.btn--amber-outline{ background:var(--white); color:var(--amber);
  border:1.5px solid var(--amber); width:100%; }
.btn--light{ background:var(--white); color:var(--ink); border:1px solid var(--hairline); }
.btn--block{ width:100%; }
.btn:hover{ filter:brightness(.97); }

/* ============================= HERO ==================================== */
.hero{ position:relative; border:1px solid var(--hairline); border-radius:var(--r);
  overflow:hidden; margin:1rem 0; box-shadow:var(--e1); }
.hero__img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:center 38%; }
.hero__overlay{ position:absolute; inset:0;
  background:linear-gradient(to top, rgba(21,24,28,.92) 0%, rgba(21,24,28,.55) 40%, rgba(21,24,28,.12) 62%, rgba(21,24,28,0) 100%); }
@media(min-width:768px){ .hero__img{ aspect-ratio:16/9; } }
.hero__badge{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px;
  background:var(--graphite); color:#fff; font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; border-radius:var(--r-sm); }
.hero__badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); }
.hero__content{ position:absolute; left:0; right:0; bottom:0; padding:1.2rem; color:#fff; }
.hero__content h1{ color:#fff; font-size:1.6rem; font-weight:800; letter-spacing:.02em; line-height:1.1; }
.hero__content p{ color:var(--dark-text-2); font-size:.9rem; margin:.5rem 0 0; }
.hero__content strong{ color:#fff; }
.hero__ticks{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin-top:.75rem; }
.hero__ticks span{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:#fff; }
.hero__ticks span::before{ content:"✓"; color:var(--olive); font-weight:700; }
@media(min-width:768px){ .hero__content h1{ font-size:2.6rem; } }

/* Update note under hero */
.update-note{ display:flex; gap:.7rem; align-items:flex-start;
  background:var(--white); border:1px solid var(--hairline); border-left:3px solid var(--amber);
  border-radius:var(--r); padding:.85rem 1rem; margin:0 0 1rem; box-shadow:var(--e1); }
.update-note__dot{ width:9px; height:9px; border-radius:50%; background:var(--amber); flex:none; margin-top:6px;
  box-shadow:0 0 0 3px rgba(224,149,43,.2); }
.update-note p{ margin:0; font-size:.85rem; color:var(--ink); line-height:1.45; }
.update-note strong{ color:var(--ink); }

/* ============================ SECTIONS ================================= */
.section{ margin:2rem 0; }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.25rem; }
.section__head h2{ font-size:1.35rem; font-weight:700; letter-spacing:.02em; }
.section__kicker{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; color:var(--amber); text-transform:uppercase; }
.section__sub{ color:var(--ink-soft); font-size:.9rem; margin:.1rem 0 1rem; }

/* Slim grille divider accent on headings */
.anchor-grille{ display:inline-flex; gap:3px; margin-bottom:.4rem; }
.anchor-grille i{ width:4px; height:16px; border-radius:2px; background:var(--olive); }

/* ============================ CATEGORY GRID ============================ */
.cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.cat-card{
  background:var(--white); border:1px solid var(--hairline); border-radius:var(--r);
  padding:1rem; box-shadow:var(--e1); display:flex; flex-direction:column; gap:.5rem;
  min-height:120px; transition:box-shadow .15s, border-color .15s;
}
.cat-card:hover{ border-color:var(--olive); box-shadow:var(--e2); }
.cat-card__icon{ width:28px; height:28px; color:var(--olive); }
.cat-card h3{ font-size:1rem; font-weight:700; letter-spacing:.02em; }
.cat-card p{ margin:0; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.05em;
  color:var(--ink-soft); text-transform:uppercase; }

/* ============================ PRODUCT CARDS ============================ */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
@media(min-width:768px){ .grid{ grid-template-columns:repeat(3,1fr); gap:1.25rem; } }
@media(min-width:1100px){ .grid{ grid-template-columns:repeat(4,1fr); } }

.card{
  background:var(--white); border:1px solid var(--hairline); border-radius:var(--r);
  box-shadow:var(--e1); display:flex; flex-direction:column; overflow:hidden;
  transition:box-shadow .15s, border-color .15s;
}
.card:hover{ border-color:var(--olive); box-shadow:var(--e2); }
/* Media = swipeable carousel. Taller window so the product is never cropped by tags. */
.card__media{ position:relative; background:var(--stage); aspect-ratio:4/3; overflow:hidden; }
.card__track{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.card__track::-webkit-scrollbar{ display:none; }
.card__slide{ flex:0 0 100%; height:100%; scroll-snap-align:center; display:block; }
.card__slide img{ width:100%; height:100%; object-fit:cover; }
.card__dots{ position:absolute; bottom:7px; left:0; right:0; display:flex; gap:5px; justify-content:center;
  pointer-events:none; }
.card__dots b{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.65);
  box-shadow:0 0 0 1px rgba(21,24,28,.25); display:block; transition:background .15s; }
.card__dots b.on{ background:var(--amber); }
.card__body{ padding:.75rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
/* Category + fitment tags live in the body now — they never cover the photo. */
.card__tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tag{ font-family:var(--f-mono); font-size:.55rem; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 6px; border-radius:var(--r-sm); }
.tag--cat{ background:var(--graphite); color:#fff; }
.tag--fit{ background:#E4E7E3; border:1px solid var(--outline-variant,#c7c8b6); color:var(--olive-dim); }
.card__title{ font-family:var(--f-head); font-weight:600; font-size:1.02rem; line-height:1.15;
  letter-spacing:.02em; text-transform:uppercase; color:var(--ink); }
.card__spec{ display:inline-flex; align-items:center; align-self:flex-start; gap:5px;
  background:#E4E7E3; color:var(--ink); border-radius:var(--r-sm);
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; }
.card__spec::before{ content:""; width:3px; height:12px; background:var(--olive); border-radius:1px; }
.card__price{ font-family:var(--f-mono); font-size:.6rem; color:var(--ink-soft);
  letter-spacing:.03em; text-transform:uppercase; }
.card .btn{ margin-top:auto; font-size:.8rem; padding:.6rem .5rem; }

/* placeholder (no clean photo) — RED per owner instruction */
.ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#2a0d0d; color:#ff6b6b; gap:.4rem; text-align:center; padding:1rem; }
.ph .grille i{ background:#ff6b6b; }
.ph span{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; }

/* ============================= BANNERS ================================= */
.banner{ border-radius:var(--r); padding:1.3rem; margin:2rem 0; }
.banner--dark{ background:linear-gradient(145deg,var(--graphite),var(--graphite-2)); color:#fff; box-shadow:var(--e1); }
.banner--dark h2{ color:#fff; font-size:1.35rem; }
.banner--dark p{ color:var(--dark-text-2); font-size:.9rem; }
.banner--light{ background:var(--white); border:1px solid var(--hairline); box-shadow:var(--e1); text-align:center; }
.banner--light h2{ font-size:1.3rem; }
.banner--light p{ color:var(--ink-soft); font-size:.9rem; }
.chip-amber{ display:inline-block; background:rgba(224,149,43,.18); color:var(--amber);
  border:1px solid rgba(224,149,43,.4); font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:var(--r-sm); margin-bottom:.6rem; }
.chip-olive{ display:inline-block; background:var(--olive); color:#fff;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 8px; border-radius:var(--r-sm); margin-bottom:.6rem; }
.banner .note{ display:flex; align-items:center; gap:6px; justify-content:center; margin-top:.8rem;
  font-family:var(--f-mono); font-size:.65rem; color:var(--dark-text-2); letter-spacing:.04em; }

/* ========================= INFO / FEATURE CARDS ======================== */
.info-card{ background:var(--white); border:1px solid var(--hairline); border-radius:var(--r);
  box-shadow:var(--e1); padding:1.1rem; display:flex; gap:.9rem; margin-bottom:.75rem; }
.info-card__ic{ width:40px; height:40px; flex:none; border-radius:var(--r); background:var(--stage);
  display:flex; align-items:center; justify-content:center; color:var(--olive); }
.info-card__ic.amber{ background:#fbe8cd; color:var(--secondary,#865300); }
.info-card h3{ font-size:1.1rem; font-weight:700; margin-bottom:.25rem; }
.info-card p{ margin:0; font-size:.9rem; color:var(--ink-soft); }
.num{ width:30px; height:30px; flex:none; border-radius:50%; background:var(--olive); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-head); font-weight:700; }

/* ============================ PRODUCT PAGE ============================= */
.crumb{ display:inline-flex; align-items:center; gap:6px; padding:1rem 0;
  font-family:var(--f-head); font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  font-size:.9rem; color:var(--ink); }
.crumb svg{ width:16px; height:16px; }

.gallery{ background:var(--stage); border:1px solid var(--hairline); border-radius:var(--r);
  position:relative; overflow:hidden; }
.gallery__stage{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.gallery__stage img{ width:100%; height:100%; object-fit:contain; }
.gallery__nav{ position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; background:var(--white); border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--e1); }
.gallery__nav svg{ width:20px; height:20px; }
.gallery__nav--prev{ left:12px; } .gallery__nav--next{ right:12px; }
.gallery__dots{ position:absolute; bottom:12px; left:0; right:0; display:flex; gap:6px; justify-content:center; }
.gallery__dots b{ width:7px; height:7px; border-radius:50%; background:#c7cabb; display:block; }
.gallery__dots b.on{ background:var(--olive); }

.pd-title{ font-size:1.6rem; font-weight:800; letter-spacing:.02em; margin:1.1rem 0 .6rem; line-height:1.1; }
.pd-desc{ color:var(--ink); font-size:.95rem; }
.pd-price{ margin:.9rem 0 0; font-family:var(--f-mono); font-size:.72rem; color:var(--ink-soft);
  letter-spacing:.03em; text-transform:uppercase; }

.finish-box{ background:var(--white); border:1px solid var(--hairline); border-radius:var(--r);
  padding:1rem; margin:1.2rem 0; }
.finish-box__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.finish-box__head h3{ font-size:1.05rem; }
.finish-box__head b{ font-family:var(--f-mono); font-size:.7rem; color:var(--olive-dim); letter-spacing:.05em; }
.finish-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.finish-opt{ display:flex; align-items:center; gap:8px; background:var(--stage);
  border:1px solid var(--hairline); border-radius:var(--r-sm); padding:.55rem .7rem;
  font-family:var(--f-head); font-weight:600; letter-spacing:.03em; text-transform:uppercase; font-size:.82rem;
  color:var(--ink); cursor:pointer; text-align:left; transition:border-color .12s, box-shadow .12s; }
.finish-opt i{ width:14px; height:14px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.15); }
.finish-opt.is-active{ border-color:var(--olive); box-shadow:inset 0 0 0 1px var(--olive); }
.finish-opt:hover{ border-color:var(--olive); }

.acc{ border:1px solid var(--hairline); border-radius:var(--r); background:var(--white);
  margin-bottom:.6rem; overflow:hidden; }
.acc__btn{ width:100%; background:none; border:none; display:flex; align-items:center; gap:.7rem;
  padding:1rem; text-align:left; font-family:var(--f-head); font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; font-size:.95rem; color:var(--ink); }
.acc__btn svg.lead{ width:20px; height:20px; color:var(--olive); flex:none; }
.acc__btn .chev{ width:18px; height:18px; margin-left:auto; transition:transform .2s; color:var(--ink-soft); }
.acc.is-open .chev{ transform:rotate(180deg); }
.acc__panel{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.acc.is-open .acc__panel{ max-height:600px; }
.acc__inner{ padding:0 1rem 1rem; color:var(--ink-soft); font-size:.9rem; }

@media(min-width:900px){
  .pd-layout{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
}

/* ============================ STATIC PAGES ============================= */
.page-title{ font-size:2rem; font-weight:800; letter-spacing:.02em; margin:1.2rem 0 .4rem; }
.page-intro{ color:var(--ink-soft); font-size:.95rem; margin-bottom:1.4rem; max-width:60ch; }
.legal-card{ background:var(--white); border:1px solid var(--hairline); border-radius:var(--r);
  box-shadow:var(--e1); padding:1.2rem; margin-bottom:.9rem; }
.legal-card h3{ font-size:1.1rem; display:flex; gap:.5rem; align-items:center; margin-bottom:.5rem; }
.legal-card h3 svg{ width:18px; height:18px; color:var(--olive); }
.legal-card p{ margin:.4rem 0; font-size:.9rem; color:var(--ink); }
.copy-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  background:var(--white); border:1px solid var(--hairline); border-radius:var(--r); padding:.8rem 1rem; }
.copy-row__h{ font-family:var(--f-mono); font-size:.8rem; letter-spacing:.03em; }
.copy-row__h small{ display:block; color:var(--amber); font-size:.6rem; letter-spacing:.08em; }
.copy-btn{ background:#fbe8cd; color:#865300; border:none; border-radius:var(--r-sm);
  font-family:var(--f-head); font-weight:700; letter-spacing:.06em; padding:.4rem .7rem; font-size:.78rem; text-transform:uppercase; }


/* ============================== FOOTER ================================= */
.footer{ background:var(--graphite); border-top:3px solid var(--olive); color:var(--dark-text-2);
  margin-top:2.5rem; padding:2rem 1rem 6rem; }
.footer__in{ max-width:var(--maxw); margin:0 auto; text-align:center; }
.footer__grille{ display:flex; align-items:center; gap:1rem; justify-content:center; margin-bottom:1.2rem; }
.footer__grille::before,.footer__grille::after{ content:""; height:1px; background:rgba(255,255,255,.14); flex:1; max-width:120px; }
.footer__ig{ display:inline-flex; align-items:center; gap:7px; color:var(--amber);
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.03em; margin-bottom:1.2rem; }
.footer__ig svg{ width:18px; height:18px; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; justify-content:center; margin-bottom:1.2rem; }
.footer__nav a{ font-size:.85rem; color:#d7dadf; }
.footer__nav a:hover{ color:#fff; }
.footer__disc{ font-family:var(--f-mono); font-size:.62rem; line-height:1.6; color:var(--dark-text-2);
  max-width:52ch; margin:0 auto; letter-spacing:.02em; }
.footer__cta{ margin:1.2rem 0; }

/* ======================= FLOATING ORDER PILL =========================== */
.fab{ position:fixed; bottom:1.5rem; right:1.25rem; z-index:150;
  display:inline-flex; align-items:center; gap:8px; background:var(--amber); color:var(--graphite);
  font-family:var(--f-head); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:1rem; padding:14px 22px; border-radius:var(--r-pill); box-shadow:var(--e3); }
.fab svg{ width:20px; height:20px; }
.fab:hover{ filter:brightness(1.03); }

/* ========================== MENU OVERLAY =============================== */
.overlay{ position:fixed; inset:0; z-index:300; background:var(--canvas);
  display:none; flex-direction:column; overflow-y:auto; }
.overlay.is-open{ display:flex; }
.overlay__bar{ display:flex; align-items:center; justify-content:space-between; height:60px;
  padding:0 1rem; background:var(--white); border-bottom:1px solid var(--hairline); position:sticky; top:0; }
.overlay__body{ padding:1rem; max-width:620px; margin:0 auto; width:100%; }
.menu-flag{ display:inline-flex; align-items:center; gap:8px; background:var(--graphite); color:#fff;
  border-radius:var(--r-pill); padding:.5rem .9rem; font-family:var(--f-mono); font-size:.65rem;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:1rem; }
.menu-flag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--amber); }
.menu-item{ display:flex; align-items:center; gap:.9rem; background:var(--white);
  border:1px solid var(--hairline); border-radius:var(--r); padding:1rem; margin-bottom:.6rem; }
.menu-item__n{ font-family:var(--f-mono); font-weight:700; color:var(--amber); font-size:.9rem; }
.menu-item__t{ font-family:var(--f-head); font-weight:700; letter-spacing:.02em; text-transform:uppercase; font-size:1.1rem; }
.menu-item__tag{ margin-left:auto; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.06em;
  color:var(--amber); border:1px solid var(--amber); border-radius:var(--r-sm); padding:3px 7px; text-transform:uppercase; }
.menu-item__arrow{ margin-left:auto; color:var(--olive); }
.menu-sub{ background:var(--white); border:1px solid var(--hairline); border-radius:var(--r); padding:1rem; margin-bottom:.6rem; }
.menu-sub__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.7rem; }
.menu-sub__head .menu-item__n{ margin-right:.5rem; }
.menu-sub__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.menu-sub__grid a{ background:var(--stage); border-radius:var(--r-sm); padding:.7rem; }
.menu-sub__grid b{ font-family:var(--f-head); font-weight:700; text-transform:uppercase; letter-spacing:.02em; display:block; font-size:.9rem; }
.menu-sub__grid small{ color:var(--ink-soft); font-size:.72rem; }
.menu-dm{ background:linear-gradient(145deg,var(--graphite),var(--graphite-2)); color:#fff;
  border-radius:var(--r); padding:1.1rem; display:flex; gap:.9rem; align-items:center; margin:1rem 0; }
.menu-dm__ic{ width:40px; height:40px; flex:none; border-radius:var(--r); background:rgba(224,149,43,.2);
  color:var(--amber); display:flex; align-items:center; justify-content:center; }
.menu-dm b{ display:block; font-family:var(--f-head); letter-spacing:.02em; text-transform:uppercase; }
.menu-dm p{ margin:.2rem 0 0; font-size:.8rem; color:var(--dark-text-2); }

/* ============================= SEARCH ================================= */
.search-wrap{ display:none; }
.search-wrap.is-open{ display:block; }
.search-box{ display:flex; align-items:center; gap:.6rem; background:var(--white);
  border:1px solid var(--hairline); border-radius:var(--r); padding:.8rem 1rem; margin:1rem 0; }
.search-box svg{ width:20px; height:20px; color:var(--ink-soft); flex:none; }
.search-box input{ border:none; outline:none; font-family:var(--f-body); font-size:1rem; width:100%; background:none; color:var(--ink); }
.search-empty{ text-align:center; color:var(--ink-soft); font-family:var(--f-mono); font-size:.8rem;
  text-transform:uppercase; letter-spacing:.05em; padding:2rem 0; }

/* ============================ UTIL ==================================== */
.count-line{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; align-items:center; justify-content:space-between; margin:1rem 0 .75rem; }
.count-line .verified{ color:var(--olive-dim); }
.spacer{ height:1rem; }
.hidden{ display:none !important; }