/* ==========================================================================
   Iconic Scripts — Tebex template
   Odwzorowanie projektu Figma "tebex.fig" (ramki 1920×1080).
   ========================================================================== */

:root {
  --bg: #09090b;
  --bg-footer: #0d0d0d;
  --card: #191919;
  --card-border: rgba(63, 63, 63, .4);
  --text: #ffffff;
  --text-48: rgba(255, 255, 255, .48);
  --text-41: rgba(255, 255, 255, .41);
  --text-33: rgba(255, 255, 255, .33);
  --text-18: rgba(255, 255, 255, .18);
  --pink: #ff99ec;
  --pink-glow: #ffaffd;
  --green-glow: #87ff80;
  --blue-glow: #5e69d8;
  --yellow: #fff723;
  --btn-grad: linear-gradient(180deg, #f3f3f5 0%, #abafb6 133%);
  --btn-text: rgba(0, 0, 0, .69);
  --btn-shadow: 0 5px 33px rgba(0, 0, 0, .25);
  --radius-btn: 7px;
  --radius-card: 15px;
  --gutter: 31px;
  --font: "Poppins", system-ui, sans-serif;
}



*,
*::before,
*::after { box-sizing: border-box; }



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



body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}



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


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


button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }


input,
select { font: inherit; color: inherit; }



/* ---------- Tło: zdjęcie, logo FiveM i rozmyte poświaty ---------- */

.page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  overflow: clip; /* clip nie psuje przyklejonego nagłówka */
}



.bg-photo {
  position: absolute;
  inset: 0 0 auto 0;
  height: 593px;
  background: url("img/hero-bg.jpg") center / 100% 100% no-repeat;
  opacity: .05;
  /* łagodne wygaszenie dolnej krawędzi zdjęcia (bez widocznego pasa) */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  z-index: -2;
  pointer-events: none;
}



.glow {
  position: absolute;
  opacity: .45;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}


/* Miękka poświata jako gradient (zamiast filter: blur(350px), który przy animacji zamraża rendering).
   Pseudo-element jest większy od kształtu z Figmy, żeby oddać rozmycie 700px. */
.glow::before {
  content: "";
  position: absolute;
  inset: -42%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c) 0%, transparent 85%);
}


/* Pozycje liczone od dołu ramki 1080px */
.glow--pink { --c: var(--pink-glow);  width: 1489px; height: 838px; left: 6.1%;  bottom: -748px; }


.glow--green { --c: var(--green-glow); width: 1292px; height: 838px; left: 56.4%; bottom: -695px; }


.glow--blue { --c: var(--blue-glow);  width: 662px;  height: 555px; left: -428px; bottom: -242px; }



/* ---------- Nagłówek ---------- */

.header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  height: 116px;
  padding: 0 29px 0 27px;
}



.header__logo {
  width: 46px;
  height: 46px;
  flex: none;
  margin-right: 9px;
}


.header__logo img { width: 100%; height: 100%; object-fit: cover; }



.nav { display: flex; align-items: center; }


.nav a {
  display: grid;
  place-items: center;
  height: 39px;
  min-width: 84px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity .15s;
}


.nav a + a { min-width: 101px; margin-left: 4px; }


.nav a:hover { opacity: .7; }


.nav a.is-active { color: var(--pink); }



.header__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}


.header__right .currency { margin-right: 10px; }



.currency { position: relative; }


.currency__btn {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 39px;
  font-size: 13px;
}


.currency__btn svg { width: 10px; height: 6px; opacity: .45; }


.currency__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 120px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(25, 25, 25, .92);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none;
}


.currency.is-open .currency__menu { display: block; }


.currency__menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-48);
}


.currency__menu a:hover,
.currency__menu a.is-active { color: #fff; background: rgba(255, 255, 255, .06); }



.cart-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background .15s;
}


.cart-btn:hover { background: rgba(255, 255, 255, .12); }


.cart-btn svg { width: 16px; height: 16px; }


.cart-btn__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--pink);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}


.cart-btn__count[data-count="0"] { display: none; }



/* ---------- Przyciski ---------- */

.btn {
  display: inline-grid;
  place-items: center;
  height: 39px;
  min-width: 163px;
  padding: 0 20px;
  border-radius: var(--radius-btn);
  background: var(--btn-grad);
  box-shadow: var(--btn-shadow);
  color: var(--btn-text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: filter .15s, transform .15s;
}


.btn:hover { filter: brightness(1.06); }


.btn:active { transform: translateY(1px); }


.btn--block { display: grid; width: 100%; }


/* Drugi przycisk z projektu (Discord): szare, szklane tło */
.btn--ghost {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
}


.btn--ghost:hover { filter: none; background: rgba(255, 255, 255, .14); }


.hero .btn {
  height: max(34px, calc(39 * var(--u)));
  min-width: max(130px, calc(163 * var(--u)));
}


.btn--outline {
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
}


.btn[disabled] { opacity: .5; pointer-events: none; }



/* ---------- Hero (strona główna) ---------- */

/* Hero zawsze mieści się w jednym ekranie (nagłówek + hero = 100% wysokości).
   --u to "piksel projektu": 1px przy 1920×1080, mniej na mniejszych ekranach,
   więc proporcje z Figmy zostają zachowane. */
.hero {
  --u: max(.55px, min(1px, (100svh - 116px) / 964, 100vw / 1920));
  position: relative;
  height: calc(100svh - 116px);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(229 * var(--u)) 20px 0; /* 345px od góry ramki − 116px nagłówka */
}



.badge {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(32 * var(--u));
  gap: calc(8 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(44 * var(--u));
  min-width: calc(380 * var(--u));
  max-width: 100%;
  border-radius: 200px;
  background: rgba(34, 34, 34, .49);
  border: 1px solid transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: max(11px, calc(14 * var(--u)));
  white-space: nowrap;
  transition: border-color .25s, background .25s, box-shadow .25s;
}


/* Badge = link do najnowszego skryptu */
a.badge:hover {
  border-color: rgba(255, 153, 236, .35);
  background: rgba(34, 34, 34, .7);
}


.badge__new { color: var(--pink); font-weight: 600; }


.badge__name { overflow: hidden; text-overflow: ellipsis; }


.badge__arrow { margin-left: auto; opacity: .45; transition: transform .25s, opacity .25s; }


a.badge:hover .badge__arrow { transform: translateX(3px); opacity: 1; }


.badge__mark {
  position: absolute;
  left: calc(7 * var(--u));
  top: calc(-20 * var(--u));
  width: calc(22 * var(--u));
  text-align: center;
  color: var(--yellow);
  font-size: calc(48 * var(--u));
  font-weight: 900;
  font-style: italic;
  line-height: calc(72 * var(--u));
}



.hero__title {
  margin: calc(6 * var(--u)) 0 0;
  max-width: calc(1537 * var(--u));
  font-size: calc(70 * var(--u));
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  background: radial-gradient(68% 250% at 50% 50%, #ffffff 0%, rgba(153, 153, 153, .51) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}



.hero__line {
  overflow: visible;
  width: calc(827 * var(--u));
  max-width: 80%;
  height: calc(9 * var(--u));
  margin-top: calc(28 * var(--u));
}



.hero__lead {
  margin: calc(30 * var(--u)) 0 0;
  max-width: calc(611 * var(--u));
  font-size: max(13px, calc(20 * var(--u)));
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-33);
}



.hero__actions {
  display: flex;
  gap: calc(17 * var(--u));
  margin-top: calc(25 * var(--u));
}



.hero__note {
  margin: calc(13 * var(--u)) 0 0;
  font-size: max(11px, calc(16 * var(--u)));
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-18);
}



.hero__scroll {
  position: absolute;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  bottom: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-18);
  transition: color .2s;
}


.hero__scroll:hover { color: var(--text-48); }


.hero__scroll span {
  width: 22px;
  height: 34px;
  border-radius: 20px;
  border: 1.5px solid currentColor;
  position: relative;
}


.hero__scroll span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--pink);
  animation: scrollDot 1.8s ease-in-out infinite;
}


