.custom-banners { margin: 10px 0; }
.product-badge {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}
.product-badge.antiallergic { background: #4CAF50; }
.product-badge.bestseller { background: #FF6B35; border: 2px solid gold; }
.product-badge.new-arrival { background: #667eea; }
.product-badge.promotion { background: #E91E63; }
.product-badge.premium { background: gold; color: black; }

/* Stories strip (kółka jak IG/FB/Żabka) */
.lr-stories-strip {
  --lr-ring-size: 84px;
  --lr-story-width: 92px;
  --lr-label-font-size: 13px;

  position: relative;
  display: flex;
  align-items: flex-start; /* ZMIANA: Było 'center', zmieniamy na 'flex-start', żeby kółka zawsze były równo u góry */
  gap: 6px;
  padding: 0px 0px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, rgba(15,18,30,0.04), rgba(15,18,30,0.02));
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.lr-story {
  flex: 0 0 auto;
  width: var(--lr-story-width);
  scroll-snap-align: start;
  text-align: center;
  font-size: var(--lr-label-font-size);
  color: #222;
  background: transparent;
  border: none;
  margin-top: 12px;
  margin-bottom: 12px;
}

/* Obramowanie pierścienia */
.lr-story .lr-ring {
  position: relative;
  width: var(--lr-ring-size);
  height: var(--lr-ring-size);
  margin: 0 auto 6px;
  border-radius: 50%;
  padding: 3px;
  background: transparent;
  overflow: visible;
}
.lr-story .lr-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #7f5af0, #6fd3c7, #4cc2ff, #7f5af0);
  animation: lr-ring-spin 3s linear infinite;
  z-index: 0;

  @media (min-width: 767px) {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #FFD700, #FFF0A0, #FFCF00, #FFE066, #FFD700, #FFF0A0, #FFCF00, #FFE066, #FFD700) !important;
    animation: lr-ring-rotate 8s linear infinite !important;
  }

}
/* NOWE: Styl Black Week (czarno-złoty) */
.lr-story .lr-ring.ring-gold::before {
  background: conic-gradient(from 0deg, #b8860b, #ffd700, #cfb53b, #8a6e08, #b8860b) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4) !important;
  animation: lr-ring-rotate 3s linear infinite !important;
}


@keyframes lr-ring-spin {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@keyframes lr-ring-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Wnętrze (miniatura) */
.lr-story .lr-thumb-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #111 0%, #0b0b0b 55%, #000 100%);
  overflow: hidden;

  z-index: 1;
  border: 2px solid black;
}

/* Loader w środku miniatury */
.lr-thumb-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}
.lr-thumb-loader .spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: lr-spin 0.8s linear infinite;
  box-shadow: 0 0 16px rgba(0,0,0,0.25);
}
@keyframes lr-spin { to { transform: rotate(360deg); } }

/* Miniatury */
.lr-story video.lr-thumb,
.lr-story img.lr-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
  z-index: 3;
}

/* Etykieta */
.lr-story .lr-label {
  display: block;
  white-space: normal;
  /*word-break: break-word;*/
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 3;
  line-height: 1.25;
  min-height: 2.5em;
  margin-top: 4px;

  color: #000;


  font-weight: normal;
  letter-spacing: 0.5px;

  @media (min-width: 767px) {
    /*color:white;*/
    /*font-weight:bold;*/
    /*text-shadow: 1px 1px 2px rgba(0,0,0,0.6);*/
  }

}
.lr-story .lr-ring.ring-gold + .lr-label {
  background: #000000;       /* Czarne tło */
  color: #ffffff;            /* Biały tekst */
  font-weight: 800;          /* Gruba czcionka */
  font-size: 10px;           /* Nieco mniejsza, techniczna czcionka */
  line-height: 1.1;          /* "Niska" interlinia */
  text-transform: uppercase; /* Wielkie litery (krzyczące promocją) */

  padding: 4px 6px;          /* Odstęp wewnątrz czarnego pudełka */
  border-radius: 4px;        /* Lekkie zaokrąglenie rogów */

  /* Centrowanie "badge'a" pod kółkiem */
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;

  /* Cień dla lepszego kontrastu */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  border: 1px solid #222;    /* Subtelna ramka */
}

/* Overlay (player) */
.lr-stories-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8,10,20,0.65);
  backdrop-filter: blur(6px);
  padding: 18px;
}

@media (max-width: 767px) {
  .lr-stories-strip {
    /* Zmniejszamy rozmiar okręgów i ich kontenerów na mobile */
    --lr-ring-size: 60px;   /* Zamiast 96px, teraz mniejsze */
    --lr-story-width: 70px; /* Zamiast 104px, teraz mniejsze */
    --lr-label-font-size: 11px; /* Zamiast 14px, teraz mniejsze */
    /*padding-top: 16px;*/
    /*padding-bottom: 16px;*/
  }
}

