@charset "UTF-8";
/* ==========================================================================
   AUTOPART PRO — design system
   Visual language, component shapes and motion tokens follow the reference
   storefront (Montserrat type, lime accent, pill buttons, 20px cards, flat
   off-white surfaces, magnetic + reveal motion). All artwork and copy here is
   original placeholder material.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root{
  /* colour */
  --accent:        #a5b658;
  --accent-deep:   #7d8f3c;
  --accent-soft:   #eef1de;
  --ink:           #171717;
  --ink-2:         #2c2d2f;
  --muted:         rgba(23,23,23,.6);
  --muted-2:       rgba(23,23,23,.42);
  --line:          rgba(23,23,23,.1);
  --line-soft:     rgba(23,23,23,.06);
  --line-strong:   rgba(23,23,23,.4);
  --surface:       #fafafa;
  --surface-2:     #f4f4f1;
  --white:         #fff;
  --sale:          #e12654;
  --tag:           #ff5a3c;
  --star:          #fbbf24;

  /* shape */
  --r-pill:   3.75rem;
  --r-input:  .75rem;
  --r-card:   20px;
  --r-media:  16px;
  --r-block:  28px;

  /* layout */
  --page:      1400px;
  --page-pad:  40px;
  --h-topbar:  44px;
  --h-header:  76px;

  /* motion — mirrors the reference theme tokens */
  --anim-primary: .5s cubic-bezier(.3,1,.3,1);
  --anim-fast:    .3s cubic-bezier(.7,0,.3,1);
  --anim-short:   .2s cubic-bezier(.7,0,.3,1);
  --anim-smooth:  .7s cubic-bezier(.7,0,.3,1);
  --anim-nav:     .5s cubic-bezier(.6,0,.4,1);
  --ease-reveal:  cubic-bezier(.075,.82,.165,1);

  /* type */
  --font: 'Montserrat','Noto Sans','Noto Sans Thai','Noto Sans Khmer','Noto Sans Lao','Noto Sans Myanmar','Segoe UI','Leelawadee UI','Helvetica Neue',Arial,sans-serif;
}

/* ------------------------------------------------------------- 2. reset/base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html{scrollbar-gutter:stable}
body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  font-weight:400;
  line-height:1.55;
  color:var(--ink);
  background:var(--white);
  /* `clip` rather than `hidden`: `hidden` creates a scroll container and
     breaks position:sticky descendants. */
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
h1,h2,h3,h4,h5,h6{font-weight:600;letter-spacing:-.03em;line-height:1.15}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:#fff}
body.is-locked{overflow:hidden}

.skip-link{
  position:absolute;left:16px;top:-60px;z-index:400;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r-pill);
  font-size:13px;transition:top var(--anim-fast);
}
.skip-link:focus{top:16px}

