/**
 * © Tebim sp. z o.o. | tebim.pro
 * Styl gorącego strzału (strona główna + karta produktu).
 */
.tebimhotshot {
  --tebimhotshot-accent: #e63946;
  --tebimhotshot-bg: #fff;
  --tebimhotshot-border: #ececec;
  margin: 32px 0;
}

.tebimhotshot__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.tebimhotshot__title {
  margin: 0;
  font-size: 1.5rem;
}

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

.tebimhotshot__arrow {
  width: 36px;
  height: 36px;
  border: 1px solid var(--tebimhotshot-border);
  border-radius: 50%;
  background: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.tebimhotshot__arrow:hover {
  border-color: var(--tebimhotshot-accent);
  color: var(--tebimhotshot-accent);
}

.tebimhotshot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.tebimhotshot__slider {
  overflow: hidden;
}

/* ---------------- Kafelek ---------------- */
.tebimhotshot-tile {
  /* Animowany border: kolor, grubosc, dlugosc smugi i czas jednego obiegu. */
  --tebimhotshot-runner-color: #eb5528;
  --tebimhotshot-runner-width: 3px;
  --tebimhotshot-runner-tail: 0.85turn;
  --tebimhotshot-runner-speed: 4.5s;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 20px;
  border: 1px solid #ececec;
  background: #fff;
}

/* Ramka jest maskowana do samej obwodki, a smuga to obracany conic-gradient. */
.tebimhotshot-tile__runner {
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: var(--tebimhotshot-runner-width);
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.tebimhotshot-tile__runner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* Kwadrat wiekszy od kafelka, zeby obrot nie odslonil naroznikow. */
  width: 300%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  /* Start smugi w prawym dolnym narozniku: conic liczy od gory, wiec 135deg. */
  background: conic-gradient(
          from 135deg,
          transparent 0turn,
          transparent calc(1turn - var(--tebimhotshot-runner-tail)),
          var(--tebimhotshot-runner-color) 0.99turn,
          #fff 1turn
  );
  animation: tebimhotshot-runner var(--tebimhotshot-runner-speed) linear infinite;
  will-change: transform;
}

@keyframes tebimhotshot-runner {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.tebimhotshot-tile--sold-out .tebimhotshot-tile__runner {
  display: none;
}

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

.tebimhotshot-tile--sold-out {
  opacity: 0.75;
}

.tebimhotshot-tile__link {
  color: inherit;
  text-decoration: none;
}

.tebimhotshot-tile__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.tebimhotshot-tile__media img {
  max-width: 100%;
  height: auto;
}

.tebimhotshot-tile__badge,
.tebimhotshot-product__discount {
  display: inline-block;
  padding: 2px 8px;
  background: #eb5528;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
}

.tebimhotshot-tile__badge {
  position: absolute;
  top: 8px;
  left: 8px;
}

.tebimhotshot-tile__name {
  margin: 15px 0 5px;
  font-size: 0.95rem;
  font-weight: 500;
  min-height: 50px;
}

.tebimhotshot-tile__prices {
  display: grid;
  align-items: baseline;
}

.tebimhotshot-tile__price {
  font-weight: 700;
  color: #ff4e00;
  order: 2;
  font-size: 25px;
}

.tebimhotshot-tile__price-old {
  font-size: 16px;
  color: #000;
  text-decoration: line-through;
  order: 1;
  font-weight: 700;
}
.tebimhotshot-tile__sold {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tebimhotshot-tile__sold,
.tebimhotshot-product__sold {
  margin: 0;
  font-size: 0.9rem;
  color: #000;
}

#tebimhotshot-home .tebimhotshot-tile--sold-out .tebimhotshot-tile__sold {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  margin: 21px 0;
}

#tebimhotshot-home .tebimhotshot-tile--sold-out .tebimhotshot-tile__soldout {
  display: none;
}

/* ---------------- Pasek sprzedanych sztuk ---------------- */
.tebimhotshot-progress {
  height: 12px;
  background: #f0f0f0;
  overflow: hidden;
  margin: 10px 0 0;
}

.tebimhotshot-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #f6a623, #e63946);
}

