/* =========================================================
   TRILL PEM - nakladka sklepowa
   Jezyk wizualny: blaskibass.pl (czern, mono, wlosowe ramki,
   chrom) rozwiniety o ziarno, scanline i tracklistowa siatke.
   Mobile first - 90% ruchu to telefon.
   ========================================================= */

:root{
  --bg:      #050505;
  --panel:   #0a0a0a;
  --fg:      #ffffff;
  --dim:     #7a7a7a;      /* czytelny szary, nie #555 */
  --dimmer:  #4a4a4a;
  --line:    #2e2e2e;
  --line-2:  #191919;
  --live:    #b8ff2e;      /* akcent tylko dla statusow: dostepne / sukces */
  --warn:    #ff4b3e;

  --mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Mono',
          'Segoe UI Mono', 'Roboto Mono', Menlo, Consolas, 'Courier New', monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;

  --pad:  clamp(1rem, 5vw, 3rem);
  --maxw: 1240px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }

/* `hidden` musi wygrywac z kazdym display ustawionym nizej */
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }

button, input{ font:inherit; letter-spacing:inherit; }
button{ cursor:pointer; }

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--fg); color:var(--bg); }

:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

.u{ text-transform:uppercase; letter-spacing:.08em; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- ZIARNO + SCANLINE ---------- */

.grain, .scan{
  position:fixed; inset:-50%;
  pointer-events:none;
  z-index:1;
}

.grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05;
  animation:grain 700ms steps(2) infinite;
}

.scan{
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.028) 0px,
    rgba(255,255,255,.028) 1px,
    transparent 1px,
    transparent 3px);
  opacity:.7;
  inset:0;
}

@keyframes grain{
  0%   { transform:translate(0,0); }
  50%  { transform:translate(-2%,1%); }
  100% { transform:translate(1%,-2%); }
}

/* ---------- NAGLOWEK ---------- */

.hdr{
  position:sticky; top:0; z-index:40;
  background:rgba(5,5,5,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2);
}

.hdr__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  min-height:56px;
  max-width:var(--maxw); margin:0 auto;
  padding-inline:var(--pad);
}

.hdr__mark{
  font-size:.8rem; letter-spacing:.18em;
  color:var(--fg);
  white-space:nowrap;
}

.hdr__cart{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:44px;
  padding:.5rem 1rem;
  background:transparent;
  border:1px solid var(--line);
  color:var(--fg);
  font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.hdr__cart:hover{ border-color:var(--fg); background:rgba(255,255,255,.06); }

.hdr__count{
  min-width:1.6em; height:1.6em;
  display:grid; place-items:center;
  border-radius:999px;
  background:var(--line-2);
  color:var(--dim);
  font-size:.78em;
  transition:background .2s, color .2s;
}
.hdr__count.is-on{ background:var(--fg); color:var(--bg); }

/* Na waskich telefonach (iPhone SE ma 375 px) pelna nazwa plus koszyk
   nie zmiescilyby sie w jednej linii - scieramy troche swiatla i stopnia. */
@media (max-width:430px){
  .hdr__in{ gap:.6rem; }
  .hdr__mark{ font-size:.66rem; letter-spacing:.08em; }
  .hdr__cart{ padding:.5rem .75rem; gap:.45rem; font-size:.68rem; }
}

/* ---------- TICKER ---------- */

.ticker{
  overflow:hidden;
  border-bottom:1px solid var(--line-2);
  padding-block:.55rem;
  font-size:.62rem; letter-spacing:.22em;
  color:var(--dim);
  text-transform:uppercase;
  position:relative; z-index:2;
}
.ticker__track{
  display:flex; width:max-content;
  animation:slide 38s linear infinite;
}
.ticker__track span{ padding-inline:2.2rem; white-space:nowrap; }

@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- HERO ---------- */

.hero{
  position:relative; z-index:2;
  text-align:center;
  padding-block:clamp(3.5rem, 14vw, 8rem) clamp(2.5rem, 8vw, 5rem);
  overflow:hidden;            /* rozblyski i fala uderzeniowa nie rozpychaja strony */
}

/* ---------- ROZBLYSKI W TLE ---------- */

.flares{ position:absolute; inset:0; pointer-events:none; z-index:0; }

.flare{
  position:absolute;
  width:min(90vw,720px); aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform,opacity;
  opacity:.5;
}
.flare--a{
  top:38%; left:38%;
  background:radial-gradient(circle,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 64%);
  animation:drift-a 19s ease-in-out infinite alternate;
}
.flare--b{
  top:58%; left:64%;
  width:min(70vw,540px);
  background:radial-gradient(circle,rgba(184,255,46,.10) 0%,rgba(184,255,46,0) 68%);
  animation:drift-b 25s ease-in-out infinite alternate;
}

@keyframes drift-a{
  from{ transform:translate(-50%,-50%) scale(1); }
  to  { transform:translate(-42%,-58%) scale(1.22); }
}
@keyframes drift-b{
  from{ transform:translate(-50%,-50%) scale(1.1); }
  to  { transform:translate(-60%,-44%) scale(.88); }
}

/* rozblysk na uderzenie basu */
.flares.is-hit .flare{ animation-play-state:paused; }
.flares.is-hit{ animation:flash .5s var(--ease); }
@keyframes flash{
  0%  { filter:brightness(1); }
  12% { filter:brightness(3.4); }
  100%{ filter:brightness(1); }
}

/* ---------- SCENA LOGO ---------- */

.hero__stage{
  position:relative; z-index:2;
  display:inline-block;
  perspective:900px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.hero__logo{
  position:relative;
  display:inline-block;
  max-width:min(92vw, 640px);
}

/* Znak jest pionowy (1055 x 1342), wiec ograniczamy go szerokoscia
   dobrana pod wysokosc - przy 640 px urosl by do ~810 px i zjadl ekran. */
.hero__logo.has-img{ width:min(78vw, 330px); max-width:none; }

/* przechyl sterowany myszka / palcem - zmienne ustawia fx.js */
.hero__logo{
  --rx:0deg; --ry:0deg; --pop:1;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--pop));
  transform-style:preserve-3d;
  transition:transform .5s var(--ease);
  will-change:transform;
}
.hero__stage.is-live .hero__logo{ transition:transform .12s linear; }
.hero__stage.is-hit  .hero__logo{ transition:transform .09s var(--ease); }

