/* PC Extreme vol. 2. Uklad jak landing N64, paleta nowego sklepu (grafit, zolty przycisk) z czerwienia stempla „VOL. 2”.
   Grafika to wylacznie gotowe materialy z gier z okladek (oficjalne screeny i artworki, zrodla w img/ZRODLA.md)
   i prawdziwe okladki. Nic generowanego ani rysowanego. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0c0f14; --bg2:#141922; --bg3:#1d2430; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.2);
  --ink:#ffffff; --muted:#aeb8c7; --muted2:#7d889b;
  --red:#e2231a; --yellow:#ffd400; --ok:#2fbf71; --gold:#e0b84a;
  --r:12px; --maxw:1200px; --ease:cubic-bezier(.2,.8,.2,1);
  --barh:96px; --gut:24px;
}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Red Hat Display",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:clip;padding-bottom:24px;transition:padding-bottom .3s}
body.has-cart{padding-bottom:calc(var(--barh) + 24px)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.display{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.01em;line-height:.95;text-transform:uppercase}

/* ---------- naglowek ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(12,15,20,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.top .logolink{display:block;line-height:0;transition:opacity .25s var(--ease)}
.top .logolink:hover{opacity:.75}
.top .logo{width:108px}
.top .lnk{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- przyciski ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--yellow);color:#111;
  font-weight:900;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:16px 24px;border-radius:8px;
  text-decoration:none;transition:transform .2s var(--ease),filter .2s;white-space:nowrap}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn:disabled{background:var(--bg3);color:var(--muted2);cursor:not-allowed;transform:none;filter:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,76px) clamp(36px,5vw,64px);isolation:isolate}
/* mozaika screenow: kafle z czarnymi przerwami, lekko przekrecona, jak na okladkach GTA */
.mosaic{position:absolute;inset:-12% -6%;z-index:-2;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:8px;
  transform:rotate(-4deg);background:#000}
.mosaic img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(1.15)}
.shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(12,15,20,.97) 0%,rgba(12,15,20,.9) 34%,rgba(12,15,20,.45) 62%,rgba(12,15,20,.3) 100%),
  linear-gradient(180deg,rgba(12,15,20,.2) 0%,rgba(12,15,20,0) 40%,rgba(12,15,20,.92) 96%,var(--bg) 100%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center}