@keyframes scrollDot {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  80% { transform: translateY(12px); opacity: 0; }
  100% { opacity: 0; }
}



/* ---------- Kategoria ---------- */

.section {
  position: relative;
  flex: 1;
  padding: 0 var(--gutter);
}



.section__head { text-align: center; }


.section__title {
  margin: -18px 0 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 96px;
}


.section__lead {
  margin: 14px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--text-41);
}



.toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 34px;
  margin: 39px 0 0;
  font-size: 11px;
  font-style: italic;
  color: var(--text-48);
}


/* Pola wyszukiwarki i sortowania mają tło (jak na podglądzie projektu) */
.search,
.sort {
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .05);
  transition: border-color .15s, background .15s;
}


.search:focus-within,
.sort:hover { border-color: rgba(255, 153, 236, .35); background: rgba(255, 255, 255, .09); }


.search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 280px;
  padding: 0 12px 0 9px;
}


.sort { padding: 0 14px; }


.search svg { width: 11px; height: 11px; opacity: .26; flex: none; }


.search input {
  width: 100%;
  height: 34px;
  border: 0;
  outline: 0;
  background: none;
  font-size: 11px;
  font-style: italic;
  font-weight: 500;
  color: #fff;
}


.search input::placeholder { color: var(--text-48); }



.sort {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}


.sort b { color: #fff; font-weight: 500; }


.sort svg { width: 10px; height: 6px; opacity: .45; margin-left: 6px; }


.sort select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}



.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 23px;
  margin-top: 18px;
}



.empty {
  grid-column: 1 / -1;
  padding: 60px 0;
  text-align: center;
  color: var(--text-41);
  font-size: 14px;
}



/* ---------- Karta produktu ---------- */

.product {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 32px;
}



.card {
  position: relative;
  display: block;
  aspect-ratio: 447 / 252;
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--card-border);
  overflow: hidden;
  isolation: isolate;
}


.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .79;
  transition: transform .4s ease, opacity .3s;
}


.card:hover .card__img { transform: scale(1.04); opacity: .9; }


.card::after {
  content: "";
  position: absolute;
  inset: 29.8% 0 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 100%);
  z-index: 0;
}



.card__tags {
  position: absolute;
  left: 11px;
  bottom: 68px;
  display: flex;
  gap: 4px;
  z-index: 1;
}


.tag {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 14px;
  padding: 0 6px;
  border-radius: 90px;
  background: rgba(255, 255, 255, .13);
  border: .5px solid rgba(255, 255, 255, .19);
  backdrop-filter: blur(33px);
  -webkit-backdrop-filter: blur(33px);
  font-size: 9px;
  font-style: italic;
  line-height: 1;
  color: rgba(255, 255, 255, .6);
}



.card__bar {
  position: absolute;
  left: 1px;
  right: 0;
  bottom: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 21px 0 10px;
  background: rgba(255, 255, 255, .1);
  border-top: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(43px);
  -webkit-backdrop-filter: blur(43px);
  z-index: 1;
}


.card__name {
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}


.card__name span,
.card__name small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.card__name small {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, .49);
}


.card__price {
  flex: none;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: right;
}


.card__price s {
  display: block;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  color: rgba(255, 255, 255, .4);
}



/* ---------- Strona produktu ---------- */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 40px;
  max-width: 1500px;
  margin: 10px auto 0;
}


.pdp .card { aspect-ratio: 16 / 9; }


.pdp .card::after { inset: 55% 0 0 0; }


.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}


.pdp__thumbs button {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  opacity: .5;
  transition: opacity .15s;
}


.pdp__thumbs button.is-active,
.pdp__thumbs button:hover { opacity: 1; border-color: rgba(255, 255, 255, .3); }


.pdp__thumbs img { width: 100%; height: 100%; object-fit: cover; }



.crumbs {
  display: flex;
  gap: 8px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-48);
}


.crumbs a:hover { color: #fff; }



.pdp__info { display: flex; flex-direction: column; }


.pdp__tags { display: flex; gap: 4px; margin-top: 22px; }


.pdp__tags .tag { height: 18px; min-width: 44px; font-size: 10px; }


.pdp__title {
  margin: 12px 0 0;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.25;
}


.pdp__sub {
  margin: 6px 0 0;
  font-size: 18px;
  color: rgba(255, 255, 255, .49);
}


.pdp__price {
  margin-top: 26px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}


.pdp__price s { font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, .35); margin-left: 10px; }



.panel {
  border-radius: var(--radius-card);
  background: rgba(22, 22, 22, .56);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}



.pdp__buy { margin-top: 26px; padding: 18px; display: grid; gap: 12px; }


.pdp__row { display: flex; gap: 12px; }


.pdp__row .btn { flex: 1; min-width: 0; }



.qty {
  display: flex;
  align-items: center;
  height: 39px;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}


.qty button { width: 34px; height: 100%; font-size: 16px; color: var(--text-48); }


.qty button:hover { color: #fff; }


.qty input {
  width: 34px;
  border: 0;
  outline: 0;
  background: none;
  text-align: center;
  font-size: 13px;
  -moz-appearance: textfield;
}


.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }



.perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--text-48);
}


.perks li { display: flex; align-items: center; gap: 8px; }


.perks li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
  flex: none;
}



.prose {
  margin-top: 40px;
  padding: 28px 30px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .62);
}