/* ---------------- Licznik ---------------- */
.tebimhotshot-timer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  justify-content: space-between;
  margin: 10px 0;
}

.tebimhotshot-timer__label {
  font-size: 0.75rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tebimhotshot-timer__clock {
  font-size: 1.05rem;
  font-weight: 700;
}

.tebimhotshot-timer__unit {
  margin-right: 4px;
  font-size: 0.8rem;
  font-weight: 400;
}

.tebimhotshot-timer--ended .tebimhotshot-timer__clock {
  color: #999;
}

/* ---------------- Kod rabatowy ---------------- */
.tebimhotshot-code {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
}

.tebimhotshot-code__value {
  padding: 4px 10px;
  border: 1px dashed #ff4e00;
  border-radius: 4px;
  background: #fff5f5;
  color: #ff4e00;
  font-weight: 700;
  font-family: monospace;
  cursor: pointer;
}

.tebimhotshot-code__value--copied {
  border-style: solid;
}

.tebimhotshot-code__copied {
  color: #2a9d8f;
}

/* ---------------- Przycisk "Do koszyka" ---------------- */
.tebimhotshot-tile__cart-form {
  margin: 0;
}

.tebimhotshot-tile__cart {
  display: flex;
  width: 100%;
  margin-top: auto;
  text-align: center;
  justify-content: space-between;
}

.tebimhotshot-tile__cart-no {
  text-align: center;
  background-color: #fff;
  color: #ff4e00;
}

/* ---------------- Karta produktu ---------------- */
.tebimhotshot-product {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid #f4d5d8;
  /*border-radius: 8px;*/
  background: #fffafa;
}

.tebimhotshot-product--sold-out {
  border-color: #e5e5e5;
  background: #fafafa;
}

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

.tebimhotshot-product__title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tebimhotshot-product__price {
  margin: 0;
}

.tebimhotshot-product__price strong {
  font-size: 1.2rem;
  color: #ff4e00;
}

.tebimhotshot-product__saving {
  font-size: 0.85rem;
  color: #2a9d8f;
}

.tebimhotshot-product__price-old {
  color: #888;
  text-decoration: line-through;
}

.tebimhotshot-product__limit {
  margin: 0;
  font-size: 0.8rem;
  color: #666;
}

/* ---------------- Karta produktu: oprawa boksu zakupowego ---------------- */
/* Boks motywu (`.row.sticky-top.product`) musi być kontenerem pozycjonowania dla
   nakładki, inaczej mierzy się ona do `#_desktop_product_right` - kolumna ma klasę
   `.sticky`, a motyw daje `.sticky{position:relative}` - i ramka bierze wysokość
   całej kolumny zamiast boksu.
   Nie ruszamy jego `position`: `product.js` przestawia przy scrollu klasy
   `sticky-move-up`, `in` i `two-navbars`, a motyw na tej podstawie przełącza boks
   między `static` a `sticky`. Wymuszenie `relative` zabijałoby przyklejanie
   w części tych stanów, a nadpisywanie tylko wybranych stanów rozjeżdżało się
   przy krótkim oknie (JS dokłada wtedy `sticky-move-up`).
   `transform` tworzy containing block dla potomków `position: absolute`
   NIEZALEŻNIE od `position`, więc działa w każdym stanie i niczego nie psuje. */
#product #_desktop_product_right div[class*="sticky-"]:has(> .tebimhotshot-buybox),
.tebimhotshot-buybox-host {
  transform: translate(0);
}

/* Nakładka na boks: JEDEN prostokąt odniesienia dla ramki i dla zakładki, więc
   nie mogą się rozjechać ani względem siebie, ani względem białego boksu.
   `pointer-events: none` jest obowiązkowe - nakładka leży na całym boksie razem
   z przyciskiem "Dodaj do koszyka". */
.tebimhotshot-buybox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

/* Maskowanie jak na kafelku, ale smugę pędzi tu animowany kąt gradientu, a nie
   obracany kwadrat. Boks zakupowy bywa wysoki i wąski - kwadrat o boku liczonym
   z szerokości (technika kafelka) przestałby zakrywać narożniki. Bez wsparcia
   @property gradient zostaje statyczny, ramka nadal się rysuje. */
@property --tebimhotshot-buybox-angle {
  syntax: "<angle>";
  initial-value: 135deg;
  inherits: false;
}

.tebimhotshot-buybox__runner {
  --tebimhotshot-runner-color: #ff3d00;
  --tebimhotshot-runner-color-tail: #fdb813;
  --tebimhotshot-runner-width: 2px;
  --tebimhotshot-runner-tail: 0.85turn;
  --tebimhotshot-runner-speed: 4.5s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--tebimhotshot-runner-width);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.tebimhotshot-buybox__runner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Start smugi w prawym dolnym narożniku: conic liczy od góry, więc 135deg. */
  background: conic-gradient(
          from var(--tebimhotshot-buybox-angle),
          transparent 0turn,
          transparent calc(1turn - var(--tebimhotshot-runner-tail)),
          var(--tebimhotshot-runner-color-tail) calc(1turn - var(--tebimhotshot-runner-tail) * 0.45),
          var(--tebimhotshot-runner-color) 0.99turn,
          #fff 1turn
  );
  animation: tebimhotshot-buybox-runner var(--tebimhotshot-runner-speed) linear infinite;
}