/* ------------------------------------------------------------ 3. typography */
.h-display{font-size:clamp(30px,4.6vw,60px);font-weight:600;letter-spacing:-.035em;line-height:1.04}
.h-1{font-size:clamp(26px,3.2vw,42px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.h-2{font-size:clamp(22px,2.4vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.h-3{font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
.lede{font-size:clamp(14px,1.15vw,17px);line-height:1.6;color:var(--muted)}
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------- 4. layout */
.page-width{
  width:100%;max-width:var(--page);margin-inline:auto;
  padding-inline:var(--page-pad);
}
.page-width--narrow{max-width:900px}
.page-width--wide{max-width:1600px}
.section{padding-block:clamp(48px,6vw,96px)}
.section--tight{padding-block:clamp(32px,4vw,56px)}
.section--flush{padding-block:0}

.sec-head{margin-bottom:clamp(28px,3.4vw,52px)}
.sec-head--split{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.sec-head__actions{display:flex;align-items:center;gap:10px}
/* heading block when the left side carries an eyebrow above the title */
.sec-head__id{display:flex;flex-direction:column;gap:10px;min-width:0}
.sec-head__note{max-width:50ch;margin-bottom:4px}

/* --------------------------------------------------------------- 5. buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;height:48px;padding:0 28px;
  border:2px solid transparent;border-radius:var(--r-pill);
  font-size:14px;font-weight:500;letter-spacing:.005em;line-height:1;
  cursor:pointer;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:color var(--anim-primary),border-color var(--anim-primary),
             background-color var(--anim-primary),transform var(--anim-fast);
}
.btn:active{transform:scale(.982)}
.btn__fill{
  position:absolute;left:-25%;top:-50%;width:150%;height:200%;
  border-radius:50%;transform:translate3d(0,-102%,0);
  transition:transform var(--anim-primary);z-index:-1;
}
.btn__label{position:relative;display:inline-flex;align-items:center;gap:8px}
.btn:hover .btn__fill{transform:translate3d(0,0,0)}
.btn .arrow{margin-left:6px;transition:transform var(--anim-primary)}
.btn:hover .arrow{transform:translateX(5px)}

/* primary — solid lime */
.btn--primary{background:var(--accent);color:#fff}
.btn--primary .btn__fill{background:var(--ink)}
.btn--primary:hover{color:#fff}

/* dark — solid ink */
.btn--dark{background:var(--ink);color:#fff}
.btn--dark .btn__fill{background:var(--accent)}
.btn--dark:hover{color:#fff}

/* secondary — 2px outline, fills on hover */
.btn--secondary{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--secondary .btn__fill{background:var(--ink)}
.btn--secondary:hover{color:#fff}

/* light outline — for dark surfaces */
.btn--light{background:transparent;border-color:rgba(255,255,255,.9);color:#fff}
.btn--light .btn__fill{background:#fff}
.btn--light:hover{color:var(--ink);border-color:#fff}

/* ghost — subtle */
.btn--ghost{background:var(--surface);border-color:transparent;color:var(--ink);height:42px;padding:0 20px;font-size:13px}
.btn--ghost .btn__fill{background:var(--ink)}
.btn--ghost:hover{color:#fff}

.btn--sm{height:40px;padding:0 20px;font-size:13px}
.btn--xs{height:34px;padding:0 15px;font-size:12.5px}
.btn--lg{height:56px;padding:0 34px;font-size:15px}
.btn--block{width:100%}

/* icon-only round button */
.icon-btn{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--ink);background:transparent;
  position:relative;overflow:hidden;isolation:isolate;
  transition:border-color var(--anim-fast),color var(--anim-fast),background var(--anim-fast);
}
.icon-btn:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.icon-btn--plain{border-color:transparent}
.icon-btn--plain:hover{background:var(--surface);color:var(--ink)}
.icon-btn--sm{width:36px;height:36px}

/* ----------------------------------------------------------------- 6. links */
.link{
  display:inline-block;position:relative;
  background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat;
  transition:background-size var(--anim-primary);
}
.link:hover{background-size:0 1px}
@media (pointer:fine){
  .reversed-link{
    display:inline-block;
    background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
    background-position:100% 100%;
    transition:background-size var(--anim-primary);
  }
  .reversed-link:hover{background-position:0 100%;background-size:100% 1px}
}
.reversed-link--inline{display:inline}

/* ---------------------------------------------------------- 7. inputs/forms */
.input{
  width:100%;height:48px;padding:0 18px;
  border:1px solid var(--line);border-radius:var(--r-input);
  background:var(--white);font-size:14px;
  transition:border-color var(--anim-fast),background var(--anim-fast);
}
.input::placeholder{color:var(--muted-2)}
.input:hover{border-color:rgba(23,23,23,.24)}
.input:focus{outline:none;border-color:var(--ink)}

.select{
  appearance:none;-webkit-appearance:none;
  height:44px;padding:0 40px 0 18px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23171717'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  font-size:13.5px;cursor:pointer;
  transition:border-color var(--anim-fast);
}
.select:hover{border-color:rgba(23,23,23,.24)}
.select:focus{outline:none;border-color:var(--ink)}

/* ------------------------------------------------------- 8. reveal / motion */
[data-reveal]{
  opacity:0;transform:translateY(38px);
  transition:opacity .8s var(--ease-reveal),transform .8s var(--ease-reveal);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
[data-reveal="zoom-out"]{transform:scale(1.035)}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-38px)}
[data-reveal="right"]{transform:translateX(38px)}
[data-reveal].is-in{opacity:1;transform:none;will-change:auto}
.no-js [data-reveal]{opacity:1;transform:none}

/* word-by-word heading reveal */
.split-words .word{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.06em;
}
.split-words .word>span{
  display:inline-block;transform:translateY(112%);
  transition:transform .85s var(--ease-reveal);
  transition-delay:calc(var(--i,0) * 55ms);
}
.split-words.is-in .word>span{transform:translateY(0)}

/* magnetic targets */
[data-magnet]{will-change:transform;transition:transform .35s cubic-bezier(.3,1,.3,1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .split-words .word>span{transform:none!important}
  .lang-menu__list button{opacity:1!important;transform:none!important}
}

/* ---------------------------------------------------------------- 9. topbar */
.topbar{
  background:var(--accent);color:#fff;
  height:var(--h-topbar);position:relative;z-index:120;
}
.topbar__inner{
  height:100%;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:20px;
}
.topbar__social{display:flex;align-items:center;gap:18px}
.topbar__social a{
  display:flex;color:#fff;opacity:.92;
  transition:opacity var(--anim-fast),transform var(--anim-fast);
}
.topbar__social a:hover{opacity:1;transform:translateY(-2px)}
.topbar__note{
  font-size:12.5px;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.96);text-align:center;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topbar__links{display:flex;align-items:center;gap:20px;justify-content:flex-end}
.topbar__links{height:100%;align-items:stretch}
.topbar__links>li{display:flex;align-items:center}
.topbar__links a{
  font-size:12.5px;font-weight:500;color:rgba(255,255,255,.94);
  transition:color var(--anim-fast);white-space:nowrap;
}
.topbar__links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.topbar__links li:last-child a{
  border:1px solid rgba(255,255,255,.55);border-radius:var(--r-pill);
  padding:4px 12px;
}
.topbar__links li:last-child a:hover{background:#fff;color:var(--accent);text-decoration:none}

.lang-menu{position:relative;display:flex;align-items:stretch;height:100%}
.lang-menu.is-open{z-index:8}
.lang-menu__btn{
  display:flex;align-items:center;gap:10px;height:100%;
  padding:0 2px;border:0;background:transparent;color:#fff;
  font-size:13px;font-weight:400;line-height:1.5;white-space:nowrap;
}
.lang-menu__btn:hover{background:transparent;color:#fff}
.lang-menu__globe{width:18px;height:18px;flex:none}
.lang-menu__chevron{
  width:12px;height:8px;flex:none;
  transition:transform .5s cubic-bezier(.3,0,.4,1);
}
.lang-menu.is-open .lang-menu__chevron{transform:scaleY(-1)}
.lang-menu__panel{
  position:absolute;top:100%;right:0;left:auto;z-index:40;
  min-width:168px;width:max-content;max-width:min(280px,calc(100vw - 24px));
  padding:18px 0 28px;margin:0;
  color:#fff;background:var(--accent);
  border-radius:0 0 16px 16px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s cubic-bezier(.19,1,.22,1),visibility .5s;
}
.lang-menu.is-open .lang-menu__panel{
  opacity:1;visibility:visible;pointer-events:auto;
}
.lang-menu__corner{
  position:absolute;top:0;width:16px;height:16px;
  color:var(--accent);pointer-events:none;
}
.lang-menu__corner svg{width:100%;height:16px;display:block}
.lang-menu__corner--left{left:-16px;transform:scaleX(-1)}
.lang-menu__corner--right{right:-16px}
.lang-menu__list{
  max-height:250px;margin:0 5px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px;
  overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none;
}
.lang-menu__list::-webkit-scrollbar{width:0;height:0}
.lang-menu__list button{
  display:block;width:100%;padding:0 22px;border:0;border-radius:0;
  background:transparent;color:#fff;text-align:center;
  font-size:13px;font-weight:400;line-height:1.5;white-space:nowrap;
  opacity:0;transform:translateX(18%);
}
.lang-menu.is-open .lang-menu__list button{
  opacity:1;transform:none;
  transition:transform .8s cubic-bezier(.075,.82,.165,1) .08s,opacity .8s cubic-bezier(.19,1,.22,1) .08s;
}
.lang-menu__list button:hover,
.lang-menu__list button:focus-visible{color:#fff;outline:none}
.lang-menu__list button.is-on,
.lang-menu__list button.is-on:hover,
.lang-menu__list button.is-on:focus-visible{color:rgba(255,255,255,.42)}

/* ---------------------------------------------------------------- 10. header */
.site-header{
  background:var(--white);position:relative;z-index:110;
  border-bottom:1px solid var(--line-soft);
}
.site-header__inner{
  height:var(--h-header);display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
}
.brand{display:inline-flex;align-items:center;gap:11px;justify-self:start}
.brand img{width:38px;height:38px;border-radius:11px;flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__text b{
  font-size:16px;font-weight:700;letter-spacing:.02em;
}
.brand__text i{
  font-style:normal;font-size:10px;font-weight:600;
  letter-spacing:.22em;color:var(--muted-2);margin-top:3px;text-transform:uppercase;
}

/* --- primary nav with the rolling-text hover --- */
.nav{justify-self:center}
.nav__list{display:flex;align-items:center;gap:2px}
.nav__item{position:relative}
.nav__item--mega{position:static}
.nav__link{
  position:relative;display:inline-flex;align-items:center;
  --nav-pad:20px;
  height:42px;padding:0 var(--nav-pad);border-radius:var(--r-pill);
  overflow:hidden;isolation:isolate;
  font-size:14px;font-weight:500;letter-spacing:-.005em;
  color:var(--ink);
}
.nav__link .btn-text{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;height:100%;
  pointer-events:none;white-space:nowrap;
  transform-origin:center center;
  transition:transform var(--anim-primary),opacity var(--anim-primary);
}
.nav__link .btn-duplicate{
  position:absolute;top:0;left:0;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;height:100%;padding:0 var(--nav-pad);box-sizing:border-box;
  background:var(--ink);color:#fff;border-radius:var(--r-pill);
  pointer-events:none;white-space:nowrap;
  transform:translateY(100%) scale(.6);
  transform-origin:center center;
  transition:transform var(--anim-primary);
}
.nav__item:hover .nav__link .btn-text,
.nav__item.is-open .nav__link .btn-text{opacity:0;transform:translateY(-10%) scale(.6)}
.nav__item:hover .nav__link .btn-duplicate,
.nav__item.is-open .nav__link .btn-duplicate{transform:translateY(0) scale(1)}
.nav__link .caret{flex:none;transform-origin:center;transition:transform var(--anim-primary)}
.nav__item:hover .caret,
.nav__item.is-open .caret{transform:scaleY(-1)}

/* --- mega panel --- */
.mega{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(10px);
  width:min(1080px,calc(100vw - 80px));
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-block);
  box-shadow:0 26px 70px rgba(23,23,23,.12);
  padding:36px 40px 40px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--anim-nav),transform var(--anim-nav),visibility var(--anim-nav);
  z-index:-1;
}
.nav__item.is-open .mega{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.mega__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px}
.mega__col h5{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:16px;
}
.mega__col ul{display:flex;flex-direction:column;gap:11px}
.mega__col a{
  font-size:13.5px;color:var(--muted);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  transition:color var(--anim-fast),padding-left var(--anim-fast);
}
.mega__col a:hover{color:var(--ink);padding-left:5px}
/* part count per marque / system, right-aligned so the column reads as a list */
.mega__col a i{
  font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted-2);
  font-variant-numeric:tabular-nums;flex:none;
}
.drawer-nav__n{font-size:11px;font-weight:600;color:var(--muted-2)}
.mega__promo{
  margin-top:32px;padding-top:26px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.mega__promo p{font-size:14px;color:var(--muted)}
.mega__promo p b{color:var(--ink);font-weight:600}

/* --- header actions --- */
.header-actions{display:flex;align-items:center;gap:6px;justify-self:end}
.icon-action{
  position:relative;width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);
  transition:background var(--anim-fast),color var(--anim-fast);
}
.icon-action:hover{background:var(--surface)}
.icon-action__count{
  position:absolute;top:5px;right:4px;
  min-width:17px;height:17px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  font-size:10px;font-weight:700;font-style:normal;line-height:1;
  border-radius:var(--r-pill);border:2px solid var(--white);
  transform:scale(0);transition:transform var(--anim-fast);
}
.icon-action__count.is-on{transform:scale(1)}
.header-actions__cart{
  display:inline-flex;align-items:center;gap:11px;
  height:44px;padding:0 20px 0 6px;border-radius:var(--r-pill);
  background:var(--surface);
  transition:background var(--anim-fast);
}
.header-actions__cart:hover{background:var(--surface-2)}
.header-actions__cart .cart-total{font-size:13px;font-weight:600}

/* ------------------------------------------------ 11. sticky / mobile header */
.stick-bar{
  position:fixed;top:0;left:0;right:0;z-index:115;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line-soft);
  transform:translateY(-104%);
  transition:transform var(--anim-nav);
}
.stick-bar.is-on{transform:translateY(0)}
@media (max-width:992px){.stick-bar{display:none}}
.stick-bar__inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.stick-bar .nav__link{height:38px;font-size:13.5px}

.mobile-bar{
  display:none;position:sticky;top:0;z-index:115;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.mobile-bar.is-on{box-shadow:0 6px 24px rgba(23,23,23,.07)}
.mobile-bar__inner{height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.mobile-bar .brand img{width:32px;height:32px;border-radius:9px}
.mobile-bar .brand__text b{font-size:14px}
.mobile-bar .brand__text i{display:none}
.mobile-bar__actions{display:flex;align-items:center;gap:2px}
.lang-menu--bar{height:auto}
.lang-menu--bar .lang-menu__btn{
  height:36px;gap:6px;color:var(--ink);font-size:12px;
}
.lang-menu--bar .lang-menu__btn:hover{color:var(--ink);background:transparent}
.lang-menu--bar [data-lang-current]{
  max-width:88px;overflow:hidden;text-overflow:ellipsis;
}
.lang-menu--bar .lang-menu__panel{right:0}
.lang-menu--bar.is-open{z-index:30}
.lang-menu--bar .lang-menu__corner{display:none}

/* -------------------------------------------------------------- 12. drawers */
.drawer{position:fixed;inset:0;z-index:300}
.drawer[hidden]{display:none}
.drawer__backdrop{
  position:absolute;inset:0;background:rgba(23,23,23,.5);
  opacity:0;transition:opacity var(--anim-fast);
}
.drawer.is-in .drawer__backdrop{opacity:1}
.drawer__panel{
  position:absolute;top:0;bottom:0;
  width:min(410px,88vw);background:var(--white);
  display:flex;flex-direction:column;
  transition:transform var(--anim-nav);
  overscroll-behavior:contain;
}
.drawer__panel--left{left:0;transform:translateX(-102%);border-radius:0 var(--r-block) var(--r-block) 0}
.drawer__panel--right{right:0;transform:translateX(102%);border-radius:var(--r-block) 0 0 var(--r-block)}
.drawer__panel--wide{width:min(460px,92vw)}
.drawer.is-in .drawer__panel{transform:translateX(0)}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 24px;border-bottom:1px solid var(--line-soft);flex:none;
}
.drawer__title{font-size:17px;font-weight:600;letter-spacing:-.02em}
.drawer__body{flex:1;overflow-y:auto;padding:8px 0 24px}
.drawer__foot{padding:18px 24px 24px;border-top:1px solid var(--line-soft);flex:none}

.drawer-nav>li{border-bottom:1px solid var(--line-soft)}
.drawer-nav>li:last-child{border-bottom:0}
.drawer-nav a,.drawer-nav__btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:17px 24px;text-align:left;
  font-size:19px;font-weight:500;letter-spacing:-.02em;
  transition:background var(--anim-fast),color var(--anim-fast);
}
.drawer-nav a:hover,.drawer-nav__btn:hover{background:var(--surface)}
.drawer-nav__btn svg{transition:transform var(--anim-fast);color:var(--muted-2)}
.drawer-nav__btn.is-open svg{transform:rotate(180deg)}
.drawer-nav__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--anim-nav)}
.drawer-nav__body.is-open{grid-template-rows:1fr}
.drawer-nav__body>div{overflow:hidden}
.drawer-nav__body ul{padding:0 24px 18px}
.drawer-nav__body li a{
  padding:9px 0;font-size:14px;font-weight:400;color:var(--muted);
  justify-content:flex-start;
}
.drawer-nav__body li a:hover{background:none;color:var(--ink)}

/* search overlay */
.search-panel{
  position:fixed;left:0;right:0;top:0;z-index:300;
  background:var(--white);border-bottom:1px solid var(--line);
  padding:26px 0 34px;
  transform:translateY(-102%);
  opacity:0;
  transition:transform .86s cubic-bezier(.22,1,.36,1),opacity .62s cubic-bezier(.22,1,.36,1);
}
.search-panel[hidden]{display:none}
.search-panel.is-in{transform:translateY(0);opacity:1}
.search-panel__form{
  display:flex;align-items:center;gap:12px;
  border-bottom:2px solid var(--ink);padding-bottom:14px;
}
.search-panel__form input{
  flex:1;border:0;outline:none;background:none;
  font-size:clamp(19px,2.4vw,30px);font-weight:500;letter-spacing:-.02em;
}
.search-panel__form input::placeholder{color:var(--muted-2)}
.search-panel__hint{margin-top:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-panel__hint span{font-size:12.5px;color:var(--muted-2);margin-right:2px}
.search-panel__hint,.search-panel__form{
  opacity:0;transform:translateY(8px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1) .12s,transform .8s cubic-bezier(.22,1,.36,1) .12s;
}
.search-panel.is-in .search-panel__hint,
.search-panel.is-in .search-panel__form{opacity:1;transform:none}
.chip-suggest{
  font-size:13px;padding:7px 15px;border:1px solid var(--line);
  border-radius:var(--r-pill);color:var(--muted);
  transition:border-color var(--anim-fast),color var(--anim-fast),background var(--anim-fast);
}
.chip-suggest:hover{border-color:var(--ink);color:var(--ink);background:var(--surface)}

/* ------------------------------------------------------------------ 13. hero */
.hero{padding-top:clamp(16px,2vw,26px)}
.hero__grid{
  display:grid;grid-template-columns:1.35fr 1fr;gap:16px;
}
.hero__tile{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-block);background:var(--surface);
  min-height:clamp(340px,44vw,560px);
}
.hero__tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--anim-primary);
}
.hero__tile:hover img{transform:scale(1.045)}
/* The side tile is much narrower than the main one, so a cover-filled
   square artboard (as used on the wide dark tile) would swallow the whole
   tile and sit underneath the copy. Size the art to the upper right and
   let the copy keep the lower left. */
.hero__tile--light img{
  inset:0 0 auto auto;
  width:auto;height:56%;
  object-fit:contain;object-position:top right;
  padding:clamp(14px,1.6vw,24px);
}
.hero__body{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(24px,3.4vw,52px);
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.hero__tile--dark{color:#fff}
.hero__tile--dark::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(23,23,23,.34) 0%,rgba(23,23,23,.06) 26%,rgba(23,23,23,0) 42%,rgba(23,23,23,.86) 100%),
    radial-gradient(120% 82% at 22% 88%,rgba(23,23,23,.6) 0%,rgba(23,23,23,0) 62%);
}
.hero__tile--light::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.74) 48%,rgba(255,255,255,.96) 70%);
}
.hero__eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:var(--r-pill);
  padding:5px 13px;opacity:.9;
}
.hero__title{
  font-size:clamp(30px,4.4vw,62px);font-weight:600;
  letter-spacing:-.04em;line-height:1.02;
}
.hero__sub{font-size:clamp(13.5px,1.15vw,17px);opacity:.86;max-width:34ch;line-height:1.5}
.hero__cta{margin-top:12px}
.hero__side{display:grid;grid-template-rows:1fr;gap:16px}
.hero__stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
}
.hero__stat{
  border:1px solid var(--line);border-radius:var(--r-block);
  padding:clamp(20px,2.4vw,30px);
  display:flex;flex-direction:column;gap:4px;
  transition:border-color var(--anim-fast),background var(--anim-fast);
}
.hero__stat:hover{border-color:var(--ink);background:var(--surface)}
.hero__stat b{font-size:clamp(24px,2.6vw,36px);font-weight:600;letter-spacing:-.04em;line-height:1}
.hero__stat span{font-size:12.5px;color:var(--muted);line-height:1.4}

/* --------------------------------------------------------------- 14. marquee */
.marquee{
  overflow:hidden;background:var(--ink);color:#fff;
  padding-block:20px;user-select:none;
}
.marquee--accent{background:var(--accent)}
.marquee__track{
  display:flex;width:max-content;
  animation:marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;flex:none}
.marquee__item{
  display:inline-flex;align-items:center;gap:22px;
  padding-inline:22px;
  font-size:clamp(15px,1.5vw,21px);font-weight:600;
  letter-spacing:-.02em;white-space:nowrap;
}
.marquee__item svg{opacity:.65;flex:none}
.marquee--accent .marquee__item svg{opacity:.85}
@keyframes marqueeScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ------------------------------------------------------ 15. collection cards */
.coll-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.coll-card{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(200px,19vw,268px);
  padding:clamp(20px,2vw,28px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;
  transition:border-color var(--anim-fast),transform var(--anim-fast);
}
.coll-card:hover{border-color:rgba(23,23,23,.2);transform:translateY(-4px)}
.coll-card__bg{
  position:absolute;inset:0;z-index:0;opacity:0;
  background:var(--card-hover-bg,linear-gradient(180deg,#809eab 0%,#fafafa 132%));
  transition:opacity var(--anim-fast);
}
.coll-card:hover .coll-card__bg{opacity:1}
.coll-card__top{position:relative;z-index:2;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.coll-card__tag{
  font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:capitalize;
  border:1px solid currentColor;border-radius:6px;padding:3px 7px;line-height:1.3;
}
.coll-card__title{
  font-size:clamp(17px,1.45vw,21px);font-weight:600;
  letter-spacing:-.02em;line-height:1.2;
}
.coll-card__price{font-size:13.5px;font-weight:400;color:var(--muted);margin-top:2px}
.coll-card__media{
  position:relative;z-index:1;margin-top:auto;
  display:flex;align-items:flex-end;justify-content:flex-end;
  gap:4px;
}
.coll-card__media img{
  width:min(275px,86%);
  transition:transform .6s var(--anim-primary);
}
.coll-card:hover .coll-card__media img{transform:translateY(-6px) scale(1.05)}
.coll-card--wide{grid-column:span 2;grid-row:span 2;min-height:0}
.coll-card--wide .coll-card__top{flex:none}
.coll-card--wide .coll-card__media{
  flex:1;margin-top:26px;
  align-items:center;justify-content:center;
}
.coll-card--wide .coll-card__media img{width:min(440px,94%)}

/* ------------------------------------------------------------ 16. stats band */
.stats{
  background:linear-gradient(180deg,#fafafa 0%,#fff 100%);
  border-block:1px solid var(--line-soft);
}
.stats__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stat{
  padding:clamp(20px,2.4vw,34px) 4px;
  text-align:center;position:relative;
}
.stat+.stat::before{
  content:'';position:absolute;left:0;top:22%;bottom:22%;
  width:1px;background:var(--line);
}
.stat__num{
  font-size:clamp(32px,4.4vw,62px);font-weight:600;
  letter-spacing:-.045em;line-height:1;
  display:flex;align-items:baseline;justify-content:center;gap:1px;
}
.stat__num sup{font-size:.44em;font-weight:600;top:-.35em;position:relative}
.stat__label{
  margin-top:9px;font-size:12px;font-weight:500;
  letter-spacing:.02em;color:var(--muted);text-transform:capitalize;
}

/* ------------------------------------------------------------ 17. cat tiles */
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cat-tile{
  position:relative;display:flex;align-items:center;gap:16px;
  padding:18px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--white);overflow:hidden;
  transition:border-color var(--anim-fast),background var(--anim-fast),transform var(--anim-fast);
}
.cat-tile:hover{border-color:var(--ink);transform:translateY(-3px)}
.cat-tile__thumb{
  width:66px;height:66px;flex:none;border-radius:var(--r-media);
  background:var(--surface);overflow:hidden;
}
.cat-tile__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--anim-primary)}
.cat-tile:hover .cat-tile__thumb img{transform:scale(1.09)}
.cat-tile__text{min-width:0}
.cat-tile__text b{
  display:block;font-size:14.5px;font-weight:600;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cat-tile__text span{font-size:12.5px;color:var(--muted)}
.cat-tile__go{
  margin-left:auto;flex:none;color:var(--muted-2);
  transition:transform var(--anim-primary),color var(--anim-fast);
}
.cat-tile:hover .cat-tile__go{transform:translateX(4px);color:var(--accent)}
/* 17 systems never divide evenly into a 4-column grid, so the trailing gap
   is closed with a centred catalogue-wide action instead of a stray tile */
.sys-more{display:flex;justify-content:center;margin-top:clamp(22px,2.6vw,34px)}

/* ----------------------------------------------------------- 18. product card */
.pcard{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;
  transition:border-color var(--anim-fast),transform var(--anim-fast),
             box-shadow var(--anim-fast);
}
.pcard:hover{
  border-color:rgba(23,23,23,.18);
  box-shadow:0 18px 40px -22px rgba(23,23,23,.28);
}
.pcard__bg{
  position:absolute;inset:0;z-index:0;opacity:0;
  background:var(--card-hover-bg,linear-gradient(180deg,#809eab 0%,#fafafa 132%));
  transition:opacity var(--anim-fast);
  border-radius:var(--r-card);
}
.pcard:hover .pcard__bg{opacity:1}
.pcard__media{
  position:relative;z-index:1;aspect-ratio:1/1;overflow:hidden;
}
.pcard__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .65s var(--anim-primary);
}
.pcard:hover .pcard__media img{transform:scale(1.055)}
.pcard__flags{
  position:absolute;top:13px;left:13px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}
.flag{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-pill);line-height:1;color:#fff;
  background:var(--ink);
}
.flag--sale{background:var(--tag)}
.flag--new{background:var(--accent)}
.flag--hot{background:var(--sale)}
/* The three lines of business get fixed colours so the badge is readable at a
   glance in a mixed grid: amber = pulled from a donor car, slate = dealer
   channel original, lime = OE-spec aftermarket. */
.flag--cond{
  font-size:10px;letter-spacing:.07em;padding:5px 11px;
  box-shadow:0 1px 3px rgba(23,23,23,.18);
}
.flag--used{background:#c8871f}
.flag--genuine{background:#2c3a42}
.flag--oem{background:var(--accent)}
.pcard__quick{
  position:absolute;top:13px;right:13px;z-index:3;
  display:flex;flex-direction:column;gap:8px;
  opacity:0;transform:translateX(8px);
  transition:opacity var(--anim-fast),transform var(--anim-fast);
}
.pcard:hover .pcard__quick{opacity:1;transform:none}
.qbtn{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);color:var(--ink);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--line);
  transition:background var(--anim-fast),color var(--anim-fast),transform var(--anim-fast);
}
.qbtn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.qbtn.is-on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pcard__body{
  position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;gap:9px;
  padding:18px 20px 20px;
}
.pcard__meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-2);
}
.pcard__title{
  font-size:14.5px;font-weight:600;letter-spacing:-.015em;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.7em;
  transition:color var(--anim-fast);
}
.pcard:hover .pcard__title{color:var(--card-hover-ink,var(--ink))}
.pcard__stars{display:inline-flex;gap:1.5px;color:var(--star)}
/* The catalogue publishes no prices, so the foot of the card carries the OEM
   part number instead of a price, and spec chips carry fitment. */
.pcard__specs{display:flex;flex-wrap:wrap;gap:6px}
.chip--sm{
  height:22px;padding:0 9px;font-size:10.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
}
.chip--quiet{color:var(--muted-2);background:transparent}
/* Fitment line under the title: which car the part is listed against. */
.pcard__fit{
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--muted);margin-top:-3px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.pcard__foot{
  margin-top:auto;padding-top:12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.pcard__sku{display:flex;flex-direction:column;gap:1px;min-width:0}
.pcard__sku b{
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pcard__sku span{
  font-size:10.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-2);
}
/* Shown instead of the OEM block on rows that carry no part number -- the
   generated catalogue rows. Worded as an action, never as a placeholder that
   could be mistaken for a real part number. No hard character clamp: a 17ch
   cap orphaned "price" onto its own line in narrow cards; balance splits it
   evenly when it does have to wrap, and does nothing when it fits. */
.pcard__ask{
  font-size:11.5px;font-weight:600;letter-spacing:.01em;
  color:var(--muted-2);line-height:1.35;
  min-width:0;text-wrap:balance;
}
.pcard__actions{display:flex;align-items:center;gap:8px;flex:none}
.pcard__wa{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;
  transition:background var(--anim-fast),transform var(--anim-fast);
}
.pcard__wa:hover{background:#1ebe57;transform:scale(1.06)}
.pcard__cart{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;
  transition:background var(--anim-fast),transform var(--anim-fast);
}
.pcard__cart:hover{background:var(--accent);transform:scale(1.06)}
.pcard__cart.is-done{background:var(--accent)}
.pcard__stock{
  display:none;
}

/* list view variant */
.products-grid.is-list{grid-template-columns:1fr;gap:14px}
.products-grid.is-list .pcard{flex-direction:row;align-items:stretch}
.products-grid.is-list .pcard__media{width:230px;flex:none;aspect-ratio:auto}
.products-grid.is-list .pcard__body{padding:24px 28px;min-height:196px}
.products-grid.is-list .pcard__title{-webkit-line-clamp:3;min-height:0;font-size:17px}

/* -------------------------------------------------------------- 19. shop page */
.page-head{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  background:#fff;
}
.page-head__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.85;pointer-events:none;
}
.page-head__inner{
  position:relative;z-index:1;
  padding-block:clamp(30px,4vw,58px);
}
.page-head__title{font-size:clamp(30px,4vw,52px);font-weight:600;letter-spacing:-.04em;line-height:1.05}
.breadcrumb{margin-top:14px}
.breadcrumb ol{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.breadcrumb li{font-size:12.5px;color:var(--muted-2);display:flex;align-items:center;gap:9px}
.breadcrumb li+li::before{content:'/';color:var(--line-strong)}
.breadcrumb a{color:var(--muted);transition:color var(--anim-fast)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb .is-current{color:var(--ink);font-weight:600}

.toolbar{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.toolbar__inner{
  display:flex;align-items:center;gap:16px;
  padding-block:13px;flex-wrap:wrap;
}
.filter-tabs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:1;min-width:0}
.filter-tab{
  position:relative;height:38px;padding:0 18px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:12.5px;font-weight:500;color:var(--muted);
  white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:color var(--anim-primary),border-color var(--anim-primary);
}
.filter-tab__fill{
  position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(102%);transition:transform var(--anim-primary);
  border-radius:var(--r-pill);
}
.filter-tab:hover{color:var(--ink);border-color:var(--ink)}
.filter-tab:hover .filter-tab__fill{transform:translateY(0)}
.filter-tab:hover{color:#fff}
.filter-tab.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.filter-tab.is-active .filter-tab__fill{display:none}
.filter-tab i{
  font-style:normal;opacity:.6;margin-left:5px;font-size:11.5px;
}

.toolbar__tools{display:flex;align-items:center;gap:9px;flex:none}
.result-count{font-size:12.5px;color:var(--muted);white-space:nowrap}
.view-switch{
  display:inline-flex;align-items:center;gap:2px;padding:3px;
  border:1px solid var(--line);border-radius:var(--r-pill);
}
.view-btn{
  width:34px;height:30px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted-2);transition:background var(--anim-fast),color var(--anim-fast);
}
.view-btn:hover{color:var(--ink)}
.view-btn.is-active{background:var(--ink);color:#fff}

.shop-layout{
  display:grid;grid-template-columns:264px minmax(0,1fr);
  gap:clamp(24px,3vw,44px);
  padding-block:clamp(28px,3.4vw,48px);
  align-items:start;
}

/* sidebar */
.sidebar{align-self:start}
.sidebar__head{
  display:none;align-items:center;justify-content:space-between;
  padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--line-soft);
}
.sidebar__title{font-size:17px;font-weight:600;letter-spacing:-.02em}
.widget{border-bottom:1px solid var(--line-soft);padding-block:20px}
.widget:first-of-type{padding-top:0}
.widget:last-of-type{border-bottom:0}
.widget__title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;
  font-size:14px;font-weight:600;letter-spacing:-.01em;
}
.widget__title svg{color:var(--muted-2);transition:transform var(--anim-fast);flex:none}
.widget__title.is-open svg{transform:rotate(180deg)}
.widget__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--anim-nav)}
.widget__body.is-open{grid-template-rows:1fr}
.widget__body>div{overflow:hidden}
.widget__body-inner{padding-top:16px}

.widget-search{position:relative}
.widget-search input{
  width:100%;height:44px;padding:0 44px 0 16px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--white);font-size:13.5px;
  transition:border-color .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1);
}
.widget-search input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(23,23,23,.06)}
.widget-search button{
  position:absolute;right:4px;top:4px;
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;
  transition:background var(--anim-fast);
}
.widget-search button:hover{background:var(--accent)}

.cat-tree{display:flex;flex-direction:column;gap:1px}
.cat-tree__row{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:8px 0;
  font-size:13.5px;color:var(--muted);text-align:left;
  transition:color var(--anim-fast);
}
.cat-tree__row:hover{color:var(--ink)}
.cat-tree__row.is-current{color:var(--ink);font-weight:600}
.cat-tree__row .tw{color:var(--muted-2);flex:none;transition:transform var(--anim-fast)}
.cat-tree__row.is-open>.tw{transform:rotate(90deg)}
.cat-tree__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-tree__n{font-size:11.5px;color:var(--muted-2);flex:none}
.cat-tree__sub{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--anim-nav);
  padding-left:18px;
}
.cat-tree__sub.is-open{grid-template-rows:1fr}
.cat-tree__sub>div{overflow:hidden}

.price-slider{position:relative;height:44px;margin-top:6px;padding-inline:11px}
.price-slider__rail{
  position:absolute;left:11px;right:11px;top:21px;height:3px;
  background:var(--line);border-radius:2px;
}
.price-slider__fill{
  position:absolute;top:21px;height:3px;background:var(--ink);border-radius:2px;
}
.price-slider__handle{
  position:absolute;top:12px;width:21px;height:21px;
  margin-left:-10.5px;border-radius:50%;
  background:var(--white);border:2px solid var(--ink);
  cursor:grab;transition:transform var(--anim-short),border-color var(--anim-short);
  z-index:2;
}
.price-slider__handle:hover{transform:scale(1.14)}
.price-slider__handle:active{cursor:grabbing;transform:scale(1.2)}
.price-slider__handle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.price-filter__row{
  display:flex;align-items:center;gap:10px;margin-top:6px;
}
.price-filter__out{
  display:inline-flex;align-items:baseline;gap:2px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:5px 13px;font-size:12.5px;font-weight:600;
}
.price-filter__out em{font-style:normal;font-size:11px;color:var(--muted-2)}
.price-filter__dash{color:var(--line-strong);font-size:12px}
.price-filter__row .btn{margin-left:auto}

.check-list{display:flex;flex-direction:column;gap:11px}
.check{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  font-size:13.5px;color:var(--muted);
  transition:color var(--anim-fast);
}
.check:hover{color:var(--ink)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{
  width:19px;height:19px;flex:none;border-radius:6px;
  border:1.5px solid var(--line-strong);background:var(--white);
  position:relative;
  transition:background var(--anim-fast),border-color var(--anim-fast);
}
.check__box::after{
  content:'';position:absolute;left:5.6px;top:2.4px;
  width:5px;height:9.5px;
  border:2px solid #fff;border-top:0;border-left:0;
  transform:rotate(45deg) scale(0);
  transition:transform var(--anim-fast);
}
.check input:checked+.check__box{background:var(--ink);border-color:var(--ink)}
.check input:checked+.check__box::after{transform:rotate(45deg) scale(1)}
.check input:focus-visible+.check__box{outline:2px solid var(--accent);outline-offset:2px}
.check__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.check__count{font-size:11.5px;color:var(--muted-2);flex:none}

.tagcloud{display:flex;flex-wrap:wrap;gap:7px}
.tagcloud a{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;padding:6px 13px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--muted);
  transition:border-color var(--anim-fast),color var(--anim-fast),background var(--anim-fast);
}
.tagcloud a:hover{border-color:var(--ink);color:var(--ink);background:var(--surface)}
.tagcloud a i{
  font-style:normal;font-size:10.5px;font-weight:700;
  color:var(--muted-2);
}
.tagcloud a.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.tagcloud a.is-on i{color:var(--accent)}

/* ---- supply-condition legend (sidebar) ---- */
.cond-legend{display:flex;flex-direction:column;gap:4px}
.cond-legend__row{
  width:100%;display:flex;align-items:flex-start;gap:10px;text-align:left;
  padding:11px 12px;border-radius:12px;border:1px solid transparent;
  transition:background var(--anim-fast),border-color var(--anim-fast);
}
.cond-legend__row:hover{background:var(--surface);border-color:var(--line)}
.cond-legend__row.is-on{background:var(--surface);border-color:var(--ink)}
.cond-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px}
.cond-dot--used{background:#c8871f}
.cond-dot--genuine{background:#2c3a42}
.cond-dot--oem{background:var(--accent)}
.cond-legend__body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.cond-legend__body b{font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.cond-legend__body em{font-size:11px;font-style:normal;color:var(--muted-2)}
.cond-legend__body span{font-size:11.5px;line-height:1.45;color:var(--muted-2);margin-top:3px}
.cond-legend__n{font-size:11.5px;flex:none;color:var(--muted-2);margin-top:2px}

.promo-card{
  border-radius:var(--r-card);padding:24px;
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
}
.promo-card::after{
  content:'';position:absolute;right:-70px;bottom:-70px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(165,182,88,.5) 0%,rgba(165,182,88,0) 68%);
}
.promo-card .eyebrow{color:rgba(255,255,255,.6);position:relative;z-index:1}
.promo-card h4{
  font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:9px;
  position:relative;z-index:1;
}
.promo-card p{
  font-size:13px;color:rgba(255,255,255,.7);line-height:1.5;
  margin:9px 0 18px;position:relative;z-index:1;
}

.products-area{min-width:0}
.products-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
.products-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.active-chips{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:18px;
}
.active-chips[hidden]{display:none}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 8px 0 14px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:12.5px;font-weight:500;
}
.chip button{
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted-2);
  transition:background var(--anim-fast),color var(--anim-fast);
}
.chip button:hover{background:var(--ink);color:#fff}
.chip--clear{
  padding:0 14px;color:var(--muted);cursor:pointer;
  background:none;border-style:dashed;
}
.chip--clear:hover{border-color:var(--ink);color:var(--ink)}

.empty-state{
  grid-column:1/-1;text-align:center;
  padding:70px 24px;border:1px dashed var(--line);border-radius:var(--r-card);
}
.empty-state h3{font-size:19px;margin-bottom:9px}
.empty-state p{font-size:14px;color:var(--muted);margin-bottom:20px}

.pagination{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:clamp(30px,3.4vw,50px);flex-wrap:wrap;
}
.page-btn{
  min-width:44px;height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:500;color:var(--muted);
  transition:border-color var(--anim-fast),color var(--anim-fast),background var(--anim-fast);
}
.page-btn:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.page-btn.is-current{background:var(--ink);border-color:var(--ink);color:#fff}
.page-btn:disabled{opacity:.34;cursor:not-allowed}
.page-dots{color:var(--muted-2);padding-inline:3px}
.pagination__info{
  width:100%;text-align:center;font-size:12.5px;color:var(--muted-2);margin-top:14px;
}

/* ----------------------------------------------------------- 20. newsletter */
.newsletter{
  background:var(--ink);color:#fff;
  border-radius:var(--r-block);
  padding:clamp(32px,5vw,72px);
  position:relative;overflow:hidden;
}
.newsletter::after{
  content:'';position:absolute;right:-110px;top:-110px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(165,182,88,.42) 0%,rgba(165,182,88,0) 68%);
}
.newsletter__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,60px);
  align-items:center;
}
.newsletter h2{
  font-size:clamp(26px,3.4vw,44px);font-weight:600;letter-spacing:-.035em;line-height:1.06;
}
.newsletter p{
  font-size:14.5px;color:rgba(255,255,255,.68);line-height:1.6;margin-top:14px;max-width:44ch;
}
.newsletter__form{display:flex;gap:10px;flex-wrap:wrap}
.newsletter__form input{
  flex:1;min-width:200px;height:52px;padding:0 20px;
  border:1px solid rgba(255,255,255,.24);border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);color:#fff;font-size:14px;
  transition:border-color var(--anim-fast),background var(--anim-fast);
}
.newsletter__form input::placeholder{color:rgba(255,255,255,.5)}
.newsletter__form input:focus{
  outline:none;border-color:#fff;background:rgba(255,255,255,.1);
}
.newsletter__note{
  font-size:11.5px;color:rgba(255,255,255,.45);margin-top:14px;
}

