/* --site-logo is injected per-request from PHP (see _header.php) so an
   admin logo upload is reflected everywhere. A static CSS file cannot read
   the setting, and these five placeholder rules would otherwise keep showing
   the bundled default forever. The fallback keeps the page sane if the
   variable is ever missing. */
:root{--site-logo:url(../img/site-logo.png)}

/* Supreme Autos — BMW M design system, LIGHT adaptation (per design/DESIGN-main.md).
   Gallery-white body surfaces, near-black UPPERCASE Inter display (700) over gray
   body (300). The masthead stays a black "motorsport chrome" band (spec top-nav =
   #000) carrying the logo + M tricolor. The M tricolor stripe (blue->blue->red) is a
   SPARING brand signature only. Flat 0-radius rectangles, light hairlines, no shadows.
   Legacy var names kept + re-pointed so existing markup/JS var() refs still resolve. */
:root{
  /* --- BMW-M light tokens (body) --- */
  --canvas:#ffffff; --surface-soft:#f5f5f4; --surface-card:#ffffff; --surface-elevated:#efefee; --carbon:#e8e8e6;
  --ink:#0a0a0a; --body:#4f4f4f; --body-strong:#1a1a1a; --mute:#8a8a8a;
  --hairline:#e2e2e0; --hairline-strong:#d2d2d0;
  --m-blue-light:#0066b1; --m-blue-dark:#1c69d4; --m-red:#e22718; --bmw-blue:#1c69d4;
  --warning:#c98a00; --success:#0f8a30;
  --m-stripe:linear-gradient(90deg,var(--m-blue-light) 0 33.33%,var(--m-blue-dark) 33.33% 66.66%,var(--m-red) 66.66% 100%);
  /* --- dark masthead band --- */
  --header-bg:#0a0a0a; --header-ink:#ffffff; --header-body:#c2c2c2; --header-line:#2b2b2b; --header-field:#1a1a1a;
  --wrap:1440px;
  /* sitewide vertical rhythm: section top/bottom padding, and the tighter
     heading->content gap (they scale independently) */
  --sec-pad:80px;
  --head-gap:30px;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.22,1,.36,1);
  --f:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  /* --- legacy aliases, re-pointed --- */
  --navy:#0a0a0a; --navy-2:#000000; --navy-3:#2b2b2b; --navy-800:#0a0a0a;
  --red:#e22718; --red-dk:#b71c10; --red-600:#b71c10; --red-tint:rgba(226,39,24,.10);
  --link:#0a0a0a; --charcoal:#1a1a1a; --muted:#8a8a8a; --faint:#8a8a8a; --stone:#8a8a8a;
  --line:#e2e2e0; --line-2:#ededec; --bg:#ffffff; --bone:#f5f5f4; --card:#ffffff; --deep:#0a0a0a;
  --row-alt:#f7f7f6; --hover:#f2f2f1; --green:#0f8a30; --green-tint:rgba(15,138,48,.12);
  --ondark:#ffffff; --ondark-mute:#c2c2c2; --divider-dark:#2b2b2b;
  --r-sm:0; --radius:0; --r-lg:0; --r-pill:9999px;
  --sh-sm:none; --sh:none; --sh-lg:none;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--f); color:var(--body); background:var(--canvas); font-size:15px; font-weight:300; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:var(--ink); text-decoration:none}
a:hover{color:var(--ink)}
img{display:block; max-width:100%}
ul{list-style:none}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 40px}
.muted{color:var(--mute)}
.right{text-align:right}
.num,.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
code{background:var(--surface-soft); padding:1px 6px; font-size:14px; font-family:var(--f-mono); color:var(--ink)}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:700; letter-spacing:-.01em; line-height:1.1; color:var(--ink)}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* M tricolor stripe — the one decorative element, used sparingly */
.mstripe{height:4px; background:var(--m-stripe); border:0}