.copy{position:relative;z-index:3}
.chip{display:inline-flex;align-items:center;gap:9px;font-weight:900;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;border:1px solid var(--line2);background:rgba(12,15,20,.6);padding:9px 14px;border-radius:999px}
.chip.live{border-color:transparent;background:var(--red)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.hero h1{font-size:clamp(56px,8.2vw,116px);margin:20px 0 0;position:relative;width:fit-content;white-space:nowrap;padding-bottom:.18em}
.vol{position:absolute;right:-.2em;bottom:-.02em;font-size:.3em;line-height:1;padding:.12em .24em .08em;
  background:var(--red);color:#fff;border:3px solid #fff;box-shadow:0 0 0 2px var(--red),0 10px 24px rgba(0,0,0,.45);transform:rotate(-5deg);letter-spacing:.02em}
.hero .lead{color:#e3e8ef;font-size:clamp(16px,1.9vw,19px);max-width:46ch;margin:20px 0 0}
.hero .lead2{color:var(--muted);font-size:15px;max-width:46ch;margin:10px 0 0}
.hero .price{display:flex;align-items:baseline;gap:12px;margin-top:24px;flex-wrap:wrap}
.hero .price b{font-family:Anton,sans-serif;font-weight:400;font-size:48px;line-height:1;white-space:nowrap}
.hero .price span{color:var(--muted);font-size:14px}
.hero .cta{margin-top:22px}

/* scena: dwie postacie z gier za wachlarzem trzech okladek; wszystko w swojej kolumnie, tytul zostaje na wierzchu */
.scene{position:relative;height:clamp(340px,38vw,500px);container-type:inline-size}
.char{position:absolute;bottom:0;pointer-events:none;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.scene .tommy{left:-4%;height:62%;width:auto;max-width:none;z-index:3;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.scene .gordon{right:-1%;height:100%;width:auto;max-width:none;z-index:0}
.fan{position:absolute;inset:0;z-index:1}
.fan img{position:absolute;top:5%;left:54%;width:29cqw;max-width:190px;aspect-ratio:600/799;height:auto;border-radius:5px;
  box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1);transform-origin:50% 120%;transition:transform .6s var(--ease)}
.fan .f1{transform:translateX(-50%) translateX(-44%) rotate(-10deg)}
.fan .f2{transform:translateX(-50%) translateY(-4%);z-index:2}
.fan .f3{transform:translateX(-50%) translateX(44%) rotate(10deg)}
.scene:hover .f1{transform:translateX(-50%) translateX(-52%) rotate(-15deg)}
.scene:hover .f3{transform:translateX(-50%) translateX(52%) rotate(15deg)}
.scene:hover .f2{transform:translateX(-50%) translateY(-8%)}

/* ---------- wybor okladek ---------- */
.pick{padding-block:clamp(24px,4vw,44px) 10px}
.head{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.head h2{font-size:clamp(32px,4.6vw,52px);margin:0}
.hint{color:var(--muted);font-size:14px;max-width:46ch;margin:0}
.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.card{position:relative;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.card.on{box-shadow:0 0 0 2px var(--yellow),0 20px 40px rgba(0,0,0,.4);border-color:transparent}
.card.hl{box-shadow:0 0 0 2px #fff,0 20px 40px rgba(0,0,0,.4)}
.card .art{position:relative;display:block;width:100%;padding:12px 12px 4px;cursor:pointer}

.card .art img{width:100%;aspect-ratio:600/799;height:auto;object-fit:cover;border-radius:4px;box-shadow:0 10px 22px rgba(0,0,0,.5);transition:transform .5s var(--ease)}
.card .art:hover img{transform:translateY(-3px)}
.card .art:focus-visible{outline:2px solid var(--yellow);outline-offset:-3px}
.card .art:disabled{cursor:default}
/* karta limitki, zanim przyjdzie okladka */
.q{width:100%;aspect-ratio:600/799;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(80% 60% at 50% 40%,rgba(226,35,26,.3),transparent 70%),#140c0e;box-shadow:inset 0 0 0 1px rgba(224,184,74,.5),0 10px 22px rgba(0,0,0,.5)}
.q b{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(40px,4vw,60px);line-height:1;color:var(--gold)}
.q span{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#d8d2c4;text-align:center;padding:0 6px}
.card .badge{position:absolute;top:8px;right:8px;z-index:2;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--yellow);color:#111;
  font-family:Anton,sans-serif;font-size:16px;display:none;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.card.on .badge{display:inline-flex}
.card .soldx{position:absolute;left:50%;top:40%;z-index:2;transform:translate(-50%,-50%) rotate(-10deg);background:var(--red);color:#fff;
  font-family:Anton,sans-serif;font-size:16px;letter-spacing:.06em;padding:4px 10px;border:2px solid #fff;text-transform:uppercase;white-space:nowrap}
.card.sold .art img,.card.sold .q{filter:grayscale(1) brightness(.5)}
.card .meta{flex:1;padding:10px 12px 6px;display:flex;align-items:center}
.card .meta b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.25;font-weight:700;min-height:2.5em}
.card .ctl{height:40px;display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 10px 10px}
.card .add{width:100%;height:40px;border-radius:8px;border:1px solid var(--line2);font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:7px;transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
.card .add:hover{background:var(--yellow);border-color:var(--yellow);color:#111}
.card .add:disabled{opacity:.6;cursor:not-allowed;background:none;color:var(--muted);border-color:var(--line)}
.card.on .add{display:none}
.stepper{display:none;width:100%;align-items:center;justify-content:space-between}
.card.on .stepper{display:flex}
.cbtn{width:38px;height:38px;border-radius:50%;background:var(--yellow);color:#111;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 4px 10px rgba(0,0,0,.35);transition:transform .12s,filter .2s}
.cbtn:hover{filter:brightness(1.06)}
.cbtn:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}
.cbtn:disabled{opacity:.35;cursor:not-allowed}
.cbtn svg{width:16px;height:16px}
.stepper .n{font-family:Anton,sans-serif;font-size:22px;min-width:28px;text-align:center}
.card.bump,.mini.bump{animation:bump .28s var(--ease)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.025)}100%{transform:scale(1)}}

/* ---------- dorzuc do koszyka ---------- */
.more{padding-block:clamp(40px,5vw,64px) 0}
.mtop{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:14px;align-items:stretch}
.mblock{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px}
.mblock h3,.mx h3{margin:0 0 12px;font-family:Anton,sans-serif;font-weight:400;font-size:22px;text-transform:uppercase;letter-spacing:.01em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mblock h3 small,.mx h3 small{font-family:"Red Hat Display",sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.minis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.mx .minis{grid-template-columns:repeat(auto-fill,minmax(104px,124px));justify-content:start}
.mini{position:relative;display:flex;flex-direction:column;gap:6px;padding:7px 7px 8px;background:var(--bg3);border:1px solid var(--line);border-radius:10px;transition:border-color .2s,box-shadow .2s}
.mini:hover{border-color:var(--line2)}
.mini.on{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow)}
.mini .mimg{position:relative;display:block;width:100%;border-radius:4px;overflow:hidden;cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.mini .mimg img{width:100%;aspect-ratio:300/401;height:auto;object-fit:cover;transition:transform .3s var(--ease)}
.mini .mimg:hover img{transform:scale(1.03)}
.mini .mb{position:absolute;top:11px;right:11px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--yellow);color:#111;font-family:Anton,sans-serif;font-size:13px;display:none;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.mini.on .mb{display:inline-flex}
.mini .ml{font-size:10.5px;font-weight:700;line-height:1.2;letter-spacing:.02em;color:#d5dbe4;min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini .mrow{display:flex;align-items:center;justify-content:space-between;gap:4px;padding-top:6px;border-top:1px solid var(--line)}
.mini .mp{font-family:Anton,sans-serif;font-size:15px;white-space:nowrap}
.mini .mbtn{display:flex;align-items:center;gap:6px}
.mini .mbtn button{width:26px;height:26px;border-radius:50%;background:var(--yellow);color:#111;display:inline-flex;align-items:center;justify-content:center;flex:none}
.mini .mbtn .mm{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px var(--line2)}
.mini .mbtn button svg{width:12px;height:12px}
.mini .mbtn .mm,.mini .mbtn .mn{display:none}
.mini.on .mbtn .mm,.mini.on .mbtn .mn{display:inline-flex}
.mini .mbtn .mn{font-family:Anton,sans-serif;font-size:15px;min-width:12px;justify-content:center}
.mini.on .mp{display:none}
.mini.on .mrow{justify-content:center}
.mini.sold{opacity:.4;pointer-events:none}
/* GTA: wieksza karta obok PC Extreme #1 */
.mblock.gta{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:center;
  background:linear-gradient(140deg,rgba(255,212,0,.10),rgba(20,25,34,1) 55%);border-color:rgba(255,212,0,.25)}
.mblock.gta .mini .ml{display:none}
.mblock.gta .mini{max-width:200px}
.mblock.gta .gtxt span{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.mblock.gta .gtxt b{display:block;font-family:Anton,sans-serif;font-weight:400;font-size:26px;line-height:1.02;text-transform:uppercase;margin-top:6px}
.mblock.gta .gtxt p{margin:8px 0 0;color:var(--muted);font-size:13px}
.mblock.gta .gtxt .gp{font-family:Anton,sans-serif;font-size:30px;margin-top:10px;display:block}
.mblock.gta .gtxt .btn{margin-top:12px;padding:12px 16px;font-size:12px}
.mx{margin-top:12px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r)}
.mx summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;font-weight:900;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.mx summary::-webkit-details-marker{display:none}
.mx summary span em{font-style:normal;color:var(--muted);font-weight:700;margin-left:6px}
.mx summary i{width:12px;height:12px;border-right:3px solid var(--yellow);border-bottom:3px solid var(--yellow);transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease)}
.mx[open] summary i{transform:rotate(225deg) translate(-3px,-3px)}
.mx summary:hover{color:var(--yellow)}
.mxin{padding:4px 18px 18px;display:grid;gap:20px}
.mx h3{font-size:18px;margin-bottom:10px}

/* ---------- co w srodku: screen z Max Payne w tle, marine i Sarge po bokach ---------- */
.inside{position:relative;overflow:hidden;margin-top:clamp(48px,6vw,80px);padding-block:clamp(48px,6vw,80px) clamp(36px,4vw,56px);isolation:isolate;border-block:1px solid var(--line)}
.insbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.26) saturate(1.1)}
.inside::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,15,20,.65),rgba(12,15,20,.25) 50%,rgba(12,15,20,.65))}
.inside .char{z-index:-1;height:min(96%,820px);width:auto;max-width:none;opacity:.9;bottom:0}
.inside .marine{left:max(-40px,calc(50% - 800px))}
.inside .sarge{right:max(-30px,calc(50% - 790px));height:min(70%,560px)}
.inside .wrap{max-width:1000px}
.lab{margin:26px 0 10px;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow)}
.inside .head + .lab{margin-top:0}
.tiles{display:grid;gap:12px}
.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tile{margin:0}
.tile img{width:100%;aspect-ratio:460/215;height:auto;object-fit:cover;border-radius:8px;box-shadow:0 16px 32px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);transition:transform .4s var(--ease)}
.tile:hover img{transform:translateY(-3px)}
.tile figcaption{margin-top:8px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
/* reszta jak zapowiedzi na samej okladce: jasna etykieta, tresc grubym kondensowanym krojem */
.lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:26px;border-top:1px solid var(--line2)}
.cl{padding:16px 18px 4px 0}
.cl + .cl{padding-left:18px;border-left:1px solid var(--line)}
.cl span{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
.cl b{display:block;margin-top:6px;font-family:Anton,sans-serif;font-weight:400;font-size:clamp(17px,1.6vw,21px);line-height:1.12;text-transform:uppercase;letter-spacing:.01em}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:34px;border-top:1px solid var(--line2);padding-top:22px}
.stats div{padding-right:14px}
.stats div + div{padding-left:18px;border-left:1px solid var(--line)}
.stats b{display:block;font-family:Anton,sans-serif;font-weight:400;font-size:clamp(28px,3.4vw,42px);line-height:1;color:#fff}
.stats span{display:block;color:var(--muted);font-size:13px;margin-top:6px}

footer{padding-block:26px 8px;color:var(--muted2);font-size:13px}
footer a{color:var(--muted)}

/* ---------- pasek koszyka ---------- */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:50;transform:translateY(105%);transition:transform .35s var(--ease);will-change:transform;
  background:rgba(12,15,20,.97);border-top:1px solid var(--line2);box-shadow:0 -14px 40px rgba(0,0,0,.4)}
.cartbar.show{transform:none}
.cartbar .wrap{display:flex;align-items:center;gap:18px;min-height:var(--barh);padding-block:12px}
.thumbs{display:flex;gap:8px;flex:none}
.thumb{position:relative;width:38px;height:50px;border-radius:4px;background:var(--bg3);box-shadow:0 0 0 1px var(--line2)}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.thumb i{display:flex;height:100%;align-items:center;justify-content:center;font-style:normal;font-family:Anton,sans-serif;font-size:22px;color:var(--gold)}
.thumb b{position:absolute;right:-5px;bottom:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--yellow);color:#111;
  font-family:Anton,sans-serif;font-size:12px;display:flex;align-items:center;justify-content:center}
.sum{flex:1;min-width:0}
.sum .items{color:var(--muted);font-size:13px}
.sum .total{font-family:Anton,sans-serif;font-size:28px;line-height:1.05}
.freeship{flex:0 1 260px;min-width:170px}
.fs-text{font-size:12px;color:var(--muted);margin-bottom:6px}
.fs-text b{color:#fff}
.freeship.free .fs-text{color:var(--ok);font-weight:700}
.fs-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.fs-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--yellow);transition:width .4s var(--ease)}
.freeship.free .fs-bar i{background:var(--ok)}
.cartbar .btn{flex:none}
.thumb.more{display:flex;align-items:center;justify-content:center;font-family:Anton,sans-serif;font-size:14px;color:var(--muted)}

/* Reveal jak na landingu N64: tresc widoczna od pierwszej klatki, JS chowa tylko to, co lezy ponizej ekranu. */
.anim .rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.hold{opacity:0;transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .js .rv,.js .rv.hold{opacity:1;transform:none}}

/* ---------- responsywnosc ---------- */
@media (max-width:1180px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:980px){.mtop{grid-template-columns:1fr}.mblock.gta{grid-template-columns:150px 1fr}}
@media (max-width:1100px){.inside .char{display:none}}
@media (max-width:860px){
  .hero{padding-block:8px 28px}
  .hero .wrap{grid-template-columns:1fr;gap:6px}
  .scene{order:-1;height:clamp(250px,64vw,360px)}
  .fan img{width:28cqw}
  .scene .tommy{height:60%;left:-6%}
  .scene .gordon{height:98%;right:-3%}
  .mosaic{inset:-6% -30%}
  .shade{background:
    linear-gradient(180deg,rgba(12,15,20,.25) 0%,rgba(12,15,20,.5) 38%,rgba(12,15,20,.93) 55%,var(--bg) 100%)}
  /* na telefonie przycisk nad zgieciem: plakietka, tytul, cena, przycisk, dopiero potem opisy */
  .copy{display:flex;flex-direction:column}
  .chip{order:1;align-self:flex-start}
  .hero h1{order:2;margin-top:12px}
  .hero .price{order:3;margin-top:10px}
  .hero .cta{order:4;margin-top:14px}
  .hero .lead{order:5;margin-top:22px}
  .hero .lead2{order:6}
  .tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lines{grid-template-columns:1fr}
  .cl + .cl{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .cl{padding:14px 0 10px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .stats div:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:640px){
  :root{--barh:164px;--gut:16px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hero h1{font-size:clamp(50px,14.5vw,72px)}
  .hero .price b{font-size:44px}
  .hero .cta .btn{width:100%}
  .cartbar .wrap{flex-wrap:wrap;gap:8px 14px}
  .cartbar .btn{flex:1 1 100%;padding:14px;order:4}
  .thumbs{order:1}.sum{order:2}
  .freeship{order:3;flex:1 1 100%;min-width:0}
  .minis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mx .minis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mblock.gta{grid-template-columns:110px 1fr}
  .tiles.two{grid-template-columns:1fr}

  .top .lnk{display:none}
}
@media (max-width:900px){
  .top{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0c0f14}
}