@keyframes tebimhotshot-buybox-runner {
  to {
    --tebimhotshot-buybox-angle: 495deg;
  }
}

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

/* Sam wygląd zakładki - dzielony z miniaturkami na listingach, gdzie o jej
   umiejscowieniu decyduje osobna reguła. Wysokość robi padding, nie `height`:
   przy jednoczesnym `top` i `bottom` definiowana wysokość i tak wygrywa z jednym
   z nich, a niezdefiniowana zmienna cicho psuła układ. */
.tebimhotshot-buybox__label {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px 9px 14px;
  background: linear-gradient(90deg, #fbaa19 0%, #f4661f 100%);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* W boksie zakupowym zakładka wychodzi w całości NAD biały boks i trzyma się jego
   lewej krawędzi. `top: auto` zeruje nadpisania z innych reguł - przy jednoczesnym
   `top` i `bottom` wygrywa `top` i zakładka wjeżdża do środka boksu. */
.tebimhotshot-buybox .tebimhotshot-buybox__label {
  top: auto;
  bottom: 100%;
  left: 0;
}

/* Na kafelku strony głównej zakładka wchodzi w układ (kafelek to kolumna flex),
   więc odsuwa grafikę w dół zamiast ją zasłaniać - plakietka rabatu zostaje w jej
   narożniku. `position: relative` przebija `absolute` z reguły bazowej, a `z-index`
   z niej wynosi zakładkę nad nakładkę z animowaną ramką. Rozmiar jak na listingu,
   bo kafelek jest równie ciasny jak miniaturka. */
.tebimhotshot-tile .tebimhotshot-buybox__label {
  position: relative;
  align-self: flex-start;
  padding: 5px 10px;
  font-size: 12px;
}

.tebimhotshot-buybox__seal {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.tebimhotshot-tile .tebimhotshot-buybox__seal {
  width: 18px;
  height: 18px;
}

/* Znak procentu w środku pieczątki - musi kontrastować z jej białym tłem. */
.tebimhotshot-buybox__seal-mark {
  stroke: #f2701f;
}

/* Oddech pieczątki. W mikroskali bez przesunięcia fazy - oba elementy pulsują
   razem, inaczej "rozjazd" wygląda jak drganie, a nie jak oddech. `transform-box:
   fill-box` jest konieczny, bo transform w SVG domyślnie liczy się od początku
   układu współrzędnych (0 0), a nie od środka kształtu. */
.tebimhotshot-buybox__seal-bg,
.tebimhotshot-buybox__seal-mark {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: tebimhotshot-seal-breathe 1s ease-in-out infinite;
  will-change: transform;
}

@keyframes tebimhotshot-seal-breathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.135);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tebimhotshot-buybox__seal-bg,
  .tebimhotshot-buybox__seal-mark {
    animation: none;
  }
}

/* Wyprzedana pula: zakładka zostaje, ale przestaje krzyczeć promocją. Modyfikator
   siedzi na samej zakładce, bo wrapper `.tebimhotshot-buybox--sold-out` istnieje
   tylko w boksie zakupowym - na listingu i na kafelku nie ma go do czego podpiąć. */
.tebimhotshot-buybox__label--sold-out {
  background: #666;
}

.tebimhotshot-buybox__label--sold-out .tebimhotshot-buybox__seal-mark {
  stroke: #666;
}

.tebimhotshot-buybox--sold-out .tebimhotshot-buybox__runner {
  display: none;
}

.tebimhotshot-buybox--sold-out .tebimhotshot-buybox__label {
  background: #666;
}

.tebimhotshot-buybox--sold-out .tebimhotshot-buybox__seal-mark {
  stroke: #666;
}

/* ---------------- Cena i plakietka wstrzykiwane w motyw ---------------- */
.tebimhotshot-price {
  display: grid;
}

.tebimhotshot-price__current {
  color: #ff4e00;
  font-size: 45px;
  font-weight: 600;
  line-height: 57px;
}

.tebimhotshot-price__regular {
  color: #000;
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  text-decoration: line-through;
}

.tebimhotshot-price .product__discount,
.tebimhotshot-price__saving {
  line-height: 100%;
  font-size: 1rem;
  color: #000;
  font-weight: 400;
  margin: 5px 0 10px;
}

/* `order` obowiązuje TYLKO w wariancie z listingu, gdzie wszystkie trzy elementy
   siedzą w jednym gridzie `.tebimhotshot-price`. Na karcie produktu są osobnymi
   dziećmi `.prices__wrapper` (flex) i o kolejności decyduje szablon motywu -
   nieoscopowany `order` przestawiałby je tam względem `.product__current-price`. */
.tebimhotshot-price .tebimhotshot-price__regular {
  order: 1;
}

.tebimhotshot-price .tebimhotshot-price__current {
  order: 2;
}

.tebimhotshot-price .product__discount {
  order: 3;
}

.tebimhotshot-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #fff1f1;
  color: #e63946;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tebimhotshot-flag__left {
  font-weight: 400;
  text-transform: none;
}