.prose h2,
.prose h3 { color: #fff; font-weight: 700; line-height: 1.3; margin: 0 0 12px; }


.prose h2 { font-size: 22px; }


.prose h3 { font-size: 16px; margin-top: 22px; }


.prose p { margin: 0 0 12px; }


.prose ul { margin: 0 0 12px; padding-left: 18px; }


.prose a { color: var(--pink); }



/* ---------- Koszyk (szuflada + strona) ---------- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}


.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: 420px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: #0f0f11;
  border-left: 1px solid var(--card-border);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  overflow: hidden;
}


.drawer::before {
  content: "";
  position: absolute;
  right: -200px;
  bottom: -200px;
  width: 500px;
  height: 400px;
  border-radius: 50%;
  background: var(--pink-glow);
  opacity: .12;
  filter: blur(120px);
  pointer-events: none;
}


body.cart-open .drawer { transform: none; }


body.cart-open .drawer-backdrop { opacity: 1; pointer-events: auto; }



.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 24px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}


.drawer__head h3 { margin: 0; font-size: 20px; font-weight: 700; }


.drawer__head h3 span { color: var(--text-41); font-weight: 500; font-size: 14px; margin-left: 6px; }


.icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-48);
}


.icon-btn:hover { color: #fff; background: rgba(255, 255, 255, .06); }


.icon-btn svg { width: 14px; height: 14px; }



.drawer__body { flex: 1; overflow-y: auto; padding: 16px 24px; display: grid; align-content: start; gap: 12px; }


.drawer__foot { padding: 18px 24px 24px; border-top: 1px solid rgba(255, 255, 255, .06); display: grid; gap: 12px; position: relative; }



.line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: rgba(25, 25, 25, .7);
  border: 1px solid var(--card-border);
}


.line__img { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }


.line__img img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }


.line__name { font-size: 13px; font-weight: 700; line-height: 1.35; }


.line__name small { display: block; font-size: 11px; font-weight: 500; color: var(--text-48); }


.line__meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }


.line__meta .qty { height: 26px; }


.line__meta .qty button { width: 24px; font-size: 13px; }


.line__meta .qty input { width: 22px; font-size: 11px; }


.line__price { font-size: 15px; font-weight: 700; text-align: right; align-self: start; padding-top: 2px; }


.line__remove { font-size: 11px; color: var(--text-48); font-style: italic; }


.line__remove:hover { color: var(--pink); }



.totals { display: grid; gap: 6px; font-size: 13px; color: var(--text-48); }


.totals div { display: flex; justify-content: space-between; }


.totals .totals__sum { color: #fff; font-size: 18px; font-weight: 700; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, .1); margin-top: 4px; }



.coupon { display: flex; gap: 8px; }


.field {
  flex: 1;
  height: 39px;
  padding: 0 14px;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  outline: 0;
  font-size: 12px;
  transition: border-color .15s;
}


.field::placeholder { color: var(--text-48); font-style: italic; }


.field:focus { border-color: rgba(255, 153, 236, .6); }


.coupon .btn { min-width: 0; }



.cart-empty { text-align: center; padding: 50px 10px; color: var(--text-41); font-size: 13px; }


.cart-empty svg { width: 42px; height: 42px; opacity: .25; margin: 0 auto 14px; display: block; }



.basket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 28px;
  max-width: 1300px;
  margin: 40px auto 0;
  align-items: start;
}


.basket__list { display: grid; gap: 12px; }


.basket .line { grid-template-columns: 160px minmax(0, 1fr) auto; padding: 12px; }


.basket .line__name { font-size: 16px; }


.basket .line__name small { font-size: 13px; }


.basket .line__price { font-size: 20px; }


.basket__summary { padding: 22px; display: grid; gap: 16px; position: sticky; top: 20px; }


.basket__summary h3 { margin: 0; font-size: 18px; font-weight: 700; }


.secure { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 11px; color: var(--text-41); }


.secure svg { width: 12px; height: 12px; }



/* ---------- Modal logowania ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}


.modal.is-open { opacity: 1; pointer-events: auto; }


.modal__box {
  position: relative;
  width: 420px;
  max-width: 100%;
  padding: 34px 30px 28px;
  border-radius: 18px;
  background: #111113;
  border: 1px solid var(--card-border);
  text-align: center;
  overflow: hidden;
  transform: translateY(10px) scale(.98);
  transition: transform .25s;
}


.modal.is-open .modal__box { transform: none; }


.modal__box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -180px;
  width: 360px;
  height: 260px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--pink-glow);
  opacity: .14;
  filter: blur(80px);
  pointer-events: none;
}


.modal__close { position: absolute; top: 14px; right: 14px; }


.modal__logo { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 14px; overflow: hidden; }


.modal__box h3 { margin: 0; font-size: 22px; font-weight: 700; }


.modal__box p { margin: 6px 0 22px; font-size: 13px; color: var(--text-41); }


.modal__box form { display: grid; gap: 12px; text-align: left; }


.modal__divider { display: flex; align-items: center; gap: 12px; margin: 4px 0; font-size: 11px; color: var(--text-18); }


.modal__divider::before,
.modal__divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .08); }



/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 200px;
  background: rgba(34, 34, 34, .85);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  white-space: nowrap;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}


.toast.is-show { opacity: 1; transform: translate(-50%, 0); }


.toast b { color: var(--yellow); font-weight: 900; font-style: italic; font-size: 20px; }



/* ---------- Stopka (Tebex) ---------- */

.footer {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, .35);
  border-top: 1px solid rgba(255, 255, 255, .04);
}


.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 30px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 40px 16px;
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
}


.footer__copy { align-self: center; }


.pay { display: flex; align-items: center; gap: 8px; }


.pay span {
  display: grid;
  place-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  background: #fff;
  color: #000;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -.01em;
}


.pay .pay__visa { background: none; color: #fff; font-size: 15px; font-weight: 900; font-style: italic; letter-spacing: .02em; padding: 0 2px; }


.pay .pay__mc { background: none; padding: 0; width: 30px; position: relative; }


.pay .pay__mc::before,
.pay .pay__mc::after { content: ""; position: absolute; top: 3px; width: 16px; height: 16px; border-radius: 50%; }


.pay .pay__mc::before { left: 2px; background: #eb001b; }


.pay .pay__mc::after { right: 2px; background: #f79e1b; mix-blend-mode: screen; }


.pay .pay__amex { background: #1f72cd; color: #fff; font-size: 8px; width: 22px; padding: 0; }


.footer__legal { display: flex; align-items: center; gap: 22px; font-size: 10px; }


.footer__tebex { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .7); }


.footer__links { display: flex; gap: 22px; font-size: 10px; }


.footer__links a { text-decoration: underline; text-underline-offset: 2px; }


.footer__links a:hover { color: #fff; }


.footer__bottom { height: 44px; background: var(--bg-footer); }



/* ---------- Strona główna: sekcje pod hero (inspiracja devgaming.pl) ---------- */

.home-block {
  position: relative;
  padding: 76px var(--gutter) 0;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}


.home-block--center { text-align: center; }



.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink);
}


.eyebrow--green { color: var(--green-glow); }


.eyebrow--blue { color: #8f98ff; }



.h2 {
  margin: 14px 0 0;
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 600;
  line-height: 1.25;
  background: radial-gradient(80% 220% at 50% 50%, #fff 0%, rgba(153, 153, 153, .7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.lead {
  margin: 16px auto 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-41);
}


.home-block:not(.home-block--center) .lead { margin-left: 0; }



/* Trzy atuty z ikonami */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 56px;
  text-align: left;
}



/* Polecane produkty */
.home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}


.home-head .grid { margin-top: 40px; }


.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-48);
  white-space: nowrap;
  transition: color .15s, gap .15s;
}


.link-more:hover { color: #fff; gap: 12px; }


.home-block .grid { margin-top: 40px; }



/* Kafelki kategorii ze zdjęciami (bento) */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 300px;
  gap: 20px;
  margin-top: 48px;
  text-align: left;
}


.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--card-border);
  background: var(--card);
}


.tile--wide { grid-column: span 3; }


.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  z-index: -2;
  transition: transform .6s ease, opacity .4s;
}


.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(9, 9, 11, 0) 20%, rgba(9, 9, 11, .92) 100%);
}


.tile:hover img { transform: scale(1.05); opacity: .75; }


.tile__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--accent, var(--pink));
}


.tile__icon svg { width: 18px; height: 18px; }


.tile h3 { margin: 0; font-size: 22px; font-weight: 700; }


.tile p { margin: 4px 0 0; max-width: 420px; font-size: 14px; color: rgba(255, 255, 255, .55); }


.tile__count {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 24px;
  padding: 0 10px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-style: italic;
  color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .1);
  border: .5px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


.tile--wide .tile__cta { position: absolute; right: 24px; bottom: 24px; }



/* Liczby */
.stats-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 60px;
  align-items: center;
}


.stats-wrap .h2 { background-position: 0 50%; }


.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 30px;
}


.stat b {
  display: block;
  font-size: clamp(40px, 4vw, 60px);
  font-weight: 600;
  line-height: 1;
  color: #fff;
}


.stat b small { font-size: .4em; font-weight: 500; color: var(--pink); margin-left: 4px; }


.stat:nth-child(2) b small { color: var(--green-glow); }


.stat:nth-child(3) b small { color: #8f98ff; }


.stat span { display: block; margin-top: 10px; font-size: 13px; color: var(--text-41); }



/* FAQ */
.faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 60px;
}


.faq { border-top: 1px solid rgba(255, 255, 255, .07); }


.faq details { border-bottom: 1px solid rgba(255, 255, 255, .07); }


.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  transition: color .15s;
}


.faq summary::-webkit-details-marker { display: none; }


.faq summary:hover { color: var(--pink); }


.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: var(--text-48);
  font-size: 16px;
  transition: transform .2s;
}


.faq details[open] summary::after { transform: rotate(45deg); color: var(--pink); }


.faq details p { margin: -6px 0 20px; max-width: 640px; font-size: 14px; line-height: 1.7; color: var(--text-41); }



/* CTA na dole strony */
.cta {
  position: relative;
  margin-top: 76px;
  padding: 64px 30px;
  border-radius: 24px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: rgba(22, 22, 22, .56);
  border: 1px solid var(--card-border);
}


.cta::before,
.cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 320px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .35;
}