/* --------------------------------------------------------------- 21. footer */
.site-footer{background:var(--ink);color:#fff;margin-top:clamp(24px,3vw,48px)}
.footer-main{padding-block:clamp(48px,6vw,96px)}
.footer-main__inner{
  display:grid;grid-template-columns:1.5fr repeat(3,1fr) 1.4fr;
  gap:clamp(24px,3vw,48px);
}
.footer-brand .brand__text b{color:#fff}
.footer-brand .brand__text i{color:rgba(255,255,255,.4)}
.footer-about{
  font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.62);
  margin:20px 0 22px;max-width:34ch;
}
.footer-social{display:flex;gap:9px}
.footer-social a{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);color:#fff;
  transition:background var(--anim-fast),border-color var(--anim-fast),transform var(--anim-fast);
}
.footer-social a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-3px)}

.footer-col__title{
  font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:20px;
}
.footer-col__head{
  display:none;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;font-size:16px;font-weight:600;
  padding-block:16px;
}
.footer-links{display:flex;flex-direction:column;gap:12px}
.footer-links a{
  font-size:13.5px;color:rgba(255,255,255,.62);
  transition:color var(--anim-fast);
}
.footer-links a:hover{color:#fff}

.footer-contact{display:flex;flex-direction:column;gap:15px}
.footer-contact li{display:flex;gap:12px;font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.5}
.footer-contact b{color:#fff;font-weight:600}
.footer-contact__icon{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);color:var(--accent);
}

.footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom__inner{
  padding-block:24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.footer-bottom p{font-size:12.5px;color:rgba(255,255,255,.5)}
.footer-bottom .muted{display:block;margin-top:4px;color:rgba(255,255,255,.32)}
.pay{display:flex;gap:8px;flex-wrap:wrap}
.pay__badge{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;
  padding:7px 12px;border-radius:8px;
  border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.7);
}

/* ---------------------------------------------------------- 22. floating UI */
.toast{
  position:fixed;left:50%;bottom:32px;z-index:320;
  transform:translate(-50%,calc(100% + 48px));
  display:flex;align-items:center;gap:11px;
  background:var(--ink);color:#fff;
  padding:14px 22px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:500;
  box-shadow:0 18px 44px -14px rgba(23,23,23,.5);
  transition:transform var(--anim-primary);
  max-width:min(92vw,460px);
}
.toast.is-on{transform:translate(-50%,0)}
.toast__dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
}

