/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/
/* ===== HERO FULLER GLASS PANEL ===== */

.hb-wrap {
position: relative;
padding: 4rem 4rem !important;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 34px;
background:
radial-gradient(circle at 30% 20%, rgba(185,109,255,0.18), transparent 35%),
linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
box-shadow:
0 0 80px rgba(185,109,255,0.10),
inset 0 1px 0 rgba(255,255,255,0.06);
backdrop-filter: blur(14px);
}

.hb-wrap::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 34px;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,113,246,0.28), transparent 35%, rgba(185,109,255,0.18));
opacity: 0.35;
z-index: -1;
}

.hb-hero {
padding: 8rem 2rem 6rem !important;
}

.hb-col.right {
display: flex;
justify-content: center;
align-items: center;
}

.hb-col.right img {
max-width: 520px;
}
/* Wywal górny badge */
.hb-pill {
display: none !important;
}

/* Większy, pełniejszy hero */
.hb-wrap {
max-width: 1500px !important;
width: calc(100% - 4rem);
padding: 5rem 5rem !important;
grid-template-columns: 1.15fr 0.85fr !important;
}

/* Stats/rating zawsze w jednej linii */
.hb-ratings {
display: flex !important;
align-items: center;
gap: 1rem;
flex-wrap: nowrap !important;
white-space: nowrap;
font-size: 1.05rem;
}

/* Żeby tekst nie był zbyt mały */
.hb-bullets li {
font-size: 1.12rem;
}

/* Obraz po prawej trochę większy */
.hb-col.right img {
max-width: 620px !important;
}
/* Większy obraz hero */

.hb-col.right img {
max-width: 760px !important;
width: 100%;
transform: perspective(1400px) rotateY(-6deg) rotateX(2deg) scale(1.08);
}

/* Więcej miejsca dla prawej strony */

.hb-wrap {
grid-template-columns: 1fr 1fr !important;
}

/* Jeszcze większy hero */

@media (min-width: 1400px) {
.hb-wrap {
max-width: 1650px !important;
}
}
/* Większe okienko/kolumna po prawej */

.hb-wrap {
grid-template-columns: 0.9fr 1.25fr !important;
max-width: 1720px !important;
}

.hb-col.right {
min-width: 0;
width: 100%;
}

.hb-visual,
.hb-col.right > div {
width: 100% !important;
max-width: 820px !important;
}

.hb-col.right img {
width: 100% !important;
max-width: none !important;
height: auto !important;
transform: perspective(1400px) rotateY(-5deg) rotateX(2deg);
}
/* Balans tekstu i obrazu */

.hb-wrap {
grid-template-columns: 1.15fr 0.85fr !important;
gap: 4rem !important;
}

/* Większy lewy blok */

.hb-col.left {
max-width: 860px !important;
}

/* Mocniejszy headline */

.hb-title {
font-size: clamp(4.8rem, 8vw, 7.2rem) !important;
line-height: 0.9 !important;
margin-bottom: 1.8rem !important;
}

/* Większy opis */

.hb-bullets li {
font-size: 1.18rem !important;
line-height: 1.75 !important;
}

/* CTA bardziej widoczne */

.hb-ctas {
margin-top: 2rem;
}

/* Obraz dalej duży ale bardziej supportujący */

.hb-col.right img {
max-width: 640px !important;
margin-left: auto;
}
/* ===== PRODUCTS STRIP - REAL CLASSES ===== */

section#products {
max-width: 1600px !important;
width: calc(100% - 4rem) !important;
padding-top: 5rem !important;
}

section#products > .row.products {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
gap: 1.5rem !important;

margin-left: 0 !important;
margin-right: 0 !important;

padding: 2rem !important;
border-radius: 32px !important;
border: 1px solid rgba(255,255,255,0.08) !important;
background: rgba(255,255,255,0.03) !important;
box-shadow: 0 0 80px rgba(185,109,255,0.10) !important;
backdrop-filter: blur(12px);
}

section#products > .row.products > div {
flex: 0 0 330px !important;
width: 330px !important;
max-width: 330px !important;
padding: 0 !important;
margin: 0 !important;
}