.cta::before { left: -120px; bottom: -220px; background: var(--pink-glow); }


.cta::after { right: -120px; bottom: -220px; background: var(--green-glow); }


.cta .hero__actions { justify-content: center; margin-top: 28px; gap: 17px; }


.home-block .cta .lead { margin-left: auto; }


.cta .btn { height: 39px; min-width: 163px; }



/* ---------- Animacje (blur-in, poświaty, połysk) ---------- */

:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }



@keyframes blurIn {
  from { opacity: 0; filter: blur(16px); transform: translateY(18px) scale(.985); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}


@keyframes blurDown {
  from { opacity: 0; filter: blur(10px); transform: translateY(-12px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}


@keyframes drawLine {
  from { opacity: 0; transform: scaleX(0); filter: blur(6px); }
  to   { opacity: 1; transform: scaleX(1); filter: blur(0); }
}


@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(4%, -6%) scale(1.08); }
  100% { transform: translate(-3%, 3%) scale(.96); }
}


@keyframes shine {
  from { transform: translateX(-120%) skewX(-20deg); }
  to   { transform: translateX(220%) skewX(-20deg); }
}


@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 153, 236, .0); }
  50%      { box-shadow: 0 0 24px 0 rgba(255, 153, 236, .35); }
}



/* Nagłówek wjeżdża z góry */
.header { animation: blurDown .9s var(--ease-out) backwards; }



/* Hero: kolejne elementy wyostrzają się po sobie */
.hero > .badge,
.hero__title,
.hero__lead,
.hero__actions,
.hero__note,
.hero__scroll { animation: blurIn 1.1s var(--ease-out) backwards; }


.hero > .badge { animation-delay: .15s; }


.hero__title { animation-delay: .3s; }


.hero__line { animation: drawLine 1.2s var(--ease-out) .65s both; transform-origin: left center; }


.hero__lead { animation-delay: .55s; }


.hero__actions { animation-delay: .7s; }


.hero__note { animation-delay: .85s; }


.hero__scroll { animation-delay: 1.2s; }


.hero__scroll { animation-name: blurIn; }



/* Poświaty powoli "oddychają" */
.glow { animation: drift 18s ease-in-out infinite alternate; }


.glow--green { animation-duration: 22s; animation-direction: alternate-reverse; }


.glow--blue { animation-duration: 26s; }



/* Połysk na jasnych przyciskach */
.btn { position: relative; overflow: hidden; isolation: isolate; }


.btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
  z-index: -1;
}


.btn:not(.btn--ghost):not(.btn--outline):hover::after { animation: shine .8s var(--ease-out); }



/* Karty: lekkie uniesienie przy hoverze, bez cieni */
.card { transition: transform .4s var(--ease-out), border-color .3s; }


.product:hover .card,
a.card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .16); }


.tile { transition: transform .5s var(--ease-out), border-color .3s; }


.tile:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .14); }



/* Sekcje pojawiają się przy przewijaniu z rozmyciem */
.reveal {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
}


.reveal.is-in { opacity: 1; filter: none; transform: none; }



/* Elementy w sekcji wchodzą po kolei */
.reveal .tile,
.reveal .stat,
.reveal .product,
.reveal .faq details {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}


.reveal.is-in .tile,
.reveal.is-in .stat,
.reveal.is-in .product,
.reveal.is-in .faq details { opacity: 1; filter: none; transform: none; }


/* po wejściu hover ma działać bez opóźnienia */
.reveal.is-in .tile:hover { transition-delay: 0s; }



/* Siatka produktów w kategorii: karty wchodzą kaskadowo */
.grid--animate > .product { animation: blurIn .8s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }



/* Szuflada i modal: treść wyostrza się po otwarciu */
body.cart-open .drawer__body > * { animation: blurIn .6s var(--ease-out) backwards; }


body.cart-open .drawer__body > :nth-child(2) { animation-delay: .06s; }


body.cart-open .drawer__body > :nth-child(3) { animation-delay: .12s; }


.modal.is-open .modal__box > * { animation: blurIn .7s var(--ease-out) backwards; }


.modal.is-open .modal__box > :nth-child(3) { animation-delay: .06s; }


.modal.is-open .modal__box > :nth-child(4) { animation-delay: .12s; }


.modal.is-open .modal__box > :nth-child(5) { animation-delay: .18s; }



/* Licznik koszyka pulsuje po dodaniu */
.cart-btn.is-bump { animation: pulseGlow .9s ease; }


.cart-btn.is-bump .cart-btn__count { animation: blurIn .5s var(--ease-out); }



@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after { animation: none !important; transition-duration: .01ms !important; }


  .reveal,
.reveal * { opacity: 1 !important; filter: none !important; transform: none !important; }


}



/* Wyróżniona nowość na górze kategorii */
.spotlight {
  position: relative;
  display: grid;
  /* obrazek ma wysokość treści po prawej: zaczyna się i kończy razem z nią */
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  gap: 36px;
  align-items: stretch;
  margin-top: 40px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(22, 22, 22, .56);
  border: 1px solid var(--card-border);
  overflow: hidden;
  isolation: isolate;
  animation: blurIn 1s var(--ease-out) .2s backwards;
}


.spotlight .card { aspect-ratio: auto; height: 100%; min-height: 220px; }


.spotlight .card::after { inset: 60% 0 0 0; }


.spotlight__body { display: flex; flex-direction: column; align-items: flex-start; padding: 0 24px 0 0; }


.spotlight__body .eyebrow { line-height: 1; }


.spotlight__body > :last-child { margin-top: auto; padding-top: 24px; }


.spotlight__title { margin: 10px 0 0; font-size: clamp(26px, 2.4vw, 38px); font-weight: 700; line-height: 1.2; }


.spotlight__sub { margin: 6px 0 0; font-size: 15px; color: rgba(255, 255, 255, .49); }


.spotlight__desc { margin: 16px 0 0; max-width: 480px; font-size: 14px; line-height: 1.7; color: var(--text-41); }


.spotlight__tags { display: flex; gap: 4px; margin-top: 18px; }


.spotlight__tags .tag { height: 18px; min-width: 44px; font-size: 10px; }


.spotlight__foot { display: flex; align-items: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }


.spotlight__price { font-size: 32px; font-weight: 700; line-height: 1; margin-right: 8px; }


.spotlight__price s { display: block; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .35); margin-bottom: 4px; }



/* Filtry (chipy) obok wyszukiwarki */
.filters { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }


.filters button {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-48);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .05);
  transition: color .15s, background .15s, border-color .15s;
}


.filters button:hover { color: #fff; }


.filters button.is-active {
  color: #000;
  font-style: normal;
  background: var(--btn-grad);
  border-color: transparent;
}


.result-count { font-size: 11px; font-style: italic; color: var(--text-41); }



/* Wstążki na kartach: Nowość / -20% */
.card__ribbon {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  gap: 6px;
}


.ribbon {
  height: 20px;
  padding: 0 9px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #000;
  background: var(--pink);
  box-shadow: 0 0 20px rgba(255, 153, 236, .5);
}


.ribbon--sale { background: var(--yellow); box-shadow: 0 0 20px rgba(255, 247, 35, .35); }


.ribbon--os { background: var(--green-glow); box-shadow: 0 0 20px rgba(135, 255, 128, .35); }



@media (max-width: 1100px) {
  .spotlight { grid-template-columns: 1fr; gap: 20px; }


  .spotlight .card { aspect-ratio: 16 / 9; height: auto; min-height: 0; }


  .spotlight__body { padding: 0 6px 6px; }


  .toolbar { flex-wrap: wrap; height: auto; }


  .filters { margin-left: 0; }


}


@media (max-width: 760px) {
  .spotlight { padding: 12px; }


}



/* Rozbudowana stopka sklepu (nad paskiem Tebex) */
.site-footer {
  position: relative;
  z-index: 2;
  margin-top: 76px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}


.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 56px 40px 40px;
}