.fab-col{
  position:fixed;right:24px;bottom:26px;z-index:200;
  display:flex;flex-direction:column;gap:10px;
}
.fab{
  width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--white);color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 10px 28px -12px rgba(23,23,23,.34);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--anim-fast),transform var(--anim-fast),
             visibility var(--anim-fast),background var(--anim-fast),color var(--anim-fast);
}
.fab.is-on{opacity:1;visibility:visible;transform:none}
.fab:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.fab--chat{opacity:1;visibility:visible;transform:none}
.fab--wa{
  opacity:1;visibility:visible;transform:none;
  background:#25D366;color:#fff;border-color:#25D366;
}
.fab--wa:hover{background:#1ebe57;color:#fff;border-color:#1ebe57}

.filter-fab{
  display:none;position:fixed;left:50%;bottom:22px;z-index:190;
  transform:translateX(-50%);
  align-items:center;gap:9px;
  height:48px;padding:0 22px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;
  font-size:13.5px;font-weight:600;
  box-shadow:0 16px 38px -14px rgba(23,23,23,.55);
}
.filter-fab i{
  font-style:normal;min-width:20px;height:20px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);border-radius:var(--r-pill);
  font-size:11px;font-weight:700;
}
.filter-fab.is-empty{padding:0 20px}
.filter-fab.is-empty i{display:none}
body.filters-open{overflow:hidden}
.shop-overlay{
  position:fixed;inset:0;z-index:295;background:rgba(23,23,23,.5);
  opacity:0;visibility:hidden;
  transition:opacity var(--anim-fast),visibility var(--anim-fast);
}
body.filters-open .shop-overlay{opacity:1;visibility:visible}
@media (min-width:993px){.shop-overlay{display:none}}

