/* ─── TOKENS ─────────────────────────────────────────── */
:root{
  --blue:var(--brand-blue); --text:#1d1d1f; --t2:#515154; --t3:#6b6b6e;
  --bg:#fff; --bdr:rgba(0,0,0,0.08); --r:12px;
  --green:#1a8a3a; --amber:#b45309; --wine:#9a1a3b;
  --font: 'InterVariable', 'Inter', -apple-system, BlinkMacSystemFont,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{overflow-x:clip;}
body{font-family:var(--font);background:#fff;color:var(--text);overflow-x:clip;}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}

/* sh-* header styles → styles/site-header.css */
/* ─── BREADCRUMB ──────────────────────────────────────── */
.bc{
  display:flex;align-items:center;gap:8px;padding:10px 32px;
  font-size:12px;color:var(--t3);border-bottom:1px solid var(--bdr);
  background:#fff;
}
.bc a{color:var(--t3);}
.bc a:hover{color:var(--blue);}
.bc-sep{font-size:10px;}

/* ─── PAGE WRAP ───────────────────────────────────────── */
.page{max-width:1680px;margin:0 auto;padding:0 40px 72px;}

/* ─── HERO HEADING ────────────────────────────────────── */
.hero-h{
  font-size:clamp(28px,3.2vw,44px);font-weight:700;letter-spacing:-.04em;
  line-height:1.1;padding:48px 0 14px;color:var(--text);
  font-family:'InterVariable','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
}
.hero-body{font-size:clamp(15px,1.4vw,17px);line-height:1.55;color:var(--t2);max-width:880px;margin:-4px 0 32px;}

/* ─── SHOP TYPE BLOCKS ────────────────────────────────── */
.type-row{
  display:grid;
  grid-template-columns:3fr 1fr;
  gap:16px;
  margin-bottom:44px;
  align-items:stretch;
}
/* inner 3 shop-type blocks */
.type-blocks{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.type-block{
  border:1.5px solid var(--bdr);border-radius:var(--r);overflow:hidden;
  cursor:pointer;position:relative;background:#fff;
  transition:border-color 220ms,box-shadow 220ms,transform 180ms;
  min-height:140px;
}
.type-block:hover{
  border-color:rgba(0,0,0,0.16);
  box-shadow:0 6px 22px -4px rgba(0,0,0,0.10);
  transform:translateY(-2px);
}
.type-block.on{
  border-color:var(--blue);
  box-shadow:0 0 0 3.5px rgba(0,102,204,0.13),0 6px 22px -4px rgba(0,102,204,0.15);
  transform:translateY(-2px);
}
.type-block-inner{padding:18px 20px 16px;display:flex;flex-direction:column;gap:5px;height:100%;}
.type-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--t3);}
.type-name{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.18;color:var(--text);}
.type-block.on .type-name{color:var(--blue);}
.type-desc{font-size:11.5px;color:var(--t3);line-height:1.4;margin-top:2px;}
.type-img{
  position:absolute;right:0;bottom:0;width:60%;height:100%;
  object-fit:cover;object-position:center;
  opacity:.18;pointer-events:none;
  transition:opacity 250ms,transform 320ms;
}
.type-block:hover .type-img,.type-block.on .type-img{opacity:.28;transform:scale(1.04);}
.type-active-chip{
  display:inline-flex;align-items:center;gap:4px;margin-top:auto;padding-top:8px;
  height:20px;padding:0 8px;border-radius:5px;
  background:var(--blue);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.03em;
  opacity:0;transform:translateY(4px);
  transition:opacity 200ms,transform 200ms;align-self:flex-start;
}
.type-block.on .type-active-chip{opacity:1;transform:translateY(0);}

/* advert block — always pinned to far right */
.adv-block{
  border-radius:var(--r);overflow:hidden;
  background:linear-gradient(145deg,#0f1923 0%,#0a1420 60%,#061018 100%);
  color:#fff;display:flex;flex-direction:column;
  min-height:140px;position:relative;
}
.adv-l{padding:16px 16px 14px;flex:1;display:flex;flex-direction:column;gap:5px;position:relative;z-index:2;}
.adv-tag{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.35);}
.adv-ttl{font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.25;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.adv-sub{font-size:11px;color:rgba(255,255,255,0.5);line-height:1.4;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.adv-cta{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  height:28px;padding:0 12px;border-radius:7px;margin-top:auto;
  background:rgba(255,255,255,0.14);color:#fff;font:600 11.5px var(--font);
  border:none;cursor:pointer;transition:background 150ms;
}
.adv-cta:hover{background:rgba(255,255,255,0.24);}
.adv-img-overlay{
  position:absolute;right:0;bottom:0;width:50%;height:100%;
  pointer-events:none;overflow:hidden;
}
.adv-img-overlay::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:60%;
  background:linear-gradient(to right,#0f1923,transparent);z-index:1;
}
.adv-img-overlay img{
  width:100%;height:100%;object-fit:cover;opacity:.5;
  transition:opacity 350ms,transform 450ms;
}
.adv-block:hover .adv-img-overlay img{opacity:.65;transform:scale(1.04);}

/* ─── FILTER BAR ──────────────────────────────────────── */
.fbar{
  position:relative;top:auto;z-index:10;
  padding:10px 0 6px;
  margin:0;
  background:transparent;border-bottom:none;
}
.fbar-inner{
  max-width:none;margin:0 auto;
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  border-radius:10px;
  background:rgba(0,0,0,0.04);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;
  border:1px solid rgba(0,0,0,0.08);
  padding:8px 16px;
}
.fbar-filters{display:flex;align-items:center;gap:7px;flex:1;flex-wrap:nowrap;min-width:0;}
.fbar-r{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.fbar-vt{display:flex;gap:4px;}
/* dropdown pill */
.fd{
  display:inline-flex;align-items:center;gap:5px;
  height:34px;padding:0 12px;border-radius:8px;
  border:1.5px solid rgba(0,0,0,0.12);background:#fff;
  font:500 12.5px var(--font);color:var(--text);cursor:pointer;
  white-space:nowrap;transition:border-color 150ms,background 150ms;position:relative;
}
.fd:hover{border-color:rgba(0,0,0,0.22);}
.fd.on{border-color:var(--blue);background:rgba(0,102,204,.04);color:var(--blue);}
/* chevrons match megamenu nav style: 11px, stroke-width 2.2 */
.fd svg{width:11px;height:11px;stroke:var(--t3);stroke-width:2.2;flex-shrink:0;transition:transform 200ms;}
.fd.on svg:last-child{transform:rotate(180deg);}
.fd.on svg{stroke:var(--blue);}
.fd svg:first-child{stroke-width:2;}
/* tab pills on right */
.fbar-tabs{display:flex;gap:5px;position:relative;flex-shrink:0;}
.fbar-pill{
  position:absolute;z-index:1;top:0;left:0;height:34px;border-radius:8px;
  background:var(--blue);box-shadow:0 2px 10px rgba(0,102,204,.28);
  transition:transform 360ms cubic-bezier(.34,1.56,.64,1),width 240ms ease;
  pointer-events:none;
}
.ftab{
  position:relative;z-index:2;height:34px;padding:0 14px;border-radius:8px;
  border:none;background:transparent;font:500 12.5px var(--font);
  color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;
  transition:color 150ms;white-space:nowrap;
}
.ftab.on{color:#fff;}
.ftab:not(.on):hover{background:rgba(0,0,0,0.04);color:var(--text);}

/* ─── PRODUCT GRID ────────────────────────────────────── */
/* ─── CATEGORY SECTION ─────────────────────────────────── */
.cat-sec{
  display:flex;align-items:stretch;
  padding:22px 0;border-bottom:1px solid var(--bdr);
  margin-bottom:0;gap:0;
}
.cat-sec-l{
  flex-shrink:0;width:300px;padding-right:22px;
  display:flex;flex-direction:column;gap:16px;justify-content:center;
}
.cat-sec-hd{font-size:18px;font-weight:700;letter-spacing:-.04em;line-height:1.18;white-space:nowrap;}
/* tabs look exactly like filter bar pills, with animated blue pill behind active */
.cat-tabs{display:flex;gap:3px;position:relative;flex-wrap:nowrap;background:rgba(0,0,0,0.04);border-radius:11px;padding:3px;width:fit-content;}
.cat-pill{
  position:absolute;z-index:1;top:3px;left:3px;height:calc(100% - 6px);border-radius:8px;
  background:var(--blue);box-shadow:0 2px 8px rgba(0,102,204,.28);
  transition:transform 360ms cubic-bezier(.34,1.56,.64,1),width 240ms ease;
  pointer-events:none;
}
.cat-tab{
  position:relative;z-index:2;height:34px;padding:0 13px;border-radius:8px;
  border:none;background:transparent;
  font:500 12.5px var(--font);color:var(--t2);cursor:pointer;
  display:inline-flex;align-items:center;white-space:nowrap;
  transition:color 200ms;
}
.cat-tab.on{color:#fff;}
.cat-tab:not(.on):hover{color:var(--text);}
.cat-sep{
  width:1px;background:var(--bdr);flex-shrink:0;margin:0 28px;
}
.cat-rail-wrap{flex:1;overflow:hidden;display:flex;align-items:center;}
.cat-rail{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
  gap:8px;padding:4px 2px;width:100%;
}
.cat-rail::-webkit-scrollbar{display:none;}
.cat-tile{
  flex:1;min-width:0;min-height:90px;border-radius:10px;
  border:1.5px solid var(--bdr);background:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;padding:12px 8px;
  transition:border-color 200ms,box-shadow 200ms,transform 150ms;
}
.cat-tile:hover{border-color:rgba(0,0,0,0.22);transform:translateY(-1px);}
.cat-tile.on{
  border:2px solid var(--text);
  box-shadow:0 0 0 1.5px var(--text) inset;
  background:#fafafa;
}
.cat-tile svg{color:var(--text);flex-shrink:0;width:28px;height:28px;}
.cat-tile-lbl{font-size:12px;font-weight:600;color:var(--text);text-align:center;line-height:1.2;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;justify-content:center;}
.cat-tile-ct{font-size:10.5px;color:var(--blue);font-weight:700;}
.cat-tile.on .cat-tile-lbl{font-weight:700;}
.cat-tile.on .cat-tile-ct{color:var(--blue);}

/* ─── PRODUCT GRID ────────────────────────────────────── */
.pgrid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;background:#fff;
  padding:12px;border-radius:var(--r);
}
@media(max-width:1400px){.pgrid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:680px){.pgrid{grid-template-columns:repeat(2,1fr);gap:8px;padding:8px;}}

/* ─── PRODUCT CARD ────────────────────────────────────── */
.card{
  border:none;border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;background:#fff;
  transition:box-shadow 200ms,transform 180ms;cursor:pointer;position:relative;
}
.card:hover{box-shadow:0 12px 36px -6px rgba(0,0,0,.14);transform:translateY(-2px);z-index:2;}
.card-img{
  aspect-ratio:1;background:#f8f8fa;position:relative;overflow:hidden;
}
.card-img img{
  width:100%;height:100%;object-fit:contain;padding:10px;
  transition:transform 320ms ease;
  image-rendering:auto;
}
.card:hover .card-img img{transform:scale(1.06);}
.card-bdg{
  position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:3px;
}
.bdg{
  height:18px;padding:0 6px;border-radius:4px;
  font-size:9.5px;font-weight:700;letter-spacing:.05em;
  display:inline-flex;align-items:center;
}
.bdg-sale{background:#d0312d;color:#fff;}
.bdg-new{background:var(--blue);color:#fff;}
.bdg-oos{background:rgba(0,0,0,0.28);color:#fff;}
.bdg-oem{background:#1d2d44;color:#fff;}
.bdg-compat{background:var(--blue);color:#fff;}
.bdg-refurb{background:var(--amber);color:#fff;}
.bdg-used{background:var(--t2);color:#fff;}
.card-body{padding:12px 14px 6px;flex:1;display:flex;flex-direction:column;gap:3px;}
.card-brand{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);}
.card-name{font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.015em;}
.card-desc{font-size:12.5px;color:var(--t2);line-height:1.4;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-foot{padding:10px 14px 12px;display:flex;flex-direction:column;gap:7px;}
.card-price-wrap{display:flex;flex-direction:column;gap:2px;}
.card-price{font-size:20px;font-weight:700;letter-spacing:-.04em;}
.card-was-row{display:flex;align-items:center;gap:5px;}
.card-was{font-size:12px;color:var(--t3);text-decoration:line-through;}
.card-save{font-size:11px;font-weight:700;color:#d0312d;}
.card-actions{display:flex;align-items:center;gap:7px;}
/* CTA: tonal by default (calm, scannable) → solid blue on hover/focus.
   Avoids a "wall of blue" buttons competing across every card. */
.btn-cart{
  height:34px;padding:0 14px;border-radius:9px;
  background:rgba(0,102,204,0.10);border:none;cursor:pointer;
  font:600 13px var(--font);color:var(--blue);
  display:flex;align-items:center;justify-content:center;gap:8px;flex:1;
  transition:background 180ms cubic-bezier(.32,.72,0,1),color 180ms,box-shadow 180ms,transform 180ms;
  white-space:nowrap;
}
.btn-cart svg{width:13px;height:13px;stroke-width:2;flex-shrink:0;}
.btn-cart:hover,.btn-cart:focus-visible{background:var(--blue);color:#fff;box-shadow:0 8px 18px -8px rgba(0,102,204,0.6);transform:translateY(-1px);}
.btn-cart:active{transform:translateY(0) scale(.98);}
.btn-cart:disabled{background:rgba(0,0,0,0.06);color:var(--t3);cursor:not-allowed;}
.btn-view{
  font:500 14px var(--font);color:var(--t2);background:none;border:none;
  cursor:pointer;display:flex;align-items:center;gap:3px;white-space:nowrap;
  transition:color 150ms;margin-left:auto;
}
.btn-view:hover{color:var(--blue);}
.btn-view svg{width:10px;height:10px;stroke-width:2.5;}
/* quick-add hover button */
.card-qadd{position:absolute;bottom:8px;right:8px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:8px;background:var(--blue);border:none;font:600 12px var(--font);color:#fff;cursor:pointer;opacity:0;transform:translateY(5px);transition:opacity 180ms,transform 180ms;z-index:3;pointer-events:none;}
.card-qadd svg{width:15px;height:15px;stroke-width:2;flex-shrink:0;}
.card:hover .card-qadd{opacity:1;transform:translateY(0);pointer-events:auto;}

/* ─── EXPAND DRAWER ───────────────────────────────────── */
.card-expand{
  display:none;border-top:1px solid var(--bdr);
  background:linear-gradient(to bottom,#fafafa,#fff);
  overflow:hidden;
}
.card-expand.on{display:block;}
.exp-inner{padding:16px 14px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.exp-section{display:flex;flex-direction:column;gap:6px;}
.exp-h{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-bottom:2px;}
.exp-spec{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(0,0,0,0.05);font-size:12px;}
.exp-spec-k{color:var(--t3);}
.exp-spec-v{font-weight:600;color:var(--text);}
.exp-ctas{display:flex;gap:7px;flex-wrap:wrap;padding-top:6px;}
.btn-full{
  height:32px;padding:0 14px;border-radius:7px;
  background:var(--blue);border:none;cursor:pointer;
  font:600 12.5px var(--font);color:#fff;flex-shrink:0;
  transition:background 150ms;
}
.btn-full:hover{background:#005bb5;}
.btn-wish{
  height:32px;padding:0 12px;border-radius:7px;
  border:1.5px solid var(--bdr);background:#fff;cursor:pointer;
  font:500 12px var(--font);color:var(--t2);flex-shrink:0;
  transition:border-color 150ms,color 150ms;
}
.btn-wish:hover{border-color:var(--blue);color:var(--blue);}

/* ─── PRE-OWNED EXTRAS ────────────────────────────────── */
.po-score-row{display:flex;align-items:center;gap:8px;padding:8px 14px 0;}
.po-score-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);white-space:nowrap;}
.po-track{flex:1;height:3px;background:rgba(0,0,0,.07);border-radius:2px;overflow:hidden;}
.po-fill{height:100%;border-radius:2px;}
.po-val{font-size:11.5px;font-weight:700;width:28px;text-align:right;flex-shrink:0;}
.po-war{
  margin:4px 14px 0;display:inline-flex;align-items:center;gap:4px;align-self:flex-start;
  height:18px;padding:0 7px;border-radius:4px;
  background:rgba(0,102,204,.06);color:var(--blue);font-size:10px;font-weight:600;
}
.po-gbdg{height:18px;padding:0 7px;border-radius:4px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;}
.po-gA{background:#edfaf3;color:var(--green);}
.po-gB{background:#fef3c7;color:var(--amber);}
.po-gC{background:#fce8ee;color:var(--wine);}

/* ─── ADDONS (post cart section) ─────────────────────── */
.addons{border-top:1px solid var(--bdr);}
.addons-hdr{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;border:none;background:none;cursor:pointer;
  font-family:var(--font);transition:background 120ms;
}
.addons-hdr:hover{background:rgba(0,0,0,0.02);}
.addons-lbl{font-size:11.5px;font-weight:600;color:var(--t2);}
.addons-xtra{font-size:11.5px;font-weight:700;color:var(--blue);}
.addons-chev{color:var(--t3);transition:transform 230ms;flex-shrink:0;}
.addons-hdr.open .addons-chev{transform:rotate(180deg);}
.addons-body{padding:0 14px 12px;display:none;flex-direction:column;gap:7px;}
.addons-body.on{display:flex;}
.adr{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;border:1.5px solid var(--bdr);background:#fafafa;}
.adr-info{flex:1;min-width:0;}
.adr-name{font-size:11.5px;font-weight:600;color:var(--text);}
.adr-sub{font-size:10px;color:var(--t3);margin-top:1px;}
.adr-amt{font-size:12.5px;font-weight:700;flex-shrink:0;}
.adr-sw{width:34px;height:19px;border-radius:999px;border:none;background:rgba(0,0,0,.12);cursor:pointer;position:relative;transition:background 200ms;flex-shrink:0;}
.adr-sw.on{background:var(--blue);}
.adr-sw::after{content:'';position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform 200ms;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.adr-sw.on::after{transform:translateX(15px);}
.svc-g{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:100%;}
.svc-o{padding:6px 8px;border-radius:7px;border:1.5px solid var(--bdr);background:#fff;cursor:pointer;text-align:center;transition:all 150ms;}
.svc-o:hover{border-color:var(--blue);}
.svc-o.on{background:rgba(0,102,204,.06);border-color:var(--blue);}
.svc-o-l{font-size:10px;font-weight:600;color:var(--text);display:block;}
.svc-o-p{font-size:9.5px;color:var(--t3);display:block;margin-top:1px;}
.svc-o.on .svc-o-p{color:var(--blue);}
.addons-tot{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid var(--bdr);margin-top:2px;}
.addons-tot-l{font-size:12px;font-weight:600;color:var(--t2);}
.addons-tot-v{font-size:15px;font-weight:700;}

/* ─── PAGINATION ──────────────────────────────────────── */
.pag{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0 0;border-top:1px solid var(--bdr);margin-top:0;
}
.pag-info{font-size:12.5px;color:var(--t3);}
.pag-controls{display:flex;align-items:center;gap:8px;}
.pag-btn{
  width:30px;height:30px;border-radius:7px;border:1.5px solid var(--bdr);
  background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--t2);transition:all 150ms;
}
.pag-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue);}
.pag-btn:disabled{opacity:.4;cursor:not-allowed;}
.pag-btn svg{width:11px;height:11px;stroke-width:2.5;}
.pag-dots{display:flex;gap:4px;align-items:center;}
.pag-dot{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.15);}
.pag-dot.on{background:var(--blue);width:18px;border-radius:3px;}
.btn-browse{
  height:30px;padding:0 14px;border-radius:7px;
  border:1.5px solid var(--bdr);background:#fff;
  font:500 12.5px var(--font);color:var(--t2);cursor:pointer;
  transition:border-color 150ms,color 150ms;
}
.btn-browse:hover{border-color:var(--blue);color:var(--blue);}

/* ─── FILTER BAR SEARCH ──────────────────────────────── */
.fbar-search{
  display:flex;align-items:center;gap:8px;
  height:34px;padding:0 14px;border-radius:8px;
  border:1.5px solid rgba(0,0,0,0.12);background:#fff;
  transition:border-color 150ms,box-shadow 150ms;flex-shrink:0;
}
.fbar-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,102,204,0.1);}
.fbar-search svg{width:14px;height:14px;stroke:var(--t3);stroke-width:2.4;flex-shrink:0;}
.fbar-search:focus-within svg{stroke:var(--blue);}
.fbar-search input{border:none;background:none;font:13px var(--font);color:var(--text);outline:none;width:200px;}
.fbar-search input::placeholder{color:#ababab;}
/* fbar toggle */
.fbar-toggle{display:flex;align-items:center;gap:6px;font:500 11.5px var(--font);color:var(--t2);cursor:pointer;white-space:nowrap;}
.fbar-switch{width:32px;height:18px;border-radius:999px;background:rgba(0,0,0,0.12);border:none;cursor:pointer;position:relative;flex-shrink:0;transition:background 200ms;}
.fbar-switch.on{background:var(--blue);}
.fbar-switch::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform 200ms;box-shadow:0 1px 3px rgba(0,0,0,0.18);}
.fbar-switch.on::after{transform:translateX(14px);}

/* ─── DROPDOWN MENUS ──────────────────────────────────── */
.dd-wrap{position:relative;}
.dd-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:200px;z-index:300;
  background:#fff;border:1.5px solid var(--bdr);border-radius:10px;
  box-shadow:0 12px 40px -8px rgba(0,0,0,.14);padding:6px;
}
.dd-menu.on{display:block;}
.dd-item{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;
  font-size:12.5px;color:var(--text);cursor:pointer;transition:background 100ms;
}
.dd-item:hover{background:rgba(0,0,0,.04);}
.dd-item input{accent-color:var(--blue);width:13px;height:13px;cursor:pointer;flex-shrink:0;}
.dd-divider{height:1px;background:var(--bdr);margin:4px 0;}
.dd-footer{padding:8px 10px 2px;display:flex;gap:7px;}
.dd-apply{
  flex:1;height:28px;border-radius:6px;background:var(--blue);border:none;
  font:600 12px var(--font);color:#fff;cursor:pointer;
}
.dd-clear{
  height:28px;padding:0 10px;border-radius:6px;
  border:1.5px solid var(--bdr);background:#fff;
  font:500 12px var(--font);color:var(--t2);cursor:pointer;
}

/* ─── EMPTY STATE ─────────────────────────────────────── */
.empty{padding:48px 0;text-align:center;color:var(--t3);font-size:13px;grid-column:1/-1;}

/* ─── SECTION HIDE/SHOW ───────────────────────────────── */
.sec{display:none;}
.sec.on{display:block;}

/* ══════════════════════════════════════════════════════════
   PRODUCT INLINE DRAWER  — final sketch layout
   ══════════════════════════════════════════════════════════ */
.pdrawer{grid-column:1/-1;display:none;background:#fff;border-radius:14px;border:1.5px solid rgba(0,0,0,0.09);box-shadow:0 12px 44px -8px rgba(0,0,0,0.13),0 2px 8px rgba(0,0,0,0.05);position:relative;margin:0;}
.pdrawer.pdrawer--open{display:block;margin:4px 0;animation:pdSlideIn 340ms cubic-bezier(0.4,0,0.2,1);}
.pdrawer.pdrawer--closing{display:block;margin:4px 0;animation:pdSlideOut 300ms cubic-bezier(0.4,0,1,1) forwards;pointer-events:none;}
@keyframes pdSlideIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
@keyframes pdSlideOut{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-6px);}}
.pdrawer__arrow{position:absolute;top:-9px;z-index:4;width:18px;height:9px;pointer-events:none;transition:left 250ms cubic-bezier(0.4,0,0.2,1);}
.pdrawer__arrow::before{content:'';position:absolute;left:0;top:0;border:9px solid transparent;border-bottom-color:rgba(0,0,0,0.10);border-top:none;}
.pdrawer__arrow::after{content:'';position:absolute;left:1.5px;top:2px;border:7.5px solid transparent;border-bottom-color:#fff;border-top:none;}
.pdrawer__close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:10px;border:2px solid rgba(0,0,0,0.12);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text);z-index:10;transition:background 150ms,border-color 150ms,transform 200ms;}
.pdrawer__close:hover{background:#fff;border-color:rgba(0,0,0,0.24);transform:translateY(-1px);}
.pdrawer__close svg{width:14px;height:14px;stroke-width:3;}
/* ── TOP PANEL: gallery left | details right ── */
.pdrawer__main-panel{display:grid;grid-template-columns:1fr 1fr;min-height:360px;}
/* ── GALLERY (left) ── */
.pdrawer__gallery{display:flex;flex-direction:row;padding:16px 0 14px 16px;border-right:1px solid rgba(0,0,0,0.08);}
.pdrawer__thumb-col{display:flex;flex-direction:column;gap:8px;width:106px;flex-shrink:0;padding-right:12px;padding-top:2px;}
.pdrawer__thumb{width:92px;height:92px;border-radius:8px;border:1.5px solid rgba(0,0,0,0.10);background:#f8f8fa;cursor:pointer;overflow:hidden;flex-shrink:0;transition:border-color 150ms,box-shadow 150ms;}
.pdrawer__thumb:hover{border-color:rgba(0,0,0,0.20);}
.pdrawer__thumb.on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,102,204,0.15);}
.pdrawer__thumb img{width:100%;height:100%;object-fit:contain;padding:5px;display:block;}
.pdrawer__main-area{flex:1;display:flex;flex-direction:column;gap:10px;padding-right:14px;}
.pdrawer__main-wrap{flex:1;background:#f8f8fa;border-radius:10px;overflow:hidden;cursor:zoom-in;position:relative;min-height:0;}
.pdrawer__main-wrap.zoomed{cursor:zoom-out;}
.pdrawer__main-img{width:100%;height:100%;object-fit:contain;padding:14px;display:block;position:absolute;inset:0;transition:transform 360ms cubic-bezier(0.2,0,0.1,1),opacity 140ms ease;}
.pdrawer__main-wrap:not(.zoomed):hover .pdrawer__main-img{transform:scale(1.07);}
.pdrawer__main-wrap.zoomed .pdrawer__main-img{transform:scale(1.62);}
.pdrawer__wish-overlay{position:absolute;top:10px;left:10px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.92);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t3);z-index:2;transition:color 140ms;backdrop-filter:blur(4px);}
.pdrawer__wish-overlay:hover{color:#d0312d;}
.pdrawer__wish-overlay svg{width:13px;height:13px;stroke-width:1.8;}
.pdrawer__gallery-nav{display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;padding-bottom:2px;}
.pdrawer__gnav-btn{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(0,0,0,0.12);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:all 140ms;}
.pdrawer__gnav-btn:hover{border-color:var(--blue);color:var(--blue);}
.pdrawer__gnav-btn svg{width:11px;height:11px;stroke-width:2.5;}
.pdrawer__gdots{display:flex;gap:5px;align-items:center;}
.pdrawer__gdot{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,0.18);transition:all 200ms;cursor:pointer;border:none;padding:0;}
.pdrawer__gdot.on{width:16px;border-radius:3px;background:var(--blue);}
/* ── DETAILS (right) ── */
.pdrawer__details{display:flex;flex-direction:column;padding:16px 40px 14px 20px;flex:1;min-height:0;}
.pdrawer__top-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:4px;gap:12px;}
.pdrawer__eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.11em;color:var(--blue);margin:0;flex-shrink:0;}
.pdrawer__price-header{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.pdrawer__price{font-size:23px;font-weight:700;letter-spacing:-.04em;color:var(--text);line-height:1;}
.pdrawer__was{font-size:13px;color:var(--t3);text-decoration:line-through;}
.pdrawer__title{font-size:26px;font-weight:700;letter-spacing:-.04em;line-height:1.05;color:var(--text);margin:0 0 4px;text-wrap:pretty;}
.pdrawer__save-line{font-size:12px;font-weight:700;color:#d0312d;margin-bottom:8px;}
.pdrawer__desc{font-size:15px;line-height:1.5;color:var(--t2);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pdrawer__highlights{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(0,0,0,0.07);margin-bottom:10px;}
.pdrawer__highlight{padding:6px 0;border-bottom:1px solid rgba(0,0,0,0.06);}
.pdrawer__highlight-ttl{font-size:14px;font-weight:700;color:var(--text);margin-bottom:1px;}
.pdrawer__highlight-sub{font-size:13px;color:var(--t3);line-height:1.3;}
.pdrawer__grade-section{display:flex;flex-direction:column;gap:5px;margin-bottom:8px;}
.pdrawer__grade-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);}
.pdrawer__grade-row{display:flex;gap:5px;flex-wrap:wrap;}
.pdrawer__grade-btn{height:26px;padding:0 10px;border-radius:6px;border:1.5px solid rgba(0,0,0,0.12);background:#fff;font:600 12px var(--font);color:var(--text);cursor:pointer;transition:all 140ms;white-space:nowrap;}
.pdrawer__grade-btn:hover{border-color:var(--text);}
.pdrawer__grade-btn.on{border-color:var(--text);background:var(--text);color:#fff;}
/* badges */
.pdrawer__badges{display:flex;gap:6px;flex-wrap:nowrap;margin-bottom:10px;}
.pdrawer__badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:1;min-width:0;min-height:90px;height:auto;border:1.5px solid rgba(0,0,0,0.31);border-radius:8px;background:#fff;font-size:12px;font-weight:700;color:var(--text);text-align:center;line-height:1.2;position:relative;padding:12px 6px;cursor:default;transition:border-color 200ms,box-shadow 200ms;}
.pdrawer__badge:hover{border-color:rgba(0,0,0,0.18);box-shadow:0 3px 10px rgba(0,0,0,0.07);}
.pdrawer__badge svg.bi{width:22px;height:22px;stroke:var(--text);stroke-width:2;flex-shrink:0;}
.pdrawer__badge-check{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:0;background:none;border:none;display:flex;align-items:center;justify-content:center;}
.pdrawer__badge-check svg{width:18px;height:18px;stroke:#16a34a;stroke-width:4;}
/* CTA */
.pdrawer__pre-cta{display:flex;align-items:center;gap:30px;padding:8px 0 6px;}
.pdrawer__btn-secondary{display:flex;align-items:center;gap:5px;font:500 13px var(--font);color:var(--t3);background:none;border:none;cursor:pointer;padding:3px 0;transition:color 140ms;text-decoration:none;white-space:nowrap;}
.pdrawer__btn-secondary:hover{color:var(--blue);}
.pdrawer__btn-secondary svg{width:13px;height:13px;stroke-width:1.8;flex-shrink:0;}
.pdrawer__cta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px 12px;border-top:1px solid rgba(0,0,0,0.08);position:sticky;bottom:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:20;margin:0 -20px;border-radius:0 0 14px 14px;}
.pdrawer__cta-price{display:flex;flex-direction:column;gap:1px;}
.pdrawer__cta-now{font-size:21px;font-weight:700;letter-spacing:-.04em;color:var(--text);line-height:1;}
.pdrawer__cta-was-save{display:flex;align-items:center;gap:7px;margin-top:2px;}
.pdrawer__cta-was-sm{font-size:13px;color:var(--t3);text-decoration:line-through;}
.pdrawer__cta-save-sm{font-size:12.5px;font-weight:700;color:#d0312d;}
.pdrawer__btn-cart{height:44px;padding:0 22px;border-radius:9px;background:var(--blue);border:none;cursor:pointer;font:700 13.5px var(--font);color:#fff;display:flex;align-items:center;gap:7px;transition:background 150ms,box-shadow 150ms;box-shadow:0 3px 10px rgba(0,102,204,.20);flex-shrink:0;white-space:nowrap;}
.pdrawer__btn-cart:hover{background:#005bb5;box-shadow:0 4px 16px rgba(0,102,204,.28);}
.pdrawer__btn-cart svg{width:15px;height:15px;stroke-width:2;}
/* ── BOTTOM PANEL: also-need left | accordions right ── */
.pdrawer__bottom-panel{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(0,0,0,0.08);}
/* you may also need — left half */
.pdrawer__also-wrap{padding:14px 16px;border-right:1px solid rgba(0,0,0,0.08);}
.pdrawer__also-rail{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;scroll-behavior:smooth;}
.pdrawer__also-rail::-webkit-scrollbar{display:none;}
.pdrawer__also-hdr{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--t3);margin-bottom:10px;}
/* .pdrawer__also-grid replaced by .pdrawer__also-rail */
.pdrawer__also-card{border-radius:8px;border:1.5px solid rgba(0,0,0,0.09);background:#fff;overflow:hidden;cursor:pointer;transition:box-shadow 180ms,transform 150ms;flex-shrink:0;width:160px;}
.pdrawer__also-card:hover{box-shadow:0 4px 16px -4px rgba(0,0,0,.12);transform:translateY(-2px);}
.pdrawer__also-img{height:130px;background:#f8f8fa;overflow:hidden;}
.pdrawer__also-img img{width:100%;height:100%;object-fit:contain;padding:7px;display:block;}
.pdrawer__also-body{padding:7px 9px 9px;}
.pdrawer__also-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pdrawer__also-price{font-size:14px;font-weight:700;margin-top:3px;letter-spacing:-.01em;}
.pdrawer__also-actions{display:flex;gap:5px;margin-top:6px;}
.pdrawer__also-cart{flex:1;height:26px;padding:0 6px;border-radius:6px;background:var(--blue);border:none;font:600 10.5px var(--font);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;transition:background 150ms;min-width:0;}
.pdrawer__also-cart:hover{background:#005bb5;}
.pdrawer__also-cart svg{width:11px;height:11px;stroke-width:2;flex-shrink:0;}
.pdrawer__also-view{height:26px;padding:0 8px;border-radius:6px;border:1.5px solid rgba(0,0,0,0.12);background:#fff;font:500 11.5px var(--font);color:var(--t2);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:border-color 150ms,color 150ms;}
.pdrawer__also-view:hover{border-color:var(--blue);color:var(--blue);}
/* accordions — right half */
.pdrawer__accs{padding:0;}
.pdrawer__acc{border-bottom:1px solid rgba(0,0,0,0.07);}
.pdrawer__acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 20px;border:none;background:none;font:600 15px var(--font);color:var(--text);cursor:pointer;text-align:left;transition:background 120ms;letter-spacing:-.01em;}
.pdrawer__acc-btn:hover{background:rgba(0,0,0,0.02);color:var(--blue);}
.pdrawer__acc-chev{width:16px;height:16px;stroke:rgb(117,117,117);stroke-width:3;flex-shrink:0;transition:transform 260ms cubic-bezier(.4,0,.2,1);}
.pdrawer__acc-btn.on .pdrawer__acc-chev{transform:rotate(180deg);}
.pdrawer__acc-body{overflow:hidden;max-height:0;padding:0 20px;opacity:0;transition:max-height 360ms cubic-bezier(0.4,0,0.2,1),opacity 240ms ease,padding 300ms ease;}
.pdrawer__acc-body.on{max-height:700px;opacity:1;padding:8px 20px 18px;}
.pdrawer__spec-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(0,0,0,0.08);border-radius:8px;overflow:hidden;}
.pdrawer__spec-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid rgba(0,0,0,0.06);font-size:12.5px;}
.pdrawer__spec-row:nth-child(odd){background:#fafafa;}
.pdrawer__spec-row:last-child,.pdrawer__spec-row:nth-last-child(2):nth-child(odd){border-bottom:none;}
.pdrawer__spec-k{color:var(--t3);font-weight:500;}
.pdrawer__spec-v{font-weight:600;color:var(--text);text-align:right;}
.pdrawer__delivery-list{display:flex;flex-direction:column;gap:6px;}
.pdrawer__delivery-item{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;background:#f8f8fa;border-radius:8px;}
.pdrawer__delivery-item svg{width:14px;height:14px;stroke:var(--blue);stroke-width:1.8;flex-shrink:0;margin-top:1px;}
.pdrawer__delivery-ttl{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:1px;}
.pdrawer__delivery-sub{font-size:12px;color:var(--t3);line-height:1.4;}
/* ── LIGHTBOX ───────────────────────────────────────────── */
.pdlb{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,0.9);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity 260ms ease;backdrop-filter:blur(8px);}
.pdlb.pdlb--open{opacity:1;}
.pdlb__main{flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding:20px 80px;min-height:0;overflow:hidden;}
.pdlb__img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;transition:opacity 150ms ease;background:rgba(255,255,255,0.06);padding:12px;}
.pdlb__thumbs{display:flex;gap:10px;padding:14px 20px;overflow-x:auto;flex-shrink:0;scrollbar-width:none;justify-content:center;}
.pdlb__thumbs::-webkit-scrollbar{display:none;}
.pdlb__thumb{width:72px;height:72px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid rgba(255,255,255,0.2);flex-shrink:0;opacity:0.55;transition:opacity 150ms,border-color 150ms;background:rgba(255,255,255,0.08);}
.pdlb__thumb.on{border-color:#fff;opacity:1;}
.pdlb__thumb img{width:100%;height:100%;object-fit:contain;padding:5px;display:block;}
.pdlb__close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.15);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:background 150ms;}
.pdlb__close:hover{background:rgba(255,255,255,0.28);}
.pdlb__close svg{width:16px;height:16px;stroke-width:2.5;}
.pdlb__nav{position:absolute;top:calc(50% - 40px);transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:background 150ms;}
.pdlb__nav:hover{background:rgba(255,255,255,0.28);}
.pdlb__nav--prev{left:16px;}
.pdlb__nav--next{right:16px;}
.pdlb__nav svg{width:18px;height:18px;stroke-width:2.5;}
/* also-need nav */
.pdrawer__also-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.pdrawer__also-nav-btns{display:flex;gap:2px;}
.pdrawer__also-nav-btn{width:32px;height:32px;border-radius:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text);opacity:0.4;transition:opacity 140ms,color 140ms;font-size:22px;font-weight:900;line-height:1;pointer-events:auto;}
.pdrawer__also-nav-btn.nav-hidden{opacity:0;pointer-events:none;}
.pdrawer__also-nav-btn:hover{opacity:1;color:var(--blue);}
.pdrawer__also-nav-btn svg{width:14px;height:14px;stroke-width:3;}
/* also-need brand */
.pdrawer__also-brand{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:2px;}
.pdrawer__also-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pdrawer__also-price{font-size:14px;font-weight:700;margin-top:4px;letter-spacing:-.01em;}
/* pre-cta section spacing */
.pdrawer__pre-cta{display:flex;align-items:center;gap:8px;padding:6px 0 8px;}
/* CTA itemised add-ons */
.pdrawer__cta-items{margin-top:5px;display:flex;flex-direction:column;gap:2px;}
.pdrawer__cta-item-line{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--t3);}
.pdrawer__cta-item-line span{font-weight:600;color:var(--text);}
/* Full desc accordion */
.pdrawer__full-desc{position:relative;}
.pdrawer__full-desc-text{font-size:14px;font-weight:500;line-height:1.6;color:var(--t2);max-height:66px;overflow:hidden;position:relative;transition:max-height 420ms ease;}
.pdrawer__full-desc-text::after{content:'';position:absolute;bottom:0;left:0;right:0;height:32px;background:linear-gradient(transparent,#fff);pointer-events:none;transition:opacity 300ms;}
.pdrawer__full-desc-text.expanded{max-height:600px;}
.pdrawer__full-desc-text.expanded::after{opacity:0;}
.pdrawer__full-desc-more{display:inline-flex;align-items:center;gap:4px;background:none;border:1.5px solid rgba(0,0,0,0.22);border-radius:6px;cursor:pointer;font:600 13px var(--font);color:var(--text);padding:6px 14px;margin-top:8px;transition:border-color 150ms,background 150ms;}
.pdrawer__full-desc-more:hover{border-color:var(--text);background:rgba(0,0,0,0.03);}
/* Plain 3-line desc under title */
.pdrawer__desc{font-size:13.5px;line-height:1.55;color:var(--t2);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
/* ── CUSTOMISE PURCHASE ───────────────────────────────────── */
.pdrawer__customize{border:1.5px solid var(--bdr,rgba(0,0,0,0.08));border-radius:10px;overflow:hidden;margin-bottom:10px;}
.pdrawer__cust-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border:none;background:none;width:100%;cursor:pointer;font:600 14px var(--font);color:var(--text);text-align:left;transition:background 120ms;}
.pdrawer__cust-head:hover{background:rgba(0,0,0,0.02);}
.pdrawer__cust-total{color:var(--blue);font-weight:700;font-size:13.5px;}
.pdrawer__cust-body{padding:0 10px 10px;display:flex;flex-direction:column;gap:8px;}
.pdrawer__cust-item{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px;border:1.5px solid var(--bdr,rgba(0,0,0,0.08));border-radius:9px;background:#fff;}
.pdrawer__cust-item--block{flex-direction:column;align-items:flex-start;}
.pdrawer__cust-item-info{flex:1;min-width:0;}
.pdrawer__cust-item-lbl{font-size:14px;font-weight:600;color:var(--text);}
.pdrawer__cust-item-sub{font-size:12px;color:var(--t3);margin-top:2px;line-height:1.35;}
.pdrawer__cust-item-right{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.pdrawer__cust-price{font-size:14px;font-weight:700;color:var(--text);}
.pdrawer__sw{width:36px;height:20px;border-radius:10px;background:rgba(0,0,0,0.12);border:none;cursor:pointer;position:relative;flex-shrink:0;transition:background 200ms;}
.pdrawer__sw.on{background:var(--blue);}
.pdrawer__sw::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform 200ms;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
.pdrawer__sw.on::after{transform:translateX(16px);}
.pdrawer__svc-lbl{font-size:12px;font-weight:600;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.pdrawer__svc-note{font-size:10.5px;color:var(--t3);font-weight:400;}
.pdrawer__svc-grid{display:flex;gap:5px;flex-wrap:nowrap;width:100%;}
.pdrawer__svc-opt{flex:1;min-width:0;padding:7px 5px;border-radius:6px;border:1.5px solid rgba(0,0,0,0.31);background:#fff;cursor:pointer;text-align:center;transition:all 150ms;}
.pdrawer__svc-opt.on{border-color:var(--blue);border-width:2px;background:rgba(0,102,204,.03);}
.pdrawer__svc-opt.on{background:rgba(0,102,204,.06);border-color:var(--blue);}
.pdrawer__svc-opt-lbl{font-size:12px;font-weight:600;color:var(--text);display:block;line-height:1.2;}
.pdrawer__svc-opt-p{font-size:11px;color:var(--t3);display:block;margin-top:1px;}
.pdrawer__svc-opt.on .pdrawer__svc-opt-p{color:var(--blue);}

/* description fade */
.pdrawer__desc-wrap{position:relative;margin-bottom:10px;}
.pdrawer__desc-faded{position:relative;overflow:hidden;max-height:68px;transition:max-height 400ms ease;}
.pdrawer__desc-faded::after{content:'';position:absolute;bottom:0;left:0;right:0;height:28px;background:linear-gradient(transparent,#fff);pointer-events:none;transition:opacity 300ms;}
.pdrawer__desc-faded.expanded{max-height:400px;}
.pdrawer__desc-faded.expanded::after{opacity:0;}
.pdrawer__desc-more{display:inline-block;background:none;border:none;cursor:pointer;font:500 11px var(--font);color:var(--t3);padding:3px 0;transition:color 140ms;}
.pdrawer__desc-more:hover{color:var(--blue);}
.btn-view.pdrawer-active{color:var(--blue) !important;}
@media(max-width:1000px){
  .pdrawer__also-grid{grid-template-columns:repeat(2,1fr);}
  .pdrawer__badges{gap:5px;}
}
@media(max-width:820px){
  .pdrawer__main-panel{grid-template-columns:1fr;}
  .pdrawer__gallery{border-right:none;border-bottom:1px solid rgba(0,0,0,0.07);max-height:260px;}
  .pdrawer__thumb-col{flex-direction:row;flex-wrap:wrap;width:auto;padding-right:0;padding-bottom:8px;}
  .pdrawer__thumb{width:52px;height:52px;}
  .pdrawer__details{padding-right:40px;}
  .pdrawer__bottom-panel{grid-template-columns:1fr;}
  .pdrawer__also-wrap{border-right:none;border-bottom:1px solid rgba(0,0,0,0.07);}
  .pdrawer__spec-grid{grid-template-columns:1fr;}
}

/* ── FOCUS RINGS (WCAG 2.1 AA) ──────────────────────────────── */
:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px;border-radius:4px;}
button:focus-visible,a:focus-visible{border-radius:6px;}

/* ── FILTER DROPDOWN ANIMATION ──────────────────────────────── */
.dd-menu{
  display:block;opacity:0;transform:translateY(-6px);
  pointer-events:none;
  transition:opacity 160ms ease,transform 160ms cubic-bezier(0.2,0,0,1);
}
.dd-menu.on{opacity:1;transform:translateY(0);pointer-events:auto;}

/* ── CART ADD PULSE ──────────────────────────────────────────── */
@keyframes cartPulse{
  0%{transform:scale(1);}
  45%{transform:scale(0.93);background:#005bb5;}
  100%{transform:scale(1);}
}
.btn-cart.adding,.pdrawer__btn-cart.adding{animation:cartPulse 300ms ease;}

/* ── QUANTITY STEPPER ────────────────────────────────────────── */
.pdrawer__qty{display:flex;align-items:center;gap:0;border:1.5px solid rgba(0,0,0,0.14);border-radius:8px;overflow:hidden;height:44px;flex-shrink:0;}
.pdrawer__qty-btn{width:36px;height:100%;border:none;background:none;cursor:pointer;font-size:18px;font-weight:400;color:var(--text);display:flex;align-items:center;justify-content:center;transition:background 120ms;line-height:1;}
.pdrawer__qty-btn:hover{background:rgba(0,0,0,0.05);}
.pdrawer__qty-btn:active{background:rgba(0,0,0,0.09);}
.pdrawer__qty-val{width:34px;text-align:center;font:700 15px var(--font);color:var(--text);border-left:1px solid rgba(0,0,0,0.1);border-right:1px solid rgba(0,0,0,0.1);}

/* ── STOCK SIGNAL ────────────────────────────────────────────── */
.pdrawer__stock{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;margin-bottom:8px;}
.pdrawer__stock--low{color:#d0312d;}
.pdrawer__stock--ok{color:var(--green);}
.pdrawer__stock-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.pdrawer__stock--low .pdrawer__stock-dot{background:#d0312d;}
.pdrawer__stock--ok .pdrawer__stock-dot{background:var(--green);}

/* ── SHARE BUTTON ────────────────────────────────────────────── */
.pdrawer__share{position:absolute;top:12px;right:50px;width:32px;height:32px;border-radius:10px;border:2px solid rgba(0,0,0,0.12);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);z-index:10;transition:background 150ms,border-color 150ms;}
.pdrawer__share:hover{background:#fff;border-color:rgba(0,0,0,0.24);color:var(--blue);}
.pdrawer__share svg{width:14px;height:14px;stroke-width:2;}
.pdrawer__share-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#1d1d1f;color:#fff;font:600 12.5px var(--font);padding:9px 18px;border-radius:8px;z-index:200000;opacity:0;pointer-events:none;transition:opacity 200ms ease;white-space:nowrap;}
.pdrawer__share-toast.on{opacity:1;}

/* ── FILTER CHIPS (polish existing) ─────────────────────────── */
.fbar-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:6px;border:1.5px solid rgba(0,102,204,0.3);background:rgba(0,102,204,0.06);color:var(--brand-blue);font:600 12px var(--font);cursor:pointer;transition:all 140ms;white-space:nowrap;}
.fbar-chip:hover{background:rgba(0,102,204,0.12);border-color:var(--blue);}
.fbar-chip svg{width:10px;height:10px;stroke-width:3;flex-shrink:0;}
.fbar-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 8px;min-height:0;}
.fbar-chips:empty{display:none;}

/* ── GRID META COUNT ─────────────────────────────────────────── */
.grid-meta{font-size:12.5px;color:var(--t3);padding:6px 0 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.grid-meta b{color:var(--text);font-weight:700;}
.grid-meta-clear{background:none;border:none;cursor:pointer;font:600 12px var(--font);color:var(--blue);text-decoration:underline;padding:0;display:none;}
.grid-meta-clear.on{display:inline;}

/* ── CATEGORY TILE HOVER (upgrade) ──────────────────────────── */
.cat-tile{transition:box-shadow 200ms,transform 200ms;}
.cat-tile:hover{transform:translateY(-3px) scale(1.01)!important;}


/* ════════════════════════════════════════════════════════════════
   SHOP-ONLY: Showing counter + progress line + Browse-All + 2-row grid
   ════════════════════════════════════════════════════════════════ */
.sx-foot{display:flex;align-items:center;gap:18px;margin-top:28px;padding-top:4px;}
.sx-showing{font:500 12.5px/1 'InterVariable', 'Inter',system-ui,sans-serif;color:#71717a;letter-spacing:-.005em;flex-shrink:0;}
.sx-showing b{color:#1d1d1f;font-weight:700;font-variant-numeric:tabular-nums;}
.sx-progress{position:relative;height:2px;background:rgba(0,0,0,0.12);border-radius:2px;flex:1;overflow:hidden;}
.sx-progress::after{content:'';position:absolute;top:0;bottom:0;left:var(--l,0%);width:var(--w,25%);background:#1d1d1f;border-radius:2px;transition:left .42s cubic-bezier(.32,.72,0,1),width .42s cubic-bezier(.32,.72,0,1);}

.sx-browse-all{display:flex;align-items:center;gap:14px;margin-top:18px;padding:16px;border-radius:16px;text-decoration:none;
  background:linear-gradient(135deg,#0a84ff 0%,#0060d6 100%);
  box-shadow:0 10px 24px -12px rgba(10,132,255,0.5),inset 0 0.5px 0 rgba(255,255,255,0.25);
  transition:transform 380ms cubic-bezier(.32,.72,0,1),box-shadow 320ms,filter 320ms;}
.sx-browse-all:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 32px -10px rgba(10,132,255,0.52);}
.sx-browse-all:active{transform:translateY(0) scale(.986);}
.sx-browse-all-l{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.sx-browse-all-eyebrow{font:600 10px/1 'InterVariable', 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.78);}
.sx-browse-all-h{font:700 17px/1.1 'InterVariable', 'Inter',system-ui,sans-serif;letter-spacing:-.024em;color:#fff;}
.sx-browse-all-sub{font:500 11.5px/1.3 'InterVariable', 'Inter',system-ui,sans-serif;color:rgba(255,255,255,0.72);}
.sx-browse-all-arrow{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.18);border:0.5px solid rgba(255,255,255,0.30);color:#fff;flex-shrink:0;transition:transform 320ms cubic-bezier(.32,.72,0,1);}
.sx-browse-all:hover .sx-browse-all-arrow{transform:translateX(3px);}
.sx-browse-all-arrow svg{width:14px !important;height:14px !important;}

.sx-section-wrap--bare .sx-car-rail{grid-template-rows:repeat(2,1fr) !important;row-gap:16px !important;}
.sx-section-wrap--bare .sx-car-dots{display:none !important;}