.site-footer__brand { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; }


.site-footer__brand img { width: 40px; height: 40px; }


.site-footer p { margin: 14px 0 0; max-width: 320px; font-size: 13px; line-height: 1.6; color: var(--text-41); }


.site-footer h4 { margin: 4px 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-48); }


.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 13px; }


.site-footer ul a { color: rgba(255, 255, 255, .7); transition: color .15s; }


.site-footer ul a:hover { color: var(--pink); }


.site-footer__note { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .05); font-size: 11px; color: var(--text-18); }



/* ---------- Responsywność ---------- */

@media (max-width: 1500px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }


  .home-block .grid > :nth-child(n + 4) { display: none; }


}


@media (max-width: 1100px) {
  .home-block .grid > :nth-child(n + 4) { display: flex; }


}


@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }


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


  .nav a,
.nav a + a { min-width: 0; margin: 0; }


  .features { grid-template-columns: 1fr; }


  .tiles { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }


  .tile--wide { grid-column: span 2; }


  .stats-wrap,
.faq-wrap { grid-template-columns: 1fr; gap: 36px; }


  .site-footer__inner { grid-template-columns: 1fr 1fr; }


}


@media (max-width: 760px) {
  :root { --gutter: 16px; }


  .header { height: auto; padding: 16px; flex-wrap: wrap; gap: 10px; }


  .nav { order: 3; width: 100%; overflow-x: auto; }


  .nav a { padding: 0 12px 0 0; justify-items: start; }


  .header__right { gap: 8px; }


  .header__right .btn { min-width: 0; padding: 0 14px; }


  .hero { height: calc(100svh - 112px); padding: 70px 16px 0; }


  .hero__title { font-size: 32px; line-height: 46px; max-width: none; }


  .hero__line { width: 80%; height: 9px; margin-top: 18px; }


  .hero__lead,
.hero__actions,
.hero__note { margin-top: 18px; }


  .hero__actions { gap: 10px; }


  .badge__mark { left: 7px; top: -20px; width: 22px; font-size: 40px; line-height: 72px; }


  .badge { height: 32px; padding-left: 40px; }


  .home-block { padding-top: 56px; }


  .home-head { flex-direction: column; align-items: flex-start; }


  .tiles { grid-template-columns: 1fr; }


  .tile--wide { grid-column: auto; }


  .tile--wide .tile__cta { position: static; margin-top: 16px; align-self: flex-start; }


  .stats { gap: 28px 16px; }


  .cta { padding: 44px 20px; margin-top: 56px; }


  .site-footer { margin-top: 56px; }


  .site-footer__inner { grid-template-columns: 1fr 1fr; padding: 40px 16px 24px; gap: 28px; }


  .site-footer__inner > :first-child { grid-column: 1 / -1; }


  .hero__title br { display: none; }


  .hero__lead { font-size: 16px; line-height: 24px; }


  .hero__lead br { display: none; }


  .hero__note { font-size: 13px; }


  .badge { width: auto; padding-right: 16px; font-size: 12px; }


  .section__title { font-size: 44px; line-height: 66px; margin-top: 10px; }


  .section__lead { font-size: 15px; line-height: 24px; }


  .toolbar { margin-left: 0; gap: 16px; }


  .search { width: auto; flex: 1; }


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


  .pdp__title { font-size: 32px; }


  .perks { grid-template-columns: 1fr; }


  .basket .line { grid-template-columns: 96px minmax(0, 1fr) auto; }


  .footer__inner { grid-template-columns: 1fr; padding: 18px 16px; }


  .footer__legal { flex-wrap: wrap; gap: 10px 16px; }


}



/* ---------- Przełącznik języka ---------- */
.hero__scroll em { font-style: normal; }


.currency--lang .currency__menu { min-width: 130px; }


.header__right .currency--lang { margin-right: 0; }



/* ---------- Darmowy skrypt za dołączenie do Discorda ---------- */
.freebie {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 36px;
  border-radius: 22px;
}


.freebie[hidden] { display: none; }


.freebie--compact { margin-top: 40px; }


.freebie .h2 { margin-top: 12px; }


.freebie .lead { margin-left: 0; }


.freebie .lead b { color: #fff; font-weight: 600; }



.steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}


.step { display: flex; gap: 16px; align-items: flex-start; opacity: .55; transition: opacity .3s; }


.step.is-active,
.step.is-done { opacity: 1; }


.step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background .3s, border-color .3s, color .3s;
}


.step.is-active .step__num { border-color: var(--pink); color: var(--pink); }


.step.is-done .step__num { background: var(--green-glow); border-color: var(--green-glow); color: #000; }


.step__num svg { width: 14px; height: 14px; }


.step__body { display: grid; gap: 2px; padding-top: 4px; min-width: 0; }


.step__body b { font-size: 15px; font-weight: 600; }


.step__body > span { font-size: 13px; color: var(--text-41); }


.step__body .btn,
.step__body .coupon { margin-top: 10px; }


.step__body .coupon { max-width: 420px; }


.step__body .coupon .btn { margin-top: 0; min-width: 0; }


.step__hint { font-size: 11px; color: var(--text-18); margin-top: 6px; }



.btn--discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-width: 0;
  background: #5865f2;
  color: #fff;
  box-shadow: none;
}


.btn--discord svg { width: 16px; height: 16px; }


.btn--discord:hover { filter: brightness(1.1); }


.step.is-done .btn--discord { background: rgba(88, 101, 242, .25); }



.freebie__card { aspect-ratio: 16 / 10; }


.freebie__card .card__price s { font-size: 11px; }