/* ---------------------------------------- 22a. marque coverage ribbon
   Which marques are covered, stated immediately under the hero so it is
   never more than one glance away. */
.marque-ribbon{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-block:clamp(14px,1.5vw,20px);
  border-bottom:1px solid var(--line-soft);
}
.marque-ribbon__label{
  flex:none;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);
}
/* The track needs a real flex-basis: with a pure flex:1 + min-width:0 it can be
   squeezed onto the label's line and then the nowrap chips overflow the
   viewport instead of the track wrapping below the label. A 320px basis makes
   it wrap onto its own line once the row gets tight. */
.marque-ribbon__track{display:flex;flex-wrap:wrap;gap:7px;flex:1 1 320px;min-width:0}
.marque-ribbon__item{
  display:inline-flex;align-items:center;gap:6px;
  height:31px;padding:0 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--white);
  font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap;
  transition:border-color var(--anim-fast),color var(--anim-fast),
             background var(--anim-fast),transform var(--anim-fast);
}
.marque-ribbon__item i{
  font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
.marque-ribbon__item:hover{
  border-color:var(--ink);color:var(--ink);transform:translateY(-2px);
}
.marque-ribbon__item:hover i{color:var(--accent-deep)}
.marque-ribbon__all{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--ink);
}
.marque-ribbon__all svg{transition:transform var(--anim-nav)}
.marque-ribbon__all:hover svg{transform:translateX(5px)}