/* ===== Top utility strip (dark) ===== */
.util{background:var(--header-bg); color:var(--header-body); font-size:14px; letter-spacing:.02em; border-bottom:1px solid var(--header-line)}
.util .wrap{display:flex; align-items:center; justify-content:space-between; gap:22px; height:38px}
.util a{color:var(--header-body); display:inline-flex; align-items:center; gap:6px; transition:color .2s}
.util a:hover{color:#fff}
.util .accent{color:#fff; font-weight:600}
.util .usp{display:inline-flex; align-items:center; gap:6px}
@media (max-width:860px){.util .hidem{display:none}}

/* ===== Masthead (dark band; logo left · nav center · actions right) ===== */
.site-header{background:var(--header-bg); position:sticky; top:0; z-index:60; border-bottom:1px solid var(--header-line)}
.header-inner{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; min-height:96px; padding:12px 0}
.brand{justify-self:start; display:flex; align-items:center; gap:12px}
.brand .m-mark{width:4px; height:26px; background:var(--m-stripe); flex:0 0 auto}
.brand-logo{height:68px; width:auto; display:block; flex:0 0 auto}
.brand-word{font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:.02em; text-transform:uppercase; color:var(--header-ink); line-height:1; white-space:nowrap}
@media(max-width:640px){ .brand-logo{height:60px} .brand-word{font-size:16px} .header-inner{min-height:88px; grid-template-columns:1fr auto} }
.mainnav{justify-self:center; display:flex; align-items:center; gap:6px}
.mainnav a{font-family:var(--f); font-size:14px; font-weight:400; letter-spacing:.03em; color:var(--header-body); padding:8px 14px; position:relative; transition:color .2s}
.mainnav a::after{content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease)}
.mainnav a:hover,.mainnav a.on{color:#fff}
.mainnav a:hover::after,.mainnav a.on::after{transform:scaleX(1)}
.header-right{justify-self:end; display:flex; align-items:center; gap:10px}
.search{display:flex; align-items:center; width:260px; max-width:34vw; height:44px; background:var(--header-field); border:1px solid var(--header-line); overflow:hidden; transition:border-color .2s}
.search:focus-within{border-color:#fff}
.search input{flex:1; min-width:0; border:0; padding:0 16px; font-size:14px; font-weight:300; font-family:var(--f); outline:none; color:#fff; background:none}
.search input::placeholder{color:var(--header-body)}
.search button{border:0; background:none; color:#fff; padding:0 14px; height:100%; cursor:pointer; display:flex; align-items:center}
.hdr-actions{display:flex; align-items:center; gap:4px; flex:0 0 auto}
.iconbtn{width:44px; height:44px; display:grid; place-items:center; color:var(--header-ink); position:relative; background:none; border:0; cursor:pointer; transition:color .2s}
.iconbtn:hover{color:var(--header-body)}
.header-nav .cart,.iconbtn.cart{position:relative; display:inline-grid; place-items:center}
.cart-badge,.iconbtn .badge{position:absolute; top:6px; right:6px; background:var(--m-red); color:#fff; min-width:16px; height:16px; display:grid; place-items:center; padding:0 4px; font-size:10px; font-weight:700; font-family:var(--f-mono); border-radius:var(--r-pill)}
.burger{display:none; width:44px; height:44px; place-items:center; color:#fff; background:none; border:0; cursor:pointer}
@media (max-width:1024px){ .search{width:200px} }
@media (max-width:900px){ .mainnav{display:none} .burger{display:grid} .search{display:none} }

/* mobile drawer (dark) */
.drawer-ov{position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .3s; z-index:80}
.drawer-ov.show{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(360px,88vw); background:var(--header-bg); border-left:1px solid var(--header-line); transform:translateX(100%); transition:transform .35s var(--ease); z-index:81; display:flex; flex-direction:column}
.drawer.show{transform:none}
.drawer .mstripe{flex:0 0 auto}
.drawer .dh{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--header-line)}
.drawer .dh .brand-word{color:#fff}
.drawer nav{padding:12px}
.drawer nav a{display:flex; align-items:center; justify-content:space-between; padding:16px; font-size:15px; font-weight:400; letter-spacing:.04em; text-transform:uppercase; color:#fff; border-bottom:1px solid var(--header-line)}
.drawer nav a:hover{color:var(--header-body)}

/* ===== Main ===== */
.main{padding:var(--sec-pad) 40px; min-height:64vh}
.block{margin-top:40px}
.block-title{font-family:var(--f-display); font-size:18px; color:var(--ink); margin:0 0 16px; font-weight:700; text-transform:uppercase; letter-spacing:.02em}
.block-title .count,.block-title .foot{color:var(--mute); font-weight:400; font-size:14px; font-family:var(--f-mono); text-transform:none; letter-spacing:0}
.page-title{font-family:var(--f-display); font-size:clamp(24px,3.2vw,36px); color:var(--ink); margin:4px 0 6px; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; line-height:1.02}
.subtitle{color:var(--body); margin:0 0 var(--head-gap); font-size:16px; font-weight:300}
.crumbs{font-size:14px; color:var(--mute); margin-bottom:16px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; text-transform:uppercase; letter-spacing:.08em}
.crumbs a{color:var(--mute); font-weight:400}
.crumbs a:hover{color:var(--ink)}
.empty{background:var(--surface-soft); border:1px solid var(--hairline); padding:40px; color:var(--mute); text-align:center}

/* ===== Buttons (flat, 0-radius, uppercase letterspaced) ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 32px; border:1px solid var(--ink); background:transparent; color:var(--ink); font-size:14px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; font-family:var(--f); cursor:pointer; transition:background .2s, border-color .2s, color .2s}
.btn:hover{background:var(--ink); color:#fff}
.btn:active{transform:translateY(1px)}
.btn-sm{height:40px; padding:0 20px; font-size:14px}
.btn-xs{height:34px; padding:0 14px; font-size:11px; letter-spacing:1px}
.btn-primary{background:var(--ink); border-color:var(--ink); color:#fff}
.btn-primary:hover{background:transparent; color:var(--ink)}
.btn-navy{background:transparent; border-color:var(--ink); color:var(--ink)}
.btn-navy:hover{background:var(--ink); color:#fff}
.btn-block{display:flex; width:100%}
.link{color:var(--ink); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; font-size:14px}
.link:hover{color:var(--m-red)}

/* ===== Vehicle / category browse ===== */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1px; background:var(--hairline); border:1px solid var(--hairline)}
.cat-card{background:var(--canvas); padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:10px; transition:background .2s}
.cat-card:hover{background:var(--surface-soft)}
.cat-name{font-weight:400; color:var(--ink); font-size:15px; letter-spacing:.01em}
.cat-count{font-size:14px; color:var(--mute); background:var(--surface-soft); padding:3px 10px; font-family:var(--f-mono); flex:0 0 auto}
.cat-group{margin-bottom:40px}
.cat-group-title{font-family:var(--f); font-size:14px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:1.5px; margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--hairline); display:flex; align-items:center; gap:12px}
.cat-group-title::before{content:""; width:24px; height:4px; background:var(--m-stripe)}

.veh-table-wrap{overflow-x:auto; background:var(--canvas); border:1px solid var(--hairline)}
.veh-table{width:100%; border-collapse:collapse; font-size:14px; min-width:520px}
.veh-table th{text-align:left; background:var(--surface-soft); color:var(--mute); padding:14px 16px; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:1.5px; font-family:var(--f); border-bottom:1px solid var(--hairline)}
.veh-table td{padding:14px 16px; border-top:1px solid var(--hairline); color:var(--body)}
.veh-table tr:hover td{background:var(--surface-soft); color:var(--ink)}

/* ===== Part list ===== */
.part-list{display:flex; flex-direction:column; gap:1px; background:var(--hairline); border:1px solid var(--hairline)}
.part-row{display:grid; grid-template-columns:96px 1fr auto; gap:20px; background:var(--canvas); padding:20px; align-items:center; transition:background .2s}
.part-row:hover{background:var(--surface-soft)}
.part-thumb{width:96px; height:96px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--hairline); overflow:hidden}
.part-thumb img{max-width:100%; max-height:100%; object-fit:contain}
/* missing image -> faded site logo, never a broken-image icon or bare text.
   text-indent hides the "No image" label while keeping it for screen readers. */
.noimg{width:100%; height:100%; min-height:120px; background:var(--surface-soft) var(--site-logo) center/44% no-repeat;
  text-indent:-9999px; overflow:hidden; opacity:.5}
.noimg.lg{min-height:300px}
.part-brand{font-size:14px; font-weight:700; color:var(--body-strong); text-transform:uppercase; letter-spacing:1.5px; font-family:var(--f)}
.part-name{display:block; font-size:17px; font-weight:700; color:var(--ink); margin:4px 0; text-transform:uppercase; letter-spacing:0}
.part-meta{display:flex; gap:14px; flex-wrap:wrap; font-size:14px; color:var(--mute)}
.part-meta .pn{font-family:var(--f-mono)}
.fit-note{background:transparent; color:var(--success); border:1px solid var(--success); padding:1px 10px; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.06em}
.part-buy{text-align:right; display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.price{font-size:22px; font-weight:700; color:var(--ink); font-family:var(--f-mono); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.core{font-size:14px; color:var(--mute); font-family:var(--f-mono)}
.opt-range{font-size:14px; font-weight:600; color:var(--body-strong); font-family:var(--f-mono)}
.style-head{font-family:var(--f); font-size:14px; font-weight:700; color:var(--ink); background:var(--surface-soft); border-left:4px solid transparent; border-image:var(--m-stripe) 1; padding:10px 0 10px 14px; margin:28px 0 8px; letter-spacing:1.5px; text-transform:uppercase}
.style-head:first-child{margin-top:0}

/* ===== Part detail ===== */
.part-detail{display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:48px; background:transparent; padding:0}
.pd-main-img{background:#fff; border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; min-height:340px; padding:24px}
.pd-main-img img{max-width:100%; max-height:380px; object-fit:contain}
.pd-thumbs{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap}
.pd-thumbs img{width:64px; height:64px; object-fit:contain; border:1px solid var(--hairline); background:#fff; padding:4px; cursor:pointer; transition:border-color .2s}
.pd-thumbs img:hover{border-color:var(--ink)}
.pd-brand{font-size:14px; font-weight:700; color:var(--body-strong); text-transform:uppercase; letter-spacing:1.5px; font-family:var(--f)}
.pd-name{font-family:var(--f-display); font-size:clamp(22px,2.8vw,32px); color:var(--ink); margin:8px 0; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; line-height:1.05}
.pd-pn{font-size:14px; color:var(--mute); margin-bottom:20px; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.08em}
.pd-desc{color:var(--body); line-height:1.6; font-weight:300}
.pd-buybox{display:flex; align-items:center; gap:24px; flex-wrap:wrap; background:var(--surface-soft); border:1px solid var(--hairline); padding:24px; margin:24px 0}
.pd-price{font-size:32px; font-weight:700; color:var(--ink); font-family:var(--f-mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.pd-price .core{font-size:14px; color:var(--mute); font-weight:400; margin-left:8px}
.pd-stock{font-size:14px; font-weight:700; padding:6px 12px; letter-spacing:1px; text-transform:uppercase; border:1px solid currentColor}
.pd-stock.in{background:transparent; color:var(--success)}
.pd-stock.out{background:transparent; color:var(--mute)}
.pd-choose{display:block; font-size:14px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:1px}
.pd-choose select{appearance:none; margin-top:8px; width:100%; height:48px; border:1px solid var(--hairline); background:var(--canvas) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%230a0a0a' stroke-width='1.8' viewBox='0 0 24 24'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 16px center; padding:0 40px 0 16px; font-family:var(--f); font-size:14px; font-weight:300; color:var(--ink); cursor:pointer}
.pd-choose select:focus{outline:none; border-color:var(--ink)}
.pd-sub{font-family:var(--f-display); font-size:18px; color:var(--ink); margin:28px 0 12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em}
.spec-table{width:100%; border-collapse:collapse; font-size:14px; border:1px solid var(--hairline)}
.spec-table th{text-align:left; width:38%; color:var(--mute); font-weight:400; padding:12px 16px; border-top:1px solid var(--hairline); vertical-align:top; background:var(--surface-soft)}
.spec-table td{padding:12px 16px; border-top:1px solid var(--hairline); color:var(--ink)}
.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:0}

/* ===== Cart ===== */
/* ===== Cart ===== */
.cart-head{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin:0 0 var(--head-gap)}
.cart-head .page-title{margin:0}
/* step indicator: 1 Shopping Bag - 2 Order Details - 3 Payment */
.cart-steps{list-style:none; display:flex; align-items:center; gap:0; margin:0; padding:0; flex-wrap:wrap}
.cart-steps li{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--mute);
  text-transform:uppercase; letter-spacing:.04em}
.cart-steps li .n{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--hairline-strong); font-family:var(--f-mono); font-size:13px; color:var(--mute)}
.cart-steps li.on{color:var(--ink)}
.cart-steps li.on .n{background:var(--m-red); border-color:var(--m-red); color:#fff}
.cart-steps li:not(:last-child)::after{content:""; width:34px; height:0; margin:0 16px;
  border-top:1px dashed var(--hairline-strong)}

.cart-empty{border:1px solid var(--hairline); background:var(--surface-soft); padding:56px 40px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px}
.cart-empty .empty{margin:0; background:none; border:0; padding:0}

.cart-ship-note{display:flex; align-items:center; gap:12px; border:1px solid var(--hairline);
  background:var(--surface-soft); padding:16px 20px; margin:0 0 20px; font-size:15px; color:var(--body); font-weight:300}
.cart-ship-note svg{color:var(--m-red); flex:0 0 auto}
.cart-ship-note b{color:var(--ink); font-weight:700}
.cart-ship-note.is-on svg{color:var(--success)}

.cart-wrap{display:grid; grid-template-columns:1fr 360px; gap:32px; align-items:start}
.cart-lines{border:1px solid var(--hairline)}
.cart-lines-head{display:grid; grid-template-columns:1fr auto 64px; gap:20px; align-items:center;
  padding:14px 22px; background:var(--surface-soft); border-bottom:1px solid var(--hairline);
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--mute)}
.cart-lines-head .cl-sub{text-align:right}
.cart-lines-head .cl-rm{text-align:right}
.cart-line{display:grid; grid-template-columns:92px 1fr auto 40px; gap:20px; align-items:center;
  padding:22px; border-bottom:1px solid var(--hairline)}
.cart-line:last-child{border-bottom:0}
.cl-thumb{width:92px; height:92px; display:grid; place-items:center; background:#fff;
  border:1px solid var(--hairline); overflow:hidden; position:relative}
.cl-thumb::before{content:""; position:absolute; inset:0; z-index:0;
  background:var(--surface-soft) var(--site-logo) center/56% no-repeat; opacity:.4}
.cl-thumb img{position:relative; z-index:1; max-width:88%; max-height:88%; object-fit:contain}
.cl-info{min-width:0; display:flex; flex-direction:column; gap:7px}
.cl-name{font-size:16px; font-weight:700; color:var(--ink); line-height:1.35; letter-spacing:-.01em}
a.cl-name:hover{color:var(--m-red)}
.cl-meta{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:14px; color:var(--mute); font-weight:300}
.cl-qty{display:flex; align-items:center; gap:10px; margin-top:5px}
.cl-qty .qlab{font-size:14px; color:var(--body); font-weight:300}
.qbtn{width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--hairline);
  background:var(--canvas); color:var(--ink); font-size:16px; line-height:1; cursor:pointer; transition:border-color .2s,background .2s}
.qbtn:hover{border-color:var(--ink); background:var(--surface-soft)}
.qval{min-width:26px; text-align:center; font-family:var(--f-mono); font-size:15px; font-weight:700; color:var(--ink)}
.cl-price{text-align:right; display:flex; flex-direction:column; gap:3px; white-space:nowrap}
.cl-price b{font-family:var(--f-mono); font-size:18px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.cl-ea{font-size:13px; color:var(--mute); font-weight:300}
.cl-remove{justify-self:end}
.cl-remove button{display:grid; place-items:center; width:36px; height:36px; color:var(--mute);
  background:none; border:0; cursor:pointer; transition:color .2s}
.cl-remove button:hover{color:var(--m-red)}

.cart-summary{border:1px solid var(--hairline); background:var(--surface-soft); padding:28px; position:sticky; top:96px}
.cart-summary h2{font-family:var(--f-display); font-size:16px; color:var(--ink); margin:0 0 20px;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.cart-summary .row{display:flex; justify-content:space-between; align-items:center; padding:9px 0;
  font-size:15px; color:var(--body); font-weight:300}
.cart-summary .row span:last-child{font-family:var(--f-mono); color:var(--ink); font-weight:600}
.cart-summary .free{color:var(--success); font-weight:700}
.cart-summary .row.total{border-top:1px solid var(--hairline); margin-top:8px; padding-top:16px;
  font-weight:700; color:var(--ink)}
.cart-summary .row.total span{font-weight:700}
.cart-summary .row.pay{border-top:2px solid var(--ink); margin-top:6px; padding-top:16px; font-size:16px}
.cart-summary .row.pay span:first-child{color:var(--ink); font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.cart-summary .row.pay span:last-child{font-size:22px; font-weight:700}
.cart-summary .btn{margin-top:22px}
.secure-note{text-align:center; font-size:14px; color:var(--mute); margin:14px 0 0}

/* ===== Checkout result ===== */
.checkout-result{max-width:680px; margin:40px auto; text-align:center; background:var(--surface-soft); border:1px solid var(--hairline); padding:56px 40px}
.checkout-result h1{font-family:var(--f-display); color:var(--ink); font-size:clamp(24px,2.8vw,34px); margin:0 0 12px; text-transform:uppercase; letter-spacing:-.01em; line-height:1.05}
.checkout-result .btn{margin:8px 6px 0}
.cr-badge{width:72px; height:72px; border-radius:50%; background:transparent; border:2px solid var(--success); color:var(--success); font-size:34px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 24px}
.order-card{text-align:left; border:1px solid var(--hairline); padding:24px; margin:28px 0}
.order-line{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--hairline); font-size:14px; color:var(--body)}
.order-totals{margin-top:16px}
.order-totals .row{display:flex; justify-content:space-between; padding:6px 0; font-size:14px; color:var(--body)}
.order-totals .row.total{border-top:1px solid var(--hairline); margin-top:6px; padding-top:12px; font-weight:700; color:var(--ink)}

/* ===== 404 ===== */
.notfound{text-align:center; padding:120px 20px}
.notfound h1{font-family:var(--f-display); font-size:56px; color:var(--ink); margin:0; text-transform:uppercase; letter-spacing:-.02em; line-height:1}
.notfound p{color:var(--mute); margin:12px 0 32px}

/* ===== Product grid (All Products page + homepage featured) ===== */
.pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.pcard{display:flex; flex-direction:column; background:var(--canvas); border:1px solid var(--hairline); transition:background .25s}
.pcard:hover{background:var(--surface-soft)}
.pcard-im{position:relative; display:grid; place-items:center; aspect-ratio:4/3; background:#fff; padding:22px; overflow:hidden}
/* faded logo behind every product image; an opaque photo covers it, a failed one
   (onerror sets opacity:0) reveals it instead of a broken-image icon */
.pcard-im::before{content:""; position:absolute; inset:0; z-index:0;
  background:var(--surface-soft) var(--site-logo) center/42% no-repeat; opacity:.4}
.pcard-im img{position:relative; z-index:1}
.pcard-im img{max-width:82%; max-height:82%; object-fit:contain; transition:transform .4s var(--ease)}
.pcard:hover .pcard-im img{transform:scale(1.05)}
.pcard-bd{display:flex; flex-direction:column; gap:8px; padding:18px 20px 22px}
.pcard-title{font-size:14px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.02em; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pcard-price{font-family:var(--f-mono); font-size:17px; font-weight:700; color:var(--ink)}
/* Brands index */
.brandgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1px; background:var(--hairline); border:1px solid var(--hairline)}
.brandcard{background:var(--canvas); padding:20px 22px; display:flex; flex-direction:column; gap:5px; transition:background .2s}
.brandcard:hover{background:var(--surface-soft)}
.brandcard-name{font-size:14px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.02em}
.brandcard-n{font-family:var(--f-mono); font-size:14px; color:var(--mute)}

.pager{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:40px}
.pager-at{font-size:14px; text-transform:uppercase; letter-spacing:1.5px; color:var(--mute)}
@media (max-width:900px){ .pgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .pgrid{grid-template-columns:1fr} }

/* ===== Footer (dark band closing the light page) ===== */
.site-footer{background:var(--header-bg); color:var(--header-body); font-size:15px; border-top:1px solid var(--header-line)}
.footer-inner{display:grid; grid-template-columns:1.5fr .8fr 1.1fr 1.2fr; gap:52px; padding:56px 40px 48px}
/* contact rows — each is omitted server-side when its setting is blank */
.fnav ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.fnav a{color:var(--header-body); font-weight:300; transition:color .2s}
.fnav a:hover{color:#fff}
.fcontact{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.fcontact li{display:flex; align-items:center; gap:12px; font-weight:300; line-height:1.4}
.fc-ico{width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--header-line); color:#fff}
.fcontact a{color:var(--header-body); transition:color .2s}
.fcontact a:hover{color:#fff}
/* newsletter — a footer column, so the form stacks rather than sitting inline */
.fnews p{margin:0 0 18px; color:var(--header-body); font-weight:300; line-height:1.6}
.fnews-form{display:grid; gap:10px}
.fnews-form input{width:100%; min-width:0; height:48px; padding:0 16px; background:var(--header-field);
  border:1px solid var(--header-line); color:#fff; font-family:var(--f); font-size:14px}
.fnews-form input::placeholder{color:#7e7e7e}
.fnews-form input:focus{outline:0; border-color:#fff}
.fnews-form .btn{width:100%}
/* .btn-red resolves to --ink (#0a0a0a) — invisible on the black footer, in both
   rest and hover. Accent buttons carry a real colour instead. */
.btn-accent{background:var(--m-red); border-color:var(--m-red); color:#fff}
.btn-accent:hover{background:#f5402f; border-color:#f5402f; color:#fff}
/* WhatsApp brand green. Deepened from #25d366 so the white label clears AA —
   the lighter brand green only reaches 2.4:1 against white. */
.btn-wa{background:#128c47; border-color:#128c47; color:#fff}
.btn-wa:hover{background:#0e7439; border-color:#0e7439; color:#fff}
.btn-wa svg{color:#fff}
.footer-inner .fbrand p{margin:16px 0; color:var(--header-body); line-height:1.6; max-width:34ch; font-weight:300}
.footer-inner .brand-logo{height:64px}
.footer-inner .brand-word{color:#fff}
.footer-inner h5{font-family:var(--f); color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:1.5px; margin:0 0 18px; font-weight:700}
.footer-inner ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.footer-inner ul a{color:var(--header-body); transition:color .2s; font-weight:300}
.footer-inner ul a:hover{color:#fff}
.footer-base{border-top:1px solid var(--header-line)}
.footer-base .wrap{display:flex; align-items:center; gap:16px; padding:22px 40px; flex-wrap:wrap; color:var(--mute); font-size:14px}
.footer-base .sp{flex:1}

/* social icons + payment marks — shared by both footers */
.footer-base .fsocial{margin-top:0}
.fsocial{display:flex; gap:10px; margin-top:18px}
.fsocial a{width:40px; height:40px; border:1px solid var(--header-line); display:grid; place-items:center; color:var(--header-body); transition:background .2s, border-color .2s, color .2s}
.fsocial a:hover{background:#fff; border-color:#fff; color:#000}
.fpay{display:flex; align-items:center; gap:14px}
.fpay img{height:20px; width:auto; opacity:.7; transition:opacity .2s}
.fpay img:hover{opacity:1}

/* small helpers used by cart / checkout */
.variant{display:inline-block; font-size:14px; color:var(--body-strong); background:var(--surface-soft); border:1px solid var(--hairline); padding:2px 10px; margin-top:4px; font-family:var(--f-mono)}
.link.danger{color:var(--mute)}
.link.danger:hover{color:var(--m-red)}
.ol-name{flex:1}
.ol-price{font-family:var(--f-mono); font-weight:700; color:var(--ink)}

@media (max-width:1000px){
  .footer-inner{grid-template-columns:1fr 1fr; gap:40px}
  .footer-inner .fbrand,.footer-inner .fnews{grid-column:span 2}
}
/* The 2-column footer never collapsed further, so on a 375px phone each column was
   ~150px: "Quick Links" broke onto two lines and the contact address was cut mid-word
   ("1212 Motorway Drive, Detrc"). One column below 560px. */
@media (max-width:560px){
  .footer-inner{grid-template-columns:1fr; gap:32px; padding:44px 20px 36px}
  .footer-inner .fbrand,.footer-inner .fnews{grid-column:span 1}
  .footer-inner h5{white-space:nowrap; margin-bottom:14px}
  /* the address is the longest string down here; it must wrap rather than clip */
  .footer-inner li,.footer-inner ul a,.footer-inner .fcontact span{overflow-wrap:anywhere}
  .footer-inner .fbrand p{max-width:none}
  .footer-base .wrap{padding:20px; gap:10px}
  .footer-base .sp{flex:none; width:100%}
}
@media (max-width:900px){
  .cart-wrap{grid-template-columns:1fr}
  .cart-summary{position:static}
}

/* ===== Page hero (shop / about / contact) =====
   Deliberately not the usual "text left, photo right behind a soft fade": the
   photo is cut by a hard diagonal, the plate carries a fine motorsport hatch,
   and catalog figures run as a rail along the base. */
.phero{position:relative; overflow:hidden; background:#0a0a0a; color:#fff; margin:0; isolation:isolate}
/* full-bleed hero sits above .main; trim main's top gap so the drill sits close */
.main.has-hero{padding-top:36px}
/* diagonal hatch — 2% white, reads as texture not pattern */
.phero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 1px,transparent 1px 9px)}
/* photo, clipped on a hard angle instead of faded */
.phero-im{position:absolute; inset:0 0 0 44%; z-index:0; background:#0a0a0a center/cover no-repeat;
  clip-path:polygon(14% 0,100% 0,100% 100%,0 100%); filter:grayscale(.34) contrast(1.06)}
.phero-im::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,#0a0a0a 0,rgba(10,10,10,.72) 26%,rgba(10,10,10,.10) 62%,rgba(10,10,10,0) 100%)}
/* substantial but not the tall confusing version: vertically-centred content,
   an eyebrow, a strong single-line headline, and one inline figure strip */
/* content constrained to the site column so text aligns with the rest of the page,
   while the dark band + photo bleed to the viewport edges */
.phero-body{position:relative; z-index:2; max-width:var(--wrap); margin:0 auto;
  display:flex; flex-direction:column; justify-content:center;
  gap:20px; min-height:280px; padding:44px 40px}
.phero-t{max-width:880px; display:flex; flex-direction:column; gap:18px}
.phero .eyebrow{display:flex; align-items:center; gap:12px; font-size:14px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:#fff; margin:0}
.phero .eyebrow::before{content:""; width:30px; height:3px; background:var(--m-red); flex:0 0 auto}
.phero h1{margin:0; font-size:clamp(28px,3.6vw,46px); line-height:1.03; letter-spacing:-.025em;
  text-transform:uppercase; color:#fff; font-weight:700}
.phero h1 .dot{color:var(--m-red)}
.phero-lead{display:none}
/* figures as one inline strip, hairline-divided; 3 figures sit within the dark
   readable zone before the photo */
.phero-rail{display:flex; flex-wrap:wrap; align-items:center; gap:12px 0; margin:4px 0 0; border:0}
.phero-rail>div{display:flex; align-items:baseline; gap:9px; padding:0 20px; border-left:1px solid #2b2b2b}
.phero-rail>div:first-child{padding-left:0; border-left:0}
.phero-rail dt{font-family:var(--f-mono); font-size:20px; font-weight:700; color:#fff;
  letter-spacing:-.02em; line-height:1}
.phero-rail dd{margin:0; display:flex; align-items:center; gap:7px; font-size:14px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; color:#8a8a8a}
.phero-rail .pip{width:8px; height:8px; border-radius:50%; background:#20c45f; flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(32,196,95,.2)}
@media (max-width:1024px){
  .phero-im{inset:0 0 0 52%; clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
  .phero-body{padding:36px 32px; min-height:236px}
}
@media (max-width:640px){
  .phero-im{inset:auto 0 0 0; height:36%; clip-path:polygon(0 16%,100% 0,100% 100%,0 100%)}
  .phero-im::after{background:linear-gradient(0deg,rgba(10,10,10,.35) 0,#0a0a0a 100%)}
  /* Percentage padding resolves against WIDTH, not height: `calc(36% + 20px)` was
     reserving ~155px under the copy on a 375px screen, which read as a large empty
     band. The photo is 36% of HEIGHT, so reserve in vh instead. */
  .phero-body{padding:26px 20px; min-height:auto; gap:16px}
  .phero-t{gap:12px}
  /* The rail is a WRAPPING flex row: once the three figures wrapped to their own
     lines they each kept `padding:0 20px` + `border-left`, so every number started at
     a different x. That ragged stagger is what reads as broken. Grid them instead:
     one per row, shared left edge, hairline above rather than beside. */
  .phero-rail{display:grid; grid-template-columns:1fr; gap:0; margin-top:2px}
  .phero-rail>div{padding:10px 0; border-left:0; border-top:1px solid #2b2b2b; justify-content:flex-start}
  .phero-rail>div:first-child{border-top:0; padding-top:0}
  .phero-rail dt{font-size:22px}
  .phero-rail dd{font-size:12px; letter-spacing:1px}
}
/* Reserve for the photo band. It is 36% of the HERO's height, and the hero's height is
   content + this padding, so P >= 0.36 * (content + P). With ~200px of copy that solves
   to ~112px. A fixed 120px is predictable; 28vh measured 227px on an 812px screen,
   which is worse than the calc(36%) it replaced. */
@media (max-width:640px){
  .phero-body{padding-bottom:120px}
}

/* ===== Shop drill-down bar ===== */
/* searchable dropdown (combobox) — replaces native <select> so long option lists
   (300+ makes) are filterable */
.ss{position:relative; display:flex; flex-direction:column; gap:7px; min-width:0}
.ss-lab{font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--mute)}
.ss-btn{width:100%; height:46px; padding:0 38px 0 12px; background:var(--canvas); color:var(--ink);
  border:1px solid var(--hairline); font-family:var(--f); font-size:14px; font-weight:400; text-align:left;
  cursor:pointer; position:relative; display:flex; align-items:center; transition:border-color .2s}
.ss-btn:hover:not(:disabled){border-color:var(--ink)}
.ss-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.ss-btn:disabled{color:var(--mute); background:var(--surface-elevated); cursor:not-allowed}
.ss-btn .ss-val{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ss-btn .ss-cv{position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--ink); transition:transform .2s}
.ss-btn:disabled .ss-cv{color:var(--mute)}
.ss.open .ss-btn{border-color:var(--ink)}
.ss.open .ss-btn .ss-cv{transform:translateY(-50%) rotate(180deg)}
.ss-pop{position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0; background:var(--canvas);
  border:1px solid var(--ink); max-height:320px; display:flex; flex-direction:column; box-shadow:0 14px 34px rgba(0,0,0,.12)}
.ss-pop[hidden]{display:none}
.ss-search{padding:10px; border-bottom:1px solid var(--hairline); flex:0 0 auto}
.ss-search input{width:100%; height:38px; padding:0 12px; border:1px solid var(--hairline);
  font-family:var(--f); font-size:14px; color:var(--ink); background:var(--surface-soft)}
.ss-search input:focus{outline:0; border-color:var(--ink)}
.ss-list{list-style:none; margin:0; padding:0; overflow-y:auto; flex:1 1 auto}
.ss-opt{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px;
  font-size:14px; color:var(--body); cursor:pointer}
.ss-opt:hover,.ss-opt.mark{background:var(--surface-soft); color:var(--ink)}
.ss-opt.on{background:var(--ink); color:#fff; font-weight:700}
.ss-opt .n{font-family:var(--f-mono); font-size:14px; color:var(--mute)}
.ss-opt.on .n{color:#c2c2c2}
.ss-none{padding:16px 13px; color:var(--mute); font-size:14px}

.drill{border:1px solid var(--hairline); background:var(--surface-soft); padding:22px 24px; margin:0 0 28px}
.drill{border:1px solid var(--hairline); background:var(--surface-soft); padding:22px 24px; margin:0 0 28px}
.drill-row{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.drill-search{margin-top:16px; display:flex; flex-direction:column; gap:7px}
.qwrap{position:relative; display:flex; align-items:center}
.qwrap .qic{position:absolute; left:14px; color:var(--mute); pointer-events:none}
.qwrap input{width:100%; height:52px; padding:0 44px; background:var(--canvas); color:var(--ink);
  border:1px solid var(--hairline); font-family:var(--f); font-size:15px; font-weight:300}
.qwrap input::placeholder{color:var(--mute)}
.qwrap input:focus{outline:0; border-color:var(--ink)}
.qwrap input:focus~.qic{color:var(--ink)}
.qwrap input::-webkit-search-cancel-button{display:none}
.qclear{position:absolute; right:8px; width:34px; height:34px; display:grid; place-items:center;
  background:none; border:0; color:var(--mute); font-size:22px; line-height:1; cursor:pointer}
.qclear:hover{color:var(--ink)}
.qclear[hidden]{display:none}
.drill-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:18px}
.drill-state{font-size:14px; color:var(--body); font-weight:300}
#pResults{transition:opacity .2s}
@media (max-width:1100px){ .drill-row{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .drill-row{grid-template-columns:1fr} }

/* ===== About / Contact pages =====
   Editorial, not card-grid: oversized statements, hairline-ruled section heads,
   numbered rows and full-width channel rows. No boxes unless a box earns it. */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin:0 0 var(--sec-pad)}
.split-l{min-width:0}
.split-r{min-width:0}
.statement{margin:0; font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(22px,2.7vw,34px); line-height:1.14; letter-spacing:-.02em; color:var(--ink)}
.statement em{font-style:normal; color:var(--m-red)}
.split-r p{margin:0 0 18px; color:var(--body); font-weight:300; font-size:16px; line-height:1.75}
.split-r .sig{margin-top:26px}
.link-arrow{display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.3px; color:var(--ink); padding-bottom:5px;
  border-bottom:2px solid var(--m-red)}
.link-arrow svg{transition:transform .2s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* section head as a rule with the title sitting on it */
.secline{display:flex; align-items:center; gap:20px; margin:0 0 var(--head-gap);
  font-size:clamp(19px,2.2vw,25px); text-transform:uppercase; letter-spacing:-.01em; color:var(--ink)}
.secline::after{content:""; flex:1; height:1px; background:var(--hairline)}

/* numbered principle rows */
.numlist{margin:0 0 var(--sec-pad)}
.numlist ol{list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline)}
.numlist li{display:grid; grid-template-columns:120px 1fr; gap:32px; padding:32px 0;
  border-bottom:1px solid var(--hairline); transition:background .2s}
.numlist li:hover{background:var(--surface-soft)}
.numlist .n{font-family:var(--f-mono); font-size:clamp(26px,3vw,38px); font-weight:700;
  color:var(--hairline-strong); line-height:1; letter-spacing:-.03em}
.numlist li:hover .n{color:var(--m-red)}
.numlist h3{margin:0 0 10px; font-size:17px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink)}
.numlist p{margin:0; color:var(--body); font-weight:300; line-height:1.7; max-width:62ch; font-size:15px}
.numlist em{font-style:normal; font-weight:700; color:var(--ink)}

/* three steps */
.howto{margin:0 0 var(--sec-pad)}
.howto-g{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline);
  border:1px solid var(--hairline)}
.howto-g>div{background:var(--canvas); padding:32px 28px 34px}
.howto .s{display:block; font-family:var(--f-mono); font-size:15px; font-weight:700; color:var(--m-red);
  letter-spacing:2px; margin-bottom:20px}
.howto h3{margin:0 0 10px; font-size:16px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink)}
.howto p{margin:0; color:var(--body); font-weight:300; line-height:1.7; font-size:15px}

/* dark closing band */
.ctaband{margin:0; background:var(--ink); color:#fff; padding:52px 44px; display:flex;
  align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap}
.ctaband h2{margin:0 0 8px; font-size:clamp(20px,2.4vw,28px); text-transform:uppercase; letter-spacing:-.01em; color:#fff}
.ctaband p{margin:0; color:#b4b4b4; font-weight:300}
.ctaband-btns{display:flex; gap:12px; flex-wrap:wrap}
.ctaband .btn{border-color:rgba(255,255,255,.4); color:#fff}
.ctaband .btn:hover{background:#fff; border-color:#fff; color:#000}

/* ===== About page =====
   Follows the supplied references: sentence-case display headings, softened
   corners on imagery, a centred statement whose tail recedes, a five-tile mosaic
   and a marquee. Palette stays ours - black / white / M red, never orange. */

/* 1. intro */
.ab-hero{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; margin:0 0 var(--sec-pad)}
.ab-kicker{margin:0 0 18px; display:inline-flex; align-items:center; gap:10px; font-size:14px;
  font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--mute)}
.ab-kicker::before{content:""; width:26px; height:3px; background:var(--m-red)}
.ab-hero h1{margin:0; font-family:var(--f-display); font-weight:700; color:var(--ink);
  font-size:clamp(32px,4.4vw,52px); line-height:1.04; letter-spacing:-.035em}
.ab-lead{margin:24px 0 30px; color:var(--body); font-weight:300; font-size:17px; line-height:1.72; max-width:48ch}
.ab-hero-im{position:relative}
.ab-plate{aspect-ratio:5/4; border-radius:18px; background:#eee center/cover no-repeat; filter:grayscale(.12)}
.ab-seal{position:absolute; left:-26px; bottom:-26px; width:132px; height:132px; border-radius:50%;
  background:var(--canvas); box-shadow:0 10px 30px rgba(0,0,0,.10); display:grid; place-items:center}
.ab-seal svg{position:absolute; inset:0; width:100%; height:100%; animation:abspin 22s linear infinite}
.ab-seal text{font-family:var(--f); font-size:11.5px; font-weight:700; letter-spacing:2.4px; fill:var(--ink)}
.ab-seal-c{width:46px; height:46px; border-radius:50%; background:var(--m-red); color:#fff;
  display:grid; place-items:center; position:relative; z-index:1}
@keyframes abspin{ to{transform:rotate(360deg)} }
@media (prefers-reduced-motion:reduce){ .ab-seal svg{animation:none} }

/* 2. statement */
.ab-say{max-width:1000px; margin:0 auto var(--sec-pad); text-align:center}
.ab-say p{margin:0; font-family:var(--f-display); font-weight:700; letter-spacing:-.022em;
  font-size:clamp(21px,2.6vw,33px); line-height:1.4; color:var(--ink)}
.ab-say span{color:#b9b9b7}

/* 3. figures */
.ab-figs{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:24px;
  margin:0 0 var(--sec-pad); text-align:center}
.ab-figs dt{font-family:var(--f-display); font-size:clamp(28px,3.6vw,44px); font-weight:700;
  color:var(--ink); letter-spacing:-.035em; line-height:1}
.ab-figs dd{margin:12px 0 0; font-size:14px; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--mute)}

/* centred section head */
.ab-head{max-width:640px; margin:0 auto var(--head-gap); text-align:center}
.ab-head h2{margin:0; font-family:var(--f-display); font-weight:700; color:var(--ink);
  font-size:clamp(24px,3.2vw,38px); line-height:1.1; letter-spacing:-.03em}
.ab-head p{margin:16px 0 0; color:var(--body); font-weight:300; font-size:16px; line-height:1.7}

/* 4. mosaic - 3 columns x 2 rows, every cell filled, no holes */
.ab-mosaic-sec{margin:0 0 var(--sec-pad)}
.ab-mosaic{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,210px); gap:16px}
.mz{border-radius:18px; overflow:hidden}
.mz-ph{background:#eee center/cover no-repeat; filter:grayscale(.18)}
.mz-stat{display:flex; flex-direction:column; justify-content:space-between; padding:28px 26px}
.mz-stat b{font-family:var(--f-display); font-size:clamp(24px,3vw,38px); font-weight:700;
  letter-spacing:-.035em; line-height:1}
.mz-stat span{font-size:15px; font-weight:600; line-height:1.45; max-width:24ch}
.mz-stat.is-red{background:var(--m-red); color:#fff}
.mz-stat.is-dark{background:var(--ink); color:#fff}
.ab-mosaic .a{grid-column:1; grid-row:1 / span 2}
.ab-mosaic .b{grid-column:2; grid-row:1}
.ab-mosaic .c{grid-column:3; grid-row:1}
.ab-mosaic .d{grid-column:2; grid-row:2}
.ab-mosaic .e{grid-column:3; grid-row:2}

/* 5. heading left, copy right */
.ab-two{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin:0 0 var(--sec-pad)}
.ab-two h2{margin:0; font-family:var(--f-display); font-weight:700; color:var(--ink);
  font-size:clamp(24px,3.1vw,37px); line-height:1.08; letter-spacing:-.03em}
.ab-two p{margin:0 0 18px; color:var(--body); font-weight:300; font-size:16px; line-height:1.78}
.ab-two em{font-style:normal; font-weight:700; color:var(--ink)}

/* 6. principles - asymmetric bento */
.ab-rules{margin:0 0 var(--sec-pad)}
.ab-bento2{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,236px); gap:16px}
.p2{position:relative; overflow:hidden; border-radius:18px; padding:30px 30px 28px;
  display:flex; flex-direction:column; justify-content:space-between; min-width:0}
/* pinwheel: red wide top-left, light top-right, photo bottom-left, dark wide bottom-right */
.p2.x-tl{grid-column:1 / span 2; grid-row:1}
.p2.x-tr{grid-column:3; grid-row:1}
.p2.x-bl{grid-column:1; grid-row:2}
.p2.x-br{grid-column:2 / span 2; grid-row:2}
.p2-n{font-family:var(--f-mono); font-size:15px; font-weight:700; letter-spacing:1px; opacity:.9}
.p2-b h3{margin:0 0 9px; font-size:20px; letter-spacing:-.015em; line-height:1.15}
.p2-b p{margin:0; font-weight:300; font-size:15px; line-height:1.62}
.p2-b em{font-style:normal; font-weight:700}
.p2-red{background:var(--m-red); color:#fff}
.p2-red .p2-n{color:#fff}
.p2-red .p2-b h3{color:#fff}
.p2-red .p2-b p{color:rgba(255,255,255,.9); max-width:52ch}
.p2-red .p2-b em{color:#fff}
.p2-dark{background:var(--ink); color:#fff}
.p2-dark .p2-n{color:#8a8a8a}
.p2-dark .p2-b h3{color:#fff}
.p2-dark .p2-b p{color:#c2c2c2}
.p2-dark .p2-b em{color:#fff}
.p2-photo{background-size:cover; background-position:center; color:#fff}
.p2-photo::before{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.15),rgba(10,10,10,.82))}
.p2-photo>*{position:relative; z-index:1}
.p2-photo .p2-n{color:#fff}
.p2-photo .p2-b h3{color:#fff}
.p2-photo .p2-b p{color:rgba(255,255,255,.88)}
.p2-light{background:var(--canvas); border:1px solid var(--hairline); color:var(--ink)}
.p2-light .p2-n{color:var(--hairline-strong)}
.p2-light .p2-b h3{color:var(--ink)}
.p2-light .p2-b p{color:var(--body)}
.p2-light .p2-b em{color:var(--ink)}

/* 8. word from the team */
.ab-word{display:grid; grid-template-columns:1fr 1.2fr; gap:64px; align-items:center; margin:0 0 var(--sec-pad)}
.ab-word h2{margin:0 0 22px; font-family:var(--f-display); font-weight:700; color:var(--ink);
  font-size:clamp(24px,3.1vw,37px); line-height:1.08; letter-spacing:-.03em}
.ab-word p{margin:0 0 18px; color:var(--body); font-weight:300; font-size:16px; line-height:1.78; max-width:56ch}
.ab-word-by{margin-top:28px !important; padding-top:20px; border-top:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:3px}
.ab-word-by b{font-size:16px; color:var(--ink)}
.ab-word-by span{font-size:14px; color:var(--mute)}
.ab-word-im{position:relative; margin:0; width:100%}
.ab-word-photo{aspect-ratio:16/10; border-radius:18px; background:#eee center/cover no-repeat; filter:grayscale(.2)}
/* offset red mat behind the photo for depth, and a mono stat badge on the corner */
.ab-word-im::before{content:""; position:absolute; inset:22px -18px -18px 22px; border-radius:18px;
  background:var(--m-red); z-index:-1}
.ab-word-badge{position:absolute; left:-20px; bottom:26px; margin:0; display:flex; align-items:center; gap:12px;
  background:var(--ink); color:#fff; padding:16px 22px; border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.18)}
.ab-word-badge b{font-family:var(--f-display); font-size:26px; font-weight:700; letter-spacing:-.03em; line-height:1}
.ab-word-badge span{font-size:13px; font-weight:600; line-height:1.25; color:#c2c2c2; text-transform:uppercase; letter-spacing:.06em}

/* closing band */
.ab-cta{background:var(--ink); color:#fff; border-radius:18px; padding:52px 46px; display:flex;
  align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap}
.ab-cta h2{margin:0 0 8px; font-family:var(--f-display); font-size:clamp(21px,2.5vw,30px);
  letter-spacing:-.028em; color:#fff}
.ab-cta p{margin:0; color:#b4b4b4; font-weight:300}
.ab-cta-b{display:flex; gap:12px; flex-wrap:wrap}
.ab-cta .btn{border-color:rgba(255,255,255,.4); color:#fff}
.ab-cta .btn:hover{background:#fff; border-color:#fff; color:#000}

@media (max-width:1024px){
  .ab-hero,.ab-two,.ab-word{grid-template-columns:1fr; gap:36px}
  .ab-bento2{grid-template-columns:1fr 1fr; grid-template-rows:auto}
  .ab-bento2 .x-tl,.ab-bento2 .x-br{grid-column:1 / span 2; grid-row:auto; min-height:180px}
  .ab-bento2 .x-tr,.ab-bento2 .x-bl{grid-column:auto; grid-row:auto; min-height:200px}
  .ab-word-im{aspect-ratio:auto}
  .ab-figs{grid-auto-flow:row; grid-template-columns:1fr 1fr; gap:32px 24px}
  .ab-mosaic{grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,190px)}
  .ab-mosaic .a{grid-column:1; grid-row:1 / span 2}
  .ab-mosaic .b{grid-column:2; grid-row:1}
  .ab-mosaic .c{grid-column:2; grid-row:2}
  .ab-mosaic .d{grid-column:1; grid-row:3}
  .ab-mosaic .e{grid-column:2; grid-row:3}
  .ab-rules li{grid-template-columns:60px 1fr; gap:20px}
}
@media (max-width:640px){
  .ab-seal{width:104px; height:104px; left:-14px; bottom:-14px}
  .ab-mosaic{grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:180px}
  .ab-mosaic .mz{grid-column:1 !important; grid-row:auto !important}
  .ab-bento2{grid-template-columns:1fr}
  .ab-bento2 .p2{grid-column:1 !important; grid-row:auto !important; min-height:190px}
  .ab-cta{padding:36px 26px}
}

/* inline figures strip (about) */
.figrow{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin:0 0 var(--sec-pad);
  border-top:1px solid var(--ink); border-bottom:1px solid var(--hairline)}
.figrow>div{padding:24px 24px 26px; border-left:1px solid var(--hairline)}
.figrow>div:first-child{border-left:0; padding-left:0}
.figrow dt{font-family:var(--f-mono); font-size:clamp(19px,2.1vw,27px); font-weight:700;
  color:var(--ink); letter-spacing:-.02em; line-height:1}
.figrow dd{margin:9px 0 0; font-size:14px; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--mute)}

/* contact form */
.formnote{display:flex; flex-direction:column; gap:5px; padding:18px 20px; margin:0 0 26px;
  border-left:3px solid var(--ink); background:var(--surface-soft)}
.formnote b{color:var(--ink); font-size:15px}
.formnote span{color:var(--body); font-weight:300; font-size:15px}
.formnote a{color:var(--ink); border-bottom:1px solid var(--m-red)}
.formnote.is-ok{border-left-color:#0f8a30}
.formnote.is-bad{border-left-color:var(--m-red)}
.cform{margin:0}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.fld{display:flex; flex-direction:column; gap:8px; min-width:0}
.fld.is-wide{grid-column:1 / -1}
.fld>span{font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--mute)}
.fld>span i{font-style:normal; color:var(--m-red)}
.fld>span i.opt{color:var(--mute); font-weight:400; letter-spacing:.04em; text-transform:none}
.fld input,.fld textarea{width:100%; padding:0 14px; height:50px; background:var(--canvas); color:var(--ink);
  border:1px solid var(--hairline); font-family:var(--f); font-size:15px; font-weight:300}
.fld textarea{height:auto; padding:14px; line-height:1.6; resize:vertical; min-height:150px}
.fld input::placeholder,.fld textarea::placeholder{color:#b0b0ae}
.fld input:focus,.fld textarea:focus{outline:0; border-color:var(--ink)}
.fld.has-err input,.fld.has-err textarea{border-color:var(--m-red); background:rgba(226,39,24,.03)}
.fld em{font-style:normal; font-size:14px; color:var(--m-red)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cform-foot{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:26px}
.cform-foot span{font-size:14px; color:var(--mute); font-weight:300}
@media (max-width:640px){ .fgrid{grid-template-columns:1fr} .figrow{grid-auto-flow:row; grid-template-columns:1fr 1fr} .figrow>div:nth-child(odd){border-left:0; padding-left:0} }

/* ===== Contact page ===== */
.ct-top{display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:start; margin:0}
.ct-badge{display:inline-flex; align-items:center; gap:9px; margin:0 0 24px; padding:8px 14px;
  border:1px solid var(--hairline); font-size:14px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.4px; color:var(--ink)}
.ct-badge svg{color:var(--m-red)}
.ct-h1{margin:0; font-family:var(--f-display); font-size:clamp(32px,4.6vw,54px); line-height:1.02;
  letter-spacing:-.032em; color:var(--ink); font-weight:700}
.ct-lead{margin:22px 0 0; color:var(--body); font-weight:300; font-size:16px; line-height:1.75; max-width:46ch}

/* direct channels: label above value, icon tile left */
.cinfo{list-style:none; margin:38px 0 0; padding:0; display:grid; gap:2px}
.cinfo li{display:grid; grid-template-columns:46px 1fr; grid-template-rows:auto auto;
  align-items:center; gap:1px 16px; padding:14px 0}
.ci-ic{grid-row:1 / span 2; width:46px; height:46px; display:grid; place-items:center;
  background:var(--surface-soft); border:1px solid var(--hairline); color:var(--ink)}
.cinfo .is-wa .ci-ic{background:var(--ink); border-color:var(--ink); color:#fff}
.ci-k{grid-column:2; font-size:14px; color:var(--mute); font-weight:400}
.ci-v{grid-column:2; font-size:17px; font-weight:700; color:var(--ink); line-height:1.35; word-break:break-word}
a.ci-v:hover{color:var(--m-red)}
.ct-social{margin-top:26px}
.ct-social .fsocial{margin:0}
.ct-social .fsocial a{border-color:var(--hairline); color:var(--ink)}
.ct-social .fsocial a:hover{background:var(--ink); border-color:var(--ink); color:#fff}

/* the form sits in a panel */
.ct-panel{border:1px solid var(--hairline); background:var(--surface-soft); padding:34px}
.ct-panel .fld input,.ct-panel .fld textarea{background:var(--canvas)}
.ct-panel .formnote{background:var(--canvas)}


@media (max-width:1024px){
  .ct-top{grid-template-columns:1fr; gap:40px}
  .ct-panel{padding:26px}
}

/* contact channel rows */
.split-contact{grid-template-columns:1.35fr 1fr}
.chan{list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline)}
.chan li{border-bottom:1px solid var(--hairline)}
.chan a,.chan>li>div{display:grid; grid-template-columns:52px 1fr auto; grid-template-rows:auto auto;
  align-items:center; gap:2px 18px; padding:26px 8px 26px 0; transition:background .2s, padding .2s}
.chan a:hover{background:var(--surface-soft); padding-left:14px; padding-right:0}
.chan-ic{grid-row:1 / span 2; width:52px; height:52px; display:grid; place-items:center;
  background:var(--ink); color:#fff; transition:background .2s}
.chan .is-static .chan-ic{background:var(--surface-elevated); color:var(--ink)}
.chan li.is-wa .chan-ic{background:#128c47; color:#fff}
.chan-k{grid-column:2; font-size:14px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; color:var(--mute)}
.chan-v{grid-column:2; font-size:19px; font-weight:700; color:var(--ink); word-break:break-word; line-height:1.3}
.chan-d{grid-column:2; grid-row:3; font-size:14px; color:var(--body); font-weight:300; margin-top:5px}
.chan-go{grid-column:3; grid-row:1 / span 2; color:var(--mute); transition:transform .2s var(--ease), color .2s}
.chan a:hover .chan-go{color:var(--ink); transform:translateX(5px)}
.chan-social .fsocial{margin:6px 0 0}
.chan-social .fsocial a{border-color:var(--hairline); color:var(--ink)}
.chan-social .fsocial a:hover{background:var(--ink); border-color:var(--ink); color:#fff}

/* right rail */
.aside-card{border:1px solid var(--hairline); padding:30px; margin-bottom:20px}
.aside-card.is-quiet{background:var(--surface-soft)}
.aside-card h2{font-size:14px; text-transform:uppercase; letter-spacing:1.5px; color:var(--ink);
  margin:0 0 12px; font-weight:700}
.aside-card p{margin:0 0 18px; color:var(--body); font-weight:300; font-size:15px; line-height:1.7}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.ticks li{position:relative; padding-left:24px; color:var(--body); font-weight:300; font-size:15px; line-height:1.6}
.ticks li b{color:var(--ink); font-weight:700}
.ticks li::before{content:""; position:absolute; left:0; top:8px; width:9px; height:2px; background:var(--m-red)}
.arrows{list-style:none; margin:0; padding:0}
.arrows li{border-top:1px solid var(--hairline); padding:15px 0}
.arrows li:first-child{border-top:0; padding-top:0}
.arrows a{display:block; font-size:16px; font-weight:700; color:var(--ink); transition:color .2s}
.arrows a::after{content:" 92"; color:var(--m-red)}
.arrows a:hover{color:var(--m-red)}
.arrows span{display:block; font-size:14px; color:var(--mute); font-weight:300; margin-top:3px}

@media (max-width:1024px){
  .split,.split-contact{grid-template-columns:1fr; gap:40px}
  .howto-g{grid-template-columns:1fr}
  .numlist li{grid-template-columns:64px 1fr; gap:20px; padding:26px 0}
}
/* section padding 80 desktop / 60 tablet / 40 mobile; heading gap 30, 15 on mobile */
@media (max-width:1024px){ :root{--sec-pad:60px} }
@media (max-width:640px){ :root{--sec-pad:40px; --head-gap:15px} }
@media (max-width:760px){
  .wrap{padding:0 24px}
  .main{padding:var(--sec-pad) 24px}
  .part-detail{grid-template-columns:1fr; gap:28px}
  .part-row{grid-template-columns:72px 1fr}
  .part-buy{grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; border-top:1px solid var(--hairline); padding-top:12px}
  .cart-line{grid-template-columns:72px 1fr; row-gap:14px}
  .cart-line .cl-price{grid-column:2; text-align:left; flex-direction:row; gap:10px; align-items:baseline}
  .cart-line .cl-remove{position:absolute; top:16px; right:16px}
  .cart-line{position:relative}
  .cart-lines-head{display:none}
  .footer-inner{grid-template-columns:1fr; padding:48px 24px 32px}
  .footer-base .wrap{padding:20px 24px}
}

/* ===== FAQ ===== */
.faq{background:var(--surface-soft)}
/* heading + subtitle on the left, CTA on the right and vertically centred */
.faq-head{margin:0 0 var(--head-gap);display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px}
.faq-head-t{max-width:720px}
.faq-head h2{font-size:clamp(24px,3.2vw,36px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;margin:0;color:var(--ink);font-weight:700}
.faq-head p{color:var(--body);font-size:16px;font-weight:300;line-height:1.5;margin:16px 0 0}
.faq-head .btn{margin-top:0;white-space:nowrap}
/* two columns of independent rows, matching the 20px card rhythm */
.acc{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.acc-item{border:1px solid var(--hairline);background:var(--canvas)}
.acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;text-align:left;font-family:var(--f);font-size:15px;font-weight:400;color:var(--ink);background:none;border:0;cursor:pointer}
.acc-q .ico{width:26px;height:26px;background:var(--canvas);border:1px solid var(--hairline);color:var(--ink);display:grid;place-items:center;flex:0 0 auto;position:relative;transition:background .25s,border-color .25s,color .25s}
.acc-item.open .acc-q .ico{background:var(--ink);border-color:var(--ink);color:#fff}
.acc-q .ico i{position:absolute;background:currentColor;transition:transform .3s var(--ease),opacity .3s}
.acc-q .ico i.h{width:11px;height:2px}.acc-q .ico i.v{width:2px;height:11px}
.acc-item.open .acc-q .ico i.v{transform:rotate(90deg);opacity:0}
.acc-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.acc-a .inner{padding:0 20px 20px;color:var(--body);font-size:14px;font-weight:300;line-height:1.6;max-width:64ch}
.acc-q .ico{background:var(--surface-elevated)}
.acc-item.open .acc-q .ico{background:var(--ink);color:#fff}
@media (max-width:1024px){ .acc{grid-template-columns:1fr}
  .faq-head{grid-template-columns:1fr;gap:22px;justify-items:start} }

/* ===== Shared section rhythm (was homepage-only, needed by shared partials) ===== */
.sec{padding:var(--sec-pad) 0}
.sec-head{max-width:720px; margin-bottom:var(--head-gap)}
.sec-head h2{font-size:clamp(24px,3.2vw,36px); text-transform:uppercase; letter-spacing:-.01em;
  line-height:1; margin:0; color:var(--ink); font-weight:700}
.sec-head p{color:var(--body); font-size:16px; font-weight:300; line-height:1.5; margin-top:16px; max-width:56ch}

/* ===== Checkout ===== */
.co{display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start; margin:0 0 var(--sec-pad)}
.co-main{min-width:0}
.co-sec{margin:0 0 36px}
.co-sec .secline{margin-bottom:22px}
.co-side{position:sticky; top:96px}
.co-summary{border:1px solid var(--hairline); background:var(--surface-soft); padding:28px}
.co-summary h2{margin:0 0 18px; font-size:16px; text-transform:uppercase; letter-spacing:1px; color:var(--ink)}
.co-items{list-style:none; margin:0 0 18px; padding:0 0 18px; border-bottom:1px solid var(--hairline); display:grid; gap:12px}
.co-items li{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:baseline; font-size:14px}
.co-q{font-family:var(--f-mono); color:var(--mute); font-weight:700}
.co-nm{color:var(--ink); font-weight:300; line-height:1.4}
.co-pr{font-family:var(--f-mono); color:var(--ink); font-weight:700; white-space:nowrap}
.co-row{display:flex; justify-content:space-between; align-items:center; padding:7px 0; color:var(--body); font-size:14px}
.co-row span:last-child{font-family:var(--f-mono); color:var(--ink); font-weight:600}
.co-tot{margin-top:6px; padding-top:14px; border-top:1px solid var(--hairline); font-size:16px}
.co-tot span{color:var(--ink) !important; font-weight:700 !important}
.co-tot span:last-child{font-size:20px}
.co-summary .btn{margin-top:22px}
.co-secure{margin:16px 0 0; font-size:13px; color:var(--mute); font-weight:300; line-height:1.5}
.co-back{margin:16px 0 0; font-size:14px}
.co .fld select{width:100%; height:50px; padding:0 12px; background:var(--canvas); color:var(--ink);
  border:1px solid var(--hairline); font-family:var(--f); font-size:15px; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px}
.co .fld select:focus{outline:0; border-color:var(--ink)}
.co .fld.has-err select{border-color:var(--m-red)}
@media (max-width:900px){ .co{grid-template-columns:1fr; gap:32px} .co-side{position:static} }

/* ===== Slide-out cart drawer ===== */
.cart-dr-ov{position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .3s; z-index:90}
.cart-dr-ov.show{opacity:1; pointer-events:auto}
.cart-dr{position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--canvas);
  border-left:1px solid var(--hairline); transform:translateX(100%); transition:transform .34s var(--ease);
  z-index:91; display:flex; flex-direction:column; box-shadow:-16px 0 44px rgba(0,0,0,.14)}
.cart-dr.show{transform:none}
.cart-dr-hd{display:flex; align-items:center; justify-content:space-between; padding:22px 24px;
  border-bottom:1px solid var(--hairline)}
.cart-dr-hd b{font-family:var(--f-display); font-size:16px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink)}
.cart-dr-hd #cdN{color:var(--mute); font-weight:400}
.cart-dr-x{width:38px; height:38px; display:grid; place-items:center; background:none; border:0; color:var(--mute); cursor:pointer; transition:color .2s}
.cart-dr-x:hover{color:var(--ink)}
.cart-dr-body{flex:1 1 auto; overflow-y:auto; padding:8px 24px}
.cart-dr-empty{color:var(--mute); text-align:center; padding:56px 0; font-weight:300}
.cd-line{display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:start; padding:16px 0; border-bottom:1px solid var(--hairline); transition:opacity .2s}
.cd-im{width:56px; height:56px; display:grid; place-items:center; background:#fff; border:1px solid var(--hairline); overflow:hidden; position:relative}
.cd-im::before{content:""; position:absolute; inset:0; background:var(--surface-soft) var(--site-logo) center/60% no-repeat; opacity:.4}
.cd-im img{position:relative; z-index:1; max-width:84%; max-height:84%; object-fit:contain}
.cd-info{min-width:0; display:flex; flex-direction:column; gap:5px}
.cd-nm{font-size:14px; font-weight:700; color:var(--ink); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
a.cd-nm:hover{color:var(--m-red)}
.cd-meta{font-size:13px; color:var(--mute); font-family:var(--f-mono)}
.cd-qty{display:inline-flex; align-items:center; gap:0; border:1px solid var(--hairline); border-radius:8px; width:fit-content; margin-top:3px; overflow:hidden}
.cd-qty .cd-q{width:28px; height:28px; display:grid; place-items:center; background:var(--canvas); border:0; color:var(--ink); font-size:15px; line-height:1; cursor:pointer; transition:background .2s}
.cd-qty .cd-q:hover{background:var(--surface-soft)}
.cd-qty b{min-width:30px; text-align:center; font-family:var(--f-mono); font-size:14px; font-weight:700; color:var(--ink)}
.cd-right{display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.cd-pr{font-family:var(--f-mono); font-size:15px; font-weight:700; color:var(--ink); white-space:nowrap}
.cd-rm{width:30px; height:30px; display:grid; place-items:center; background:none; border:0; color:var(--mute); cursor:pointer; transition:color .2s}
.cd-rm:hover{color:var(--m-red)}
.cart-dr-ft{flex:0 0 auto; border-top:1px solid var(--hairline); padding:20px 24px; background:var(--surface-soft)}
.cart-dr-sub{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; font-size:15px; color:var(--body)}
.cart-dr-sub b{font-family:var(--f-mono); font-size:19px; color:var(--ink)}
.cart-dr-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* ===== Part page (redesign) ===== */
.pd2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; margin:0 0 var(--sec-pad)}
.pd2-gallery{position:sticky; top:96px}
.pg-main{position:relative; aspect-ratio:1/1; background:#fff; border:1px solid var(--hairline);
  border-radius:14px; overflow:hidden; touch-action:pan-y; cursor:grab;
  user-select:none; -webkit-user-select:none}
.pg-main:active{cursor:grabbing}
.pg-track{display:flex; height:100%; will-change:transform}
.pg-slide{position:relative; flex:0 0 100%; height:100%; display:grid; place-items:center; padding:40px}
.pg-slide img{-webkit-user-drag:none; user-select:none}
/* faded logo watermark behind each image; a failed image (onerror opacity:0) reveals it */
.pg-slide::before{content:""; position:absolute; inset:0; z-index:0;
  background:#fff var(--site-logo) center/34% no-repeat; opacity:.4}
.pg-slide img{position:relative; z-index:1; max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; pointer-events:none}
.pg-arrow{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; display:grid; place-items:center;
  background:var(--canvas); border:1px solid var(--hairline); border-radius:50%; color:var(--ink); cursor:pointer; z-index:5;
  box-shadow:0 4px 14px rgba(0,0,0,.09); transition:background .2s,color .2s,border-color .2s,opacity .2s}
.pg-arrow:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.pg-arrow.prev{left:12px}
.pg-arrow.next{right:12px}
.pg-arrow[disabled]{opacity:.3; pointer-events:none}
.pg-thumbs{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; margin-top:14px; padding:2px; cursor:grab; touch-action:pan-x}
.pg-thumbs::-webkit-scrollbar{display:none}
.pg-thumbs.drag{cursor:grabbing}
/* exactly 4 thumbs span the full width; more overflow into a draggable strip */
.pg-thumb{flex:0 0 calc((100% - 30px) / 4); aspect-ratio:1; background:#fff; border:1px solid var(--hairline); border-radius:10px;
  display:grid; place-items:center; padding:10px; cursor:pointer; overflow:hidden; transition:border-color .2s}
.pg-thumb:hover{border-color:var(--body)}
.pg-thumb.on{border-color:var(--ink); border-width:2px}
.pg-thumb img{max-width:100%; max-height:100%; object-fit:contain}
.pg-thumbs.drag .pg-thumb{pointer-events:none}

/* fitment table — on theme: hairline rows, mono year, red "shop parts" link */
.fit-wrap{overflow-x:auto}
.fit-table{width:100%; border-collapse:collapse; font-size:15px; min-width:560px}
.fit-table th{text-align:left; padding:0 16px 14px; font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--mute); border-bottom:1px solid var(--hairline)}
.fit-table td{padding:16px; border-bottom:1px solid var(--hairline); color:var(--body); font-weight:300; vertical-align:middle}
.fit-table tr:hover td{background:var(--surface-soft)}
.fit-yr{font-family:var(--f-mono); font-weight:700; color:var(--ink)}
.fit-mk{font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.02em}
.fit-en{color:var(--mute)}
.fit-go{text-align:right; white-space:nowrap}
.fit-go a{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink); transition:color .2s}
.fit-go a:hover{color:var(--m-red)}
.fit-go svg{transition:transform .2s}
.fit-go a:hover svg{transform:translateX(3px)}
.pd2-info{min-width:0}
.pd2-brand{display:inline-block; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--mute); margin-bottom:10px}
a.pd2-brand:hover{color:var(--m-red)}
.pd2-name{font-family:var(--f-display); font-size:clamp(24px,3vw,36px); line-height:1.1; letter-spacing:-.02em; color:var(--ink); margin:0 0 16px; font-weight:700}
.pd2-price{font-family:var(--f-mono); font-size:30px; font-weight:700; color:var(--ink); letter-spacing:-.02em}
.pd2-price .core{font-family:var(--f); font-size:14px; color:var(--mute); font-weight:400; margin-left:8px}
.pd2-pn{margin:10px 0 22px; font-size:14px; color:var(--mute)}
.pd2-pn b{color:var(--ink); font-weight:700}
.pd2-stock.in{color:var(--success); font-weight:700}
.pd2-stock.out{color:var(--mute); font-weight:700}

.pd2-acc{border:1px solid var(--hairline); border-radius:12px; margin:0 0 22px; background:var(--surface-soft); overflow:hidden}
.pd2-acc-h{width:100%; display:flex; align-items:center; justify-content:space-between; padding:18px 20px; background:none;
  border:0; cursor:pointer; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink)}
.pd2-acc .chev{display:grid; place-items:center; color:var(--ink); transition:transform .3s; flex:0 0 auto}
.pd2-acc.open .chev{transform:rotate(180deg)}
.pd2-acc-c{max-height:0; overflow:hidden; transition:max-height .32s cubic-bezier(.4,0,.2,1)}
.pd2-acc-inner{padding:0 20px 20px; color:var(--body); font-weight:300; line-height:1.7; font-size:15px}
.pd2-buy{margin:0 0 24px}
.pd2-choose{display:block; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--ink); margin-bottom:16px}
.pd2-choose select{appearance:none; margin-top:8px; width:100%; height:50px; border:1px solid var(--hairline); border-radius:10px;
  background:var(--canvas); padding:0 40px 0 14px; font-family:var(--f); font-size:14px; color:var(--ink); cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px; background-size:5px 5px; background-repeat:no-repeat}
.pd2-choose select:focus{outline:0; border-color:var(--ink)}
.pd2-actions{display:flex; align-items:stretch; gap:12px; flex-wrap:wrap}
.pd2-qty{display:inline-flex; align-items:center; border:1px solid var(--hairline); border-radius:10px; overflow:hidden; flex:0 0 auto}
.pd2-qty .qbtn{width:44px; height:52px; display:grid; place-items:center; background:var(--canvas); border:0; color:var(--ink); font-size:18px; cursor:pointer; transition:background .2s}
.pd2-qty .qbtn:hover{background:var(--surface-soft)}
.pd2-qty input{width:48px; height:52px; border:0; border-left:1px solid var(--hairline); border-right:1px solid var(--hairline); text-align:center; font-family:var(--f-mono); font-size:16px; font-weight:700; color:var(--ink)}
.pd2-qty input:focus{outline:0}
.pd2-actions .btn{flex:1 1 auto; min-width:130px; border-radius:10px}

.pd2-delivery{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:12px; overflow:hidden}
.pd2-do{display:flex; align-items:center; gap:14px; padding:18px 20px; background:var(--canvas)}
.pd2-do-ic{width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; background:var(--surface-soft); border-radius:10px; color:var(--ink)}
.pd2-do span:last-child{display:flex; flex-direction:column; font-size:14px; color:var(--body); font-weight:300; line-height:1.3}
.pd2-do b{font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--mute); font-weight:700; margin-bottom:3px}

/* tabs */
.pd2-tabs{margin:0}
.pd2-tabbar{display:flex; gap:0; border-bottom:1px solid var(--hairline); margin-bottom:26px}
.pd2-tab{position:relative; padding:16px 26px; background:none; border:0; font-family:var(--f); font-size:15px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--mute); cursor:pointer; transition:color .2s}
.pd2-tab:hover{color:var(--ink)}
.pd2-tab.on{color:var(--ink)}
.pd2-tab.on::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--m-red)}
.pd2-tab-n{font-family:var(--f-mono); font-size:13px; color:var(--mute); margin-left:6px}
.pd2-spec{width:100%; border-collapse:collapse; font-size:15px; border-top:1px solid var(--hairline)}
.pd2-spec th{text-align:left; width:38%; color:var(--body); font-weight:700; padding:16px 4px; border-bottom:1px solid var(--hairline); vertical-align:top}
.pd2-spec td{padding:16px 4px; border-bottom:1px solid var(--hairline); color:var(--body); font-weight:300}
.pd2-loading{color:var(--mute); padding:24px 0}
.pd2-fits-pager{display:flex; align-items:center; gap:16px; margin-top:22px}
@media (max-width:900px){
  .pd2{grid-template-columns:1fr; gap:28px}
  .pd2-gallery{position:static}
  .pd2-delivery{grid-template-columns:1fr}
  .pd2-tab{padding:14px 16px; font-size:14px}
}

/* footer newsletter inline message */
.fnews-msg{margin:12px 0 0; font-size:14px; font-weight:300}
.fnews-msg.is-ok{color:#7ee2a8}
.fnews-msg.is-bad{color:#ff8a80}

/* ===== Brands page search ===== */
/* Matches the .drill/.filt search affordance used on the shop page so the two pages
   read as one system. 44px tall so it is a valid touch target on phones. */
.brandfilter{position:relative; display:flex; align-items:center; gap:10px; max-width:460px;
  margin:0 0 10px; padding:0 14px; height:48px;
  background:var(--surface-card); border:1px solid var(--hairline)}
.brandfilter svg{color:var(--mute); flex:0 0 auto}
.brandfilter input{flex:1; height:100%; min-width:0; border:0; outline:0; background:none;
  font:inherit; font-size:15px; color:var(--ink); appearance:none}
.brandfilter input::placeholder{color:var(--mute)}
.brandfilter input::-webkit-search-cancel-button{display:none}
.brandfilter:focus-within{border-color:var(--ink)}
.brandfilter button{flex:0 0 auto; width:28px; height:28px; border:0; background:none; cursor:pointer;
  color:var(--mute); font-size:20px; line-height:1; padding:0}
.brandfilter button:hover{color:var(--ink)}
.brandcount{margin:0 0 18px; font-size:14px; color:var(--mute); min-height:1.2em}
.brandgrid .brandcard[hidden]{display:none}
@media (max-width:560px){ .brandfilter{max-width:none} }