section#products .shop-card.card {
width: 100% !important;
height: 100% !important;
border-radius: 22px !important;
overflow: hidden !important;
background: rgba(12,12,16,0.95) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}

section#products > .row.products::-webkit-scrollbar {
height: 8px;
}

section#products > .row.products::-webkit-scrollbar-track {
background: rgba(255,255,255,0.05);
border-radius: 999px;
}

section#products > .row.products::-webkit-scrollbar-thumb {
background: rgba(185,109,255,0.7);
border-radius: 999px;
}
/* ===== PRODUCTS REAL STRIP BACKGROUND ===== */

section#products {
max-width: 1700px !important;
width: calc(100% - 3rem) !important;
padding: 4rem 3rem !important;
border-radius: 36px !important;
border: 1px solid rgba(203, 80, 255, 0.35) !important;
background:
radial-gradient(circle at 50% 0%, rgba(203,80,255,0.18), transparent 40%),
linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)) !important;
box-shadow:
0 0 90px rgba(203,80,255,0.16),
inset 0 1px 0 rgba(255,255,255,0.08) !important;
backdrop-filter: blur(14px);
}

/* sam pasek kart */
section#products .row.products {
display: flex !important;
flex-wrap: nowrap !important;
gap: 1.5rem !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 1rem 0 1.5rem 0 !important;
}

/* każda karta ma być elementem paska */
section#products .row.products > div {
flex: 0 0 330px !important;
max-width: 330px !important;
width: 330px !important;
padding: 0 !important;
}

/* ukryj efekt bootstrapowego “rozjechania” */
section#products .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ===== HERO POSITION FIX ===== */

/* usuwa pustą przestrzeń między navbarem a hero */
.hb-hero {
padding-top: 2.5rem !important;
padding-bottom: 3.5rem !important;
min-height: auto !important;
}

/* karta hero bliżej góry i bardziej wycentrowana */
.hb-wrap {
margin-top: 0 !important;
min-height: 520px !important;
align-items: center !important;
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}

/* mniej pustki w środku */
.hb-col.left,
.hb-col.right {
align-self: center !important;
}

/* prawa grafika bliżej centrum */
.hb-col.right {
justify-content: center !important;
}

.hb-col.right img {
margin-left: 0 !important;
}

/* na dużych ekranach hero nie powinno startować za nisko */
@media (min-width: 1200px) {
.hb-hero {
padding-top: 1.5rem !important;
}
}
.hb-wrap {
gap: 2rem !important;
grid-template-columns: 1.05fr 0.95fr !important;
}
/* ===== PRODUCTS FINAL FIX ===== */

/* usuwa bańkę z całej sekcji/nagłówka */
section#products {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 4rem 0 !important;
}

/* nagłówek czysto, bez ramki */
section#products .section-title,
section#products > .text-center {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* pasek tylko wokół kart */
section#products .row.products {
  cursor: grab;
  user-select: none;

  margin-top: 3rem !important;
  padding: 2.5rem !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 1.5rem !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  border-radius: 34px !important;
  border: 1px solid rgba(203,80,255,0.22) !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(203,80,255,0.18), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)) !important;

  box-shadow:
    0 0 90px rgba(203,80,255,0.10),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;

  backdrop-filter: blur(14px);
}

/* kursor podczas przeciągania */
section#products .row.products:active {
  cursor: grabbing;
}

/* karty w jednej linii */
section#products .row.products > div {
  flex: 0 0 330px !important;
  max-width: 330px !important;
  width: 330px !important;
  padding: 0 !important;
}

/* scrollbar bardziej w tle */
section#products .row.products::-webkit-scrollbar {
  height: 6px;
}

section#products .row.products::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.035);
  border-radius: 999px;
}

section#products .row.products::-webkit-scrollbar-thumb {
  background: rgba(203,80,255,0.35);
  border-radius: 999px;
}

section#products .row.products::-webkit-scrollbar-thumb:hover {
  background: rgba(203,80,255,0.55);
}