/* === Karuzela – wrapper ================================================= */
.woobt-wrap{
  position:relative;
  margin:15px 0 24px;          /* +24 px → odstęp od zielonego bloku   */
  overflow:hidden;             /* pozwala przyciąć “mgiełkę”           */
}

/* Subtelna podpowiedź, że można przewijać dalej (gradient z prawej) */
.woobt-wrap::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:60px;
  height:100%;
  pointer-events:none;
  background:linear-gradient(to left,#fff 0%,rgba(255,255,255,0) 100%);
}

/* === Kontener przewijania + scrollbar =================================== */
.woobt-products{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:8px 0 14px;          /* 14 px → miejsce na scrollbar         */
  scrollbar-width:auto;        /* Firefox                               */
  scrollbar-color:#7b7b7b #e2e2e2;
}
.woobt-products::-webkit-scrollbar{
  height:10px;                  /* grubiej                              */
}
.woobt-products::-webkit-scrollbar-thumb{
  background:#7b7b7b;          
  border-radius:5px;
}
.woobt-products::-webkit-scrollbar-track{
  background:#e2e2e2;         
  border-radius:5px;
}
.woobt-products::-webkit-scrollbar-thumb:hover{
  background:#555;            
}

/* === Karta produktu ===================================================== */
.woobt-product{
  flex:0 0 auto;
  width:168px;                 /* szersza karta                         */
  padding:14px 12px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-sizing:border-box;
}

/* --- Obrazek ------------------------------------------------------------ */
.woobt-product img{
  width:90px;
  height:90px;
  object-fit:contain;
  margin-bottom:8px;
}

/* --- Tytuł -------------------------------------------------------------- */
.woobt-product .woobt-title{
  order:1;
  font-size:13px;
  line-height:1.25;
  margin-bottom:6px;
}
.woobt-product .woobt-title a{
  color:inherit;
  text-decoration:none;
}
.woobt-product .woobt-title a:hover{
  text-decoration:underline;
}
/* ukryj ewentualny duplikat tytułu niżej */
.woobt-product .woobt-secondary-title{
  display:none !important;
}

/* ---------- CENY ------------------------------------------ */
.woobt-wrap .woobt-price{order:2;margin-bottom:8px;}

/* resetujemy wszelkie niechciane przekreślenia */
.woobt-wrap .woobt-price,
.woobt-wrap .woobt-price *{text-decoration:none !important;}

/* stara cena – <del>, <s>, .woobt-price-ori … */
.woobt-wrap .woobt-price del,
.woobt-wrap .woobt-price s,
.woobt-price-ori{
    display:block;
    font-size:13px;
    color:#e53935;
    text-decoration:line-through !important;
    margin-bottom:2px;
}

/* nowa cena – <ins>, bdi w <ins>, .woobt-price-new … */
.woobt-wrap .woobt-price ins,
.woobt-wrap .woobt-price ins *,
.woobt-price-new{
    display:inline;
    font-size:15px;
    font-weight:700;
    color:#000;
    text-decoration:none !important;
}

/* --- Checkbox ----------------------------------------------------------- */
.woobt-product .woobt-choose{
  order:3;
  margin-top:auto;
}
.woobt-product .woobt-choose label{
  font-size:0;                 /* ukryj tekst przy checkbox-ie          */
}
.woobt-product .woobt-choose input[type="checkbox"]{
  transform:scale(1.2);
}

/* =========================================================
   1)  WSPÓLNY STYL BANERA I PODSUMOWANIA
========================================================= */
.woobt-before-text,
.woobt-additional,
.woobt-total{
    display:flex;
    align-items:center;
    gap:8px;
    margin:5px 0; 
    padding:10px 14px;
    border:1px solid #b8e6b8;
    border-radius:6px;
    background:linear-gradient(0deg,#f3fff3 0%,#e7fbe7 100%);
    font-size:15px;      /* równy rozmiar dla wszystkich trzech     */
    color:#245c24;       /* ciemniejsza zieleń – lepszy kontrast     */
    line-height:1.35;
}

/* mała ikonka „✓” po lewej (tworzymy ją pseudoelementem)  */
.woobt-before-text::before,
.woobt-additional::before,
.woobt-total::before{
    content:"✓";
    font-weight:700;
    font-size:18px;
    line-height:1;
}

/* =========================================================
   2)  FORMATOWANIE CEN W BLOKU „DODATKOWO / ŁĄCZNIE”
========================================================= */

/* całość w jednej linii, a przy małej szerokości – ładne zawijanie */
.woobt-additional,
.woobt-total{flex-wrap:wrap;}

.woobt-additional del,
.woobt-total del{            /* stara cena */
    font-size:14px;
    color:#e53935;
    text-decoration:line-through;
    margin-right:4px;
}

.woobt-additional ins,
.woobt-total ins{            /* nowa cena */
    font-size:15px;
    font-weight:700;
    color:#000;
    text-decoration:none;
}

/* =========================================================
   3)  DROBNE DOPRACOWANIA (opcjonalnie)
========================================================= */

/* lekko pogrub tytuły produktów, jeśli są zbyt jasne       */
.woobt-title{color:#4a4a4a;font-weight:500;}

/* responsywność: poniżej 360 px zmniejsz ciut czcionkę     */
@media (max-width:359px){
    .woobt-before-text,
    .woobt-additional,
    .woobt-total{font-size:14px;}
    .woobt-before-text::before,
    .woobt-additional::before,
    .woobt-total::before{font-size:16px;}
}

/* Przeciągnij */
.woobt-wrap{
  position:relative;          /* potrzebne dla ::before */
  padding-bottom:34px;        /* miejsce na etykietę (≈ 24 px) */
}

.woobt-wrap::before{           /* sama etykieta */
  content:"Przeciągnij i zobacz pozostałe akcesoria →";
  font-size:12px;
  position:absolute;
  left:50%;
  bottom:5px;                /* 4 px pod scrollbar-em */
  transform:translateX(-50%);
  white-space:nowrap;        /* nie łamie „Przeciągnij” */

  padding:3px 10px;
  font:500 10px/1.2 inherit;
  color:#555;
  background:rgba(255,255,255,.96);
  border:1px solid #d0d0d0;
  border-radius:4px;
  box-shadow:0 0 2px rgba(0,0,0,.15);

  pointer-events:none;       /* nie blokuje gestów */
  z-index:5;                 /* nad paskiem, pod produktami */
}

.woobt-wrap:not(:has(.woobt-product:nth-child(2)))::before{
  display:none;
}