/* chromowany napis - uzywany, gdy nie ma pliku logo */
.chrome{
  margin:0;
  font-family:var(--mono);
  font-size:clamp(2.9rem, 15vw, 7rem);
  line-height:.92;
  font-weight:700;
  letter-spacing:-.02em;
  text-transform:uppercase;
  background:linear-gradient(178deg,
    #ffffff 0%, #cfcfcf 22%, #6e6e6e 40%,
    #ffffff 52%, #8f8f8f 63%, #3d3d3d 78%, #e8e8e8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,255,255,.14));
}

.hero__h1{ margin:0; font-size:0; line-height:0; }

.hero__img{
  width:100%; height:auto;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.12));
}

.glint{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }

/* Przy logu z pliku przycinamy blysk do ksztaltu znaku - inaczej
   przelatywalby po pustym prostokacie wokol gwiazdy. */
.hero__logo.has-img .glint{
  -webkit-mask-image:url('logo-560.webp');
          mask-image:url('logo-560.webp');
  -webkit-mask-size:contain;      mask-size:contain;
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-position:center;   mask-position:center;
}
/* Odblask chodzacy za kursorem - ta sama maska co blysk, wiec swieci
   wylacznie metal, nie prostokat wokol niego. */
.spec{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s var(--ease);
  background:radial-gradient(circle 42% at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.85) 0%, rgba(255,255,255,.22) 28%, rgba(255,255,255,0) 62%);
  mix-blend-mode:screen;
}
.hero__logo.has-img .spec{
  -webkit-mask-image:url('logo-560.webp');
          mask-image:url('logo-560.webp');
  -webkit-mask-size:contain;      mask-size:contain;
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-position:center;   mask-position:center;
}
.hero__stage.is-live .spec{ opacity:.9; }

/* ---------- FALA UDERZENIOWA ---------- */