/* ---------------- Wyprzedane ---------------- */
.tebimhotshot-tile__soldout,
.tebimhotshot-product__soldout {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #444;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.tebimhotshot-tile__soldout {
  position: absolute;
  top: 8px;
  right: 8px;
}

.product-miniature .tebimhotshot-flag {
  margin-top: -42px;
  margin-bottom: 10px;
}
.product-miniature .product-miniature__price .tebimhotshot-price {}
.product-miniature .product-miniature__price .tebimhotshot-price .tebimhotshot-price__current {
  order: 2;
  color: #ff4e00;
  font-size: 25px;
  line-height: 15px;
}
.product-miniature .product-miniature__price .tebimhotshot-price .tebimhotshot-price__regular {
  order: 1;
  color: #000;
  font-size: 16px;
}
.product-miniature .product-miniature__price .tebimhotshot-price .product__discount {
  display: none !important;
}

#tebimhotshot-home {
  width: 100%;
  margin-bottom: 0;
}

/* margin-top robi miejsce na zakładkę wiszącą nad boksem. Wysokości nie
   ustawiamy - nakładka rozpina się na boks, więc ramka sama trzyma jego wysokość. */
#_desktop_product_right .sticky-top:has(.tebimhotshot-buybox) {
  margin-top: 42px;
  background-color: #fff;
}