.ribbon--discord { display: inline-flex; gap: 5px; background: #5865f2; color: #fff; }


.ribbon--discord svg { width: 12px; height: 12px; }


.tag--free { color: #fff; background: rgba(88, 101, 242, .45); border-color: rgba(88, 101, 242, .7); }


.line__price s { display: block; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .35); }



@media (max-width: 1100px) {
  .freebie { grid-template-columns: 1fr; gap: 28px; padding: 24px; }


  .freebie__card { order: -1; }


}


@media (max-width: 760px) {
  .freebie { padding: 18px; }


  .currency--lang { margin-right: 0; }


}



/* ==========================================================================
   Tytuł hero składany z liter (fx.js)
   ========================================================================== */
.hero__title.is-split {
  animation: none;
  background: none;
  --grad: radial-gradient(68% 250% at 50% 50%, #ffffff 0%, rgba(153, 153, 153, .51) 100%);
}


.hero__title .word { display: inline-block; white-space: nowrap; }


.hero__title .char {
  display: inline-block;
  background-image: var(--grad);
  background-repeat: no-repeat;
  background-size: var(--tw) var(--th);
  background-position: calc(-1 * var(--cx)) calc(-1 * var(--cy));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: charIn 1.3s var(--ease-out) backwards;
  animation-delay: calc(.25s + var(--ci) * 18ms);
}


@keyframes charIn {
  from { opacity: 0; filter: blur(12px); transform: translateY(.42em) rotate(3deg); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}


/* reszta hero wchodzi po tytule */
.hero > .badge { animation-delay: .05s; }


.hero__line { animation-delay: 1.05s; }


.hero__lead { animation-delay: 1.1s; }


.hero__actions { animation-delay: 1.25s; }


.hero__note { animation-delay: 1.4s; }


.hero__scroll { animation-delay: 1.7s; }



/* ==========================================================================
   Styl Apple: szklany nagłówek, duża ciasna typografia, miękkie powierzchnie,
   przyciski w kształcie pastylki. Nadpisuje wcześniejsze reguły.
   ========================================================================== */
:root {
  --apple-gray: rgba(255, 255, 255, .56);
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .07);
  --hairline: rgba(255, 255, 255, .08);
  --radius-xl: 28px;
}



/* Nagłówek przyklejony; po przewinięciu robi się niski i szklany */
[data-header] { display: contents; }


.header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: height .5s var(--ease-out), margin-bottom .5s var(--ease-out),
              background-color .4s, border-color .4s;
}


.header.is-scrolled {
  height: 64px;
  margin-bottom: 52px; /* 64 + 52 = 116, więc treść pod spodem nie skacze */
  background: rgba(9, 9, 11, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--hairline);
}


.header__logo { transition: width .5s var(--ease-out), height .5s var(--ease-out); }


.header.is-scrolled .header__logo { width: 34px; height: 34px; }


.header.is-scrolled .btn { height: 32px; }



/* Typografia */
.hero__title { letter-spacing: -.015em; }


.h2,
.section__title,
.spotlight__title,
.pdp__title { letter-spacing: -.035em; }


.h2 {
  font-size: clamp(34px, 4.2vw, 64px);
  font-weight: 600;
  line-height: 1.07;
  background: linear-gradient(180deg, #ffffff 35%, rgba(255, 255, 255, .6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}


.stats-wrap .h2 { background-position: 0 0; }


.lead {
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.5;
  max-width: 700px;
  color: var(--apple-gray);
}


.eyebrow {
  text-transform: none;
  letter-spacing: -.01em;
  font-size: 17px;
  font-weight: 600;
}


.section__lead { color: var(--apple-gray); }



/* Przyciski i pola: pastylki */
.btn,
.field,
.search,
.sort,
.filters button,
.qty { border-radius: 980px; }


.btn { font-weight: 500; letter-spacing: -.005em; }


.link-more { font-size: 17px; color: var(--pink); }


.link-more:hover { color: var(--pink); text-decoration: underline; text-underline-offset: 4px; }



/* Powierzchnie: bez ramek, duże zaokrąglenia, delikatne tło */
.tile,
.freebie,
.cta,
.spotlight,
.panel,
.stat {
  border-radius: var(--radius-xl);
  border-color: transparent;
}


.freebie,
.cta,
.spotlight,
.panel { background: var(--surface); }


.cta::before,
.cta::after { display: none; }



.features { gap: 16px; }



.tiles { gap: 16px; }


.tile { border: 0; transition: transform .7s var(--ease-out); }


.tile:hover { transform: scale(1.015); border-color: transparent; }


.tile h3 { font-size: 28px; font-weight: 600; letter-spacing: -.025em; }


.tile p { font-size: 15px; color: rgba(255, 255, 255, .62); }


.tile__icon,
.tile__count { border: 0; }



/* Liczby: duże, z gradientem, w osobnych kafelkach */
.stats { gap: 16px; }


.stat { padding: 30px 28px; background: var(--surface); }


.stat b {
  font-size: clamp(48px, 5vw, 80px);
  font-weight: 600;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 30%, rgba(255, 255, 255, .5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.stat b small { -webkit-text-fill-color: currentColor; letter-spacing: -.02em; }


.stat span { font-size: 15px; color: var(--apple-gray); }



/* FAQ */
.faq { border-top-color: var(--hairline); }


.faq details { border-bottom-color: var(--hairline); }


.faq summary { font-size: 19px; font-weight: 500; letter-spacing: -.015em; padding: 24px 0; }


.faq summary::after { border-radius: 50%; }


.faq details p { font-size: 16px; color: var(--apple-gray); }



/* CTA i darmowy skrypt */
.cta { padding: 80px 30px; }


.freebie { padding: 44px; }


.step__body b { font-size: 17px; letter-spacing: -.01em; }


.step__body > span { font-size: 15px; color: var(--apple-gray); }



/* Stopka w stylu Apple: drobny szary tekst, cienkie linie */
.site-footer { border-top-color: var(--hairline); }


.site-footer h4 { text-transform: none; letter-spacing: 0; font-size: 13px; color: rgba(255, 255, 255, .85); }


.site-footer ul a { font-size: 13px; color: var(--apple-gray); }


.site-footer ul a:hover { color: #fff; }


.site-footer p { color: var(--apple-gray); }


.site-footer__note { border-top-color: var(--hairline); }



@media (max-width: 760px) {
  .header { position: relative; }


  .header.is-scrolled { height: auto; margin-bottom: 0; background: none; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }


  .header.is-scrolled .header__logo { width: 46px; height: 46px; }


  .stat { padding: 26px 22px; }


  .freebie { padding: 22px; }


  .cta { padding: 52px 20px; }


  .h2 { font-size: 34px; }


}



/* Licznik w liczbie dziedziczy rozmiar liczby (nie etykiety) */
.stat b span[data-count-to] { display: inline; margin: 0; font-size: inherit; color: inherit; }



/* ==========================================================================
   Kursory "jak w Figmie" (hero + zakończenie strony)
   ========================================================================== */
.mcursor {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: flex-start;
  color: var(--c, var(--pink));
  pointer-events: none;
  white-space: nowrap;
}


.mcursor svg { width: 20px; height: 20px; flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); }


.mcursor b {
  margin: 15px 0 0 -2px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--c, var(--pink));
  color: #000;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}


@keyframes selBox {
  from { border-color: transparent; background: transparent; }
  to   { border-color: var(--pink); background: rgba(255, 153, 236, .06); }
}


@keyframes selPop { from { transform: scale(0); } to { transform: none; } }


@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }


.mcursor--sel {
  right: -30px;
  bottom: -34px;
  animation: selCursor 1.1s var(--ease-out) both, curIdle 3.6s ease-in-out 1.3s infinite alternate;
}


@keyframes selCursor {
  0%   { opacity: 0; transform: translate(160px, 120px); }
  70%  { opacity: 1; transform: translate(0, 0); }
  82%  { transform: scale(.82); }
  100% { opacity: 1; transform: none; }
}


@keyframes curIdle {
  from { transform: translate(0, 0); }
  to   { transform: translate(10px, 6px); }
}



/* ==========================================================================
   Zakończenie strony: "Level up your server nowww" (inspiracja wowww.art)
   ========================================================================== */
.outro {
  position: relative;
  overflow: hidden;
  margin-top: 76px;
  padding: 110px var(--gutter) 0;
  text-align: center;
}


.outro__stage { position: relative; max-width: 1400px; margin: 0 auto; padding-bottom: 110px; }


.outro__kicker { margin: 0; font-size: 17px; font-weight: 500; color: var(--apple-gray); }


.outro__title { margin: 14px 0 0; font-weight: 700; letter-spacing: -.045em; line-height: .95; }


.outro__line { display: block; font-size: clamp(36px, 5.4vw, 86px); }


.outro__word {
  display: block;
  margin-top: .04em;
  font-size: clamp(96px, 17vw, 280px);
  line-height: 1;
  white-space: nowrap;
}



/* Litery w różnych stylach */
.wl { display: inline-block; }


.wl--x { color: transparent; -webkit-background-clip: text; background-clip: text; }


.wl.is-pop { animation: wlPop .55s var(--ease-out); }


@keyframes wlPop {
  from { transform: translateY(.05em) scale(.88); filter: blur(8px); opacity: .4; }
  to   { transform: none; filter: blur(0); opacity: 1; }
}


.s-pink { background-image: linear-gradient(180deg, #ffe1f8 0%, #ff99ec 55%, #d95cc3 100%); }


.s-dots { background: radial-gradient(circle, #8f98ff 0 40%, transparent 44%) 0 0 / .07em .07em; }


.s-chrome { background-image: linear-gradient(180deg, #ffffff 0%, #b9b9c2 38%, #3a3a42 50%, #8d8d96 62%, #f2f2f6 100%); }


.s-photo { background: url("img/planeheist.jpg") center / cover; }


.s-outline { -webkit-text-stroke: .022em rgba(255, 255, 255, .9); }


.s-green { background-image: linear-gradient(180deg, #d6ffd3, #87ff80); }


.wl--x.s-dots,
.wl--x.s-photo { -webkit-background-clip: text; background-clip: text; }



/* Kursory krążące wokół napisu */
.mcursor--a { left: 62%; top: 30%; animation: curA 11s ease-in-out infinite; }


.mcursor--b { left: 18%; top: 62%; animation: curB 13s ease-in-out infinite; }


.mcursor--c { left: 80%; top: 70%; animation: curC 9s ease-in-out infinite; }


@keyframes curA { 0%,100% { transform: translate(0, 0); } 30% { transform: translate(-120px, 60px); } 60% { transform: translate(60px, 110px); } }


@keyframes curB { 0%,100% { transform: translate(0, 0); } 40% { transform: translate(140px, -70px); } 70% { transform: translate(40px, 30px); } }


@keyframes curC { 0%,100% { transform: translate(0, 0); } 50% { transform: translate(-160px, -40px); } }


.mcursor--you { left: 0; top: 0; opacity: 0; transition: opacity .3s; }


.outro.has-you .mcursor--you { opacity: 1; }



.outro__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0 0;
  font-size: 17px;
  color: var(--apple-gray);
}


.outro__status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-glow);
  box-shadow: 0 0 0 0 rgba(135, 255, 128, .6);
  animation: livePulse 2s ease-out infinite;
}


@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(135, 255, 128, .55); }
  100% { box-shadow: 0 0 0 10px rgba(135, 255, 128, 0); }
}


.outro .hero__actions { justify-content: center; gap: 12px; margin-top: 26px; }


.outro .btn { height: 39px; min-width: 163px; }


@keyframes ringSpin { to { transform: rotate(360deg); } }



@media (max-width: 760px) {
  .outro { padding-top: 70px; margin-top: 56px; }


  .outro__stage { padding-bottom: 70px; }


  .mcursor--a,
.mcursor--c { display: none; }


  .mcursor--sel b { font-size: 10px; }


}


.nav > a { min-width: 0; padding: 0 12px; }


.nav > a + a { margin-left: 0; min-width: 0; }



@media (max-width: 760px) {
  .nav { overflow: visible; }


  .header { position: relative; }


}



/* Górne menu: wszystkie kategorie widoczne od razu, z liczbą produktów */
.nav > a {
  position: relative;
  height: 34px;
  min-width: 0;
  padding: 0 14px;
  margin: 0;
  border-radius: 980px;
  transition: background .2s, color .2s, opacity .2s;
}


.nav > a + a { margin-left: 2px; min-width: 0; }


.nav > a:hover { opacity: 1; background: rgba(255, 255, 255, .07); }


.nav > a.is-active { color: #fff; background: rgba(255, 153, 236, .14); }


.nav > a { display: inline-flex; align-items: center; gap: 5px; }


.nav__count {
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: var(--apple-gray);
  transform: translateY(-4px);
}


.nav > a.is-active .nav__count { color: var(--pink); }



/* Film z YouTube na stronie produktu */
.prose .video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 22px; border-radius: 16px; overflow: hidden; background: #000; }


.prose .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


.prose img { max-width: 100%; height: auto; border-radius: 12px; }


.spotlight__tags { align-items: center; gap: 6px; }



/* ==========================================================================
   Wydajność: płynniejsze przewijanie
   - bez backdrop-filter na kartach, tagach i kafelkach (to one najbardziej obciążały scroll),
   - poświaty stoją w miejscu, animacje przewijania bez rozmycia.
   ========================================================================== */
.glow { animation: none; will-change: auto; }


.card__bar,
.tag,
.tile__icon,
.tile__count,
.pdp__tags .tag {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


.card__bar { background: linear-gradient(180deg, rgba(18, 18, 20, .62), rgba(14, 14, 16, .86)); }


.tag { background: rgba(255, 255, 255, .14); }


.tile__icon,
.tile__count { background: rgba(14, 14, 16, .6); }



.reveal,
.reveal .tile,
.reveal .stat,
.reveal .product,
.reveal .faq details { filter: none !important; }


.reveal { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }


.reveal .tile,
.reveal .stat,
.reveal .product,
.reveal .faq details {
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}


@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }


.grid--animate > .product { animation: fadeUp .6s var(--ease-out) backwards; animation-delay: calc(min(var(--i, 0), 12) * 40ms); }


.card__img { will-change: auto; }



/* ==========================================================================
   Karta skryptu: zdjęcie + nazwa + przycisk w jednym, delikatnym kontenerze
   ========================================================================== */
.grid { gap: 18px; }


.product {
  gap: 8px;
  padding: 8px 8px 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .05);
  transition: background .3s, border-color .3s;
}


.product:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .09); }


.product .card { border-radius: 15px; }


.product:hover .card,
.product .card:hover { transform: none; }


.product > .btn { height: 38px; }



/* Wariant jako zwykły tekst w podpisie karty */
.vt { font-weight: 600; }


.vt--source { color: #a6ff9f; }


.vt--escrow { color: rgba(255, 255, 255, .78); }


.spotlight__tags .vt { margin-right: 8px; font-size: 13px; }


.line__meta .vt { font-size: 11px; }



/* Strona produktu: wybór wersji Escrow | Source code */
.options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}


.options--single { grid-template-columns: 1fr; }


.option {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--hairline);
  transition: border-color .2s, background .2s;
}


a.option:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); }


.option.is-selected { border-color: rgba(255, 153, 236, .65); background: rgba(255, 153, 236, .06); }


.option__head { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }


.option__head b { font-weight: 600; }


.option__head span { color: rgba(255, 255, 255, .8); font-weight: 500; }


.option small { font-size: 12px; line-height: 1.45; color: var(--apple-gray); }


@media (max-width: 760px) { .options { grid-template-columns: 1fr; }

 }



/* ==========================================================================
   "Why Iconic" – bento w stylu Apple: config, frameworki, resmon
   ========================================================================== */
.why {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
  margin-top: 56px;
  text-align: left;
}


.why__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 34px 34px 0;
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow: hidden;
}


.why__tile--code { grid-row: span 2; }


.why__text h3 { margin: 0; font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }


.why__text p { margin: 10px 0 0; max-width: 460px; font-size: 16px; line-height: 1.55; color: var(--apple-gray); }



/* okno edytora z configiem */
.code {
  margin: auto 0 0;
  border-radius: 16px 16px 0 0;
  background: #0d0d10;
  border: 1px solid var(--hairline);
  border-bottom: 0;
  font: 500 14px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
  white-space: pre;
}


.code__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
}


