/* =========================================================
   PIERDOLEC CLUB — nakladka sklepowa
   Paleta i typografia wzorowane na blaskibass.pl
   ========================================================= */

:root{
  --bg:        #050505;
  --fg:        #ffffff;
  --line:      #333333;
  --line-soft: #222222;
  --dim:       #555555;
  --panel:     #0b0b0b;
  --mono: 'Courier New', Courier, monospace;
}

*{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.5px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.is-locked{ overflow:hidden; }

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

button{
  font-family:inherit;
  text-transform:uppercase;
  letter-spacing:inherit;
  cursor:pointer;
}

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

::selection{ background:#fff; color:#000; }

/* ---------- HEADER ---------- */

.hdr{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:1rem clamp(1rem,4vw,2.5rem);
  background:rgba(5,5,5,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  font-size:.8rem;
}

.hdr__home{ color:var(--dim); transition:color .2s; }
.hdr__home:hover{ color:var(--fg); }

.hdr__cart{
  background:transparent;
  border:1px solid var(--line);
  color:var(--fg);
  padding:.55rem .9rem;
  font-size:.8rem;
  transition:border-color .2s, background .2s;
}
.hdr__cart:hover{ border-color:var(--fg); background:rgba(255,255,255,.05); }

.hdr__count{ color:var(--dim); }
.hdr__count.is-on{ color:var(--fg); }

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

.ticker{
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  padding:.5rem 0;
  font-size:.65rem;
  color:var(--dim);
}
.ticker__track{
  display:flex; width:max-content;
  animation:slide 40s linear infinite;
}
.ticker__track span{ padding:0 2rem; white-space:nowrap; }

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

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

.hero{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:clamp(3rem,10vw,6rem) 1.5rem clamp(2rem,6vw,4rem);
}

.logo{ position:relative; display:inline-block; max-width:min(90vw,520px); }

.logo__text{
  font-size:clamp(2.6rem,11vw,5.5rem);
  line-height:.95;
  font-weight:700;
  letter-spacing:-1px;
  background:linear-gradient(180deg,#fff 0%,#8a8a8a 38%,#fff 52%,#5c5c5c 70%,#ffffff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.12));
}

.logo__img{ filter:drop-shadow(0 0 15px rgba(255,255,255,.1)); }

.logo__glint{
  position:absolute; inset:0;
  overflow:hidden; pointer-events:none;
}
.logo__glint::after{
  content:'';
  position:absolute; top:0; left:-150%;
  width:80%; height:100%;
  background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-25deg);
  filter:blur(14px);
  animation:glint 6s infinite ease-in-out;
}

@keyframes glint{
  0%,15%   { left:-150%; opacity:0; }
  20%      { opacity:1; }
  35%,100% { left:150%;  opacity:0; }
}

.hero__intro{
  max-width:46ch;
  margin:2.5rem 0 0;
  color:var(--dim);
  font-size:.78rem;
  line-height:1.9;
}

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

main{ padding:0 clamp(1rem,4vw,2.5rem) 5rem; }

.sec__title{
  font-size:1rem; font-weight:400;
  margin:0 0 1.75rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.sec__title span{ color:var(--dim); margin-right:.6rem; }

.state{ color:var(--dim); font-size:.75rem; line-height:1.9; }
.state a{ text-decoration:underline; }

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

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.25rem;
}

.card{
  border:1px solid var(--line-soft);
  background:transparent;
  color:var(--fg);
  padding:0;
  text-align:left;
  transition:border-color .25s;
  display:flex; flex-direction:column;
}
.card:hover{ border-color:var(--line); }

.card--skel{
  min-height:360px;
  background:linear-gradient(90deg,#0a0a0a 25%,#141414 50%,#0a0a0a 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

.card__media{
  position:relative;
  aspect-ratio:1/1;
  background:#0d0d0d;
  overflow:hidden;
}
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .35s, transform .6s;
}
.card__media img.alt{ position:absolute; inset:0; opacity:0; }
.card:hover .card__media img.alt{ opacity:1; }
.card:hover .card__media img{ transform:scale(1.03); }

.card__flag{
  position:absolute; top:0; left:0;
  background:var(--bg);
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  color:var(--dim);
  font-size:.6rem;
  padding:.4rem .6rem;
  letter-spacing:1px;
}
.card__flag--out{ color:#fff; }

.card__body{
  padding:.9rem 1rem 1.1rem;
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  border-top:1px solid var(--line-soft);
}
.card__name{ font-size:.75rem; line-height:1.5; }
.card__price{ font-size:.75rem; color:var(--dim); white-space:nowrap; }

/* ---------- MODAL / DRAWER — wspolne ---------- */

.modal,.drawer{
  position:fixed; inset:0; z-index:60;
  background:rgba(5,5,5,.95);
  backdrop-filter:blur(10px);
  overflow-y:auto;
}

.modal__box{
  width:92%; max-width:940px;
  margin:4.5rem auto;
  position:relative;
  border:1px solid var(--line);
  background:var(--panel);
}

.modal__x{
  background:none; border:none; color:var(--fg);
  font-size:1.1rem; line-height:1;
  padding:.6rem .8rem;
  transition:opacity .2s;
}
.modal__x:hover{ opacity:.6; }

.modal > .modal__box > .modal__x{
  position:absolute; top:0; right:0; z-index:2;
  background:var(--panel);
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ---------- PDP ---------- */

.pdp{ display:grid; grid-template-columns:1fr 1fr; }

.pdp__media{ border-right:1px solid var(--line); }

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

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

.pdp__info{ padding:2rem 1.75rem; }

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

.pdp__title{ font-size:1.25rem; font-weight:400; margin:0 0 .6rem; line-height:1.35; }
.pdp__price{ color:var(--dim); font-size:.85rem; margin:0 0 2rem; }

.pdp__block{ margin-bottom:1.75rem; }
.pdp__label{ font-size:.65rem; color:var(--dim); margin:0 0 .7rem; letter-spacing:1px; }

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

.size{
  min-width:52px;
  padding:.65rem .5rem;
  background:transparent;
  border:1px solid var(--line);
  color:var(--fg);
  font-size:.75rem;
  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(--dim); border-color:var(--line-soft);
  cursor:not-allowed;
  text-decoration:line-through;
}

.qty{ display:inline-flex; border:1px solid var(--line); }
.qty__btn{
  background:transparent; border:none; color:var(--fg);
  width:38px; height:38px; font-size:.95rem;
  transition:background .2s;
}
.qty__btn:hover{ background:rgba(255,255,255,.07); }
.qty__val{
  min-width:44px; height:38px;
  display:grid; place-items:center;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  font-size:.8rem;
}

.pdp__hint{
  font-size:.65rem; color:var(--dim);
  margin:.8rem 0 0; line-height:1.7; min-height:1.2em;
}

.pdp__desc{
  margin-top:2rem; padding-top:1.5rem;
  border-top:1px solid var(--line-soft);
  color:var(--dim);
  font-size:.72rem; line-height:2;
  text-transform:none;
}
.pdp__desc p{ margin:0 0 .8rem; }

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

.btn{
  background:var(--fg);
  border:1px solid var(--fg);
  color:var(--bg);
  padding:1rem 1.5rem;
  font-size:.8rem;
  letter-spacing:1.5px;
  transition:background .2s, color .2s;
}
.btn:hover:not(:disabled){ background:transparent; color:var(--fg); }
.btn:disabled{
  background:transparent; color:var(--dim);
  border-color:var(--line-soft); cursor:not-allowed;
}
.btn--full{ width:100%; display:block; }

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

.drawer{ background:rgba(5,5,5,.8); overflow:hidden; }

.drawer__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(100%,420px);
  background:var(--panel);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  animation:slideIn .25s ease-out;
}
@keyframes slideIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }

.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--line);
  font-size:.8rem;
}

.drawer__body{ flex:1; overflow-y:auto; padding:.5rem 1.25rem; }

.drawer__empty{ color:var(--dim); font-size:.72rem; padding:3rem 0; text-align:center; line-height:2; }

.line{
  display:grid; grid-template-columns:64px 1fr auto;
  gap:.9rem; align-items:start;
  padding:1.1rem 0;
  border-bottom:1px solid var(--line-soft);
}
.line img{ width:64px; height:64px; object-fit:cover; background:#0d0d0d; }
.line__name{ font-size:.72rem; line-height:1.6; margin:0 0 .35rem; }
.line__meta{ font-size:.65rem; color:var(--dim); margin:0 0 .55rem; }
.line__price{ font-size:.72rem; white-space:nowrap; }

.line__ctrl{ display:inline-flex; border:1px solid var(--line-soft); }
.line__ctrl button{
  background:transparent; border:none; color:var(--dim);
  width:26px; height:26px; font-size:.8rem;
  transition:color .2s;
}
.line__ctrl button:hover{ color:var(--fg); }
.line__ctrl span{
  min-width:30px; display:grid; place-items:center;
  font-size:.7rem;
  border-left:1px solid var(--line-soft); border-right:1px solid var(--line-soft);
}

.line__rm{
  background:none; border:none; color:var(--dim);
  font-size:.6rem; padding:.5rem 0 0;
  text-decoration:underline;
}
.line__rm:hover{ color:var(--fg); }

.drawer__foot{ border-top:1px solid var(--line); padding:1.25rem; }
.drawer__row{
  display:flex; justify-content:space-between;
  font-size:.85rem; margin-bottom:.5rem;
}
.drawer__note{ font-size:.62rem; color:var(--dim); margin:0 0 1.1rem; }

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

.ftr{
  border-top:1px solid var(--line-soft);
  padding:3rem clamp(1rem,4vw,2.5rem);
  text-align:center;
  font-size:.7rem;
  color:var(--dim);
}
.ftr a{ transition:color .2s; }
.ftr a:hover{ color:var(--fg); }
.ftr__sep{ padding:0 .75rem; }
.ftr__note{
  max-width:52ch; margin:1.5rem auto 0;
  font-size:.62rem; line-height:2;
}

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

.toast{
  position:fixed; left:50%; bottom:2rem;
  transform:translateX(-50%);
  z-index:80;
  background:var(--fg); color:var(--bg);
  padding:.85rem 1.4rem;
  font-size:.7rem; letter-spacing:1px;
  animation:pop .25s ease-out;
}
@keyframes pop{ from{ opacity:0; transform:translate(-50%,10px); } to{ opacity:1; transform:translate(-50%,0); } }

/* ---------- RESPONSYWNOSC ---------- */

@media (max-width:820px){
  .pdp{ grid-template-columns:1fr; }
  .pdp__media{ border-right:none; border-bottom:1px solid var(--line); }
  .modal__box{ margin:3.5rem auto 2rem; width:100%; border-left:none; border-right:none; }
  .pdp__info{ padding:1.75rem 1.25rem 2.5rem; }
}

@media (max-width:520px){
  .grid{ grid-template-columns:repeat(2,1fr); gap:.75rem; }
  .card__body{ flex-direction:column; gap:.3rem; padding:.75rem; }
  .card__name{ font-size:.65rem; }
  .card__price{ font-size:.65rem; }
  .hdr{ font-size:.7rem; padding:.85rem 1rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}