/* ============================================================
   ENTHUSIAST EXCHANGE — EEI BRAND THEME
   Palette source: enthusiastenterprises.com (css/index.css):
   #CE202F red · #B41C28 red-hover · near-black · white.
   Loaded AFTER fi-styles.css on exchange pages only — remaps
   FI's blue/lime tokens so the marketplace reads as the
   corporate EEI brand shared across the whole family.
   ============================================================ */
:root{
  /* accent slot (was Electric Lime) → EE red */
  --lime:#CE202F;
  --lime-deep:#B41C28;
  --on-lime:#FFFFFF;
  /* interactive slot (was Star Command blue) → EE red */
  --command:#CE202F;
  --command-hi:#E23B49;
  --velocity:#CE202F;
  --velocity-hi:#E23B49;
  /* dark surfaces (was Deep Ocean navy) → EEI charcoal/black */
  --ocean:#26282C;
  --ocean-deep:#1A1C1F;
  --ocean-900:#101214;
  --ink:#141619;
  /* neutrals — cool blue-grays → true grays */
  --bone:#F4F4F5;
  --bone-2:#E9E9EB;
  --line:#DEDFE2;
  --line-2:#E8E9EB;
  --line-input:#8A8D93;
  --carbon:#5F6368;
  --steel:#9A9EA6;
}

/* Legibility split: text/graphic accents on dark surfaces use a brighter
   tint (#E8505C ≈ 5.5:1 on charcoal); FILLED components stay brand red
   #CE202F with white text — matching enthusiastenterprises.com buttons. */