.shock{
  position:absolute; top:50%; left:50%;
  width:min(56vw,260px); aspect-ratio:1;
  margin:calc(min(56vw,260px) / -2) 0 0 calc(min(56vw,260px) / -2);
  border:1px solid rgba(255,255,255,.75);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
.shock.is-on{ animation:shock .62s var(--ease) forwards; }

@keyframes shock{
  from{ transform:scale(.35); opacity:.9; border-width:2px; }
  to  { transform:scale(2.1); opacity:0;  border-width:0px; }
}

.glint::after{
  content:'';
  position:absolute; top:0; left:-150%;
  width:70%; height:100%;
  background:linear-gradient(to right,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-22deg);
  filter:blur(16px);
  animation:glint 6.5s infinite ease-in-out;
}

@keyframes glint{
  0%,18%   { left:-150%; opacity:0; }
  24%      { opacity:1; }
  42%,100% { left:160%;  opacity:0; }
}

.hero__hint{
  margin:1.1rem 0 0;
  font-size:.58rem; letter-spacing:.34em;
  color:var(--dimmer);
  text-transform:uppercase;
  animation:pulse-hint 2.6s ease-in-out infinite;
  transition:opacity .6s var(--ease);
}
.hero__hint.is-gone{ opacity:0; pointer-events:none; }

@keyframes pulse-hint{
  0%,100%{ opacity:.45; }
  50%    { opacity:1; }
}

.hero__tagline{
  margin:1.6rem 0 0;
  font-size:.68rem; letter-spacing:.4em;
  color:var(--dim);
  text-transform:uppercase;
}

.hero__intro{
  font-family:var(--sans);
  max-width:44ch;
  margin:1.6rem auto 0;
  font-size:.94rem;
  line-height:1.75;
  color:#b4b4b4;
}

/* ---------- ODLICZANIE ---------- */

.count{ margin-top:2.8rem; }

.count__label{
  font-size:.6rem; letter-spacing:.4em; color:var(--dim);
  text-transform:uppercase;
  margin:0 0 1rem;
}

.count__grid{
  display:flex; justify-content:center; gap:clamp(.75rem,4vw,2.5rem);
}

.count__box{ min-width:56px; }

.count__num{
  display:block;
  font-size:clamp(1.9rem,8vw,3rem);
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.count__unit{
  display:block;
  margin-top:.5rem;
  font-size:.58rem; letter-spacing:.24em;
  color:var(--dimmer);
  text-transform:uppercase;
}

/* ---------- SEKCJE ---------- */

.sec{ position:relative; z-index:2; padding-block:clamp(2.5rem,8vw,4.5rem); }

.sec__head{
  display:flex; align-items:baseline; gap:.9rem;
  padding-bottom:1.1rem;
  margin-bottom:1.75rem;
  border-bottom:1px solid var(--line);
}

.sec__mark{ color:var(--dimmer); font-size:.85rem; }

.sec__title{
  margin:0;
  font-size:.95rem; font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.sec__aside{
  margin-left:auto;
  font-size:.62rem; letter-spacing:.16em;
  color:var(--dimmer);
  text-transform:uppercase;
}

/* ---------- SIATKA PRODUKTOW (tracklista) ---------- */

.grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
}

@media (min-width:620px){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
}
@media (min-width:1040px){
  .grid{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
}

.card{
  display:flex; flex-direction:column;
  width:100%; min-width:0;
  padding:0;
  background:transparent;
  border:1px solid var(--line-2);
  color:var(--fg);
  text-align:left;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover{ border-color:var(--line); }

@media (hover:hover){
  .card:hover{ transform:translateY(-3px); }
}

.card--skel{ min-height:380px; background:#0a0a0a; }

.card__media{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#0d0d0d;
}
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .4s var(--ease), transform .7s var(--ease);
}
.card__media .alt{ position:absolute; inset:0; opacity:0; }

@media (hover:hover){
  .card:hover .alt{ opacity:1; }
  .card:hover .card__media img{ transform:scale(1.04); }
}

.card__no{
  position:absolute; top:0; left:0;
  padding:.45rem .7rem;
  background:var(--bg);
  border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  font-size:.62rem; letter-spacing:.14em;
  color:var(--dim);
}

.card__flag{
  position:absolute; top:0; right:0;
  padding:.45rem .7rem;
  background:var(--bg);
  border-left:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase;
}
.card__flag--out{ color:var(--warn); }
.card__flag--new{ color:var(--live); }

.card__body{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem;
  padding:.95rem 1rem 1.15rem;
  border-top:1px solid var(--line-2);
}

.card__name{
  font-size:.78rem; letter-spacing:.06em;
  line-height:1.5;
  text-transform:uppercase;
}

.card__price{
  font-size:.78rem;
  color:var(--dim);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ---------- SPOTIFY ---------- */

.player{
  border:1px solid var(--line-2);
  background:var(--panel);
}

.player__cta{
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  width:100%; min-height:120px;
  padding:1.5rem;
  background:transparent; border:0; color:var(--fg);
  font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase;
  transition:background .25s var(--ease);
}
.player__cta:hover{ background:rgba(255,255,255,.04); }
.player__cta svg{ width:22px; height:22px; fill:var(--live); flex:none; }

.player iframe{ display:block; width:100%; border:0; }

/* ---------- NEWSLETTER ---------- */

.news{
  border:1px solid var(--line);
  padding:clamp(1.5rem,6vw,2.75rem);
  text-align:center;
}

.news__h{
  margin:0 0 .8rem;
  font-size:clamp(1.1rem,5vw,1.5rem);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.news__p{
  font-family:var(--sans);
  margin:0 auto 1.75rem;
  max-width:38ch;
  font-size:.88rem;
  color:#b4b4b4;
}

.news__form{
  display:flex; flex-wrap:wrap; gap:.6rem;
  max-width:460px; margin:0 auto;
}
/* na telefonie pole i przycisk idą jeden pod drugim, oba na pełną szerokość */
.news__form .btn{ flex:1 1 100%; }
@media (min-width:520px){
  .news__form .btn{ flex:0 0 auto; }
}

.news__input{
  flex:1 1 200px;
  min-height:52px;
  padding:.85rem 1rem;
  background:transparent;
  border:1px solid var(--line);
  color:var(--fg);
  font-size:1rem;              /* 16px - iOS nie zoomuje przy focusie */
  font-family:var(--sans);
}
.news__input::placeholder{ color:var(--dimmer); }
.news__input:focus{ outline:none; border-color:var(--fg); }

.news__msg{
  margin:1rem 0 0;
  font-size:.68rem; letter-spacing:.12em;
  min-height:1.2em;
  text-transform:uppercase;
}
.news__msg.ok{ color:var(--live); }
.news__msg.err{ color:var(--warn); }

.news__fine{
  font-family:var(--sans);
  margin:1.25rem 0 0;
  font-size:.7rem;
  color:var(--dimmer);
  text-transform:none;
  letter-spacing:0;
}

/* ---------- PRZYCISK ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px;
  padding:.9rem 1.6rem;
  background:var(--fg);
  border:1px solid var(--fg);
  color:var(--bg);
  font-size:.76rem; letter-spacing:.18em;
  text-transform:uppercase;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.btn:hover:not(:disabled){ background:transparent; color:var(--fg); }
.btn:disabled{
  background:transparent; color:var(--dimmer);
  border-color:var(--line-2); cursor:not-allowed;
}
.btn--full{ width:100%; }

/* ---------- MODAL PRODUKTU ---------- */

.modal{
  position:fixed; inset:0; z-index:60;
  background:#070707;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

.modal__box{
  position:relative;
  width:100%;
  min-height:100%;
  background:var(--panel);
  border:0;
}

.modal__bar{
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  min-height:52px;
  padding-inline:1rem;
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);
  font-size:.64rem; letter-spacing:.18em;
  color:var(--dim);
  text-transform:uppercase;
}

.modal__x{
  min-width:44px; min-height:44px;
  display:grid; place-items:center;
  background:none; border:0; color:var(--fg);
  font-size:1rem;
  transition:opacity .2s;
}
.modal__x:hover{ opacity:.6; }

.pdp{ display:grid; grid-template-columns:minmax(0,1fr); }

.pdp__media, .pdp__info{ min-width:0; }

.pdp__img{
  width:100%; max-width:100%; height:auto;
  aspect-ratio:1/1; object-fit:contain;
  background:#0d0d0d;
}

.pdp__thumbs{
  display:flex; gap:.5rem; flex-wrap:wrap;
  padding:.75rem 1rem;
  border-bottom:1px solid var(--line-2);
}
.pdp__thumbs img{
  width:56px; height:56px; object-fit:cover;
  border:1px solid var(--line-2);
  opacity:.45; cursor:pointer;
  transition:opacity .2s, border-color .2s;
}
.pdp__thumbs img.on{ opacity:1; border-color:var(--fg); }

.pdp__info{ padding:1.75rem 1rem 8rem; }

.pdp__badge{
  display:inline-block;
  margin:0 0 1rem;
  padding:.3rem .6rem;
  border:1px solid var(--line);
  font-size:.58rem; letter-spacing:.18em;
  color:var(--dim);
  text-transform:uppercase;
}

.pdp__title{
  margin:0 0 .5rem;
  font-size:clamp(1.25rem,5.5vw,1.7rem);
  font-weight:700; line-height:1.25;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.pdp__price{
  margin:0 0 2rem;
  font-size:1.05rem;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}

.pdp__block{ margin-bottom:1.75rem; }

.pdp__label{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:0 0 .8rem;
  font-size:.6rem; letter-spacing:.22em;
  color:var(--dim);
  text-transform:uppercase;
}

.sizes{ display:flex; flex-wrap:wrap; gap:.5rem; }

.size{
  min-width:64px; min-height:52px;
  padding:.5rem .75rem;
  background:transparent;
  border:1px solid var(--line);
  color:var(--fg);
  font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase;
  transition:border-color .2s, background .2s, color .2s;
}
.size:hover:not(:disabled){ border-color:var(--fg); }
.size.on{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.size:disabled{
  color:var(--dimmer); border-color:var(--line-2);
  text-decoration:line-through; cursor:not-allowed;
}

.qty{ display:inline-flex; border:1px solid var(--line); }
.qty button{
  width:52px; height:52px;
  background:transparent; border:0; color:var(--fg);
  font-size:1.1rem;
  transition:background .2s;
}
.qty button:hover{ background:rgba(255,255,255,.07); }
.qty span{
  min-width:56px; height:52px;
  display:grid; place-items:center;
  border-inline:1px solid var(--line);
  font-size:.9rem;
  font-variant-numeric:tabular-nums;
}

.pdp__cta{
  position:fixed; left:0; right:0; bottom:0; z-index:4;
  padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
  background:rgba(10,10,10,.96);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}

.pdp__hint{
  margin:.7rem 0 0;
  font-family:var(--sans);
  font-size:.74rem;
  color:var(--dim);
  text-align:center;
  min-height:1.1em;
}

.pdp__desc{
  margin-top:2rem; padding-top:1.75rem;
  border-top:1px solid var(--line-2);
  font-family:var(--sans);
  font-size:.92rem; line-height:1.8;
  color:#b8b8b8;
  text-transform:none; letter-spacing:0;
}
.pdp__desc p{ margin:0 0 1rem; }
.pdp__desc ul{ margin:0 0 1rem; padding-left:1.2rem; }
.pdp__desc li{ margin-bottom:.4rem; }
.pdp__desc strong{ color:var(--fg); }
.pdp__desc img{ margin:1rem 0; }

.pdp__desc table{
  width:100%;
  border-collapse:collapse;
  margin:1rem 0;
  font-family:var(--mono);
  font-size:.78rem;
}
.pdp__desc th, .pdp__desc td{
  border:1px solid var(--line-2);
  padding:.55rem .6rem;
  text-align:left;
}
.pdp__desc th{ color:var(--fg); background:#0f0f0f; }

.pdp__scroll{ overflow-x:auto; }

@media (min-width:900px){
  .modal__box{
    max-width:1080px; min-height:auto;
    margin:3.5rem auto;
    border:1px solid var(--line);
  }
  .pdp{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
  .pdp__media{ border-right:1px solid var(--line); }
  .pdp__thumbs{ border-bottom:0; border-top:1px solid var(--line-2); }
  .pdp__info{ padding:2.25rem 2rem 2.5rem; }
  .pdp__cta{
    position:static; padding:0; background:none;
    backdrop-filter:none; border-top:0;
  }
}

/* ---------- KOSZYK ---------- */

.drawer{
  position:fixed; inset:0; z-index:70;
  background:rgba(5,5,5,.8);
  overflow:hidden;
}

.drawer__panel{
  position:absolute; inset:0 0 0 auto;
  width:min(100%,430px);
  display:flex; flex-direction:column;
  background:var(--panel);
  border-left:1px solid var(--line);
  animation:slideIn .28s var(--ease);
}

@keyframes slideIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }

.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  min-height:52px; padding-inline:1.25rem;
  border-bottom:1px solid var(--line);
  font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase;
}

.drawer__body{
  flex:1; overflow-y:auto;
  padding-inline:1.25rem;
  -webkit-overflow-scrolling:touch;
}

.drawer__empty{
  padding:4rem 0; text-align:center;
  font-size:.72rem; letter-spacing:.14em;
  color:var(--dim);
  text-transform:uppercase;
}

.line{
  display:grid; grid-template-columns:72px minmax(0,1fr) auto;
  gap:1rem; align-items:start;
  padding-block:1.15rem;
  border-bottom:1px solid var(--line-2);
}
.line img{ width:72px; height:72px; object-fit:cover; background:#0d0d0d; }

.line__name{
  margin:0 0 .3rem;
  font-size:.74rem; letter-spacing:.05em; line-height:1.5;
  text-transform:uppercase;
}
.line__meta{
  margin:0 0 .6rem;
  font-size:.66rem; color:var(--dim);
  text-transform:uppercase; letter-spacing:.1em;
}
.line__price{
  font-size:.76rem; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.line__ctrl{ display:inline-flex; border:1px solid var(--line-2); }
.line__ctrl button{
  width:36px; height:36px;
  background:transparent; border:0; color:var(--dim);
  transition:color .2s;
}
.line__ctrl button:hover{ color:var(--fg); }
.line__ctrl span{
  min-width:40px;
  display:grid; place-items:center;
  border-inline:1px solid var(--line-2);
  font-size:.74rem;
  font-variant-numeric:tabular-nums;
}

.line__rm{
  margin-top:.5rem;
  padding:.35rem 0;
  background:none; border:0;
  color:var(--dimmer);
  font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:underline;
}
.line__rm:hover{ color:var(--fg); }

.drawer__foot{
  border-top:1px solid var(--line);
  padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
}

.drawer__row{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:.4rem;
  font-size:.9rem;
  text-transform:uppercase; letter-spacing:.1em;
}
.drawer__row b{ font-variant-numeric:tabular-nums; }

.drawer__note{
  font-family:var(--sans);
  margin:0 0 1.15rem;
  font-size:.74rem; color:var(--dim);
}

/* ---------- STOPKA ---------- */

.ftr{
  position:relative; z-index:2;
  border-top:1px solid var(--line-2);
  padding-block:clamp(2.5rem,8vw,4rem);
}

.ftr__social{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.75rem;
  margin-bottom:2.5rem;
}

.ftr__social a{
  display:grid; place-items:center;
  width:52px; height:52px;
  border:1px solid var(--line-2);
  transition:border-color .2s, background .2s, transform .2s var(--ease);
}
.ftr__social a:hover{
  border-color:var(--fg);
  background:rgba(255,255,255,.05);
  transform:translateY(-2px);
}
.ftr__social svg{ width:20px; height:20px; fill:var(--dim); transition:fill .2s; }
.ftr__social a:hover svg{ fill:var(--fg); }

.ftr__links{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem 1.4rem;
  margin-bottom:2rem;
  font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase;
}
.ftr__links a{ color:var(--dim); padding-block:.35rem; transition:color .2s; }
.ftr__links a:hover{ color:var(--fg); }

.ftr__legal{
  font-family:var(--sans);
  max-width:56ch; margin:0 auto;
  text-align:center;
  font-size:.75rem; line-height:1.8;
  color:var(--dimmer);
}
.ftr__legal a{ color:var(--dim); text-decoration:underline; }

.ftr__copy{
  margin-top:1.75rem;
  text-align:center;
  font-size:.58rem; letter-spacing:.2em;
  color:var(--dimmer);
  text-transform:uppercase;
}

/* ---------- STAN / BLEDY ---------- */

.state{
  font-family:var(--sans);
  padding:2.5rem 0;
  text-align:center;
  font-size:.9rem; color:var(--dim);
}
.state a{ color:var(--fg); text-decoration:underline; }

/* ---------- TOAST ---------- */

.toast{
  position:fixed; left:50%; bottom:1.5rem;
  transform:translateX(-50%);
  z-index:90;
  padding:.9rem 1.5rem;
  background:var(--fg); color:var(--bg);
  font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase;
  animation:pop .25s var(--ease);
  max-width:calc(100vw - 2rem);
  text-align:center;
}
@keyframes pop{
  from{ opacity:0; transform:translate(-50%,12px); }
  to  { opacity:1; transform:translate(-50%,0); }
}

/* ---------- POJAWIANIE SIE PRZY SCROLLU ---------- */

/* Ukrywamy tylko wtedy, gdy JavaScript dziala i ma co pokazac.
   Bez skryptu (stara przegladarka, blokada, robot Google) tresc
   jest widoczna od razu - zero ryzyka pustej strony. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- OGRANICZENIE ANIMACJI ---------- */

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; }
  .grain, .scan, .flares, .spec, .shock, .hero__hint{ display:none; }
  .hero__logo{ transform:none !important; }
}