/* =========================================================
   ROJOWISKO - sklep

   Zalozenie: retro zostaje w MATERIALE (rastrowe pszczoly,
   rozplywajacy sie wordmark), a nie w interfejsie. Interfejs
   jest wspolczesny i cichy: duza typografia, miekkie kafle,
   powietrze, zero ramek i zero terminalowej faktury.

   Mobile first - 95% ruchu to telefon.
   ========================================================= */

/* Dwa kroje z Google Fonts (SIL OFL), hostowane u nas: szybciej
   i bez przekazywania IP odwiedzajacych do Google.

   Cossette Titre - krój tytulowy, na naglowkach, zawsze WERSALIKAMI
     (do tego zostal narysowany).
   Inter - na calym tekscie. Plik jest zmienny, wiec jedna sztuka
     obsluguje i zwykla grubosc, i pogrubienie.                      */

@font-face{
  font-family:'Cossette Titre'; font-style:normal; font-weight:400; font-display:swap;
  src:url('cossette-titre-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Cossette Titre'; font-style:normal; font-weight:400; font-display:swap;
  src:url('cossette-titre-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Czern z lekkim cieplem - inaczej niz sterylne #000 */
  --ink:      #0b0a0a;
  --surface:  #171514;
  --surface2: #201d1b;
  --fg:       #ffffff;
  --muted:    #a39c96;
  --muted-2:  #6e6763;

  --red:    #f44936;   /* napisy z plakatu */
  --honey:  #e9b93b;   /* miod - cieply akcent marki */
  --acid:   #c9c530;   /* paski pszczol */
  --cream:  #f3eee4;   /* blok odwrocony */

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Cossette Titre', Georgia, 'Times New Roman', serif;

  --r:  16px;
  --r-s: 10px;
  --pad: clamp(1.15rem, 5vw, 4rem);
  --maxw: 1240px;
  --spring: cubic-bezier(.16,.84,.28,1);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }

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

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }

img,video{ max-width:100%; height:auto; display:block; }
button,input{ font:inherit; }
button{ cursor:pointer; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--red); color:#fff; }
:focus-visible{ outline:2px solid var(--honey); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.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;
}

h1,h2,h3{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; letter-spacing:.015em; line-height:1.08;
  margin:0;
}

/* ---------- AURY: miekkie plamy swiatla zamiast ziarna ---------- */

/* z-index:-1, nie 0: dzieki temu warstwa jest czescia tla dokumentu,
   a nie osobnego kontekstu. Logo w trybie mix-blend-mode:screen moze
   sie wtedy z nia zlac - przy z-index:0 czarna klatka wideo zostawala
   czarnym prostokatem nad poswiata. */
.aura{ position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden; }
.aura span{
  position:absolute; border-radius:50%;
  filter:blur(90px);
  opacity:.5;
}
.aura span:nth-child(1){
  width:72vw; height:72vw; max-width:760px; max-height:760px;
  top:-22%; left:-14%;
  background:radial-gradient(circle,rgba(244,73,54,.5) 0%,rgba(244,73,54,0) 70%);
  animation:plyn 26s ease-in-out infinite alternate;
}
.aura span:nth-child(2){
  width:60vw; height:60vw; max-width:620px; max-height:620px;
  top:44%; right:-18%;
  background:radial-gradient(circle,rgba(212,58,40,.34) 0%,rgba(212,58,40,0) 70%);
  animation:plyn 34s ease-in-out infinite alternate-reverse;
}
@keyframes plyn{
  from{ transform:translate(0,0) scale(1); }
  to  { transform:translate(6%,9%) scale(1.2); }
}

/* ---------- VHS: ekran LED z plakatu ----------
   Na plakacie napis siedzi na diodowym ekranie: widac poziome linie
   i ziarno. Odtwarzamy to trzema warstwami. Kazda jest osobnym
   elementem fixed, a nie dzieckiem wspolnego pudelka - pudelko
   z z-indexem tworzy kontekst ukladania i odcielo by mieszanie
   od tego, co jest pod spodem.

   Linie mnoza (przyciemniaja), ziarno i pasmo rozjasniaja. Na czarnym
   tle mnozenie nie robi nic, wiec linie widac tylko tam, gdzie cos
   swieci: na logo, zdjeciach i jasnym bloku newslettera.             */

/* z-index:1 - warstwa siedzi NA TLE: nad aurami, ale pod trescia,
   zdjeciami i pszczolami. Napisy i produkty zostaja czyste. */
.vhs{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.vhs i{ position:absolute; display:block; }

.vhs--linie{
  mix-blend-mode:multiply;
  background:repeating-linear-gradient(to bottom,
      rgba(0,0,0,.42) 0 1px, rgba(0,0,0,0) 1px 3px);
}

.vhs--szum{ mix-blend-mode:screen; }
.vhs--szum i{
  inset:-70px;
  background:url('szum.webp?v=6') repeat;
  background-size:128px 128px;
  opacity:.075;
  animation:ziarno .5s steps(1,end) infinite;
}
@keyframes ziarno{
  0%  { transform:translate3d(0,0,0); }
  12% { transform:translate3d(-14px,7px,0); }
  25% { transform:translate3d(9px,-11px,0); }
  37% { transform:translate3d(-5px,15px,0); }
  50% { transform:translate3d(13px,4px,0); }
  62% { transform:translate3d(-11px,-6px,0); }
  75% { transform:translate3d(6px,12px,0); }
  87% { transform:translate3d(-9px,-14px,0); }
  100%{ transform:translate3d(0,0,0); }
}

/* pasmo zakloce: przechodzi z dolu do gory raz na kilkanascie sekund,
   reszte cyklu stoi poza ekranem - stad te dziwne procenty */
.vhs--pasmo{ mix-blend-mode:screen; }
.vhs--pasmo i{
  left:-10%; right:-10%; height:78px;
  background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 38%,
      rgba(255,255,255,.7) 52%, rgba(255,255,255,0) 100%);
  filter:blur(1.5px);
  opacity:.14;
  animation:tor 14s linear infinite;
}
@keyframes tor{
  0%   { transform:translateY(105vh) scaleY(1);   opacity:0; }
  4%   { opacity:.14; }
  26%  { transform:translateY(-20vh) scaleY(1.6); opacity:.14; }
  27%  { opacity:0; }
  100% { transform:translateY(-20vh); opacity:0; }
}

/* ---------- PSZCZOLY ---------- */

.swarm{
  position:fixed; inset:0;
  pointer-events:none;        /* nigdy nie blokuja klikniec */
  z-index:2; overflow:hidden; contain:strict;
}
.bee{
  position:absolute; top:0; left:0;
  width:var(--w,72px);
  will-change:transform;
  /* --ostrosc ustawia skrypt: dalsze owady sa lekko nieostre,
     tak jak w prawdziwym kadrze z krotka glebia ostrosci */
  filter:brightness(1.4) saturate(1.1) blur(var(--ostrosc,0px))
         drop-shadow(0 0 14px rgba(233,185,59,.22));
}

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

.hdr{
  position:fixed; top:0; left:0; right:0; z-index:40;
  padding:.7rem var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  transition:background .35s var(--spring), backdrop-filter .35s;
}
/* pasek pojawia sie dopiero po zjechaniu z hero */
.hdr.is-stuck{
  background:rgba(11,10,10,.72);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
}

.hdr__logo{
  display:block; width:104px;
  opacity:0; transform:translateY(-6px);
  transition:opacity .35s var(--spring), transform .35s var(--spring);
  pointer-events:none;
}
.hdr.is-stuck .hdr__logo{ opacity:1; transform:none; pointer-events:auto; }

.cartbtn{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px; padding:.5rem 1.1rem;
  border:0; border-radius:999px;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--fg); font-size:.88rem; font-weight:600;
  transition:background .2s, transform .2s var(--spring);
}
.cartbtn:hover{ background:rgba(255,255,255,.18); }
.cartbtn:active{ transform:scale(.96); }
.cartbtn__n{
  min-width:1.45em; height:1.45em; display:grid; place-items:center;
  border-radius:999px; background:rgba(255,255,255,.16);
  font-size:.8em; font-variant-numeric:tabular-nums;
  transition:background .25s, color .25s;
}
.cartbtn__n.is-on{ background:var(--red); color:#fff; }

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

.hero{
  position:relative;
  text-align:center;
  padding-block:clamp(5.8rem,20vw,9rem) clamp(2.5rem,9vw,5rem);
}

.hero__logo{
  display:block;
  width:min(78vw,460px);
  margin:0 auto;
  position:relative;
  cursor:pointer;
}
.hero__logo::before{
  content:''; position:absolute; inset:-16% -8%;
  background:radial-gradient(ellipse at center,
             rgba(244,73,54,.34) 0%, rgba(244,73,54,0) 70%);
  pointer-events:none;
}
.hero__logo img{
  position:relative; width:100%; height:auto;
  /* Zadnego mieszania. Animacja ma wlasny kanal alfa, wiec czerni
     po prostu nie ma - a nie "jest, tylko udajemy, ze jej nie widac".
     Tryb screen wygladal dobrze u mnie i zostawial prostokat u klienta;
     przezroczystosc nie ma jak zawiesc na zadnym ekranie. */
}

.hero__cta{ margin-top:clamp(1.8rem,5vw,2.6rem); display:flex;
            justify-content:center; gap:.7rem; flex-wrap:wrap; }

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

.count{ margin-top:2.6rem; }
.count__label{ margin:0 0 .9rem; font-size:.82rem; color:var(--muted-2); }
.count__grid{ display:flex; justify-content:center; gap:.5rem; }
.count__box{
  min-width:66px; padding:.6rem .3rem;
  background:var(--surface); border-radius:var(--r-s);
}
.count__num{
  display:block; font-family:var(--sans); font-weight:400;
  font-size:clamp(1.5rem,6vw,2rem); line-height:1;
  color:var(--honey); font-variant-numeric:tabular-nums;
}
.count__unit{ display:block; margin-top:.3rem; font-size:.68rem; color:var(--muted-2); }

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

.sec{ position:relative; z-index:3; padding-block:clamp(2.5rem,9vw,5rem); }

.sec__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; margin-bottom:clamp(1.3rem,4vw,2rem);
}
.sec__title{ font-size:clamp(2.1rem,8vw,3.3rem); }
.sec__aside{ font-size:.85rem; color:var(--muted-2); white-space:nowrap; padding-bottom:.4rem; }