.lr-stories-overlay.lr-open { display: flex; }

.lr-stories-modal {
  width: min(440px, 92vw);
  max-height: 94vh;
  border-radius: 18px;
  overflow: hidden;
  background: #0b0f14;
  box-shadow: 0 30px 80px rgba(5,10,30,0.6);
  color: #fff;
}

.lr-stories-player {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  display: flex;            /* Centrowanie zawartości */
  align-items: center;      /* Centrowanie pionowe */
  justify-content: center;  /* Centrowanie poziome */
}
.lr-stories-player video,
.lr-stories-player img.lr-story-image {
  width: 100%;
  height: 100%;
  display: block;
}

/* Wideo wypełnia cały ekran (cover), bo zazwyczaj jest w formacie 9:16 */
.lr-stories-player video {
  object-fit: cover;
  display: none;
}

/* Zdjęcie ma być widoczne w całości (contain) na czarnym tle */
.lr-stories-player img.lr-story-image {
  object-fit: contain;    /* Zmieniono z cover na contain */
  display: none;
}

.lr-stories-player .active-media { display: block !important; }
/* Top progress bars */
.lr-progress {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.lr-progress .bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
  overflow: hidden;
}
.lr-progress .bar .fill {
  width: 0%;
  height: 100%;
  background: #ffffff;
  transition: width 0.15s linear;
}

/* Pasek sterowania: tytuł | CTA | przyciski po prawej */
.lr-stories-controls {
  display: grid;
  grid-template-columns: 1fr auto auto; /* tytuł, cta, prawa sekcja */
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.25));
}
.lr-title {
  color: #fff;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lr-right {
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
}
.lr-ctrl-btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
}

/* CTA w linii między tytułem a przyciskami po prawej (bez zwiększania wysokości) */
.lr-cta-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  height: 34px;               /* spójna wysokość w pasku */
  line-height: 1;
  border-radius: 10px;
  background: #00b894;
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,184,148,0.28);
  white-space: nowrap;
}
.lr-cta-inline:hover { filter: brightness(1.05); }

/* Click areas for prev/next */
.lr-tapzone {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  z-index: 3;
}
.lr-tapzone.left { left: 0; }
.lr-tapzone.right { right: 0; }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .lr-ring { animation: none !important; }
  .lr-thumb-loader .spinner { animation: none !important; }
}

/* Responsywność – większe kółka na mobile */
@media (max-width: 767px) {
  .lr-stories-strip {
    --lr-ring-size: 80px;
    --lr-story-width: 90px;
    --lr-label-font-size: 12px;
    /*padding-top: 16px;*/
    /*padding-bottom: 16px;*/
  }
}

@media (min-width: 768px) {
  .lr-stories-strip {
    justify-content: center;
  }
}
.lr-curved-text-wrap {
  position: absolute;
  inset: -10px; /* ZMIANA: Zmniejszono z -13px na -10px (bliżej kółka) */
  z-index: 5;
  pointer-events: none;
  /* Brak animacji obrotu - tekst stoi w miejscu */
}

.lr-curved-text-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Styl tekstu na ścieżce */
.lr-curved-text-wrap text {
  fill: #fff;
  font-weight: 900;
  font-size: 10px;     /* ZMIANA: Lekka korekta rozmiaru, żeby ładnie wyglądał na szerszym łuku */
  text-transform: uppercase;
  /*text-shadow:*/
  /*        0 1px 2px rgba(0,0,0,0.9),*/
  /*        0 0 4px rgba(0,0,0,0.7);*/
  letter-spacing: 3px; /* ZMIANA: Nieco szersze litery dla lepszego efektu na łuku */
}
.lr-rigng, .lr-label {
  z-index: 3;
  position: relative;
}

.lr-stories-strip {
padding-top: 15px;

  /* Klimatyczny cień wewnętrzny */
  /*box-shadow: inset 0 0 60px rgba(0,0,0,0.55),*/
  /*inset 0 -20px 40px rgba(0,0,0,0.35);*/
  /*background: transparent url("/img/procenty.jpg") no-repeat  center center / cover;  !* Opcjonalne dodatkowe lekkie przyciemnienie *!*/
  position: relative;
}

.lr-stories-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  /*background: rgba(0,0,0,0.10); !* stopień zaciemnienia tła *!*/
  pointer-events: none;
  z-index: 1
}
/* Animacja lr-spin-slow nie jest już używana w tym elemencie, ale może zostać w kodzie lub można ją usunąć */
@keyframes lr-spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}