.product__tax-label .tebimhotshot-progress {
  margin-bottom: 10px;
}
.product__tax-label .tebimhotshot-product__sold {
  display: flex;
  justify-content: space-between;
}
.tebimhotshot-timer__clock span {
  color: #ff4e00;
}
#_desktop_product_right .sticky-top:not(.sticky-move-up):has(.tebimhotshot-buybox) {
  top: 240px;
}
body#category .product-miniature .tebimhotshot-buybox__label {
  top: 10px;
  left: 10px;
  padding: 15px 10px;
}

@media screen and (max-width: 992px) {
  .tebimhotshot-buybox .tebimhotshot-buybox__runner {
    display: none !important;
  }
  .tebimhotshot-buybox .tebimhotshot-buybox__label {
    position: relative;
    top: -10px;
  }
  .tebimhotshot-buybox {
    position: relative;
  }
}


.tebim-products__swiper .product-miniature .product-miniature__prices .tebimhotshot-buybox__label {
  top: 12px;
  padding: 5px 10px;
  font-size: 12px;
}
.tebim-products__swiper .product-miniature .product-miniature__prices .tebimhotshot-buybox__label svg {
  width: 18px;
  height: 18px;
}

#js-product-list .product-miniature .product-miniature__prices .tebimhotshot-buybox__label {
  top: 12px;
  padding: 5px 10px;
  font-size: 12px;
}
#js-product-list .product-miniature .product-miniature__prices .tebimhotshot-buybox__label svg {
  width: 18px;
  height: 18px;
}

#tebimhotshot-home .tebimhotshot-tile .tebimhotshot-buybox__label {
  margin-left: 7px;
}

/* ---------------- Układ pełnej szerokości ---------------- */
/* Sekcja renderuje się w hooku displayHome, który w motywie leci poza .container,
   więc szerokość 100% to już cały ekran - bez sztuczek na 100vw (te dokładają
   poziomy scroll, gdy strona ma pionowy pasek przewijania). */
.tebimhotshot--full {
  --tebimhotshot-cols: 5;
  --tebimhotshot-full-bg: #fff6f2;
  --tebimhotshot-gap: 20px;
  margin: 32px 0;
}

.tebimhotshot--full .tebimhotshot__bleed {
  width: 100%;
  padding: 32px 0;
  background: var(--tebimhotshot-full-bg);
}

.tebimhotshot__row {
  display: flex;
  flex-direction: column;
  gap: var(--tebimhotshot-gap);
  align-items: stretch;
}

.tebimhotshot__banner {
  display: flex;
  min-width: 0;
}

.tebimhotshot__banner-link,
.tebimhotshot__banner-picture,
.tebimhotshot__banner-img {
  display: block;
  width: 100%;
}

/* Na wąskich ekranach baner leży nad produktami i ma się pokazać w całości - kadrowanie
   `cover` wchodzi dopiero w rzędzie, gdzie grafika musi trzymać wysokość kafelków. */
.tebimhotshot__banner-img {
  height: auto;
}

.tebimhotshot--full .tebimhotshot__slider {
  flex: 1 1 auto;
  min-width: 0;
}

/* Slajdy muszą rosnąć do wysokości najwyższego kafelka, inaczej ramka się urywa. */
.tebimhotshot--full .tebimhotshot__slider .swiper-slide {
  height: auto;
}

@media (min-width: 992px) {
  .tebimhotshot__row {
    flex-direction: row;
  }

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

  /* Grafika zabiera dokładnie jeden slot rzędu; reszta slotów zostaje karuzeli. */
  .tebimhotshot__row--with-banner .tebimhotshot__banner {
    flex: 0 0 calc(
      (100% - (var(--tebimhotshot-cols) - 1) * var(--tebimhotshot-gap)) / var(--tebimhotshot-cols)
    );
  }
}

@media screen and (max-width: 992px) {
  .tebimhotshot--full .tebimhotshot__slider {
    width: 100%;
  }
}