/* ============================================================
   FlameCraft – ItemShop (shop.html). Bazuje na style.css (tokeny, .frame, .btn, .kicker…).
   ============================================================ */

html.shop-page{scroll-padding-top:calc(var(--nav-h) + 8px)}
html.shop-lock,html.shop-lock body{overflow:hidden}
html.shop-lock{scrollbar-gutter:stable} /* brak skoku strony po zniknięciu paska przewijania */
#main:focus{outline:none}

/* ---------- Hero sklepu ---------- */
.shop-hero{
  position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center;
  min-height:60vh; min-height:60svh; padding:calc(var(--nav-h) + 36px) 0 clamp(48px,6vw,72px);
  background:var(--c-night); text-align:center;
}
.shop-hero-media{position:absolute; inset:0; z-index:-3; overflow:hidden}
.shop-hero-media img{width:100%; height:100%; max-width:none; object-fit:cover; object-position:60% 50%; transform-origin:50% 50%}
.shop-hero-shade{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,8,13,.85) 0%,rgba(7,8,13,.45) 30%,rgba(7,8,13,.55) 70%,var(--c-night) 100%),
    radial-gradient(ellipse 60% 70% at 50% 50%,rgba(7,8,13,.35),rgba(4,4,8,.75) 100%);
}
.shop-hero .embers{z-index:-1}
.shop-hero-in{display:flex; flex-direction:column; align-items:center}
.shop-title{font-size:clamp(32px,5.2vw,68px); margin-top:4px}
.shop-hero .lead{color:#ece6dc; text-shadow:0 1px 10px rgba(0,0,0,.9)}
.p2w-badge{
  position:relative; display:inline-flex; align-items:center; gap:12px; margin-top:24px; padding:9px 20px 9px 14px;
  border:1.5px solid #7fdc5a; border-radius:6px; background:rgba(10,20,10,.72);
  box-shadow:0 0 22px rgba(95,209,58,.28), inset 0 0 16px rgba(95,209,58,.12);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.p2w-num{font:400 clamp(24px,2.6vw,32px)/1 var(--f-display); color:#9cf27a; text-shadow:0 0 14px rgba(127,220,90,.7), 0 2px 0 rgba(0,0,0,.6)}
.p2w-txt{font:800 clamp(13px,1.2vw,15px)/1 var(--f-ui); letter-spacing:.24em; text-transform:uppercase; color:#e8ffe0; margin-right:-.24em}
.shop-hero-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:28px}
.shop-hero-alt{min-height:56px; padding:0 26px; font-size:13px}

/* intro */
.js .sh-in{opacity:0}
.js .shop-hero-media img{transform:scale(1.1); opacity:.4}
.shop-go .sh-in{animation:upIn .9s var(--ease-out) forwards; animation-delay:calc(.15s + var(--i,0) * 120ms)}
.shop-go .shop-hero-media img{animation:bgIn 1.6s var(--ease-out) forwards}
.shop-go .p2w-badge{animation:upIn .9s var(--ease-out) forwards, p2wGlow 3.2s ease-in-out 1.6s infinite; animation-delay:calc(.15s + var(--i,0) * 120ms), 1.6s}
@keyframes p2wGlow{50%{box-shadow:0 0 34px rgba(95,209,58,.5), inset 0 0 20px rgba(95,209,58,.2)}}

/* ---------- Bez pay-to-win ---------- */
.fair{background:radial-gradient(ellipse 60% 60% at 50% 20%,rgba(255,138,31,.06),transparent 70%),var(--c-night)}
.fair .wrap{max-width:1000px}
.fair-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px)}
.fair-col{padding:26px 26px 24px}
.fair-h{display:flex; align-items:center; gap:12px; margin-bottom:16px; font:700 15px/1.3 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:#fff}
.fair-mark{width:12px; height:12px; flex:none; transform:rotate(45deg)}
.fair-yes .fair-mark{background:#7fdc5a; box-shadow:0 0 10px #5fd13a}
.fair-no .fair-mark{background:#ff5a4a; box-shadow:0 0 10px #e0452b}
.fair-no{border-color:rgba(224,69,43,.3)}
.fair-list{display:grid; gap:11px}
.fair-list li{display:flex; align-items:flex-start; gap:12px; font-size:15px; line-height:1.5; color:#ddd5c9}
.fair-ico{position:relative; flex:none; width:22px; height:22px; margin-top:0; border-radius:4px}
.fair-ico.ok{background:rgba(95,209,58,.14); border:1px solid rgba(127,220,90,.6)}
.fair-ico.ok::after{content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid #9cf27a; border-width:0 3px 3px 0; transform:rotate(45deg)}
.fair-ico.no{background:rgba(224,69,43,.14); border:1px solid rgba(255,90,74,.6)}
.fair-ico.no::before,.fair-ico.no::after{content:""; position:absolute; left:4px; right:4px; top:50%; height:3px; margin-top:-1.5px; background:#ff7a6a; transform:rotate(45deg)}
.fair-ico.no::after{transform:rotate(-45deg)}

/* ---------- Rangi ---------- */
.ranks{background:linear-gradient(180deg,var(--c-night),#0b0a10 50%,var(--c-night))}
.ranks .wrap{max-width:1180px}
.period{
  position:relative; display:flex; width:max-content; max-width:100%; margin:0 auto clamp(34px,4vw,50px); padding:4px;
  border:1px solid var(--c-line); border-radius:8px; background:rgba(13,12,16,.8);
  box-shadow:inset 0 0 14px rgba(255,138,31,.08);
}
.period::before{
  content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:5px;
  background:var(--btn-grad); box-shadow:0 0 18px rgba(255,138,31,.45);
  transition:transform .45s var(--ease-out);
}
.period.p90::before{transform:translateX(100%)}
.period-btn{
  position:relative; z-index:1; flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:130px; min-height:44px; padding:0 18px; border-radius:5px;
  font:700 13px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--c-text); white-space:nowrap; transition:color .3s;
}
.period-btn[aria-pressed="true"]{color:#2a1405}
.period-save{padding:3px 6px; border-radius:4px; background:rgba(95,209,58,.18); border:1px solid rgba(127,220,90,.6); color:#9cf27a; font-size:11px; letter-spacing:.04em}
.period-btn[aria-pressed="true"] .period-save{background:rgba(42,20,5,.18); border-color:rgba(42,20,5,.45); color:#2a1405}
.period-save:empty{display:none}

.rank-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px); align-items:stretch; padding-top:16px}
.rank-li{display:flex; perspective:1000px}
.rank-li.featured{z-index:1}
.rank{
  --rank:var(--c-flame); --rank2:var(--rank);
  flex:1; display:flex; flex-direction:column; padding:30px 24px 24px;
  border-color:color-mix(in srgb,var(--rank) 40%,transparent);
  transition:transform .5s var(--ease-out), border-color .35s, box-shadow .35s; will-change:transform;
}
.rank.is-tilting{transition:transform .12s linear, border-color .35s, box-shadow .35s}
.rank.frame::before{--b:var(--rank); transition:filter .35s, background-size .35s var(--ease-out)}
.rank:hover{
  border-color:var(--rank);
  box-shadow:0 22px 56px rgba(0,0,0,.6), 0 0 36px color-mix(in srgb,var(--rank) 30%,transparent), inset 0 0 30px rgba(255,138,31,.06);
}
.rank:hover:not(.is-tilting){transform:translateY(-8px)}
.rank:hover .glare::after{opacity:1}
.rank.frame:hover::before{--l:24px}
.rank.featured{
  margin:-16px 0; padding-top:42px; padding-bottom:30px;
  background:linear-gradient(180deg,rgba(40,22,10,.88),rgba(13,12,16,.86) 45%);
  border-color:color-mix(in srgb,var(--rank) 65%,transparent);
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 40px rgba(255,138,31,.18), inset 0 0 40px rgba(255,138,31,.06);
}
.rank-badge{
  position:absolute; z-index:2; left:50%; top:-15px; transform:translateX(-50%); overflow:hidden;
  padding:7px 16px 6px; border-radius:4px; background:var(--btn-grad); border:1px solid #ffc861; color:#2a1405;
  font:800 11.5px/1 var(--f-ui); letter-spacing:.24em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 0 22px rgba(255,138,31,.6);
}
.rank-badge::after{
  content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  transform:translateX(-160%) skewX(-22deg); animation:sweepAuto 3.6s ease-in-out 1s infinite;
}
.rank-name{font-size:clamp(24px,2.3vw,32px); text-align:center; color:var(--rank); text-shadow:0 3px 0 rgba(0,0,0,.55), 0 0 22px color-mix(in srgb,var(--rank) 45%,transparent)}
/* "+" rysowany w CSS (Minecrafter nie ma tego znaku): krzyżyk w linii z literami */
.rank-plus{position:relative; display:inline-block; width:.5em; height:.5em; margin-left:.12em; vertical-align:.22em; --pc:var(--rank2,var(--rank)); -webkit-text-fill-color:initial}
.rank-plus::before,.rank-plus::after{content:""; position:absolute; background:var(--pc); box-shadow:0 .08em 0 rgba(0,0,0,.5)}
.rank-plus::before{left:0; right:0; top:50%; height:.15em; margin-top:-.075em}
.rank-plus::after{top:0; bottom:0; left:50%; width:.15em; margin-left:-.075em}
.rank-plus+.rank-plus{margin-left:.08em}
.rank.animated .rank-name{
  background:linear-gradient(100deg,var(--rank) 0%,var(--rank2) 30%,#fff3d0 50%,var(--rank2) 70%,var(--rank) 100%);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none; filter:drop-shadow(0 3px 0 rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(255,138,31,.4));
  animation:nameFlow 4s linear infinite;
}
@keyframes nameFlow{from{background-position:100% 0} to{background-position:-150% 0}}

/* podgląd czatu */
.rank-chat{
  position:relative; display:flex; align-items:center; margin:16px 0 18px; padding:9px 12px; min-height:42px; border-radius:4px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.07);
  font:400 12px/2.4 "Minecraftia",var(--f-pl); color:#fff; text-shadow:1px 1px 0 #3f3f3f;
  overflow:hidden;
}
.chat-line{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:clip; padding-top:3px}
.chat-prefix{display:inline; color:var(--rank); text-shadow:1px 1px 0 color-mix(in srgb,var(--rank) 25%,#000)}
.chat-prefix img{display:inline-block; width:10px; height:auto; margin:0 4px 0 0; vertical-align:baseline; position:relative; top:-1px; image-rendering:pixelated; filter:drop-shadow(0 0 4px rgba(255,138,31,.8))}
.rank.animated .chat-prefix{
  background:linear-gradient(90deg,var(--rank),var(--rank2),var(--rank)); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none;
  animation:nameFlow 2.6s linear infinite;
}
.rank.animated .chat-prefix img{-webkit-text-fill-color:initial}
.chat-nick.grad{
  background:var(--nick); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none; animation:nickFlow 3s linear infinite;
}
.chat-nick.shine{filter:drop-shadow(0 0 4px rgba(255,213,106,.6))}
@keyframes nickFlow{from{background-position:0 0} to{background-position:-200% 0}}
.chat-msg{color:#e6e6e6}
.chat-msg.type{animation:typeIn .9s steps(12,end)}
@keyframes typeIn{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
.chat-caret{flex:none; width:7px; height:2px; margin:9px 0 0 3px; background:#fff; animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

.rank-price{display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:4px 8px; text-align:center}
.rank-val{display:inline-block; font:800 clamp(30px,2.8vw,38px)/1.1 var(--f-ui); color:#fff; letter-spacing:.01em; font-variant-numeric:tabular-nums; text-shadow:0 0 18px color-mix(in srgb,var(--rank) 50%,transparent)}
.rank-val.bump{animation:bump .65s var(--ease-out)}
@keyframes bump{30%{transform:scale(1.08); color:var(--c-flame-hi)}}
.rank-per{font:600 13px/1 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted)}
.rank-save{min-height:20px; margin-top:4px; text-align:center; font:700 12px/1.6 var(--f-ui); letter-spacing:.06em; color:#9cf27a}
.rank-perks{display:grid; gap:9px; margin:16px 0 24px; padding-top:18px; border-top:1px solid rgba(255,138,31,.16)}
.rank-perks li{position:relative; padding-left:20px; font-size:14.5px; line-height:1.5; color:#ddd5c9}
.rank-perks li::before{content:""; position:absolute; left:3px; top:.6em; width:6px; height:6px; background:var(--rank); transform:rotate(45deg); box-shadow:0 0 6px var(--rank)}
.rank-perks li.inh{
  padding:7px 10px 7px 30px; border-radius:4px; background:color-mix(in srgb,var(--rank) 12%,transparent);
  border:1px dashed color-mix(in srgb,var(--rank) 55%,transparent); color:#fff; font-weight:600;
}
.rank-perks li.inh::before{left:12px; top:1.05em}
.rank-perks li.inh b{color:var(--rank)}
.rank-buy{width:100%; margin-top:auto}

.shop-note{max-width:760px; margin:clamp(34px,4vw,48px) auto 0; text-align:center; font-size:13.5px; line-height:1.6; color:var(--c-muted)}

/* ---------- Porównanie ---------- */
.compare{background:var(--c-night)}
.compare .wrap{max-width:980px}
.cmp-scroll{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; padding:6px}
.cmp-scroll::before{inset:0}
.cmp-scroll:focus-visible{outline-offset:4px}
.cmp-scroll{scrollbar-width:thin; scrollbar-color:var(--c-ember) rgba(255,255,255,.05)}
.cmp-scroll::-webkit-scrollbar{width:8px; height:8px}
.cmp-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.05); border-radius:8px}
.cmp-scroll::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--c-ember),var(--c-gold)); border-radius:8px; border:1px solid #0e0d12}
.cmp-scroll::-webkit-scrollbar-thumb:hover{background:var(--c-gold)}
.cmp-scroll::-webkit-scrollbar-corner{background:transparent}
.cmp{width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px}
.cmp th,.cmp td{padding:12px 14px; text-align:center; border-bottom:1px solid rgba(255,255,255,.06)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{font:700 12px/1.3 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--c-muted); border-bottom:1px solid rgba(255,138,31,.3)}
.cmp thead th.cmp-rank{font:400 clamp(15px,1.4vw,19px)/1.2 var(--f-display); letter-spacing:.03em; color:var(--rank); text-transform:uppercase}
.cmp tbody th{text-align:left; font-weight:500; color:#e6dfd4}
.cmp th:first-child{position:sticky; left:0; z-index:1; background:#0e0d12; min-width:180px}
.cmp tbody tr:hover th,.cmp tbody tr:hover td{background-color:rgba(255,138,31,.05)}
.cmp tbody tr:hover th:first-child{background-color:#16130f}
.cmp .featured{background:rgba(255,138,31,.07)}
.cmp-yes{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:4px; background:rgba(95,209,58,.14); border:1px solid rgba(127,220,90,.55); color:#9cf27a; font-weight:800; line-height:1}
.cmp-no{color:#5f584f; font-weight:700}
.cmp-txt{font-weight:600; color:var(--c-flame-hi); font-size:13.5px}
.cmp-hint{display:none; margin-top:10px; text-align:center; font-size:12.5px; color:var(--c-muted)}

/* ---------- Kosmetyki ---------- */
.cosm{background:radial-gradient(ellipse 60% 50% at 50% 0,rgba(255,138,31,.06),transparent 70%),linear-gradient(180deg,var(--c-night),#0b0a10 60%,var(--c-night))}
.cos-filter{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:clamp(28px,3.4vw,42px)}
.cf-btn{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border-radius:6px;
  border:1px solid var(--c-line); background:rgba(13,12,16,.7);
  font:700 12px/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:#e6e1d8;
  transition:background-color .25s, border-color .25s, color .25s, box-shadow .25s, transform .25s var(--ease-out);
}
.cf-btn:hover{border-color:var(--c-flame); color:#fff; transform:translateY(-1px)}
.cf-n{padding:2px 6px; border-radius:3px; background:rgba(255,138,31,.14); font-size:10.5px; letter-spacing:0; color:var(--c-flame-hi)}
.cf-btn[aria-pressed="true"]{background:var(--btn-grad); border-color:#ffc861; color:#2a1405; box-shadow:0 0 18px rgba(255,138,31,.4)}
.cf-btn[aria-pressed="true"] .cf-n{background:rgba(42,20,5,.18); color:#2a1405}

.cos-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:clamp(14px,1.8vw,22px)}
.cos-li{display:flex}
.cos{flex:1; display:flex; flex-direction:column; align-items:flex-start; padding:20px 18px 18px; transition:transform .4s var(--ease-out), border-color .3s, box-shadow .3s}
.cos:hover{transform:translateY(-5px); border-color:rgba(255,138,31,.55); box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 26px rgba(255,138,31,.16)}
.cos-ico{
  position:relative; width:64px; height:64px; margin-bottom:14px; display:grid; place-items:center;
  filter:drop-shadow(0 0 8px rgba(255,138,31,.4)); transition:transform .45s var(--ease-out), filter .45s;
}
.cos-ico::before,.cos-ico::after{content:""; position:absolute; inset:0; z-index:-1; clip-path:polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%)}
.cos-ico::before{background:linear-gradient(180deg,#ffb23f,#e85d0c)}
.cos-ico::after{inset:2px; background:radial-gradient(circle at 50% 45%,#1f1913,#0c0b0f 72%)}
.cos-ico{isolation:isolate}
.cos-ico svg{width:38px; height:38px; image-rendering:pixelated}
.cos:hover .cos-ico{transform:translateY(-3px) rotate(-4deg) scale(1.06); filter:drop-shadow(0 0 16px rgba(255,138,31,.8))}
.cos-cat{font:700 10.5px/1.2 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--c-flame)}
.cos-name{margin:6px 0 6px; font:700 16px/1.3 var(--f-ui); color:#fff}
.cos-desc{font-size:14px; line-height:1.55; color:var(--c-muted)}
.cos-foot{width:100%; margin-top:auto; padding-top:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap}
.cos-price{display:flex; flex-direction:column; gap:2px}
.cos-price strong{font:800 19px/1.1 var(--f-ui); color:#fff; font-variant-numeric:tabular-nums}
.cos-price small{font:600 10.5px/1.2 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; color:#9cf27a}
.btn-sm{min-height:42px; padding:0 18px; font-size:13px; letter-spacing:.14em; gap:8px}
.cos-support{border-color:rgba(255,138,31,.5); background:linear-gradient(180deg,rgba(40,22,10,.85),rgba(13,12,16,.85) 60%)}
.cos-amount{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 110px}
.cos-amount label{font:700 10.5px/1.2 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--c-muted)}
.cos-amount small{font-size:11.5px; color:var(--c-muted)}
.cos-amount input,.field input[type="text"]{
  width:100%; min-height:42px; padding:0 12px; border-radius:5px; border:1px solid rgba(255,138,31,.45); background:rgba(0,0,0,.45);
  font:600 15px/1 var(--f-ui); color:#fff; transition:border-color .25s, box-shadow .25s;
}
.cos-amount input{max-width:130px}
.cos-amount input:focus,.field input[type="text"]:focus{outline:none; border-color:var(--c-flame-hi); box-shadow:0 0 0 3px rgba(255,138,31,.25)}
.cos-amount input[aria-invalid="true"],.field input[aria-invalid="true"]{border-color:#ff5a4a; box-shadow:0 0 0 3px rgba(255,90,74,.2)}
.cos-li.pop{animation:popIn .5s var(--ease-out) both; animation-delay:var(--pd,0ms)}
@keyframes popIn{from{opacity:0; transform:translateY(16px) scale(.96)} to{opacity:1; transform:none}}

/* ---------- FAQ sklepu ---------- */
.faq-more{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:32px; color:var(--c-muted); font-size:15px}

/* ---------- Stopka (linki) ---------- */
.footer-links{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 24px; margin-top:18px; padding:0 20px; font:600 11.5px/1.4 var(--f-ui); letter-spacing:.16em; text-transform:uppercase}
.footer-links a{color:#d9d3c9; transition:color .25s}
.footer-links a:hover{color:var(--c-flame)}

/* ---------- Modal zakupu ---------- */
.buy-modal{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:16px}
.buy-backdrop{position:absolute; inset:0; background:rgba(4,4,8,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .25s}
.buy-box{
  position:relative; width:min(520px,100%); max-height:calc(100vh - 32px); max-height:calc(100svh - 32px); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  padding:28px 26px 22px; background:rgba(13,12,16,.97);
  opacity:0; transform:translateY(18px) scale(.97); transition:opacity .25s, transform .35s var(--ease-out);
}
.buy-box::-webkit-scrollbar{display:none}
.buy-box::before{inset:0}
.buy-modal.open .buy-backdrop{opacity:1}
.buy-modal.open .buy-box{opacity:1; transform:none}
.buy-box .kicker{margin-bottom:8px}
.buy-box .kicker i{width:30px}
.buy-title{color:#fff; padding-right:36px}
.buy-x{position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:6px; border:1px solid var(--c-line); transition:background-color .25s, border-color .25s}
.buy-x:hover{background:rgba(255,138,31,.14); border-color:var(--c-flame)}
.buy-x span::before,.buy-x span::after{content:""; position:absolute; left:10px; right:10px; top:50%; height:2px; margin-top:-1px; background:var(--c-text); transform:rotate(45deg)}
.buy-x span::after{transform:rotate(-45deg)}
.buy-sum{display:grid; gap:0; margin:16px 0 20px; border:1px solid rgba(255,255,255,.07); border-radius:5px; overflow:hidden}
.buy-sum > div{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.06)}
.buy-sum > div:last-child{border-bottom:0}
.buy-sum dt{font:600 12px/1.5 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--c-muted)}
.buy-sum dd{margin:0; font-weight:600; color:#fff; text-align:right}
.buy-total{background:rgba(255,138,31,.08)}
.buy-total dd{font-size:18px; font-weight:800; color:var(--c-flame-hi)}
.buy-form{display:grid; gap:14px}
.field label{display:block; margin-bottom:6px; font:700 12px/1.3 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; color:#e6e1d8}
.field-hint{margin-top:5px; font-size:12.5px; color:var(--c-muted)}
.field-err{font-size:13px; font-weight:600; color:#ff7a6a}
.field-err:empty{display:none}
.field .field-err{margin-top:4px}
.field-check{display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:start}
.field-check input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--c-flame); cursor:pointer}
.field-check input:disabled{cursor:not-allowed}
.field-check label{margin:0; font:500 13.5px/1.5 var(--f-ui); letter-spacing:0; text-transform:none; color:#ddd5c9}
.field-check label a{color:var(--c-flame-hi); text-decoration:underline; text-underline-offset:2px}
.field-check label a:not([href]){color:var(--c-muted); text-decoration:none}
.field-check .field-err{grid-column:2}
.buy-info{padding:10px 12px; border-radius:5px; border:1px solid rgba(255,178,63,.45); background:rgba(255,178,63,.08); font-size:13.5px; line-height:1.5; color:#f3e3c4}
.buy-actions .btn{width:100%; white-space:normal; text-align:center; line-height:1.25}
.buy-actions .btn:disabled{opacity:.5; cursor:not-allowed; filter:grayscale(.4)}
.buy-fine{font-size:12px; line-height:1.5; color:#8a8277; text-align:center}

/* ============================================================
   RWD
   ============================================================ */
@media (max-width:1000px){
  .rank-grid{grid-template-columns:minmax(0,1fr); max-width:480px; margin:0 auto; gap:30px}
  .rank.featured{margin:0}
}
@media (max-width:700px){
  .cmp{min-width:560px}
  .fair-grid{grid-template-columns:1fr}
  .cmp-hint{display:block}
}
@media (max-width:640px){
  .shop-hero{min-height:56svh; padding-top:calc(var(--nav-h) + 26px)}
  .shop-hero-actions .btn,.shop-hero-alt{min-height:50px}
  .fair-col{padding:20px 16px 18px}
  .fair-list li{font-size:14.5px}
  .rank{padding:28px 18px 20px}
  .rank.featured{padding-top:36px}
  .cos-filter{gap:8px}
  .cf-btn{min-height:38px; padding:0 11px; font-size:11px; letter-spacing:.08em}
  .cmp{font-size:13.5px}
  .cos-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .cos-li[data-cat="wsparcie"]{grid-column:1/-1}
  .cos{padding:14px 12px 12px}
  .cos-ico{width:52px; height:52px; margin-bottom:10px}
  .cos-ico svg{width:30px; height:30px}
  .cos-name{font-size:14.5px}
  .cos-desc{font-size:13px}
  .cos-foot{gap:8px; padding-top:12px}
  .cos-price strong{font-size:17px}
  .cos-foot .btn-sm{width:100%; min-height:40px}
  .cos-support .cos-foot .btn-sm{width:auto}
  .cmp th,.cmp td{padding:10px 10px}
  .cmp th:first-child{min-width:150px}
  .buy-box{padding:24px 18px 18px}
  .buy-modal{padding:10px}
}
@media (max-width:360px){
  .period-btn{min-width:0; padding:0 10px}
  .rank-chat{font-size:11px}
}

/* ============================================================
   Ograniczony ruch
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html.shop-page{scroll-behavior:auto}
  .js .sh-in,.js .shop-hero-media img{opacity:1; transform:none}
  .rank-name,.chat-prefix,.chat-nick.grad{animation:none!important}
  .rank:hover:not(.is-tilting),.cos:hover{transform:none}
}