/* ---------------------------------------- 22b. the three lines of business
   The whole business is three supply conditions, so this block is the
   page's main statement rather than a merchandising row. Each card carries
   a coloured rule that matches the badge colour on the product cards, so
   a part's origin is readable at a glance in both places. */
#conditions,#brands{scroll-margin-top:112px}
.lines-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.line-card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(22px,2.1vw,32px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;
  transition:border-color var(--anim-fast),transform var(--anim-fast);
}
.line-card:hover{border-color:rgba(23,23,23,.22);transform:translateY(-4px)}
.line-card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--line-c,var(--accent));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--anim-nav);
}
.line-card:hover::before,.line-card.is-in::before{transform:scaleX(1)}
.line-card--used{--line-c:#c8871f}
.line-card--genuine{--line-c:#2c3a42}
.line-card--oem{--line-c:var(--accent)}
.line-card__no{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--muted-2);
}
.line-card__cn{
  margin-top:13px;font-size:clamp(24px,2.5vw,33px);font-weight:700;
  letter-spacing:-.02em;line-height:1.08;
}
.line-card__en{
  margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.line-card__note{margin-top:15px;font-size:13.5px;line-height:1.62;color:var(--muted)}
.line-card__spread{
  margin-top:auto;padding-top:22px;
  display:flex;flex-direction:column;gap:2px;
}
.line-card__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-block:9px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--muted-2);
}
.line-card__row b{
  font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
}
.line-card__go{
  margin-top:18px;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--ink);
}
.line-card__go .arrow{transition:transform var(--anim-nav)}
.line-card:hover .line-card__go .arrow{transform:translateX(6px)}

