/* ==========================================================================
   Sklep Badge system

   Struktura DOM (Flatsome):
     .col-inner  [position:relative]
       .badge-container.absolute.left.top.z-1
       .product-small.box
         .box-image  [overflow:hidden]

   .badge-container: position:absolute; top:0; left:0 względem .col-inner.
   Flatsome nakłada margin:30px 0 0 — resetujemy !important.

   CSS variables (inline na wrapperze, dziedziczone przez dzieci):
     --sklep-badge-bg   kolor tła
     --sklep-badge-fs   font-size (domyślnie 11px)
     --sklep-badge-py   padding góra/dół (domyślnie 5px)
     --sklep-badge-px   padding lewo/prawo (domyślnie 11px)
   ========================================================================== */

.badge-container {
  margin:         8px 0 0 !important;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            5px;
  pointer-events: none;
}

.sklep-badge-wrap {
  display:        block;
  line-height:    0;
  pointer-events: auto;
  position:       relative;
}

/* ==========================================================================
   BAZA
   ========================================================================== */
.sklep-badge {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-family:     Lato, sans-serif;
  font-size:       var(--sklep-badge-fs, 11px);
  font-weight:     600;
  letter-spacing:  0.09em;
  text-transform:  uppercase;
  line-height:     1;
  white-space:     nowrap;
  color:           #fff;
  background:      var(--sklep-badge-bg, #2c3e50);
  padding:         var(--sklep-badge-py, 5px) var(--sklep-badge-px, 11px);
  box-sizing:      border-box;
  transition:      opacity 0.18s ease;
}

.sklep-badge__link {
  position: absolute;
  inset:    0;
  z-index:  1;
  cursor:   pointer;
}

/* ==========================================================================
   FOLD / RIBBON — poziomy pasek od lewej krawędzi

   Efekt "zawinięcia":
   · lewy bok jest flush z ramką zdjęcia — sugeruje że pasek wychodzi
     spoza lewej krawędzi (jakby był "za" zdjęciem po lewej)
   · prawy bok ścięty pod kątem 45° — pasek "wchodzi" w zdjęcie
   · box-shadow unosi pasek nad zdjęciem — efekt 3D bez gradientów
   · hover: translateX(3px) — pasek wysuwa się lekko w prawo
     jakby ktoś go pociągnął za prawy koniec

   Geometria ::after (ścięcie prawego boku):
     position:absolute; right:-10px; top:0; bottom:0; width:0
     border: trójkąt lewy — kolor paska; góra/dół — transparent
     calc(50% + 1px): +1px zamyka ewentualny sub-pixel gap
   ========================================================================== */

.sklep-badge-wrap--fold {
  /* żaden margin — lewy bok flush z left:0 kontenera */
  transition: transform 0.16s ease;
}

.sklep-badge-wrap--fold:hover {
  transform: translateX(3px);
}

.sklep-badge--fold {
  position:      relative;
  display:       inline-flex;
  align-items:   center;

  /* padding-right zostawiamy normalny — ścięcie realizuje clip-path, nie ::after */
  padding: var(--sklep-badge-py, 5px)
           calc(var(--sklep-badge-px, 11px) + 12px)
           var(--sklep-badge-py, 5px)
           var(--sklep-badge-px, 11px);

  border-radius: 0;

  /* gradient: lewo jaśniejsze (efekt "wychodzenia z cienia"), prawo ciemniejsze */
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--sklep-badge-bg, #2c3e50) 85%, #fff) 0%,
    var(--sklep-badge-bg, #2c3e50)                               45%,
    color-mix(in srgb, var(--sklep-badge-bg, #2c3e50) 75%, #000) 100%
  );

  /* ścięcie prawego boku przez clip-path — zero sub-pixel gaps */
  clip-path: polygon(
    0 0,
    calc(100% - 12px) 0,
    100% 50%,
    calc(100% - 12px) 100%,
    0 100%
  );

  /* cień unosi pasek nad zdjęciem */
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.32));
}

/* ::after i ::before nie są potrzebne przy clip-path — zostawiamy puste */
.sklep-badge--fold::after,
.sklep-badge--fold::before {
  display: none;
}

/* ==========================================================================
   KOŁO
   ========================================================================== */
.sklep-badge--circle {
  border-radius: 50%;
  width:         calc(var(--sklep-badge-fs, 11px) * 4.2);
  height:        calc(var(--sklep-badge-fs, 11px) * 4.2);
  min-width:     38px;
  min-height:    38px;
  padding:       0;
  text-align:    center;
  box-shadow:    inset 0 0 0 1.5px rgba(255, 255, 255, 0.28),
                 2px 2px 5px rgba(0, 0, 0, 0.20);
}

/* pozostałe style — kompatybilność wsteczna */
.sklep-badge--square { border-radius: 2px; }
.sklep-badge--frame  {
  background: transparent !important;
  border:     1.5px solid var(--sklep-badge-bg, #2c3e50);
  color:      var(--sklep-badge-bg, #2c3e50);
}

/* .box-image — clip overflow (ribbon/fold ::after wychodzi poza pasek,
   ale mieści się wewnątrz .box-image, więc nie jest przycinany) */
.box-image {
  overflow: hidden;
}

/* ==========================================================================
   WP-Admin — podgląd
   ========================================================================== */
#sklep-badge-preview,
.column-sklep_badge_preview .sklep-badge {
  font-family:    Lato, sans-serif;
  font-size:      var(--sklep-badge-fs, 11px);
  font-weight:    600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding:        var(--sklep-badge-py, 5px) var(--sklep-badge-px, 11px);
  color:          #fff;
  background:     var(--sklep-badge-bg, #2c3e50);
  display:        inline-flex;
  align-items:    center;
  margin-top:     8px;
}

#sklep-badge-preview.sklep-badge--frame,
.column-sklep_badge_preview .sklep-badge--frame {
  background: transparent !important;
  border:     1.5px solid var(--sklep-badge-bg, #2c3e50);
  color:      var(--sklep-badge-bg, #2c3e50);
}

/* fold w adminie: clip-path zachowany, filter drop-shadow wyłączony */
#sklep-badge-preview.sklep-badge--fold,
.column-sklep_badge_preview .sklep-badge--fold {
  filter: none;
}