.code__bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .14); }


.code__bar em { margin-left: 8px; font-style: normal; font-size: 12px; color: var(--apple-gray); }


.code code { display: block; padding: 18px 20px 26px; overflow-x: auto; }


.c-k { color: var(--pink); }


.c-s { color: #a6ff9f; }


.c-n { color: #b4baff; }


.c-b { color: #ffd479; }


.c-c { color: rgba(255, 255, 255, .32); }



/* frameworki jako proste etykiety */
.stack { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 34px; }


.stack span {
  padding: 8px 14px;
  border-radius: 980px;
  background: rgba(255, 255, 255, .06);
  font: 500 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255, 255, 255, .85);
}



/* odczyt w stylu resmon */
.resmon {
  margin: auto 0 0;
  padding: 14px 18px 18px;
  border-radius: 16px 16px 0 0;
  background: #0d0d10;
  border: 1px solid var(--hairline);
  border-bottom: 0;
  font: 500 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}


.resmon div { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .78); }


.resmon .resmon__head { border-top: 0; padding-top: 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--apple-gray); }


.resmon b { font-weight: 600; color: #a6ff9f; }



@media (max-width: 1100px) {
  .why { grid-template-columns: 1fr; }


  .why__tile--code { grid-row: auto; }


}


@media (max-width: 760px) {
  .why__tile { padding: 24px 20px 0; }


  .code { font-size: 12px; }


}


.stack .stack__more { background: none; border: 1px dashed rgba(255, 255, 255, .2); color: var(--apple-gray); font-family: var(--font); }



/* ==========================================================================
   Pasek promocji (pokazuje się sam, gdy w Tebex są przeceny)
   ========================================================================== */
:root { --promo-h: 0px; }


.hero {
  --u: max(.55px, min(1px, (100svh - 116px - var(--promo-h)) / 964, 100vw / 1920));
  height: calc(100svh - 116px - var(--promo-h));
}


.promo {
  position: relative;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 42px;
  padding: 0 14px 0 20px;
  background:
    linear-gradient(90deg, rgba(255, 153, 236, .16), rgba(143, 152, 255, .08) 55%, rgba(135, 255, 128, .12)),
    #0d0d10;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  animation: blurDown .7s var(--ease-out) backwards;
}


.promo__tag {
  flex: none;
  padding: 4px 10px;
  border-radius: 980px;
  background: var(--pink);
  color: #1a0616;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}


.promo__text { flex: none; font-weight: 600; letter-spacing: -.01em; }


.promo__track {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}


.promo__marquee {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: promoScroll var(--dur, 30s) linear infinite;
}


.promo__marquee.is-static { animation: none; }


.promo__track:hover .promo__marquee { animation-play-state: paused; }


@keyframes promoScroll { to { transform: translateX(-50%); } }


.promo__deal {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  color: rgba(255, 255, 255, .85);
}


.promo__deal:hover span { color: #fff; text-decoration: underline; text-underline-offset: 3px; }


.promo__deal s { color: rgba(255, 255, 255, .4); font-size: 12px; }


.promo__deal b { font-weight: 700; color: #fff; }


.promo__deal em { font-style: normal; font-weight: 700; color: var(--pink); }


.promo__cta { flex: none; font-weight: 600; color: var(--pink); }


.promo__cta:hover { text-decoration: underline; text-underline-offset: 3px; }


.promo__close { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--apple-gray); }


.promo__close:hover { color: #fff; background: rgba(255, 255, 255, .08); }


.promo__close svg { width: 12px; height: 12px; }



/* "Sale" w menu */
.nav > a.nav__sale { color: var(--pink); }


.nav > a.nav__sale .nav__count { color: var(--pink); }


.nav > a.nav__sale.is-active { background: rgba(255, 153, 236, .16); }



@media (max-width: 760px) {
  .promo { gap: 10px; padding: 0 8px 0 12px; font-size: 12px; }


  .promo__track { display: none; }


  .promo__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


  .hero { height: calc(100svh - 112px - var(--promo-h)); }


}


@media (prefers-reduced-motion: reduce) { .promo__marquee { animation: none; }

 }



/* Promocja na cały sklep: badge w hero i notka w kategorii */
.badge--sale .badge__new { color: #1a0616; background: var(--pink); padding: 2px 8px; border-radius: 980px; font-size: .8em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }


.badge--sale .badge__mark { color: var(--pink); }


.sale-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 18px auto 0;
  padding: 8px 16px 8px 8px;
  border-radius: 980px;
  background: rgba(255, 153, 236, .08);
  border: 1px solid rgba(255, 153, 236, .2);
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
}


.sale-note[hidden] { display: none; }



/* ==========================================================================
   Badge z wykrzyknikiem nad tytułem – większy, dopracowany (wg projektu)
   ========================================================================== */
.badge {
  height: max(36px, calc(44 * var(--u)));
  min-width: 0;
  padding: 0 calc(7 * var(--u)) 0 calc(60 * var(--u));
  gap: calc(10 * var(--u));
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(30, 30, 33, .58);
  font-size: max(13px, calc(16 * var(--u)));
  letter-spacing: -.005em;
}


.badge__mark {
  left: calc(14 * var(--u));
  top: calc(-28 * var(--u));
  width: calc(30 * var(--u));
  font-size: calc(66 * var(--u));
  line-height: calc(98 * var(--u));
  text-shadow: 0 0 calc(28 * var(--u)) rgba(255, 247, 35, .35);
  transform: rotate(-4deg);
  transition: transform .4s var(--ease-out);
}


a.badge:hover .badge__mark { transform: rotate(4deg) scale(1.06); }


.badge__new { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); color: var(--pink); font-weight: 600; }


.badge__new::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .28); }


.badge--sale .badge__new::after { display: none; }


.badge__name { color: #fff; font-weight: 500; }


.badge__arrow {
  display: grid;
  place-items: center;
  width: max(26px, calc(30 * var(--u)));
  height: max(26px, calc(30 * var(--u)));
  margin-left: calc(6 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  opacity: 1;
  font-size: .9em;
  transition: background .25s, color .25s, transform .25s;
}


a.badge:hover { border-color: rgba(255, 153, 236, .35); }


a.badge:hover .badge__arrow { background: var(--pink); color: #1a0616; transform: translateX(2px); }



/* ==========================================================================
   Stany: brak połączenia z Tebex / nie znaleziono / uszkodzone zdjęcie
   ========================================================================== */
.state {
  grid-column: 1 / -1;
  max-width: 520px;
  margin: 40px auto;
  padding: 40px 32px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  text-align: center;
}


.pdp > .state { grid-column: 1 / -1; }


.state__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 247, 35, .12);
  color: var(--yellow);
  font-size: 30px;
  font-weight: 900;
  font-style: italic;
}


.state h3 { margin: 18px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }


.state p { margin: 8px 0 24px; font-size: 15px; line-height: 1.55; color: var(--apple-gray); }


.img-broken { visibility: hidden; }



/* ==========================================================================
   Strona 404
   ========================================================================== */
.e404 {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - 116px);
  padding: 40px 20px 120px;
  text-align: center;
}


.e404__code { font-size: 15px; font-weight: 600; letter-spacing: .2em; color: var(--pink); }


.e404__word { margin: 6px 0 0; font-size: clamp(88px, 15vw, 220px); font-weight: 700; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }


.e404__title { margin: 22px 0 0; font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.025em; }


.e404__text { margin: 10px auto 0; max-width: 480px; font-size: 17px; line-height: 1.55; color: var(--apple-gray); }


.e404 .hero__actions { justify-content: center; margin-top: 30px; gap: 12px; }


.e404 .btn { height: 39px; min-width: 163px; }


.e404 .mcursor--a { left: 64%; top: 30%; }


.e404 .mcursor--b { left: 22%; top: 62%; }


/* badge: jeszcze większy, czytelny także na mniejszych ekranach */
.badge {
  height: max(42px, calc(50 * var(--u)));
  padding: 0 calc(8 * var(--u)) 0 max(50px, calc(66 * var(--u)));
  font-size: max(14px, calc(17 * var(--u)));
}
.badge__mark {
  left: max(12px, calc(16 * var(--u)));
  top: min(-22px, calc(-30 * var(--u)));
  width: max(26px, calc(32 * var(--u)));
  font-size: max(54px, calc(76 * var(--u)));
  line-height: max(80px, calc(110 * var(--u)));
}
.badge__arrow { width: max(30px, calc(34 * var(--u))); height: max(30px, calc(34 * var(--u))); }
.badge--sale .badge__mark { color: var(--yellow); }
.e404 .mcursor--a { left: 76%; top: 22%; }
/* badge: niższy, bardziej poziomy – większe odstępy między elementami */
.badge {
  height: max(34px, calc(38 * var(--u)));
  padding: 0 calc(5 * var(--u)) 0 max(44px, calc(56 * var(--u)));
  gap: max(14px, calc(18 * var(--u)));
  font-size: max(13px, calc(15 * var(--u)));
}
.badge__new { gap: max(14px, calc(18 * var(--u))); }
.badge__mark {
  left: max(10px, calc(14 * var(--u)));
  top: min(-19px, calc(-25 * var(--u)));
  width: max(24px, calc(28 * var(--u)));
  font-size: max(46px, calc(62 * var(--u)));
  line-height: max(70px, calc(90 * var(--u)));
}
.badge__arrow { width: max(26px, calc(28 * var(--u))); height: max(26px, calc(28 * var(--u))); margin-left: max(4px, calc(6 * var(--u))); }