/* CarbonPWR storefront layer on top of landing.css tokens (VanMoof-like: off-white, near-black, pill buttons, hairlines) */
picture{display:contents}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.small{font-size:13px}
[hidden]{display:none!important}
.logo-txt{font-weight:800;font-size:22px;letter-spacing:-.03em;color:#fff}

/* ---- top bar + floating header pill ---- */
.bar{background:var(--pink);color:var(--ink);text-align:center;font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-weight:500;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:6px 16px;line-height:1.4}
.bar-x::before{content:" · ";white-space:pre}
/* zero-height sticky wrapper: the pill floats over the first panel instead of pushing it down */
.shop-head{position:sticky;top:0;z-index:30;display:flow-root;height:0;color:#fff}
.shop-head.menu-on{z-index:40}
.hbar{position:relative;width:min(620px,calc(100% - 16px));margin:8px auto 0;background:rgba(11,11,13,.8);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.2);border-radius:6px}
.shop-head-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:52px;padding:0 4px}
.shop-head .logo{display:flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;justify-self:center}
.menubtn{position:relative;justify-self:start;display:inline-flex;align-items:center;min-width:44px;height:44px;padding:0;background:transparent;border:0;color:#fff;cursor:pointer;font:inherit}
.menubtn .mi,.menubtn .mx{display:grid;place-items:center;width:44px;height:44px}
.menubtn .mx,.menubtn[aria-expanded=true] .mi{display:none}
.menubtn[aria-expanded=true] .mx{display:grid}
.menubtn .mt{margin:0 14px 0 -8px;font-weight:600;font-size:15px;letter-spacing:-.005em}
a.cartbtn{position:relative;justify-self:end;display:grid;place-items:center;width:44px;height:44px;color:#fff;text-decoration:none}
.cartbtn b{position:absolute;top:3px;right:1px;background:var(--pink);color:var(--ink);font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}
.shop-search{display:flex;align-items:center;background:var(--graphite);border:1px solid var(--line-d);border-radius:999px;padding:3px 3px 3px 18px}
.shop-search:focus-within{border-color:var(--mute-d)}
.shop-search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-weight:500;font-size:16px;background:transparent;color:#fff;min-height:44px}
.shop-search input::placeholder{color:var(--mute-d)}
.shop-search input:focus-visible{outline:0}
.shop-search button{width:44px;height:44px;flex:none;border-radius:50%;border:0;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;position:relative}
.menu-bg{position:fixed;inset:0;z-index:39;background:rgba(11,11,13,.5);opacity:0;transition:opacity .25s ease}
.menu-bg.on{opacity:1}

/* ---- menu panel: a dark graphite mega panel under the pill (desktop), a full-height sheet (phone) ---- */
.shop-menu{position:absolute;left:8px;right:8px;top:66px;color:#fff;background:rgba(20,20,24,.9);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);border:1px solid rgba(255,255,255,.14);border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.5);max-height:calc(100vh - 112px);max-height:calc(100dvh - 112px);overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-10px) scale(.992);transform-origin:50% 0;pointer-events:none;transition:opacity .22s ease,transform .32s cubic-bezier(.2,.7,.2,1)}
.shop-head.menu-open .shop-menu{opacity:1;transform:none;pointer-events:auto}
.shop-menu a{text-decoration:none;color:#fff}
.shop-menu svg{flex:none}
.mm-mob{display:none}
.mm-desk{padding:clamp(20px,2.2vw,32px)}
.mm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(250px,.9fr);max-width:1500px;margin:0 auto}
.mm-col{min-width:0;padding:0 clamp(16px,2vw,32px)}
.mm-col:first-child{padding-left:0}
.mm-col+.mm-col{border-left:1px solid var(--line-d)}
.mm-featcol{padding-right:0}
.mm-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.mm-zi{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-d);color:#fff}
.mm-zi svg{width:28px;height:28px}
.mm-ht{min-width:0}
.mm-ht h3{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.mm-ht p{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin-top:3px;font-size:13px;color:var(--mute-d);font-weight:500}
.mm-all{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600;font-size:13px}
.mm-all svg{width:14px;height:14px;transition:transform .2s}
@media (hover:hover){.mm-all:hover svg{transform:translateX(3px)}.mm-all:hover{color:var(--mute-d)}}
.mm-list{list-style:none;display:flex;flex-direction:column;gap:2px}
a.mm-row{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px;padding:6px 10px;border-radius:6px;font-size:15px;font-weight:500;line-height:1.25;transition:background-color .15s}
.mm-pi{display:grid;place-items:center;color:#C9C9D1;transition:color .15s}
.mm-pi svg{width:24px;height:24px}
.mm-n{min-width:0;overflow-wrap:anywhere}
.mm-p{color:var(--mute-d);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .15s}
a.mm-row[aria-current]{color:#fff}
a.mm-row[aria-current] .mm-pi{color:var(--pink)}
a.mm-row:focus-visible{outline-offset:-2px}
@media (hover:hover){
  a.mm-row:hover{background:rgba(255,255,255,.07);box-shadow:inset 2px 0 0 var(--pink)}
  a.mm-row:hover .mm-pi{color:var(--pink)}
  a.mm-row:hover .mm-p{color:#fff}
}
.mm-sk i{display:block;height:36px;border-radius:6px;background:linear-gradient(90deg,#1c1c21,#26262c,#1c1c21);background-size:200% 100%;animation:sk 1.2s infinite}
.mm-err{padding:10px;color:var(--mute-d);font-size:14px}
/* feature tile: photo, a line and a link; on row hover the photo swaps to that part */
.mm-feat{position:relative;display:block;height:100%;min-height:270px;border-radius:8px;overflow:hidden;isolation:isolate;background:var(--ink)}
.mm-feat-img,.mm-feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mm-feat-img img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mm-feat::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(11,11,13,.9) 0,rgba(11,11,13,.15) 62%,rgba(11,11,13,.1) 100%)}
@media (hover:hover){.mm-feat:hover .mm-feat-img img{transform:scale(1.04)}}
.mm-feat-txt{position:absolute;left:18px;right:18px;bottom:16px;z-index:3;display:flex;flex-direction:column;gap:8px;transition:opacity .2s}
.mm-feat-txt b{font-size:22px;line-height:1.1;font-weight:500;letter-spacing:-.025em}
.mm-feat-cta{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.mm-feat-cta svg{width:16px;height:16px}
.mm-feat-prev{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;background:#ECEBE8;color:var(--ink);opacity:0;transition:opacity .2s}
.mm-prev-img{flex:1;min-height:0;width:100%;object-fit:contain;padding:14px 14px 0}
.mm-prev-cap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 16px 14px}
.mm-prev-n{font-size:15px;font-weight:600;line-height:1.2}
.mm-prev-p{font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap}
.mm-feat.is-prev .mm-feat-prev{opacity:1}
.mm-feat.is-prev .mm-feat-txt{opacity:0}
.mm-feat.is-prev::after{opacity:0}
/* help strip */
.mm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;max-width:1500px;margin:22px auto 0;padding-top:16px;border-top:1px solid var(--line-d)}
.mm-helps{display:flex;flex-wrap:wrap;gap:0 26px}
a.mm-help{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:500;color:var(--mute-d);transition:color .15s}
a.mm-help svg{width:20px;height:20px}
@media (hover:hover){a.mm-help:hover{color:#fff}}
.mm-foot .shop-search{width:min(300px,100%)}
@media (max-width:1180px){
  .mm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mm-featcol{grid-column:1/-1;padding:22px 0 0;border-left:0}
  .mm-feat{min-height:170px}
}

/* phone: full-height sheet with accordions */
html.menu-lock,html.menu-lock body{overflow:hidden}
@media (max-width:900px){
  .menubtn .mt{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .shop-menu{position:fixed;inset:0;max-height:none;height:100vh;height:100dvh;border:0;border-radius:0;background:#0B0B0D;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transform:translateY(14px)}
  .mm-desk{display:none}
  .mm-mob{display:block;padding:0 calc(16px + env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px))}
  .mm-mtop{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;min-height:64px;padding-top:env(safe-area-inset-top,0px);background:#0B0B0D}
  .mm-mtop .logo{display:flex;align-items:center;min-height:44px}
  .mm-close{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;background:transparent;border:0;border-radius:50%;color:#fff;cursor:pointer}
  .mm-accs{border-top:1px solid var(--line-d)}
  .mm-ai{border-bottom:1px solid var(--line-d)}
  .mm-ai h3{font:inherit;letter-spacing:0}
  .mm-ah{display:grid;grid-template-columns:48px minmax(0,1fr) 28px;align-items:center;gap:14px;width:100%;min-height:72px;padding:10px 0;background:none;border:0;color:#fff;font:inherit;text-align:left;cursor:pointer}
  .mm-ht b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
  .mm-ht small{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--mute-d)}
  .mm-chev{display:grid;place-items:center;color:var(--mute-d);transition:transform .25s ease}
  .mm-ai.open .mm-chev{transform:rotate(180deg)}
  .mm-ab{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility 0s .3s}
  .mm-ai.open .mm-ab{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s ease}
  .mm-abi{min-height:0;overflow:hidden}
  a.mm-row{grid-template-columns:44px minmax(0,1fr) auto;gap:6px;min-height:52px;padding:6px 4px;border-radius:0;font-size:16px}
  .mm-pi{justify-items:start;padding-left:6px}
  .mm-p{font-size:15px}
  .mm-abi .mm-all{display:flex;min-height:52px;padding:0 4px;font-size:15px;gap:8px}
  .mm-abi .mm-all svg{width:16px;height:16px}
  .mm-abi{padding-bottom:0}
  .mm-flats{display:flex;flex-direction:column}
  a.mm-flat{display:flex;align-items:center;gap:14px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--line-d);font-size:17px;font-weight:500;line-height:1.3;word-break:break-word}
  a.mm-flat svg{width:22px;height:22px;color:var(--mute-d)}
  a.mm-flat[aria-current] svg{color:var(--pink)}
  a.mm-flat small{display:block;font-size:13px;color:var(--mute-d)}
  .mm-mob .shop-search{margin:22px 0 8px}
  .mm-sub{margin:20px 0 4px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d)}
  .mm-contact{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){.shop-menu,.menu-bg,.mm-ab,.mm-chev,.mm-feat-prev,.mm-feat-txt,.mm-feat-img img,.mm-all svg{transition:none}.mm-sk i{animation:none}}

/* navigation CTAs: a small outlined square with an arrow, then the label (violet pills stay for buying) */
.go{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:inherit;text-decoration:none;font:inherit;font-weight:500;font-size:15px;line-height:1.2;background:none;border:0;padding:0;cursor:pointer}
.go-i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:3px;box-shadow:inset 0 0 0 1px currentColor;transition:background-color .15s,color .15s,box-shadow .15s}
.go-i svg{width:16px;height:16px}
@media (hover:hover){.go:hover .go-i{background:var(--go-fill,var(--ink));color:var(--go-on,#fff);box-shadow:inset 0 0 0 1px var(--go-fill,var(--ink))}}
.hx,.zone,.side,.livery,.final,.shop-foot{--go-fill:#fff;--go-on:var(--ink)}
.go:focus-visible{outline-offset:4px}

/* ---- footer (dark) ---- */
.shop-foot{margin:6px;border-radius:8px;overflow:hidden;background:var(--ink);color:var(--mute-d);padding:0 0 28px}
.home>.stripes{margin:6px;border-radius:4px}
.shop-foot .stripes{margin-bottom:clamp(40px,6vw,72px)}
.shop-foot-in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.foot-brand .logo{display:inline-flex;align-items:center;min-height:44px}
.foot-brand p{margin-top:14px;max-width:26ch;font-size:15px;line-height:1.45;color:var(--mute-d)}
.shop-foot h4{color:#fff;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.shop-foot a:not(.logo){display:flex;align-items:center;min-height:44px;color:var(--mute-d);text-decoration:none;font-weight:500;font-size:15px;margin:0}
.shop-foot span{display:block;color:var(--mute-d);font-weight:500;font-size:15px;margin:8px 0}
.shop-foot a:not(.logo):hover{color:#fff}
.foot-small{font-size:12.5px;color:var(--mute-2);line-height:1.5;margin-top:6px}
.foot-small+.foot-small{margin-top:4px}
body:has(.mobile-buy:not([hidden])) .shop-foot{padding-bottom:calc(28px + 84px + env(safe-area-inset-bottom,0px))}

/* ---- page frame ---- */
.page{padding-top:92px;padding-bottom:clamp(48px,7vw,96px)}
.crumbs{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted);text-underline-offset:3px;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 2px;margin:-14px 0}
.crumbs a:hover{color:var(--ink)}

/* category chips (produkty.html) and section headings */
.cats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.cats a{display:inline-flex;align-items:center;border-radius:999px;padding:6px 20px;font-weight:600;text-decoration:none;color:var(--ink);min-height:44px;box-shadow:inset 0 0 0 1.5px var(--ink);font-size:15px}
.cats a[aria-current],.cats button[aria-pressed=true]{background:var(--ink);color:#fff}
.cats button{display:inline-flex;align-items:center;border-radius:999px;padding:6px 20px;font:inherit;font-weight:500;font-size:15px;border:0;cursor:pointer;color:var(--ink);background:transparent;min-height:44px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.cats a{font-weight:500}
@media (hover:hover){.cats a:not([aria-current]):hover{background:rgba(11,11,13,.06)}}
/* line icons next to the labels: filter chips, zone panels, footer links, breadcrumb and eyebrow of the product page */
.cats a,.cats button{gap:8px;padding-left:14px}
.cats svg{width:20px;height:20px;flex:none}
.zone-t b{display:flex;align-items:center;gap:.2em}
.zone-i{display:grid;place-items:center;flex:none;opacity:.9}
.zone-i svg{width:.55em;height:.55em}
.shop-foot a:not(.logo) svg{width:18px;height:18px;flex:none;margin-right:10px;color:var(--mute-2)}
.crumbs a svg{width:16px;height:16px;flex:none;margin-right:6px}
.crumbs a{white-space:nowrap}
.eyebrow svg{width:18px;height:18px;flex:none}
.sec-head{display:flex;justify-content:space-between;align-items:end;margin:96px 0 24px;gap:16px}
.sec-head h2{font-size:clamp(28px,4vw,48px)}
.sec-head a{font-weight:700;color:var(--ink);text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}

/* ---- product grid and card (home, produkty.html, related products on the product page) ----
   <article>: the title link is stretched over the whole card (::after), the button sits above it. */
.grid4{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.pcard2{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);transition:border-color .2s}
@media (hover:hover){.pcard2:hover{border-color:var(--ink)}.pcard2:hover .ph img{transform:scale(1.035)}}
.pcard2 .ph{aspect-ratio:1;background:var(--bg2);position:relative;overflow:hidden}
.pcard2 .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pcard2 .tag{position:absolute;top:12px;left:12px;max-width:calc(100% - 24px);background:var(--ink);color:#fff;border-radius:999px;padding:5px 12px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.25}
.pcard2 .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.pcard2 h3{font-size:18px;line-height:1.2;font-weight:700;letter-spacing:-.015em;overflow-wrap:anywhere}
.pcard2 h3 a{display:block;color:inherit;text-decoration:none}
.pcard2 h3 a>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.pcard2 h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.pcard2 h3 a:focus-visible{outline:0}
.pcard2:has(h3 a:focus-visible){outline:3px solid var(--pink);outline-offset:3px}
.pcard2 .pc-rate{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--muted);line-height:1.2}
.pcard2 .pc-rate b{color:var(--ink);font-weight:700}
.pcard2 .pc-star{display:inline-grid;color:var(--pink)}
.pcard2 .pc-star svg{width:15px;height:15px}
.pcard2 .pc-var{font-size:13px;font-weight:600;color:var(--muted);line-height:1.25}
.pcard2 .pc-price{margin-top:2px;font-size:14px;font-weight:500;color:var(--muted);line-height:1.15}
.pcard2 .pc-price b{font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.pcard2 .pc-note{font-size:13px;font-weight:600;color:var(--violet);line-height:1.3}
.pcard2 .pc-act{margin-top:auto;padding-top:14px;display:grid;gap:2px}
.pcard2 .pc-btn{position:relative;z-index:2;width:100%;min-height:44px;padding:10px 14px;font-size:15px;line-height:1.2;text-align:center}
.pcard2 .pc-btn svg{flex:none;width:18px;height:18px}
.pcard2 .pc-btn:disabled{opacity:.75;cursor:progress}
.pcard2 .pc-go{position:relative;z-index:2;font-size:14.5px}
.pcard2 .pc-more{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 20px;padding-top:18px;border-top:1px solid var(--line)}
.toolbar select{font:inherit;font-weight:600;font-size:15px;border:0;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:999px;padding:10px 38px 10px 18px;min-height:44px;color:var(--ink);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%230B0B0D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.empty{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:56px 24px;text-align:center}
.empty h2{font-size:clamp(26px,4vw,40px)}
.skeleton{background:linear-gradient(90deg,var(--bg2),#F7F6F3,var(--bg2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r);aspect-ratio:3/4}
@keyframes sk{to{background-position:-200% 0}}

/* ---- product page ---- */
.pdp{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"gal buy" "ext buy";grid-template-rows:auto 1fr;column-gap:clamp(32px,5vw,72px);row-gap:36px;align-items:start}
.pdp>*{min-width:0}
.gallery{grid-area:gal}
.buy{grid-area:buy;position:sticky;top:92px;max-height:calc(100vh - 108px);overflow-y:auto;padding:4px;margin:-4px;scrollbar-width:thin}
.pdp-extra{grid-area:ext}
.gallery .main{border-radius:var(--r);overflow:hidden;background:var(--bg2);aspect-ratio:1}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.gallery .thumbs2{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.gallery .thumbs2 button{width:76px;height:76px;border-radius:var(--r);overflow:hidden;border:0;padding:0;cursor:pointer;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);position:relative}
.gallery .thumbs2 button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.gallery .thumbs2 img{width:100%;height:100%;object-fit:cover}
.buy h1{font-size:clamp(30px,3.4vw,48px);line-height:1;margin:14px 0 0}
.tagline{font-size:17px;font-weight:500;color:var(--muted);margin-top:12px;max-width:34em}
.pprice{display:flex;align-items:baseline;gap:12px;margin:22px 0 2px}
.pprice b{font-size:clamp(32px,3.2vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1}
.vat{font-size:13px;font-weight:500;color:var(--muted)}
.opt{border:0;margin:24px 0 0;min-width:0}
.opt legend{display:flex;gap:10px;align-items:baseline;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;padding:0}
.opt legend em{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;font-size:14px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.opt-hint{margin:10px 0 0;font-size:13px;line-height:1.4;color:var(--muted)}
.opt-msg{margin:10px 0 0;font-size:14px;font-weight:700;line-height:1.4;color:var(--red)}
.opt-req.opt-need .ochip span{box-shadow:inset 0 0 0 1.5px var(--red)}
.cta[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
@media (hover:hover){.cta[aria-disabled="true"]:hover{background:var(--pink2)}}
.ochip{position:relative;display:inline-flex}
.ochip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ochip span{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:600;font-size:15px;line-height:1.2;transition:background-color .15s,color .15s}
.ochip input:checked+span{background:var(--ink);color:#fff}
.ochip input:focus-visible+span{outline:3px solid var(--pink);outline-offset:2px}
@media (hover:hover){.ochip input:not(:checked):hover+span{background:rgba(11,11,13,.07)}}
.on-dark .ochip span{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);color:#fff}
.on-dark .ochip input:checked+span{background:#fff;color:var(--ink)}
.on-dark .opt legend em{color:var(--mute-d)}
@media (hover:hover){.on-dark .ochip input:not(:checked):hover+span{background:rgba(255,255,255,.12)}}
.fit{margin-top:16px;font-size:14px;font-weight:500;color:var(--muted);display:flex;gap:8px;align-items:center}
.fit::before{content:"";flex:none;width:7px;height:7px;background:var(--pink);transform:rotate(45deg)}
.fit b{color:var(--ink);font-weight:700}
.buyrow{display:flex;gap:12px;align-items:stretch;margin-top:22px}
.qty2{display:flex;align-items:center;gap:2px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);padding:0 4px}
.qty2 button{width:44px;height:44px;border-radius:50%;border:0;background:transparent;font-weight:600;font-size:20px;cursor:pointer;color:var(--ink)}
.qty2 output,.qty2 span{min-width:26px;text-align:center;font-weight:700}
.buyrow .cta{flex:1;padding:14px 18px;text-align:center;min-height:52px}
.shipnudge{font-size:13px;font-weight:600;color:var(--muted);margin-top:12px;min-height:18px}
.trust{display:grid;gap:0;margin-top:18px;border-top:1px solid var(--line)}
.trust div{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:14.5px;color:var(--ink)}
.trust svg{color:var(--ink);flex:none}
.pdesc{color:var(--muted);font-weight:500;font-size:17px;line-height:1.55;max-width:44em}
.hl{list-style:none;display:grid;gap:0;margin:22px 0 0;font-weight:500;border-top:1px solid var(--line)}
.hl li{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.hl li i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;flex:none}
.hl li i svg{width:11px;height:11px}
.mobile-buy{display:none}

/* spec table (landing.compare with one column becomes this) */
.spec{margin-top:28px;border-top:1px solid var(--ink)}
.spec div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.spec dt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.spec dd{font-weight:600;font-size:16px;line-height:1.4}

/* ---- cart + checkout ---- */
.two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.line{display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.line:first-child{padding-top:0}
.line:last-child{border-bottom:0;padding-bottom:0}
.line img{width:96px;height:96px;border-radius:var(--r);object-fit:cover;background:var(--bg2)}
.line h3{font-size:17px}
.line .rm{background:none;border:0;color:var(--muted);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font:inherit;font-size:13px;padding:6px 0;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.line .lt{font-weight:700;text-align:right}
.lrow{display:flex;align-items:center;gap:14px;margin-top:8px}
.line-mini{grid-template-columns:56px minmax(0,1fr) auto;padding:12px 0}
.line-mini>div{min-width:0;overflow-wrap:anywhere}
.sum{display:grid;gap:10px}
.sum div{display:flex;justify-content:space-between;font-weight:500}
.sum .tot{font-size:22px;font-weight:700;letter-spacing:-.02em;border-top:1px solid var(--ink);padding-top:14px;margin-top:6px}
.freebar{background:var(--bg2);border-radius:999px;height:6px;overflow:hidden;margin:10px 0 4px}
.freebar i{display:block;height:100%;background:var(--pink);border-radius:999px}
.sticky-sum{position:sticky;top:92px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;margin-bottom:16px}
.step h2{font-size:22px;letter-spacing:-.02em;line-height:1.1;display:flex;align-items:center;gap:12px;margin-bottom:20px}
.step h2 i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;flex:none}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fields .full{grid-column:1/-1}
.field label{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.field input,.field select{width:100%;font:inherit;font-weight:500;border:1.5px solid #CFCEC9;border-radius:var(--r);padding:12px 14px;min-height:48px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 3px rgba(124,92,255,.22)}
.choice{display:flex;align-items:center;gap:12px;border:1.5px solid #CFCEC9;border-radius:var(--r);padding:14px 16px;margin-bottom:10px;cursor:pointer;font-weight:600;min-height:56px;background:#fff}
.choice:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.choice input{accent-color:var(--pink2);width:18px;height:18px;flex:none}
.choice .p{margin-left:auto;font-weight:700}
.err{background:#FDECEC;color:#A32428;border-radius:var(--r);padding:12px 16px;font-weight:600;margin-bottom:14px}
.ok-hero{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:56px 24px;max-width:720px;margin:0 auto}
.ok-hero h1{margin-bottom:6px}
.ok-hero .badge{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 22px;background:var(--ink);color:#fff}
.eta{display:flex;gap:10px;align-items:center;background:var(--bg);color:var(--ink);border-radius:var(--r);padding:12px 14px;font-size:14px;font-weight:600;margin-top:14px}
.eta svg{flex:none}
.shipnote{display:flex;gap:12px;align-items:center;margin-top:18px;font-size:14px;font-weight:600}
.shipnote svg{flex:none}

/* checkout field validation */
.fields .field:has(#house_no),.fields .field:has(#flat_no){grid-column:auto}
.fhint{display:block;color:var(--muted);font-size:12px;font-weight:500;margin-top:4px}
.ferr{display:block;color:#A32428;font-size:13px;font-weight:600;margin-top:4px;min-height:0}
.ferr:empty{display:none}
.field.invalid input{border-color:var(--red);background:#FFF6F6}

/* checkout: carriers, pickup point */
.carrier{margin-bottom:6px}
.carrier-name{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--bg2);border-radius:999px;padding:4px 12px;margin:6px 0 8px}
.choice>span:not(.p){flex:1}
.pointbox{background:var(--bg);border-radius:var(--r);padding:12px 14px;margin:-4px 0 12px}
.pointbox label{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.pointrow{display:flex;gap:8px}
.pointrow input{flex:1;font:inherit;font-weight:600;border:1.5px solid #CFCEC9;border-radius:var(--r);padding:10px 12px;min-height:44px;text-transform:uppercase;min-width:0;background:#fff}
.pointrow input[aria-invalid=true]{border-color:var(--red)}
.pointbox a{display:inline-block;margin-top:6px;color:var(--violet);font-weight:600}

/* ---- phone order (only rendered when brand.js has a real number) ---- */
.phonebox{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin-top:14px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:500;background:var(--card)}
.phonebox svg{color:var(--ink);flex:none}
.phonebox b{display:block;font-weight:700}
.phonebox:hover{border-color:var(--ink)}

/* ---- product page: landing sections ---- */
.stars-row{display:flex;align-items:center;gap:8px;color:var(--pink);font-weight:700;margin-top:8px;flex-wrap:wrap}
.stars-row span{color:var(--muted);font-weight:500;font-size:14px}
.stars-row a{color:var(--muted);font-weight:500;font-size:14px;display:inline-block;padding:12px 6px;margin:-12px -6px}
.stars-row>a,.stars-row>span{white-space:nowrap}
.lsec{margin-top:clamp(72px,9vw,128px)}
.lsec .center h2{margin-top:14px}
.lsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.lsplit img{border-radius:var(--r);width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg2)}
.lsplit.rev img,.lsplit.rev .feat-img{order:2}
.lsplit h2{margin-top:14px}
.inbox{list-style:none;display:grid;grid-template-columns:1fr;gap:0;margin-top:24px;border-top:1px solid var(--ink)}
.inbox li{border-bottom:1px solid var(--line);padding:14px 0;font-weight:600;display:flex;gap:12px;align-items:center}
.inbox li i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--pink2);color:#fff;flex:none}
.inbox li i svg{width:12px;height:12px}
.lgal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:32px}
.lgal figure{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0}
.lgal img{width:100%;aspect-ratio:1;object-fit:cover}
.lgal figcaption{padding:12px 16px;font-weight:600;font-size:14px}
.countdown{display:inline-flex;gap:8px;align-items:center;background:var(--ink);color:#fff;border-radius:999px;padding:8px 16px;font-weight:700;margin-top:14px;font-size:14px}
.feat-img{position:relative}
.feat-img img{border-radius:var(--r);width:100%;aspect-ratio:4/3;object-fit:cover}
.chip{position:absolute;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px;color:var(--ink);display:flex;gap:8px;align-items:center;white-space:nowrap;max-width:92%}
.chip i{width:20px;height:20px;border-radius:50%;background:var(--pink2);color:#fff;display:grid;place-items:center;flex:none}
.feat-note{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:12px}
.rev-head{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.rev-head .big{font-size:56px;font-weight:500;letter-spacing:-.03em}
.reviews .review.more{display:none}.reviews.all .review.more{display:block}
.final .eyebrow{color:#fff}

/* ---- checkout upsell, deal tags ---- */
.upsell{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.upsell h3{font-size:16px;margin-bottom:12px}
.up-item{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;background:var(--bg);border-radius:var(--r);padding:10px;margin-bottom:8px}
.up-item img{width:56px;height:56px;border-radius:4px;object-fit:cover;background:var(--bg2)}
.up-item b{display:block;font-size:14px}
.up-item .pr{display:block;margin-top:2px}.up-item .pr b{display:inline}.up-item s{color:var(--muted);font-size:12px}
.mini{padding:10px 18px;min-height:44px;background:var(--ink);color:#fff;font-size:14px}
.up-item .mini{min-height:44px;padding:8px 14px}
.deal{font-style:normal;background:var(--ink);color:#fff;font-weight:700;font-size:11px;padding:2px 8px;border-radius:999px}
.deal-note{display:block;color:var(--violet);font-weight:600;margin-top:2px}

/* ---- add-to-cart drawer ---- */
.drawer-wrap{position:fixed;inset:0;z-index:60;pointer-events:none}
.drawer-bg{position:absolute;inset:0;background:rgba(11,11,13,.5);opacity:0;transition:opacity .25s}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;padding:24px;overflow:auto;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;gap:14px}
.drawer-wrap.open{pointer-events:auto}.drawer-wrap.open .drawer-bg{opacity:1}.drawer-wrap.open .drawer{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center}
.drawer-head h2{font-size:22px;letter-spacing:-.02em;line-height:1.1;display:flex;gap:10px;align-items:center}
.drawer-head h2 i{width:26px;height:26px;border-radius:50%;background:var(--pink2);color:#fff;display:grid;place-items:center}
.drawer .x{width:44px;height:44px;border-radius:50%;border:0;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink);font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.drawer-lines{display:grid;gap:10px;max-height:240px;overflow:auto}
.dl{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:14px}
.dl>div{min-width:0;overflow-wrap:anywhere}
.dl img{width:52px;height:52px;border-radius:4px;object-fit:cover;background:var(--bg2)}
.dl span{display:block}
.drawer-total{display:flex;justify-content:space-between;font-weight:700;font-size:20px;letter-spacing:-.02em;border-top:1px solid var(--ink);padding-top:12px}
.drawer-sub{display:flex;justify-content:space-between;align-items:center}
.drawer-sub a,.drawer-sub button{display:inline-flex;align-items:center;font:inherit;font-weight:600;color:var(--ink);background:none;border:0;cursor:pointer;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.drawer>*{flex:none}
.drawer .upsell{margin-top:4px}
.drawer{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
@media (prefers-reduced-motion:reduce){.drawer,.drawer-bg{transition:none}}

/* =====================================================================
   HOME (sklep.html): everything below is scoped to .home / hx / pk / ... so other pages are unaffected
   ===================================================================== */
.home{display:block}
.sec{padding:clamp(72px,10vw,144px) 0}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.sec-h h2{margin-top:16px}

/* hero: full-bleed photo, headline bottom-left */
.hx{position:relative;isolation:isolate;display:flex;align-items:flex-end;margin:6px 6px 0;border-radius:8px;min-height:600px;min-height:clamp(560px,calc(100svh - 64px),900px);background:var(--ink);color:#fff;overflow:hidden}
.hx-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;z-index:-2}
.hx-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(11,11,13,.88) 0,rgba(11,11,13,.45) 38%,rgba(11,11,13,.05) 70%,rgba(11,11,13,.3) 100%)}
@media (min-width:901px){
  .hx-img{transform:scale(1.1);transform-origin:0 62%}
  .hx-shade{background:linear-gradient(90deg,rgba(11,11,13,.7) 0,rgba(11,11,13,.28) 40%,rgba(11,11,13,.12) 100%),linear-gradient(to top,rgba(11,11,13,.8) 0,rgba(11,11,13,.3) 34%,rgba(11,11,13,0) 62%,rgba(11,11,13,.3) 100%)}
}
.hx-in,.livery-in{max-width:none;padding-left:clamp(20px,3.2vw,48px);padding-right:clamp(20px,3.2vw,48px)}
.hx-in{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:28px clamp(32px,6vw,96px);align-items:end;padding-top:120px;padding-bottom:clamp(28px,4vw,56px)}
.hx h1{max-width:8.4em;margin:18px 0 0;color:#fff;font-size:clamp(48px,10.5vw,164px);line-height:.92}
.hx-lead{font-size:clamp(16px,1.4vw,19px);line-height:1.45;color:rgba(255,255,255,.88);font-weight:400}
.hx-act{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:18px}

/* trust strip: honest items only */
.h-trust{background:var(--bg);border-bottom:1px solid var(--line)}
.h-trust ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.h-trust li{display:flex;align-items:center;gap:12px;min-width:0;padding:18px 12px 18px 0;font-size:14px;font-weight:600;line-height:1.3;border-bottom:1px solid var(--line)}
.h-trust li:nth-last-child(-n+2){border-bottom:0}
.h-trust i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink)}
.h-trust i svg{width:18px;height:18px}
@media (min-width:900px){
  .h-trust ul{grid-template-columns:repeat(4,minmax(0,1fr))}
  .h-trust li{border-bottom:0;padding:22px 20px 22px 24px;border-left:1px solid var(--line)}
  .h-trust li:first-child{border-left:0;padding-left:0}
  .h-trust li:nth-last-child(-n+2){border-bottom:0}
}

/* Przód / Bok / Tył: three big rounded panels with a photo, a label and an arrow */
.zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 6px}
.zone{position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:flex-start;gap:0;min-height:clamp(340px,44vw,660px);border-radius:8px;overflow:hidden;background:var(--ink);color:#fff;text-decoration:none;padding:clamp(20px,2.4vw,32px)}
.zone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.zone::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(11,11,13,.85) 0,rgba(11,11,13,.15) 55%,rgba(11,11,13,.1) 100%)}
@media (hover:hover){.zone:hover img{transform:scale(1.04)}.zone:hover .go-i{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #fff}}
.zone-t{display:block;min-width:0;margin-right:auto;padding-right:16px}
.zone-t b{display:block;font-size:clamp(36px,4.4vw,68px);font-weight:500;letter-spacing:-.035em;line-height:1}
.zone-t small{display:block;margin-top:8px;font-size:15px;font-weight:400;color:rgba(255,255,255,.8)}
.zone:focus-visible{outline-offset:-4px}
.zones-sec{padding-top:clamp(72px,10vw,144px)}
.zones-sec .sec-h{padding:0 clamp(14px,2vw,26px)}

/* parts grid */
.parts{background:var(--bg)}
.h-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:700px){.h-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}

/* side profile with hotspots */
.side{margin:6px;border-radius:8px;background-color:#ECEBE8;color:var(--ink);overflow:hidden;padding-bottom:clamp(40px,6vw,88px);--go-fill:var(--ink);--go-on:#fff}
.side-pic{position:relative;max-width:1760px;margin:0 auto;aspect-ratio:21/9}
.side-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hot{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;text-decoration:none;z-index:2}
.hot i{position:relative;width:14px;height:14px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px #fff,0 0 0 4.5px rgba(11,11,13,.28)}
.hot i::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid rgba(11,11,13,.45);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.5);opacity:0}}
.hot b{position:absolute;bottom:calc(100% - 4px);left:50%;transform:translate(-50%,6px);background:#fff;color:var(--ink);box-shadow:0 4px 18px rgba(11,11,13,.18);font-size:13px;font-weight:700;line-height:1.2;padding:7px 12px;border-radius:999px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.hot.l b{left:0;transform:translate(0,6px)}
.hot.r b{left:auto;right:0;transform:translate(0,6px)}
.hot:hover b,.hot:focus-visible b,.hot.on b{opacity:1;transform:translate(-50%,0)}
.hot.l:hover b,.hot.l:focus-visible b,.hot.l.on b,.hot.r:hover b,.hot.r:focus-visible b,.hot.r.on b{transform:none}
.hot:focus-visible{outline:0}
.hot:focus-visible i,.hot.on i{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--pink)}
.hot b small{font-weight:500;color:rgba(11,11,13,.62)}
.side-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,4vw,64px);margin-top:clamp(28px,4vw,48px);border-top:1px solid rgba(11,11,13,.16)}
.side-list a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px;padding:14px 0;border-bottom:1px solid rgba(11,11,13,.16);color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;line-height:1.25}
.side-list a:hover,.side-list a.on{color:var(--ink)}
.side-list .pr{display:flex;align-items:center;gap:10px;color:rgba(11,11,13,.62);font-weight:500;font-size:14px;white-space:nowrap}
.side-list a:hover .pr svg,.side-list a.on .pr svg{color:var(--ink);transform:translateX(3px)}
.side-list .pr svg{transition:transform .15s;color:rgba(11,11,13,.62)}
@media (min-width:900px){.side-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* why carbon: image + three large facts */
.why{background:var(--bg)}
.why-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.why-top .lead{margin-top:20px;max-width:30em;color:var(--muted)}
.why-img{aspect-ratio:16/10;background:var(--bg2);border-radius:var(--r);overflow:hidden}
.why-img img{width:100%;height:100%;object-fit:cover}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,6vw,88px);border-top:1.5px solid var(--ink)}
.fact{padding:28px 28px 0 0;min-width:0}
.fact+.fact{padding-left:28px;border-left:1px solid var(--line)}
.fact b{display:block;font-size:clamp(48px,5.6vw,88px);font-weight:400;letter-spacing:-.04em;line-height:.95;margin-bottom:22px}
.fact strong{display:block;font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.fact p{color:var(--muted);font-weight:500;max-width:26em}

/* livery / brand */
.livery{margin:6px;border-radius:8px;position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(480px,64vw,760px);background:var(--ink);color:#fff;overflow:hidden}
.livery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.livery::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(11,11,13,.88) 0,rgba(11,11,13,.5) 45%,rgba(11,11,13,.2) 100%)}
.livery-in{width:100%;padding-top:96px;padding-bottom:clamp(36px,6vw,80px)}
.livery h2{margin:16px 0 18px;color:#fff;max-width:11em;font-size:clamp(34px,5.4vw,80px)}
.livery p.lead{color:rgba(255,255,255,.82);max-width:32em}

/* how to order */
.how{background:#fff}
.how-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.how-steps li{padding:28px 28px 0 0;min-width:0}
.how-steps li+li{padding-left:28px;border-left:1px solid var(--line)}
.how-steps .n{display:block;font-size:clamp(48px,6vw,88px);font-weight:400;letter-spacing:-.04em;line-height:.9;margin-bottom:22px}
.how-steps h3{font-size:22px;margin-bottom:8px;letter-spacing:-.02em}
.how-steps p{color:var(--muted);font-weight:500;max-width:24em}

/* faq */
.faqx{background:var(--bg)}
.faqx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(28px,5vw,96px);align-items:start}
.faqx-grid>div:first-child{position:sticky;top:110px}
.faqx .faq{margin:0;max-width:none}
.faqx-note{margin-top:20px;color:var(--muted);font-weight:500;max-width:26em}
.faqx-note a{color:var(--ink);font-weight:700;text-underline-offset:4px}

/* loading and errors */
.h-error{grid-column:1/-1;padding:32px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-align:center}
.h-error h3{font-size:20px}
.h-error p{margin:8px 0 16px;font-weight:500;color:var(--muted)}
.h-error .pill{min-height:46px;padding:12px 24px;font-size:16px}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}.pcard2,.pcard2 .ph img{transition:none}.hot i::after{animation:none;opacity:.6;transform:scale(1)}html{scroll-behavior:auto}}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  .shop-foot a:not(.logo){display:flex;align-items:center;min-height:44px;margin:0}
  .shop-foot-in{grid-template-columns:1fr 1fr;gap:28px 20px}
  .foot-brand{grid-column:1/-1}

  /* product page: gallery, then the buy panel, then description */
  .pdp{grid-template-columns:minmax(0,1fr);grid-template-areas:"gal" "buy" "ext";grid-template-rows:none;row-gap:28px}
  .buy{position:static;max-height:none;overflow:visible}
  .two{grid-template-columns:minmax(0,1fr);gap:24px}
  .two>*{min-width:0}
  .sticky-sum{position:static}
  .fields{grid-template-columns:1fr}
  .mobile-buy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));gap:14px;align-items:center;justify-content:space-between}
  .mobile-buy>div{min-width:0}
  .mobile-buy b{font-size:20px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1.1}
  .mobile-buy .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-buy .cta{flex:none;padding:12px 24px}
  .toast{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pcard2 .body{padding:14px 14px 16px;gap:5px}
  .pcard2 h3{font-size:16px}
  .pcard2 .tag{top:8px;left:8px;max-width:calc(100% - 16px);padding:4px 10px;font-size:10px}
  .pcard2 .pc-price b{font-size:20px}
  .pcard2 .pc-note{font-size:12.5px}
  .lsplit{grid-template-columns:1fr;gap:24px}
  .lsplit.rev img,.lsplit.rev .feat-img{order:0}
  .lsec{margin-top:64px}
  .sec-head{margin-top:64px}

  /* home */
  .zones{grid-template-columns:minmax(0,1fr)}
  .zone{min-height:clamp(300px,70vw,460px)}
  .hx-in{grid-template-columns:minmax(0,1fr)}
  .why-top,.faqx-grid{grid-template-columns:minmax(0,1fr)}
  .faqx-grid>div:first-child{position:static}
  .facts,.how-steps{grid-template-columns:minmax(0,1fr)}
  .fact,.fact+.fact,.how-steps li,.how-steps li+li{padding:26px 0;border-left:0;border-bottom:1px solid var(--line)}
  .fact:last-child,.how-steps li:last-child{border-bottom:0}
  .fact b{margin-bottom:14px}
  .hx-in{padding-top:96px}
  .hx h1{font-size:clamp(48px,15vw,120px)}
  .hx-img{object-position:36% 50%}
  .hx-act{flex-direction:row;flex-wrap:wrap;gap:6px 24px}
}
@media (max-width:640px){
  .bar{padding:7px 12px;font-size:12px}
  .bar span{display:block}
  .bar-x::before{content:none}
  .page{padding-top:84px}
  .panel,.step{padding:20px 16px}
  .ok-hero{padding:40px 16px}
  .drawer{padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px))}
  .hx{min-height:clamp(540px,calc(100svh - 120px),760px)}
  .hot{width:44px;height:44px}
  .hot i{width:12px;height:12px}
  .hot b{display:none}
  .spec div{grid-template-columns:1fr;gap:4px;padding:14px 0}
  /* cart line: image + title/variant, then quantity (left) and line price (right) */
  .line{grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"img t t" "img v v" "q q p";gap:2px 14px;align-items:start;padding:16px 0}
  .line>img{grid-area:img;width:76px;height:76px}
  .line .li{display:contents}
  .line h3{grid-area:t;font-size:15px;min-width:0;overflow-wrap:anywhere}
  .line .li>p{grid-area:v;min-width:0}
  .line .lrow{grid-area:q;margin-top:6px;gap:2px 10px;flex-wrap:wrap;min-width:0}
  .line .lt{grid-area:p;align-self:center;white-space:nowrap}
  /* checkout summary line */
  .line-mini{grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:none;gap:10px;align-items:center;padding:10px 0}
  .line-mini>img{grid-area:auto;width:48px!important;height:48px!important}
  .panel>.upsell{margin-top:0;border-top:0;padding-top:0}
  /* upsell card: thumbnail + text, the add button gets its own full-width row */
  .up-item{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"img txt" "btn btn";gap:8px 12px}
  .up-item>a{grid-area:img}
  .up-item>div{grid-area:txt;min-width:0;overflow-wrap:anywhere}
  .up-item>.mini{grid-area:btn;width:100%}
  .side-list a{font-size:15px}
}
@media (max-width:460px){
  .buyrow{flex-wrap:wrap}
  .buyrow .qty2{align-self:flex-start}
  .buyrow .cta{flex:1 1 100%}
}
@media (max-width:359px){
  .pcard2 .body{padding:10px 10px 12px}
  .pcard2 .pc-btn{padding:10px 8px}
  .pcard2 .pc-btn svg{display:none}
  .side-list{grid-template-columns:minmax(0,1fr)}
  .shop-foot-in{grid-template-columns:minmax(0,1fr)}
}
.crumbs:has(svg){display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.zones .zone-t b{display:flex;align-items:center;gap:.16em}
.zones .zone-t .zone-i svg{width:.58em;height:.58em;stroke-width:1.6}

/* ---- phone ordering: menu tile, home panel, one-line version (product page, cart drawer) ---- */
.phone-tile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;margin-top:10px;padding:16px 18px;border-radius:8px;background:var(--graphite);box-shadow:inset 0 0 0 1px var(--line-d);color:#fff;transition:background-color .15s,box-shadow .15s}
.phone-tile>svg{width:26px;height:26px;margin-top:2px;color:var(--pink)}
.pt-t{display:flex;flex-direction:column;min-width:0}
.pt-t small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-d)}
.pt-t b{margin-top:2px;font-size:clamp(20px,1.65vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-t em{margin-top:2px;font-style:normal;font-size:13px;font-weight:500;color:var(--mute-d)}
.pt-l{margin-top:8px;font-size:13px;font-weight:500;line-height:1.4;color:var(--mute-d)}
@media (hover:hover){.phone-tile:hover{background:#1f1f25;box-shadow:inset 0 0 0 1px var(--pink)}}
.mm-featcol{display:flex;flex-direction:column}
.mm-featcol .mm-feat{flex:1 1 auto;min-height:190px}
@media (max-width:1180px){.mm-featcol{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0 14px}.mm-featcol .phone-tile{margin-top:0}}
/* Desktop mega menu: icon and label share the first row, the number gets the full tile width on its own row and its size
   follows the tile width (container query), so it always fits whatever the column width or the number length. */
@media (min-width:901px){
  .mm-featcol .phone-tile{container-type:inline-size;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 12px}
  .mm-featcol .phone-tile .pt-t{display:contents}
  .mm-featcol .phone-tile>svg{margin-top:0}
  .mm-featcol .phone-tile .pt-t small{grid-column:2;grid-row:1;font-size:11.5px;letter-spacing:.07em;line-height:1.25}
  .mm-featcol .phone-tile .pt-t b{grid-column:1/-1;margin-top:4px;font-size:clamp(15px,10.4cqi,24px);white-space:nowrap}
  .mm-featcol .phone-tile .pt-t em,.mm-featcol .phone-tile .pt-t .pt-l{grid-column:1/-1}
}
@media (max-width:900px){
  a.phone-tile.pt-mob{margin:18px 0 0;min-height:88px;padding:18px 16px;align-items:center}
}
.phone-sec{padding-top:clamp(48px,7vw,96px)}
.phone-panel{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px clamp(24px,5vw,80px);align-items:center;padding:clamp(28px,5vw,72px);border-radius:8px;background-color:var(--ink);color:#fff}
.phone-panel h2{margin-top:16px;color:#fff}
.phone-panel .lead{margin-top:16px;max-width:30em;color:var(--mute-d)}
.phone-act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pill.phone-btn{min-height:64px;padding:16px 32px;font-size:clamp(20px,2.4vw,28px);font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.pill.phone-btn svg{width:26px;height:26px}
.phone-hours{font-size:14px;font-weight:500;color:var(--mute-d)}
@media (max-width:900px){.phone-panel{grid-template-columns:minmax(0,1fr)}.pill.phone-btn{width:100%}}
.phone-line{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;font-weight:500;color:var(--muted)}
.phone-line svg{width:18px;height:18px;flex:none;color:var(--ink)}
.phone-line a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;padding:0 2px;color:var(--ink);font-weight:700;text-underline-offset:3px}
.phone-line small{font-size:12.5px;color:var(--muted)}

/* ---- home: Przód / Bok / Tył panels show a ghosted M3 with the zone parts in black carbon; hover only zooms the image slightly ---- */
.zone{background:#ECEBE8;color:var(--ink);--go-fill:var(--ink);--go-on:#fff}
.zone::after{display:none}
.zone img.zone-main{object-fit:contain;object-position:50% 42%;padding:clamp(8px,2vw,24px) clamp(4px,1vw,12px) 96px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.zone-t small{color:rgba(11,11,13,.68)}
@media (hover:hover){.zone:hover img.zone-main{transform:scale(1.03)}.zone:hover .go-i{background:var(--go-fill);color:var(--go-on);box-shadow:none}}
@media (prefers-reduced-motion:reduce){.zone img.zone-main{transition:none}.zone:hover img.zone-main{transform:none}}
@media (max-width:900px){.zone{min-height:clamp(340px,92vw,460px)}.zone img.zone-main{padding:8px 8px 84px}}

/* ---- mega menu: ghost M3 zone tiles above each column, all-parts image in the feature tile ---- */
.shop-menu a.mm-zt{display:block;height:clamp(120px,10vw,142px);margin-bottom:14px;border-radius:8px;overflow:hidden;background:#ECEBE8}
.mm-zt picture,.mm-zt img{display:block;width:100%;height:100%}
.mm-zt img{object-fit:contain;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.mm-zt:hover img{transform:scale(1.04)}}
.shop-menu a.mm-feat{background:#ECEBE8;color:var(--ink)}
.mm-feat::after{display:none}
.mm-feat-img{bottom:auto;height:58%}
.mm-feat-img picture,.mm-feat-img img{display:block;width:100%;height:100%}
.mm-feat-img img{object-fit:contain;object-position:50% 60%;padding:8px 6px 0}
.mm-feat-txt .eyebrow{color:rgba(11,11,13,.62)}
@media (hover:hover){.mm-feat:hover .mm-feat-img img{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.mm-zt img{transition:none}}
@media (max-width:900px){
  .mm-ah{grid-template-columns:72px minmax(0,1fr) 28px}
  .mm-zi.mm-zth{width:72px;height:45px;overflow:hidden;background:#ECEBE8;box-shadow:none}
  .mm-zth picture,.mm-zth img{display:block;width:100%;height:100%}
  .mm-zth img{object-fit:contain}
}
@media (max-width:600px){.side-list{grid-template-columns:minmax(0,1fr)}}

/* mega menu: a zone with a "Grille" group (Przód) gets a double-width column with two sub-columns */
.mm-subh{padding:14px 10px 6px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d);break-before:column;break-after:avoid}
.mm-list>li{break-inside:avoid}
.mm-subh:first-child{padding-top:6px}
@media (min-width:1181px){
  .mm-grid.has-wide{grid-template-columns:minmax(0,2.1fr) repeat(2,minmax(0,1fr)) minmax(250px,.9fr)}
  .mm-wide .mm-list{display:block;column-count:2;column-gap:clamp(16px,2vw,32px)}
  .mm-wide .mm-list>li{margin-bottom:2px}
  .mm-wide .mm-subh{padding-top:6px}
}
@media (max-width:900px){.mm-subh{padding:16px 4px 4px}}
@media (min-width:901px) and (max-height:800px){.shop-menu a.mm-zt{height:96px;margin-bottom:10px}}

/* ---- owner section (home): "Stoi za tym prawdziwy człowiek." Light panel like .side; cut-out photo bottom-aligned with a violet glow and a stripe band behind ---- */
.owner{margin:6px;border-radius:8px;background:radial-gradient(90% 100% at 78% 60%,#ffffff 0,#f6f5f2 55%,#e9e7e2 100%);color:var(--ink);overflow:hidden;position:relative;isolation:isolate;--go-fill:var(--ink);--go-on:#fff}
.owner .eyebrow,.owner h2,.owner .go{color:var(--ink)}
.owner-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:clamp(8px,3vw,48px);min-height:clamp(520px,50vw,760px);padding:0 clamp(20px,3.2vw,48px)}
.owner-txt{align-self:center;max-width:32em;padding:clamp(48px,7vw,96px) 0}
.owner-txt h2{margin:16px 0 20px;font-size:clamp(34px,5vw,72px);max-width:9em}
.owner-txt .lead{color:#5d5d66;max-width:28em}
.owner-act{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:28px}
.owner-pic{position:relative;display:flex;align-items:flex-end;justify-content:center;align-self:end;min-width:0;height:clamp(440px,52vw,740px)}
.owner-pic::before{content:none}
.owner-pic::after{content:"";position:absolute;z-index:0;left:2%;right:2%;top:auto;height:16%;bottom:0;background:radial-gradient(closest-side,rgba(11,11,13,.10),rgba(11,11,13,0) 100%);pointer-events:none}
.owner-pic picture{display:contents}
.owner-pic img{position:relative;z-index:1;display:block;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:50% 100%}
@media (max-width:900px){
  .owner-in{grid-template-columns:minmax(0,1fr);min-height:0;gap:0}
  .owner-txt{padding:clamp(40px,10vw,64px) 0 8px}
  .owner-pic{height:clamp(360px,100vw,540px)}
}

/* ---- why carbon: dark panel with a deep gradient (owner request 2026-10-25) ---- */
.why{margin:6px;border-radius:8px;background:radial-gradient(120% 120% at 85% 20%,#221b3a 0,#121116 48%,#0B0B0D 100%);color:#fff}
.why .eyebrow,.why h2{color:#fff}
.why-top .lead{color:rgba(255,255,255,.72)}
.why-img{background:#17171B}
.why .facts{border-top-color:rgba(255,255,255,.55)}
.why .fact+.fact{border-left-color:rgba(255,255,255,.14)}
.why .fact b,.why .fact strong{color:#fff}
.why .fact p{color:rgba(255,255,255,.62)}
@media (max-width:900px){.why .fact+.fact{border-left:0;border-top:1px solid rgba(255,255,255,.14)}}
/* ---- owner photo on phones: full width, natural height, never cropped ---- */
@media (max-width:900px){
  .owner-pic{height:auto;padding-top:8px}
  .owner-pic img{width:min(100%,460px);height:auto;max-width:100%}
}
/* ---- owner on phones: Instagram + phone buttons sit over the bottom of the photo ---- */
@media (max-width:900px){
  .owner-in{grid-template-areas:"eb" "h" "lead" "pic";padding-top:clamp(40px,10vw,64px)}
  .owner-txt{display:contents}
  .owner-txt .eyebrow{grid-area:eb}
  .owner-txt h2{grid-area:h}
  .owner-txt .lead{grid-area:lead}
  .owner-pic{grid-area:pic;padding-top:16px}
  .owner-act{grid-area:pic;align-self:end;position:relative;z-index:2;margin:0 calc(-1 * clamp(20px,3.2vw,48px));padding:72px clamp(20px,3.2vw,48px) 18px;gap:4px 20px;background:linear-gradient(to top,rgba(240,239,235,.97) 0,rgba(240,239,235,.9) 45%,rgba(240,239,235,0) 100%)}
}
/* ---- home parts grid: "Wyświetl więcej" tile (6th cell on desktop, wide low row on phones) ---- */
.more-tile{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:100%;padding:clamp(20px,2.4vw,32px);border-radius:var(--r);background:#ECEBE8;color:var(--ink);text-decoration:none;transition:background-color .2s}
.more-tile .more-txt b{display:block;font-size:clamp(26px,2.6vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1}
.more-tile .more-txt small{display:block;margin-top:10px;color:var(--muted);font-size:15px;font-weight:500}
.more-tile .go-i{align-self:flex-end}
.more-tile:hover{background:#e2e0db}
.more-tile:hover .go-i{background:var(--ink);color:#fff;box-shadow:none}
@media (max-width:699px){
  .h-grid.has-more > :nth-child(5):not(.more-tile){display:none}
  .more-tile{grid-column:1 / -1;flex-direction:row;align-items:center;min-height:0;padding:18px 20px}
  .more-tile .more-txt b{font-size:22px}
  .more-tile .more-txt small{margin-top:4px;font-size:14px}
  .more-tile .go-i{align-self:center}
}

/* ---- payment-method badges (BLIK, Visa, Mastercard, Klarna): slots stay [hidden] unless a real provider offers the method (shop.js payBadgesSlot) ---- */
.pay-slot{--pay-line:#D3D2CE;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pay-slot[hidden]{display:none}
.pay-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.pay-list li{display:block;margin:0;padding:0;line-height:0}
.pay-chip{display:block;width:38px;height:24px;flex:none}
.pay-chip .pay-bg{stroke:var(--pay-line);stroke-width:1}
.pay-slot .pay-l{display:inline;margin:0;font-size:13px;font-weight:600;color:var(--muted)}
.pay-pdp{margin-top:14px}
.pay-cart,.pay-drawer{margin-top:14px;justify-content:center}
.pay-checkout{margin:6px 0 14px}
.shop-foot .pay-slot{--pay-line:rgba(255,255,255,.28);margin-bottom:14px}
.shop-foot .pay-slot .pay-l{display:inline;margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
/* ---- owner photo on desktop: the same soft light fade over the bottom of the photo as on phones ---- */
@media (min-width:901px){
  .owner-pic img{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 68%,rgba(0,0,0,.35) 88%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 68%,rgba(0,0,0,.35) 88%,transparent 100%)}
}
/* ---- product page sections: no eyebrow labels any more, so the h2 sits at the top of its section ---- */
.lsec .center h2,.lsplit h2{margin-top:0}
.lsec-in .spec{margin-top:0}

/* ---- Kierownice (steering wheels) ---- */
/* mega menu with four zones: the promo tile moves to its own row; four columns on wide screens, two by two below 1181 px */
.mm-grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mm-grid4 .mm-featcol{grid-column:1/-1;padding:22px 0 0;border-left:0}
.mm-grid4 .mm-feat{min-height:170px}
@media (min-width:1181px){.mm-grid4.has-wide{grid-template-columns:minmax(0,2.1fr) repeat(3,minmax(0,1fr))}}
@media (max-width:1180px){
  .mm-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mm-grid4 .mm-col:nth-child(odd){border-left:0;padding-left:0}
  .mm-grid4 .mm-col:nth-child(n+3){margin-top:20px;padding-top:20px;border-top:1px solid var(--line-d)}
  .mm-grid4 .mm-featcol{border-top:0}
}
a.mm-row.mm-grp{grid-template-columns:24px minmax(0,1fr)}
.mm-n small{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--mute-d)}
/* home: slim full-width tile under the three photo panels */
.zones .zone.zone-wide{grid-column:1/-1;align-items:center;gap:clamp(14px,2vw,28px);min-height:clamp(140px,15vw,220px);background:var(--ink);color:#fff;--go-fill:#fff;--go-on:var(--ink)}
.zones .zone.zone-wide::after{display:none}
.zone-wide .zone-big{flex:none;display:grid;place-items:center;width:clamp(56px,7vw,96px);height:clamp(56px,7vw,96px);border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.zone-wide .zone-big svg{width:62%;height:62%;stroke-width:1.4}
.zone-wide .zone-t small{color:rgba(255,255,255,.75)}
.zone-wide .zone-i{display:none}
@media (hover:hover){.zone-wide:hover .go-i{background:#fff;color:var(--ink);box-shadow:none}}
@media (max-width:900px){.zones .zone.zone-wide{min-height:120px}}
/* list page: the car filter sits under the category chips */
.cats.cars{margin:0 0 14px}
/* product page: a required group that is still open */
.opt-req.opt-need .opt-msg{display:block}
@media (max-width:900px){a.mm-row.mm-grp{grid-template-columns:44px minmax(0,1fr)}}

/* ---- steering wheels: made-to-order notice (product page, cart, checkout) ---- */
.mto-note{margin:14px 0 0;padding:12px 14px;border-radius:8px;background:rgba(124,92,255,.08);box-shadow:inset 3px 0 0 var(--violet,#7C5CFF);font-size:14px;line-height:1.5;font-weight:500;color:var(--ink)}
.mto-note strong{font-weight:700}
.mto-note a{font-weight:700;text-decoration:underline;color:inherit;display:inline-block;min-height:24px}