/* ------------------------------------------------- 22c. marque / model wall
   Two panes: the marque list is the control, the panel is the detail.
   Every count here is counted off window.PRODUCTS at render time. */
.marque-origins{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.marque-origin{
  height:34px;padding:0 15px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--white);color:var(--muted);
  font-size:12.5px;font-weight:500;font-family:inherit;
  display:inline-flex;align-items:center;gap:7px;
  transition:border-color var(--anim-fast),color var(--anim-fast),
             background var(--anim-fast);
}
.marque-origin:hover{border-color:var(--ink);color:var(--ink)}
.marque-origin.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.marque-origin i{font-style:normal;font-size:11px;font-weight:700;color:var(--muted-2)}
.marque-origin.is-on i{color:var(--accent)}
.marque-wrap{
  display:grid;grid-template-columns:minmax(0,286px) minmax(0,1fr);
  gap:16px;margin-top:22px;align-items:start;
}
.marque-list{
  display:flex;flex-direction:column;gap:1px;
  padding:8px;max-height:552px;overflow-y:auto;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
}
.marque-btn{
  width:100%;display:flex;align-items:center;gap:10px;text-align:left;
  padding:9px 11px;border-radius:11px;border:1px solid transparent;
  background:transparent;color:var(--muted);font-family:inherit;font-size:13.5px;
  transition:background var(--anim-fast),color var(--anim-fast);
}
.marque-btn:hover{background:var(--surface);color:var(--ink)}
.marque-btn.is-on{background:var(--ink);color:#fff}
.marque-btn b{font-weight:600;letter-spacing:-.012em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.marque-btn em{font-style:normal;font-size:12px;color:var(--muted-2);flex:none}
.marque-btn.is-on em{color:rgba(255,255,255,.62)}
.marque-btn span{margin-left:auto;flex:none;font-size:11.5px;font-weight:600;
  color:var(--muted-2);font-variant-numeric:tabular-nums}
.marque-btn.is-on span{color:var(--accent)}
.marque-panel{
  padding:clamp(20px,2.2vw,30px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
}
.marque-panel__top{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:16px;
  padding-bottom:20px;border-bottom:1px solid var(--line-soft);
}
.marque-panel__id{display:flex;flex-direction:column;gap:6px}
.marque-panel__id h3{
  font-size:clamp(21px,2.1vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.1;
}
.marque-panel__id h3 span{color:var(--muted-2);font-weight:400;margin-left:9px}
.marque-panel__id p{font-size:12.5px;color:var(--muted-2)}
.marque-panel__facts{display:flex;gap:clamp(18px,2vw,34px)}
.marque-fact{display:flex;flex-direction:column;gap:3px}
.marque-fact b{
  font-size:clamp(19px,1.7vw,25px);font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.marque-fact span{font-size:11.5px;color:var(--muted-2)}
.model-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:10px;margin-top:20px;
}
.model-chip{
  display:flex;flex-direction:column;gap:5px;
  padding:13px 15px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);
  transition:border-color var(--anim-fast),transform var(--anim-fast),
             background var(--anim-fast);
}
.model-chip:hover{border-color:var(--ink);background:var(--white);transform:translateY(-2px)}
.model-chip b{font-size:13.5px;font-weight:600;letter-spacing:-.015em}
/* the chassis code is the real identifier for a model, so it stays
   high-contrast rather than tinted -- it is the line people scan for */
.model-chip em{
  font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-2);
  letter-spacing:.01em;
}
.model-chip span{font-size:11.5px;color:var(--muted-2)}
.model-chip .n{
  margin-top:3px;font-size:11px;font-weight:600;color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
.marque-empty{font-size:13px;color:var(--muted-2);padding:16px 0}

@media (max-width:1360px){
  .marque-wrap{grid-template-columns:minmax(0,250px) minmax(0,1fr)}
}
@media (max-width:1180px){
  .lines-grid{grid-template-columns:1fr;gap:12px}
  .line-card__spread{padding-top:18px}
  .marque-wrap{grid-template-columns:1fr}
  .marque-list{
    max-height:230px;flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;
  }
  .marque-btn{width:auto;flex:none}
  .marque-btn span{margin-left:8px}
}
@media (max-width:768px){
  .marque-panel__top{align-items:flex-start}
  .marque-panel__facts{gap:22px}
  .model-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .model-chip{padding:11px 13px}
}
@media (max-width:480px){
  .model-grid{grid-template-columns:1fr 1fr}
  .marque-origin{height:32px;padding:0 13px;font-size:12px}
}

/* ------------------------------------------------------------- 23. responsive */
@media (max-width:1360px){
  :root{--page-pad:32px}
  .mega__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footer-main__inner{grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
  .footer-brand{grid-column:1/-1}
  .footer-about{max-width:60ch}
  .footer-main__inner>.footer-col--contact{grid-column:1/-1}
}

@media (max-width:1180px){
  .nav__link{--nav-pad:14px;font-size:13.5px}
  .header-actions__cart{padding:0 16px 0 6px}
  .coll-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .coll-card--wide{grid-row:auto;min-height:clamp(230px,22vw,300px)}
  .coll-card--wide .coll-card__media img{width:min(300px,74%)}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__grid{grid-template-columns:1fr}
  .hero__side{grid-template-columns:1fr}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .products-grid.products-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:992px){
  :root{--page-pad:24px;--h-header:68px}

  /* swap desktop chrome for the mobile bar + drawer */
  .topbar__social,.topbar__links{display:none}
  .topbar__inner{grid-template-columns:1fr;text-align:center}
  .topbar__note{text-align:center;font-size:12px}

  .site-header{display:none}
  .mobile-bar{display:block}

  .shop-layout{grid-template-columns:1fr}
  .sidebar{
    position:fixed;top:0;right:0;bottom:0;z-index:300;
    width:min(420px,92vw);background:var(--white);
    border-radius:var(--r-block) 0 0 var(--r-block);
    padding:20px 24px 28px;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(103%);visibility:hidden;
    transition:transform var(--anim-nav),visibility var(--anim-nav);
    box-shadow:-24px 0 60px -30px rgba(23,23,23,.4);
  }
  body.filters-open .sidebar{transform:translateX(0);visibility:visible}
  .sidebar__head{display:flex}
  .filter-fab{display:none}
  .products-grid{padding-bottom:28px}
  .view-switch{display:none}
  .tool--perpage{display:none}

  .products-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .products-grid.products-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .products-grid.is-list .pcard__media{width:170px}
  .newsletter__inner{grid-template-columns:1fr}
  .stats__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3)::before{display:none}
  .stat:nth-child(odd)::before{display:none}
  .fab-col{right:16px;bottom:82px}
}

@media (max-width:768px){
  :root{--page-pad:18px}
  .section{padding-block:clamp(40px,8vw,60px)}
  .hero__tile{min-height:min(78vw,420px)}
  .hero__tile--dark{min-height:min(96vw,470px)}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:12px}
  .hero__body{padding:22px}
  .hero__sub{max-width:none}
  .hero__cta .btn{width:100%}

  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .products-grid.products-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .products-grid.is-list{grid-template-columns:1fr}
  .products-grid.is-list .pcard{flex-direction:column}
  .products-grid.is-list .pcard__media{width:100%;aspect-ratio:1/1}
  .products-grid.is-list .pcard__body{padding:18px 20px 20px;min-height:0}
  .products-grid.is-list .pcard__title{font-size:14.5px;-webkit-line-clamp:2;min-height:2.7em}

  .pcard__body{padding:14px 15px 16px;gap:7px}
  .pcard__title{font-size:13.5px}
  .pcard__sku b{font-size:13.5px}
  .pcard__cart{width:36px;height:36px}
  .pcard__wa{width:36px;height:36px}
  .pcard__quick{opacity:1;transform:none;top:9px;right:9px}
  .qbtn{width:32px;height:32px}
  .flag{font-size:9.5px;padding:4px 8px}
  .pcard__flags{top:9px;left:9px}
  /* The quick-actions are pinned open at this width, so the decorative chat
     bubble would sit on top of the compare button. Keep back-to-top only. */
  .fab--chat{display:none}

  .toolbar{position:static}
  .toolbar__inner{padding-block:11px;gap:10px}
  .filter-tabs{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -ms-overflow-style:none;width:100%;flex:none;
    padding-bottom:3px;
  }
  .filter-tabs::-webkit-scrollbar{display:none}
  .filter-tab{flex:none}
  /* The count reads "Showing 1–24 of 3,853 parts" and is nowrap by default,
     so on a 320px screen it pushed the row wider than the viewport. Give it
     its own full-width line (order:-1 so it sits above the two selects) and
     let the text wrap if it must. */
  .toolbar__tools{width:100%;justify-content:space-between;flex-wrap:wrap}
  .result-count{order:-1;flex:1 1 100%;font-size:12px;white-space:normal}

  .coll-grid{grid-template-columns:1fr}
  .coll-card--wide{grid-column:span 1;grid-row:auto;min-height:0}
  .coll-card--wide .coll-card__media img{width:min(220px,66%)}
  .cat-grid{grid-template-columns:1fr}

  .footer-main__inner{grid-template-columns:1fr;gap:0}
  .footer-brand{grid-column:auto;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
  .footer-col{border-bottom:1px solid rgba(255,255,255,.1);padding-block:4px}
  .footer-col__title{display:none}
  .footer-col__head{display:flex}
  .footer-col__head svg{transition:transform var(--anim-fast);color:rgba(255,255,255,.45)}
  .footer-col__head.is-open svg{transform:rotate(180deg)}
  .footer-col__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--anim-nav)}
  .footer-col__body.is-open{grid-template-rows:1fr}
  .footer-col__body>div{overflow:hidden}
  .footer-links{padding-bottom:18px}

  .footer-bottom__inner{flex-direction:column;align-items:flex-start;gap:14px}
}

@media (max-width:480px){
  .stats__row{grid-template-columns:1fr}
  .stat+.stat::before{display:none}
  .stat{border-top:1px solid var(--line-soft);padding-block:22px}
  .stat:first-child{border-top:0}
  .hero__stats{grid-template-columns:1fr}
  .pagination{gap:5px}
  .page-btn{min-width:40px;height:40px;padding:0 11px;font-size:12.5px}
  .fab-col{right:12px}
  .products-grid{gap:10px}
}

/* ------------------------------------------------------ 24. print / fallback */
@media print{
  .topbar,.site-header,.mobile-bar,.fab-col,.filter-fab,.toolbar,.sidebar{display:none!important}
  body{color:#000}
}

/* ---------------------------------------------------- 25. product detail */
.pcard__shot{display:block;height:100%;color:inherit}
.pcard__shot:hover{text-decoration:none}
.pcard__title a{color:inherit}
.pcard__title a:hover{text-decoration:none}
.pdp{padding:28px 0 80px}
.pdp__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
  gap:clamp(22px,4vw,48px);
  align-items:start;
}
.pdp__stage{
  display:block;width:100%;padding:0;cursor:zoom-in;
  aspect-ratio:1;overflow:hidden;
  background:#f4f5f2;border:1px solid var(--line);border-radius:8px;
}
.pdp__stage img{width:100%;height:100%;object-fit:contain;background:#fff}
.pdp__thumbs{display:flex;gap:8px;margin-top:10px;overflow:auto}
.pdp__thumb{
  width:72px;height:72px;flex:none;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:6px;background:#fff;
}
.pdp__thumb.is-on{border-color:var(--ink)}
.pdp__thumb img{width:100%;height:100%;object-fit:cover}
.pdp__kicker{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);
}
.pdp__summary{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.pdp__specs{margin-top:18px;border-top:1px solid var(--line)}
.pdp__row{
  display:grid;grid-template-columns:minmax(108px,148px) minmax(0,1fr);
  gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14px;
}
.pdp__row dt{color:var(--muted-2);font-weight:600}
.pdp__row dd{min-width:0;overflow-wrap:anywhere}
.pdp__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pdp__wa{
  height:48px;padding:0 16px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:8px;
  background:#25D366;color:#fff;font-size:14px;font-weight:600;
}
.pdp__wa:hover{background:#1ebe57;text-decoration:none}
.fit-wrap{margin-top:46px}
.fit-wrap h2{font-size:22px;font-weight:600;letter-spacing:-.03em;margin-bottom:12px}
.fit-scroll{max-height:460px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.fit-table{width:100%;border-collapse:collapse;font-size:13.5px}
.fit-table th{
  position:sticky;top:0;z-index:1;background:#f3f4ef;text-align:left;
  padding:10px 12px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
}
.fit-table td{padding:9px 12px;border-top:1px solid var(--line-soft);vertical-align:top}
.fit-table tbody tr:nth-child(even){background:#fafaf8}
.pdp-light{position:relative;border:0;padding:0;background:transparent;max-width:min(920px,92vw)}
.pdp-light::backdrop{background:rgba(23,23,23,.72)}
.pdp-light img{width:min(920px,92vw);height:auto;background:#fff;border-radius:8px}
.pdp-light__x{
  position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;
  background:#fff;color:var(--ink);border:1px solid var(--line);
}
.sale-pop{
  position:fixed;left:18px;bottom:18px;z-index:210;
  width:min(360px,calc(100vw - 36px));
  display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;
  padding:12px 36px 12px 12px;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px -20px rgba(23,23,23,.48);
  transform:translateY(14px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,transform .35s ease,visibility .35s;
}
.sale-pop[hidden]{display:none!important}
.sale-pop.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.sale-pop__link{display:contents;color:inherit}
.sale-pop__link:hover{text-decoration:none}
.sale-pop img{width:74px;height:74px;object-fit:cover;border-radius:8px;background:#f4f5f2}
.sale-pop__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.sale-pop__kicker{font-size:12px;color:var(--muted)}
.sale-pop__name{
  font-size:13.5px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sale-pop__meta{font-size:12px;color:var(--muted-2)}
.sale-pop__view{font-size:12px;font-weight:700;color:var(--accent-deep)}
.sale-pop__x{
  position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted);
}
.sale-pop__x:hover{background:var(--surface);color:var(--ink)}
@media (max-width:860px){
  .pdp__grid{grid-template-columns:1fr}
  .pdp__row{grid-template-columns:1fr;gap:3px}
}
@media (max-width:992px){
  .sale-pop{bottom:86px}
}
@media (prefers-reduced-motion:reduce){
  .sale-pop{transition:none}
}
@media print{
  .sale-pop,.pdp__actions{display:none!important}
}