:root{ --lime:#E8505C; }
.btn--lime, .u-exch__new, .flag--new, .xhd__badge, .inb__count, .kyc__status, .thr__send{
  background:#CE202F; color:#fff; }
.btn--lime{ border-color:#CE202F; }
.btn--lime:hover{ background:#B41C28; border-color:#B41C28; color:#fff; }
.btn--ink:hover{ background:#CE202F; border-color:#CE202F; color:#fff; }
.thr__send:hover{ background:#B41C28; }
.vfind__tab.is-active{ background:#CE202F; border-color:#CE202F; color:#fff; }
.ctile--sell .ctile__count{ color:#E8505C; }
.footer__subscribe-btn{ background:#CE202F; color:#fff; }

/* White main header band — black topbar + black nav stay (Scott, 2026-07-22).
   Header logo strokes flip to ink via attribute selector; footer logo
   (dark surface) keeps its white strokes. */
.xhd{ background:#fff; border-bottom:none; box-shadow:0 1px 0 var(--line); }
.xhd .xlogo__ico svg [stroke="#FFFFFF"]{ stroke:#141619; }
.xlogo__top{ color:var(--carbon); }
.xhd .xsearch svg{ color:var(--carbon); }
.xhd .xsearch input{ background:var(--bone); border-color:var(--line); color:var(--ink); }
.xhd .xsearch input::placeholder{ color:var(--carbon); }
.xhd .xsearch input:focus{ outline-color:#CE202F; }
.xhd .xhd__ic{ color:var(--ink); border-color:var(--line); }
.xhd .xhd__ic:hover{ border-color:#CE202F; color:#CE202F; }
.xnav{ border-top:none; }

/* Trust bar — very light gray strip (Scott, 2026-07-22) */
.trustbar{ background:#F4F4F5; color:var(--carbon); border-top:none; border-bottom:1px solid var(--line); }
.trustbar__item strong{ color:#CE202F; }
.trustbar__item a:hover{ color:#CE202F; }
.trustbar__sep{ background:var(--line-input); }

/* nav "Sell Your Gear" reads as a BUTTON (red, white text) */
.xnav__link--sell{ background:#CE202F; color:#fff !important; border-radius:var(--r-sm);
  padding:9px 16px; margin-block:6px; margin-right:2px; border-bottom:none !important; align-self:center; font-weight:500; }
.xnav__link--sell:hover{ background:#B41C28; color:#fff !important; }
.xnav__link--sell.is-active{ background:#B41C28; color:#fff !important; }

/* Mobile header: 5 icons collapse into one menu so search + Sell stay visible */
.xhd__bar{ position:relative; }
.xhd__menu{ display:none; }
.xmenu{ position:absolute; right:var(--gutter); top:calc(100% + 6px); z-index:130; min-width:236px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-lg); padding:6px; }
.xmenu a{ display:flex; align-items:center; gap:11px; padding:12px; border-radius:var(--r-sm);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); transition:var(--t); }
.xmenu a:hover{ background:var(--bone); color:#CE202F; }
.xmenu a svg{ width:18px; height:18px; color:var(--carbon); flex:none; }
.xmenu a:hover svg{ color:#CE202F; }
.xmenu__badge{ margin-left:auto; min-width:19px; height:19px; padding:0 5px; background:#CE202F; color:#fff;
  border-radius:999px; font-size:9.5px; display:grid; place-items:center; }
@media (max-width:859px){
  .xhd__actions .xhd__ic:not(.xhd__menu){ display:none; }
  .xhd__menu{ display:grid; }
  .xsearch{ display:block; flex:1; max-width:none; }
  .xhd__sell{ display:inline-flex; padding:9px 12px; font-size:11px; white-space:nowrap; }
}
@media (max-width:560px){
  .xlogo__word{ display:none; }   /* shield mark carries the brand on small screens */
  .xhd__bar{ gap:10px; }
}

/* compact Sell label on mobile */
.xhd__sell-short{ display:none; }
@media (max-width:859px){
  .xhd__sell-full{ display:none; }
  .xhd__sell-short{ display:inline; }
}

/* ===== Mobile primary nav: app-style bottom bar; top link row hides ===== */
.xbnav{ display:none; }
.xcatsheet{ display:none; }
@media (max-width:859px){
  .xnav{ display:none; }               /* the scrolling link row was desktop nav on a phone */
  body{ padding-bottom:82px; }
  .xbnav{ position:fixed; left:0; right:0; bottom:0; z-index:140; display:grid; grid-template-columns:repeat(5,1fr);
    align-items:end; background:#101214; border-top:1px solid rgba(255,255,255,.1);
    padding:9px 6px calc(9px + env(safe-area-inset-bottom)); }
  .xbnav__item{ display:flex; flex-direction:column; align-items:center; gap:4px;
    font-family:var(--f-mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase;
    color:rgba(255,255,255,.62); background:none; border:none; padding:0; cursor:pointer; }
  .xbnav__item svg{ width:21px; height:21px; }
  .xbnav__item.is-active{ color:#E8505C; }
  .xbnav__sell{ width:54px; height:54px; margin:-26px auto 0; background:#CE202F; border-radius:50%;
    display:grid; place-items:center; color:#fff; border:3px solid #fff; box-shadow:0 6px 18px rgba(206,32,47,.45); }
  .xbnav__sell svg{ width:23px; height:23px; }
  .xbnav__sell:hover, .xbnav__sell.is-active{ background:#B41C28; }
  .xcatsheet{ position:fixed; left:10px; right:10px; bottom:88px; z-index:139; display:block;
    background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-lg); padding:8px; }
  .xcatsheet[hidden]{ display:none; }
  .xcatsheet__lbl{ font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--carbon); padding:8px 12px 6px; }
  .xcatsheet a{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-sm);
    font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:15px; color:var(--ink); }
  .xcatsheet a:hover{ background:var(--bone); }
  .xcatsheet img{ width:34px; height:34px; object-fit:contain; }
  .xcatsheet a span{ margin-left:auto; font-family:var(--f-mono); font-weight:400; font-size:10px; color:var(--carbon); }
  .xcatsheet__how{ border-top:1px solid var(--line-2); margin-top:4px;
    font-family:var(--f-mono) !important; font-weight:500 !important; font-size:10.5px !important;
    letter-spacing:.06em; color:#CE202F !important; }
}

/* Trust bar on mobile: rotate one promise at a time (was wrapping into a stack) */
@media (max-width:859px){
  .trustbar{ justify-content:center; gap:0; min-height:36px; overflow:hidden; }
  .trustbar__sep{ display:none; }
  .trustbar__item{ display:none; text-align:center; }
  .trustbar__item.is-shown{ display:flex; animation:tbfade .45s ease; }
}
@keyframes tbfade{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .trustbar__item.is-shown{ animation:none; } }

/* Mobile: account icons live in the superheader; hamburger retired; Shop joins Sell */
.xtb__icons{ display:none; }
.xtb__back-short{ display:none; }
.xhd__shop{ display:none; }
@media (max-width:859px){
  .xtb__right{ display:none; }
  .xtb__back-full{ display:none; }
  .xtb__back-short{ display:inline; }
  .xtb__icons{ display:flex; gap:15px; align-items:center; margin-left:auto; }
  .xtb__ic{ position:relative; width:26px; height:26px; display:grid; place-items:center; color:#fff; }
  .xtb__ic svg{ width:16px; height:16px; }
  .xtb__badge{ position:absolute; top:-5px; right:-7px; min-width:14px; height:14px; padding:0 3px;
    border-radius:999px; background:#CE202F; color:#fff; font-family:var(--f-mono); font-size:8px;
    display:grid; place-items:center; border:1.5px solid #101214; }
  .xhd__menu{ display:none; }
  .xhd__shop{ display:inline-flex; border-color:var(--ink); color:var(--ink); white-space:nowrap; }
  .xtb__inner{ overflow:visible; }
}

/* Tablet (860–1199px): fit all 9 nav items without the scrollbar */
.xnav__inner{ scrollbar-width:none; }
.xnav__inner::-webkit-scrollbar{ display:none; }
@media (min-width:860px) and (max-width:1199px){
  .xnav__link{ padding:12px 9px; font-size:10px; letter-spacing:.04em; }
  .xnav__link--sell{ padding:8px 12px; margin-block:5px; }
  .xhd__sell{ padding:9px 14px; font-size:11.5px; }
  .xsearch{ max-width:360px; }
}
@media (min-width:860px) and (max-width:999px){
  .xnav__link--alt{ display:none; }   /* New Takeoffs duplicates Wheels; drop it at narrow tablet */
  .xnav__link{ padding:12px 8px; }
}

/* Mobile-first forms: 16px prevents iOS focus-zoom; comfy touch targets */
@media (max-width:859px){
  input:not([type=checkbox]):not([type=radio]), select, textarea{ font-size:16px !important; }
  .btn{ padding-block:13px; }
  .btn--sm{ padding-block:11px; }
}

/* Data tables stack into cards on mobile — no sideways scrolling */
@media (max-width:700px){
  .dtbl table, .itbl table{ min-width:0; width:100%; }
  .dtbl thead, .itbl thead{ display:none; }
  .dtbl tr, .itbl tr{ display:block; padding:13px 14px; border-bottom:1px solid var(--line-2); }
  .dtbl tr:last-child, .itbl tr:last-child{ border-bottom:none; }
  .dtbl td, .itbl td{ display:block; border:none; padding:2px 0; }
  .dtbl td:empty{ display:none; }
  .dtbl .dtbl__item{ margin-bottom:4px; }
  .dtbl__scroll, .itbl__scroll{ overflow-x:visible; }
}

/* All horizontal chip rails swipe cleanly — no scrollbar chrome */
.srail__inner, .dbtabs, .xtb__inner, .xnav__inner, .xchips, .ntf__bar, .emchips, .footer__brands-logos{
  scrollbar-width:none; -ms-overflow-style:none; }
.srail__inner::-webkit-scrollbar, .dbtabs::-webkit-scrollbar, .xtb__inner::-webkit-scrollbar,
.xnav__inner::-webkit-scrollbar, .xchips::-webkit-scrollbar, .ntf__bar::-webkit-scrollbar,
.emchips::-webkit-scrollbar, .footer__brands-logos::-webkit-scrollbar{ display:none; }

/* FIX: table stacking requires the table/tbody boxes to be blocks too */
@media (max-width:700px){
  .dtbl table, .dtbl tbody, .itbl table, .itbl tbody{ display:block; width:100%; min-width:0; }
  .dtbl td, .itbl td{ width:auto; text-align:left; white-space:normal; }
  .dtbl .dstat, .itbl .pill{ margin-top:2px; }
}

/* Category filter groups: collapsed by default on mobile — products first */
.fgroup__lbl{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:0; }
.fgroup__lbl svg{ transition:transform .15s ease; }
.fgroup.is-open .fgroup__lbl svg{ transform:rotate(180deg); }
@media (max-width:959px){
  .fgroup .fopt, .fgroup .fprice{ display:none; }
  .fgroup.is-open .fopt{ display:flex; }
  .fgroup.is-open .fprice{ display:flex; }
  .fgroup__lbl{ margin-bottom:0; padding-block:2px; }
  .fgroup.is-open .fgroup__lbl{ margin-bottom:9px; }
}

/* inline page styles load after this sheet — the table min-width needs !important on mobile */
@media (max-width:700px){
  .dtbl table, .itbl table{ min-width:0 !important; width:100% !important; }
}

/* Mobile: entire filter rail folds behind one button — products first */
.frail-toggle{ display:none; }
@media (max-width:959px){
  .frail-toggle{ display:flex; align-items:center; gap:9px; width:100%; background:var(--paper);
    border:1px solid var(--line-input); border-radius:var(--r-sm); padding:13px 14px; cursor:pointer;
    font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
  .frail-toggle svg{ width:17px; height:17px; color:#CE202F; }
  .frail-toggle__n{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
    background:var(--bone-2); color:var(--ink); font-size:10px; display:grid; place-items:center; }
  .frail-toggle[aria-expanded="true"]{ border-color:#CE202F; }
  .frail{ display:none; }
  .frail.is-open{ display:block; position:static; }
}

/* Mobile topbar: white FI star mark instead of "FI.com" text */
.xtb__back-logo{ display:none; }
@media (max-width:859px){
  .xtb__back-logo{ display:block; height:20px; width:auto; }
  .xtb__back{ gap:8px; }
}

/* ---- v14: all-white Exchange logo in the footer (Scott) ---- */
.footer--x .xlogo__ico svg path{ stroke:#FFFFFF !important; }
.footer--x .xlogo__ico svg image{ filter:brightness(0) invert(1); }
.footer--x .xlogo__word .xlogo__bot{ color:#FFFFFF !important; }

/* ---- v15: center the header search between logo and actions (Scott) ---- */
@media (min-width:700px){
  .xhd .xsearch{ margin-inline:auto; max-width:560px; }
}

/* ---- v16: logo finishing (Scott) — enterprise polish ---- */
.xhd .xlogo__ico svg [fill="#FFFFFF"]{ fill:#141619; stroke:#141619; }
.xhd .xlogo__ico svg circle[stroke="#FFFFFF"]{ stroke:#141619; }
.footer--x .xlogo__ico svg [fill="#FFFFFF"]{ fill:#FFFFFF !important; stroke:#FFFFFF !important; }
.footer--x .xlogo__ico svg [fill="#CE202F"]{ fill:#FFFFFF !important; stroke:#FFFFFF !important; }
.xlogo__ico{ width:46px; height:46px; }
/* v17 — wordmark lockup: ENTHUSIAST width-justified to EXCHANGE, tighter to the icon, crisper */
.xlogo{ gap:9px; }
.xlogo__word{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.xlogo__top{ font-size:9.5px; letter-spacing:.515em; margin-right:-.515em; }
.xlogo__bot{ letter-spacing:0; margin-top:3px; }

/* ---- v18: price-guide flags on browse cards + homepage deal rail ---- */
.flag--gv{ background:#15803d; color:#fff; }
.flag--drop{ background:#101214; color:#E8505C; }
.dealrail{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
  scrollbar-width:none; -ms-overflow-style:none; }
.dealrail::-webkit-scrollbar{ display:none; }
.dealrail > a{ scroll-snap-align:start; flex:0 0 230px; }

/* v18.1: breathing room between app badges and social icons */
.footer--x .footer__social{ margin-top:4px; }

/* ==== v19: chrome utility classes (extracted from partial inline styles) ==== */
.c1290d4e{ object-fit:cover !important; border-radius:6px !important; }
.c221e55d{ margin-left:auto !important; }
.c50a8569{ margin:14px 0 18px !important; }
.c5722865{ text-align:left !important; line-height:1.1 !important; }
.c91cb78c{ color:#E8505C !important; }
.c989c36e{ color:#CE202F !important; }
.ca5b7f2b{ font-family:var(--f-mono) !important; font-size:9px !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:rgba(255,255,255,.55) !important; margin-bottom:7px !important; }
.cc2be5af{ display:inline-flex !important; align-items:center !important; gap:7px !important; background:#000 !important; border:1px solid rgba(255,255,255,.25) !important; border-radius:8px !important; padding:6px 12px !important; text-decoration:none !important; }
.ceb2bf41{ display:block !important; margin-top:10px !important; font-family:var(--f-mono) !important; font-size:8px !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:rgba(255,255,255,.35) !important; }
.ceff7cd5{ display:flex !important; gap:8px !important; flex-wrap:wrap !important; }
.cff282ef{ display:block !important; font-size:8px !important; color:rgba(255,255,255,.6) !important; }
.cff4889b{ display:block !important; font-size:12px !important; color:#fff !important; font-weight:700 !important; }

/* v20: seller tenure badge on cards — the Gear Exchange trust primitive, EEI edition */
.lst__since{ display:block; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--carbon); margin-top:2px; }

/* v21: total-cost transparency + one-tap saved search (eBay/GX study) */
.lst__ship{ font-family:var(--f-mono); font-size:8.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--carbon); margin-top:3px; }
.rbar__save{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--paper); border:1.5px solid var(--line-input); border-radius:var(--pill); padding:7px 13px; cursor:pointer; transition:var(--t); margin-left:auto; }
.rbar__save svg{ width:13px; height:13px; color:var(--command); flex:none; }
.rbar__save:hover{ border-color:var(--command); }
.rbar__save.is-on{ border-color:#15803d; color:#15803d; }
.rbar__save.is-on svg{ color:#15803d; }

/* v22 type floor: long-read paragraphs raised to 13px+ (design-critique rec #1) */
.sfaq details > p, .vstep__card > p, .cjcard p, .risk p, .lphase li, .whyjan__item{ font-size:13px; }
.au-big p{ font-size:13.5px; }

/* header ride chip — the FI car-selector pattern, links to My Garage */
.xtb__ride{ display:inline-flex; align-items:center; gap:6px; }
.xtb__ride svg{ width:12px; height:12px; color:#E8505C; flex:none; }

/* the hidden attribute always wins — kills the display:flex-vs-hidden bug class */
[hidden]{ display:none !important; }

/* ==== YMM cascade select states (2026-09-01, feedback: "you can not
   tell which ones are already preselected and which ones you need to
   select") — pure CSS via :has on the checked placeholder option:
   · waiting for a pick (enabled, placeholder showing): muted text +
     a LIME cue ring (the design's action color — red means error here)
   · answered (a real value, incl. auto-preselected singles): normal
     ink weight — reads as done
   · disabled (locked until the parent level): native dim, no ring.
   Covers every cascade surface: homepage finder, /fits rail, garage
   add form (its fixed #gDrive included), sell fitment rows. ==== */
select[data-ymm]:has(option[value=""]:checked),
select[data-ymm-extra]:has(option[value=""]:checked),
#gDrive:has(option[value=""]:checked){
  color:#8b9097;
}
select[data-ymm]:not(:disabled):has(option[value=""]:checked),
select[data-ymm-extra]:not(:disabled):has(option[value=""]:checked),
#gDrive:not(:disabled):has(option[value=""]:checked){
  box-shadow:0 0 0 2px var(--lime);
}
select[data-ymm]:not(:has(option[value=""]:checked)),
select[data-ymm-extra]:not(:has(option[value=""]:checked)){
  font-weight:600;
}