/* ---------- SIATKA PRODUKTOW ---------- */

.grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.7rem,2.6vw,1.5rem);
}
/* Na duzym ekranie trzy w rzedzie, nie cztery: zdjecia produktow sa
   tym, po co ludzie tu przychodza, wiec dostaja wiecej miejsca. */
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.card{
  display:flex; flex-direction:column; gap:.7rem;
  width:100%; min-width:0; padding:0;
  background:none; border:0; color:var(--fg); text-align:left;
  transition:transform .3s var(--spring);
}
.card:active{ transform:scale(.975); }
@media (hover:hover){ .card:hover{ transform:translateY(-4px); } }

.card__media{
  position:relative; aspect-ratio:1/1;
  border-radius:var(--r); overflow:hidden;
  background:var(--surface);
  transition:box-shadow .3s var(--spring);
}
@media (hover:hover){
  .card:hover .card__media{ box-shadow:0 18px 44px -18px rgba(244,73,54,.55); }
}
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .4s var(--spring), transform .7s var(--spring);
}
.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.05); }
}

.pill{
  position:absolute; top:.6rem; left:.6rem;
  padding:.24rem .6rem; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.01em;
  background:var(--honey); color:#1a1300;
}
.pill--out{ background:rgba(255,255,255,.14); color:var(--fg); backdrop-filter:blur(6px); }

.card__body{ display:flex; flex-direction:column; gap:.1rem; padding-inline:.15rem; }
.card__name{ font-size:.96rem; font-weight:600; line-height:1.3; }
.card__price{ font-size:.96rem; color:var(--muted); font-variant-numeric:tabular-nums; }

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

.player{ border-radius:var(--r); overflow:hidden; background:var(--surface); }
.player__cta{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  width:100%; min-height:104px; padding:1.4rem;
  background:none; border:0; color:var(--fg);
  font-size:1rem; font-weight:600;
  transition:background .25s;
}
.player__cta:hover{ background:var(--surface2); }
.player__cta svg{ width:26px; height:26px; fill:#1ed760; flex:none; }
.player iframe{ display:block; width:100%; border:0; }

/* ---------- BLOK CZERWONY: NEWSLETTER ----------
   Kremowy prostokat swiecil na czarnej stronie mocniej niz produkty
   i wygrywal walke o uwage, ktorej wygrywac nie powinien. Czerwien
   z logotypu zostawia mu sile, ale wpina go w te sama rodzine kolorow.
   Przycisk na czerwonym idzie w czern - czerwone na czerwonym drga. */

.news{
  background:
    radial-gradient(120% 140% at 18% 0%, rgba(255,150,120,.16) 0%, rgba(255,150,120,0) 58%),
    linear-gradient(158deg, #b0301d 0%, #8a1d0c 58%, #5f1006 100%);
  color:#ffeee7;
  border-radius:clamp(18px,5vw,28px);
  padding:clamp(1.8rem,7vw,3.4rem) clamp(1.2rem,5vw,3rem);
  text-align:center;
}
.news__h{ font-size:clamp(2rem,8vw,3rem); color:#fff; }
.news__p{ max-width:34ch; margin:.9rem auto 1.7rem; font-size:1rem; color:rgba(255,238,231,.85); }
.news__form{ display:flex; flex-wrap:wrap; gap:.6rem; max-width:520px; margin:0 auto; }
.news__input{
  flex:1 1 200px; min-height:54px; padding:.9rem 1.2rem;
  border:1.5px solid rgba(255,255,255,.35); border-radius:999px;
  background:rgba(255,255,255,.96); color:#2a1008; font-size:1rem;
}
.news__input::placeholder{ color:#9c6a5c; }
.news__input:focus{ outline:none; border-color:#fff; background:#fff; }
.news__form .btn{ flex:1 1 100%; background:var(--ink); color:#fff; }
.news__form .btn:hover:not(:disabled){ filter:brightness(1.35); }
@media (min-width:520px){ .news__form .btn{ flex:0 0 auto; } }

.news__msg{ margin:.9rem 0 0; font-size:.88rem; min-height:1.2em; font-weight:600; }
.news__msg.ok{ color:#c8f7c9; }
.news__msg.err{ color:#ffd9ce; }
.news__fine{ margin:1.1rem 0 0; font-size:.8rem; color:rgba(255,238,231,.62); }

/* ---------- NAJBLIZSZE WYDARZENIA ---------- */

.gig{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.gig li{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1.05rem 1.2rem;
  background:var(--surface); border-radius:var(--r);
}
.gig__plakat{
  flex:0 0 100%; order:-1;
  aspect-ratio:16/9; border-radius:var(--r-s); overflow:hidden;
  background:var(--surface2);
  margin:-.15rem 0 .5rem;
}
@media (min-width:620px){
  .gig__plakat{ flex:0 0 190px; order:0; aspect-ratio:4/3; margin:0; }
}
.gig__plakat img{ width:100%; height:100%; object-fit:cover; }

.gig__data{
  min-width:4.6rem; font-family:var(--display); font-size:1.5rem;
  text-transform:uppercase; letter-spacing:.02em;
  line-height:1; color:var(--honey);
}
.gig__gdzie{ flex:1 1 12rem; min-width:0; }
.gig__miasto{ display:block; font-size:1.02rem; font-weight:600; }
.gig__miejsce{ display:block; font-size:.88rem; color:var(--muted-2); }
.gig__bilet{
  margin-left:auto; display:inline-flex; align-items:center;
  min-height:44px; padding:.5rem 1.25rem;
  border-radius:999px; background:var(--red); color:#fff;
  font-size:.9rem; font-weight:700;
  transition:filter .2s, transform .2s var(--spring);
}
.gig__bilet:hover{ filter:brightness(1.12); }
.gig__bilet:active{ transform:scale(.96); }

/* Pusto = koncerty jeszcze nieogloszone. Zamiast chowac sekcje,
   mowimy o tym wprost i podsuwamy newsletter - to jedyne miejsce,
   w ktorym mozna dac znac pierwszym. */
.gig__pusto{
  padding:clamp(1.8rem,6vw,2.6rem) 1.2rem;
  border:1.5px dashed rgba(255,255,255,.14); border-radius:var(--r);
  text-align:center; color:var(--muted);
}
.gig__pusto b{ display:block; margin-bottom:.4rem; color:var(--fg); font-weight:600; }
.gig__pusto a{ color:var(--honey); text-decoration:underline; text-underline-offset:3px; }

/* ---------- PRZYCISKI ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:.9rem 1.8rem;
  border:0; border-radius:999px;
  background:var(--red); color:#fff;
  font-size:1rem; font-weight:700; letter-spacing:-.01em;
  transition:transform .2s var(--spring), filter .2s, background .2s;
}
.btn:hover:not(:disabled){ filter:brightness(1.1); }
.btn:active:not(:disabled){ transform:scale(.97); }
.btn:disabled{ background:var(--surface2); color:var(--muted-2); cursor:not-allowed; }
.btn--full{ width:100%; }
.btn--ghost{ background:rgba(255,255,255,.1); color:var(--fg); }
.btn--ghost:hover{ background:rgba(255,255,255,.18); }

/* ---------- KARTA PRODUKTU ---------- */

.modal{
  position:fixed; inset:0; z-index:60;
  background:var(--ink);
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  /* zadnego backdrop-filter: tworzylby blok zawierajacy dla
     position:fixed i odklejal przycisk od dolu ekranu */
}
.modal__box{ position:relative; width:100%; min-height:100%; }

.modal__bar{
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  min-height:56px; padding-inline:1rem;
  background:rgba(11,10,10,.82);
  font-size:.86rem; font-weight:600; color:var(--muted);
}
.okruchy{
  display:flex; align-items:center; gap:.55rem; min-width:0;
  font-size:.84rem; color:var(--muted);
}
.okruchy__wroc{
  display:inline-flex; align-items:center; gap:.35rem;
  min-height:44px; padding:0 .2rem 0 0;
  background:none; border:0; color:var(--fg);
  font:inherit; font-weight:600; white-space:nowrap;
  transition:color .2s;
}
.okruchy__wroc:hover{ color:var(--red); }
.okruchy__wroc svg{
  width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.okruchy__sep{ color:var(--muted-2); }
.okruchy__tu{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Na waskim ekranie nazwa produktu i tak stoi wielkimi literami
   kawalek nizej - w pasku zostaje sama droga powrotna. */
@media (max-width:560px){
  .okruchy__sep, .okruchy__tu{ display:none; }
}

.modal__x{
  min-width:44px; min-height:44px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:0; border-radius:999px;
  color:var(--fg); font-size:.95rem;
  transition:background .2s, transform .2s var(--spring);
}
.modal__x:hover{ background:rgba(255,255,255,.2); }
.modal__x:active{ transform:scale(.92); }

.pdp{ display:grid; grid-template-columns:minmax(0,1fr); }
.pdp__media,.pdp__info{ min-width:0; }
.pdp__media{ padding:0 1rem; }

.pdp__img{
  width:100%; max-width:100%; height:auto;
  aspect-ratio:1/1; object-fit:contain;
  background:var(--surface); border-radius:var(--r);
}
.pdp__thumbs{ display:flex; gap:.5rem; flex-wrap:wrap; padding:.75rem 0 0; }
.pdp__thumbs img{
  width:58px; height:58px; object-fit:cover; border-radius:var(--r-s);
  opacity:.5; cursor:pointer; transition:opacity .2s, outline-color .2s;
  outline:2px solid transparent; outline-offset:2px;
}
.pdp__thumbs img.on{ opacity:1; outline-color:var(--red); }

.pdp__info{ padding:1.8rem 1rem 9rem; }

.pdp__badge{
  display:inline-block; margin:0 0 1rem; padding:.26rem .7rem;
  border-radius:999px; background:var(--honey); color:#1a1300;
  font-size:.72rem; font-weight:700;
}
.pdp__title{ font-size:clamp(1.8rem,6.5vw,2.6rem); margin-bottom:.5rem; }
.pdp__price{ margin:0 0 2rem; font-size:1.3rem; font-weight:600; color:var(--muted); }

.pdp__block{ margin-bottom:1.7rem; }
.pdp__label{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:0 0 .7rem; font-size:.84rem; font-weight:600; color:var(--muted);
}
.pdp__label span:last-child{ font-weight:400; font-size:.78rem; color:var(--muted-2); }

.sizes{ display:flex; flex-wrap:wrap; gap:.5rem; }
.size{
  min-width:66px; min-height:54px; padding:.5rem .9rem;
  border:0; border-radius:999px;
  background:var(--surface); color:var(--fg);
  font-size:.95rem; font-weight:600;
  transition:background .2s, color .2s, transform .2s var(--spring);
}
.size:hover:not(:disabled){ background:var(--surface2); }
.size:active:not(:disabled){ transform:scale(.95); }
.size.on{ background:var(--fg); color:#111; }
.size:disabled{ color:var(--muted-2); text-decoration:line-through; cursor:not-allowed; opacity:.55; }

.qty{ display:inline-flex; align-items:center; gap:.2rem;
      background:var(--surface); border-radius:999px; padding:.25rem; }
.qty button{
  width:46px; height:46px; border:0; border-radius:999px;
  background:none; color:var(--fg); font-size:1.2rem;
  transition:background .2s;
}
.qty button:hover{ background:var(--surface2); }
.qty span{ min-width:44px; text-align:center; font-weight:600;
           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:linear-gradient(to top,var(--ink) 62%,rgba(11,10,10,0));
}
.pdp__hint{ margin:.6rem 0 0; font-size:.82rem; color:var(--muted-2); text-align:center; min-height:1.1em; }

.pdp__desc{
  margin-top:2rem; padding-top:1.7rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:1rem; line-height:1.7; color:var(--muted);
}
.pdp__desc p{ margin:0 0 1rem; }
.pdp__desc ul{ margin:0 0 1rem; padding-left:1.15rem; }
.pdp__desc li{ margin-bottom:.4rem; }
.pdp__desc strong{ color:var(--fg); font-weight:600; }
.pdp__desc h4{
  /* srodtytuly w opisach to tresc ze sklepu - krój tekstowy, zeby
     dlugie zdania w wersalikach nie robily sie nieczytelne */
  font-family:var(--sans); font-weight:600; font-size:1.02rem;
  color:var(--fg); margin:1.7rem 0 .6rem; letter-spacing:.02em;
}
.pdp__desc table{ width:100%; border-collapse:collapse; margin:1rem 0; font-size:.9rem; }
.pdp__desc th,.pdp__desc td{
  border-bottom:1px solid rgba(255,255,255,.08); padding:.6rem .5rem; text-align:left;
}
.pdp__desc th{ color:var(--fg); font-weight:600; }
.pdp__scroll{ overflow-x:auto; }

@media (min-width:920px){
  .modal__box{ max-width:1120px; min-height:auto; margin:2.5rem auto 4rem; }
  .pdp{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.4rem; align-items:start; }
  .pdp__media{ padding:0 0 0 1.5rem; position:sticky; top:5rem; }
  .pdp__info{ padding:0 1.5rem 2rem 0; }
  .pdp__cta{ position:static; padding:0; background:none; }
}

/* ---------- PODATEK, DOSTAWA, ZWROTY ---------- */

.pdp__vat{ margin:-1.5rem 0 2rem; font-size:.82rem; color:var(--muted-2); }

.dostawa{ list-style:none; margin:1.6rem 0 0; padding:1.1rem 1.1rem .9rem;
          background:var(--surface); border-radius:var(--r); }
.dostawa li{ display:flex; align-items:center; gap:.8rem; padding-block:.42rem; font-size:.88rem; }
.dostawa svg{ width:24px; height:24px; flex:none; fill:none;
              stroke:var(--honey); stroke-width:1.6;
              stroke-linecap:round; stroke-linejoin:round; }
.dostawa b{ font-weight:600; }
.dostawa__gratis{ margin-top:.2rem; padding-top:.6rem;
                  border-top:1px solid rgba(255,255,255,.07); }
.dostawa__gratis svg{ stroke:var(--red); }
.dostawa__gratis span{ color:var(--fg); }
.dostawa sup{ font-size:.62em; }
.dostawa span{ color:var(--muted); }
.dostawa__cena{ margin-left:auto; color:var(--fg); font-weight:600;
                white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ---------- ODSLUCH (Spotify na karcie produktu) ---------- */

.odsluch{ margin-top:2rem; }
.odsluch__h{
  margin:0 0 .7rem; font-size:.84rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
}
.odsluch__ramka{ border-radius:var(--r); overflow:hidden; background:var(--surface); }
.odsluch__ramka iframe{ display:block; width:100%; border:0; }
.odsluch__cta{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  width:100%; min-height:88px; padding:1.1rem;
  background:none; border:0; color:var(--fg); font:inherit; font-weight:600;
  transition:background .25s;
}
.odsluch__cta:hover{ background:var(--surface2); }
.odsluch__cta svg{ width:24px; height:24px; fill:#1ed760; flex:none; }

/* ---------- DORZUTY DO KOSZYKA ---------- */

.dorzut{ padding:1rem 1.3rem 0; border-top:1px solid rgba(255,255,255,.07); }
.dorzut__h{
  margin:0 0 .7rem; font-size:.78rem; font-weight:600; color:var(--muted-2);
  text-transform:uppercase; letter-spacing:.06em;
}
.dorzut__lista{ display:grid; gap:.5rem; }
.dorzut__poz{
  display:flex; align-items:center; gap:.8rem; width:100%;
  padding:.5rem; border:0; border-radius:var(--r-s);
  background:var(--surface); color:var(--fg); text-align:left;
  transition:background .2s, transform .2s var(--spring);
}
.dorzut__poz:hover{ background:var(--surface2); }
.dorzut__poz:active{ transform:scale(.98); }
.dorzut__poz img{ width:46px; height:46px; object-fit:cover; border-radius:8px; flex:none; }
.dorzut__opis{ flex:1; min-width:0; }
.dorzut__nazwa{ display:block; font-size:.86rem; font-weight:600; line-height:1.25; }
.dorzut__cena{ display:block; font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.dorzut__plus{
  flex:none; width:34px; height:34px; display:grid; place-items:center;
  border-radius:999px; background:var(--red); color:#fff; font-size:1.1rem; font-weight:700;
}

/* ---------- CROSS-SELLING NA KARCIE PRODUKTU ---------- */

.cross{ margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.08); }
.cross__h{ font-size:1.4rem; margin-bottom:1.1rem; }

.cross__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem .8rem;
}
@media (min-width:520px){ .cross__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:920px){ .cross__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.krzyz{
  display:flex; flex-direction:column; gap:.5rem;
  width:100%; min-width:0; padding:0;
  background:none; border:0; color:var(--fg); text-align:left;
  transition:transform .25s var(--spring);
}
.krzyz:active{ transform:scale(.97); }
@media (hover:hover){ .krzyz:hover{ transform:translateY(-3px); } }

.krzyz__media{
  position:relative; aspect-ratio:1/1;
  border-radius:var(--r-s); overflow:hidden; background:var(--surface);
}
.krzyz__media img{ width:100%; height:100%; object-fit:cover; }
.krzyz__out{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(11,10,10,.62);
  font-size:.7rem; font-weight:700; letter-spacing:.02em; color:var(--muted);
}
.krzyz__name{ font-size:.82rem; font-weight:600; line-height:1.3; }
.krzyz__price{ font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; }

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

.drawer{ position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.6); overflow:hidden; }
.drawer__panel{
  position:absolute; inset:0 0 0 auto; width:min(100%,430px);
  display:flex; flex-direction:column;
  background:var(--ink);
  animation:wjedz .3s var(--spring);
}
@media (min-width:520px){
  .drawer__panel{ inset:.6rem .6rem .6rem auto; border-radius:var(--r); overflow:hidden; }
}
@keyframes wjedz{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }

.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  min-height:60px; padding-inline:1.3rem;
  font-family:var(--display); font-weight:400; font-size:1.35rem;
}
.drawer__body{ flex:1; overflow-y:auto; padding-inline:1.3rem; }
.drawer__empty{ padding:3.5rem 0; text-align:center; color:var(--muted-2); }

.line{
  display:grid; grid-template-columns:72px minmax(0,1fr) auto;
  gap:.9rem; align-items:start; padding-block:1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.line img{ width:72px; height:72px; object-fit:cover;
           border-radius:var(--r-s); background:var(--surface); }
.line__name{ margin:0 0 .15rem; font-size:.92rem; font-weight:600; line-height:1.3; }
.line__meta{ margin:0 0 .5rem; font-size:.82rem; color:var(--muted-2); }
.line__price{ font-size:.92rem; font-weight:600; white-space:nowrap;
              font-variant-numeric:tabular-nums; }
.line__ctrl{ display:inline-flex; align-items:center;
             background:var(--surface); border-radius:999px; padding:.15rem; }
.line__ctrl button{ width:30px; height:30px; border:0; border-radius:999px;
                    background:none; color:var(--muted); transition:color .2s,background .2s; }
.line__ctrl button:hover{ color:var(--fg); background:var(--surface2); }
.line__ctrl span{ min-width:32px; text-align:center; font-size:.85rem;
                  font-variant-numeric:tabular-nums; }
.line__rm{ margin-top:.45rem; padding:.25rem 0; background:none; border:0;
           color:var(--muted-2); font-size:.78rem; text-decoration:underline; }
.line__rm:hover{ color:var(--red); }

.drawer__foot{ padding:1.2rem 1.3rem calc(1.2rem + env(safe-area-inset-bottom));
               border-top:1px solid rgba(255,255,255,.07); }
.drawer__row{ display:flex; justify-content:space-between; align-items:baseline;
              margin-bottom:.3rem; font-size:1.05rem; font-weight:600; }
.drawer__row b{ font-family:var(--sans); font-weight:400; font-size:1.3rem;
                font-variant-numeric:tabular-nums; }
.drawer__note{ margin:0 0 1.1rem; font-size:.82rem; color:var(--muted-2); }

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

.ftr{ position:relative; z-index:3; padding-block:clamp(2.5rem,8vw,4rem); }
.ftr__in{
  background:var(--surface); border-radius:clamp(18px,5vw,28px);
  padding:clamp(1.8rem,6vw,3rem) clamp(1.2rem,5vw,2.5rem); text-align:center;
}
.ftr__logo{ width:150px; margin:0 auto 1.6rem; opacity:.92; }
.ftr__social{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:1.8rem; }
.ftr__social a{
  display:grid; place-items:center; width:48px; height:48px;
  border-radius:999px; background:rgba(255,255,255,.07);
  transition:background .2s, transform .2s var(--spring);
}
.ftr__social a:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }
.ftr__social svg{ width:19px; height:19px; fill:var(--muted); transition:fill .2s; }
.ftr__social a:hover svg{ fill:var(--fg); }

.ftr__links{ display:flex; flex-wrap:wrap; justify-content:center;
             gap:.4rem 1.2rem; margin-bottom:1.6rem; font-size:.85rem; }
.ftr__links a{ color:var(--muted); padding-block:.3rem; transition:color .2s; }
.ftr__links a:hover{ color:var(--fg); }

.ftr__legal{ max-width:52ch; margin:0 auto; font-size:.82rem;
             line-height:1.65; color:var(--muted-2); }
.ftr__legal a{ color:var(--muted); text-decoration:underline; }
.ftr__copy{ margin-top:1.4rem; font-size:.78rem; color:var(--muted-2); }

/* ---------- STANY ---------- */

.state{ padding:2.2rem 0; text-align:center; color:var(--muted); }
.state a{ color:var(--red); text-decoration:underline; }

.toast{
  position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%);
  z-index:90; padding:.9rem 1.5rem; border-radius:999px;
  background:var(--fg); color:#111;
  font-size:.9rem; font-weight:700;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.7);
  max-width:calc(100vw - 2rem); text-align:center;
  animation:pop .28s var(--spring);
}
@keyframes pop{ from{ opacity:0; transform:translate(-50%,14px) scale(.94); }
                to{ opacity:1; transform:translate(-50%,0) scale(1); } }

/* ---------- POJAWIANIE SIE ---------- */

.js [data-reveal]{
  opacity:0; transform:translateY(22px) scale(.99);
  transition:opacity .7s var(--spring), transform .7s var(--spring);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- OGRANICZONE ANIMACJE ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{ scroll-behavior:auto; }
  .js [data-reveal]{ opacity:1; transform:none; }
  .swarm,.aura,.vhs{ display:none; }
  .hdr__logo{ opacity:1; transform:none; }
}