.baner-module img.lazyload:not(.loaded) {background: transparent !important;}
.baner-module.homeslider .container.text {position: absolute;height: 100%;left: 50% !important;transform: translate(-50%, -50%);top: 50%;}
.baner-module.homeslider .container.textimg {position: relative}
.baner-module .full-width-baner, .baner-module .full-width-single .euroboxess {flex: 0 0 100% !important; max-width: 100% !important;}
.baner-module .full-width-single .euroboxess {padding: 0px !important}
.baner-module .euroboxess {margin-bottom: 1.25rem;}
.baner-module .white-text a, .baner-module .white-text, .baner-module .white-text .baner-head {color: #fff;}

/* =============================================
 * eprestabaner — klasy CSS dla treści na banerze
 * Dodawaj w polu "Własna klasa CSS" banera
 *
 * Struktura HTML:
 * .epb-static__item.{klasy}
 *   .epb-baner__inner
 *     picture
 *     .image_title.position-absolute   ← pełny obszar banera
 *       .baner-box                     ← boks z treścią
 *         .baner-head
 *         .baner-text
 * ============================================= */

/* --- Base .image_title — pełny obszar banera --- */
.baner-module .image_title.position-absolute {
    position: absolute !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.baner-module .image_title:not(.position-absolute) {
    display: block;
}

/* --- .baner-box — domyślnie pełna szerokość --- */
.baner-module .baner-box {
    width: 100%;
}

/* =============================================
 * WYRÓWNANIE PIONOWE BOKSU (justify-content)
 * vc=środek | vt=góra | vb=dół
 * ============================================= */
.vc .image_title { align-items: center; }
.vt .image_title { align-items: flex-start; }
.vb .image_title { align-items: flex-end; }

/* =============================================
 * WYRÓWNANIE POZIOME BOKSU (justify-content)
 * hl=lewo | hc=środek | hr=prawo
 * ============================================= */
.hl .image_title { justify-content: flex-start; }
.hc .image_title { justify-content: center; }
.hr .image_title { justify-content: flex-end; }

/* =============================================
 * WYRÓWNANIE TEKSTU W BOKSIE
 * tl=lewo | tc=środek | tr=prawo
 * ============================================= */
.tl .baner-box { text-align: left; }
.tc .baner-box { text-align: center; }
.tr .baner-box { text-align: right; }

/* =============================================
 * KOLOR TREŚCI
 * white-text = biały tekst
 * ============================================= */
.white-text .baner-box,
.white-text .baner-box a,
.white-text .baner-box .baner-head { color: #fff; }

/* =============================================
 * ODSUNIĘCIA DESKTOP — padding na .image_title
 * l=lewo | r=prawo | t=góra | b=dół
 * Wartości: 3 / 5 / 10 / 15 %
 * ============================================= */
.l3  .image_title { padding-left: 3%; }
.l5  .image_title { padding-left: 5%; }
.l10 .image_title { padding-left: 10%; }
.l15 .image_title { padding-left: 15%; }

.r3  .image_title { padding-right: 3%; }
.r5  .image_title { padding-right: 5%; }
.r10 .image_title { padding-right: 10%; }
.r15 .image_title { padding-right: 15%; }

.t3  .image_title { padding-top: 3%; }
.t5  .image_title { padding-top: 5%; }
.t10 .image_title { padding-top: 10%; }
.t15 .image_title { padding-top: 15%; }

.b3  .image_title { padding-bottom: 3%; }
.b5  .image_title { padding-bottom: 5%; }
.b10 .image_title { padding-bottom: 10%; }
.b15 .image_title { padding-bottom: 15%; }

/* =============================================
 * SZEROKOŚĆ BOKSU DESKTOP — width na .baner-box
 * maxw-1=10% ... maxw-9=90% ... maxw-0=100%
 * ============================================= */
.maxw-1 .baner-box { width: 10%; }
.maxw-2 .baner-box { width: 20%; }
.maxw-3 .baner-box { width: 30%; }
.maxw-4 .baner-box { width: 40%; }
.maxw-5 .baner-box { width: 50%; }
.maxw-6 .baner-box { width: 60%; }
.maxw-7 .baner-box { width: 70%; }
.maxw-8 .baner-box { width: 80%; }
.maxw-9 .baner-box { width: 90%; }
.maxw-0 .baner-box { width: 100%; }

/* =============================================
 * WYSOKOŚĆ BOKSU DESKTOP — height na .baner-box
 * maxh-1=10% ... maxh-9=90% ... maxh-0=100%
 * ============================================= */
.maxh-1 .baner-box { height: 10%; overflow: hidden; }
.maxh-2 .baner-box { height: 20%; overflow: hidden; }
.maxh-3 .baner-box { height: 30%; overflow: hidden; }
.maxh-4 .baner-box { height: 40%; overflow: hidden; }
.maxh-5 .baner-box { height: 50%; overflow: hidden; }
.maxh-6 .baner-box { height: 60%; overflow: hidden; }
.maxh-7 .baner-box { height: 70%; overflow: hidden; }
.maxh-8 .baner-box { height: 80%; overflow: hidden; }
.maxh-9 .baner-box { height: 90%; overflow: hidden; }
.maxh-0 .baner-box { height: 100%; overflow: hidden; }

/* =============================================
 * TABLET (576px - 991px)
 * ============================================= */
@media (min-width: 576px) and (max-width: 991px) {

    .vct .image_title { align-items: center; }
    .vtt .image_title { align-items: flex-start; }
    .vbt .image_title { align-items: flex-end; }

    .hlt .image_title { justify-content: flex-start; }
    .hct .image_title { justify-content: center; }
    .hrt .image_title { justify-content: flex-end; }

    .tlt .baner-box { text-align: left; }
    .tct .baner-box { text-align: center; }
    .trt .baner-box { text-align: right; }

    .l3t  .image_title { padding-left: 3%; }
    .l5t  .image_title { padding-left: 5%; }
    .l10t .image_title { padding-left: 10%; }
    .l15t .image_title { padding-left: 15%; }

    .r3t  .image_title { padding-right: 3%; }
    .r5t  .image_title { padding-right: 5%; }
    .r10t .image_title { padding-right: 10%; }
    .r15t .image_title { padding-right: 15%; }

    .t3t  .image_title { padding-top: 3%; }
    .t5t  .image_title { padding-top: 5%; }
    .t10t .image_title { padding-top: 10%; }
    .t15t .image_title { padding-top: 15%; }

    .b3t  .image_title { padding-bottom: 3%; }
    .b5t  .image_title { padding-bottom: 5%; }
    .b10t .image_title { padding-bottom: 10%; }
    .b15t .image_title { padding-bottom: 15%; }

    .maxwtt-1 .baner-box { width: 10%; }
    .maxwtt-2 .baner-box { width: 20%; }
    .maxwtt-3 .baner-box { width: 30%; }
    .maxwtt-4 .baner-box { width: 40%; }
    .maxwtt-5 .baner-box { width: 50%; }
    .maxwtt-6 .baner-box { width: 60%; }
    .maxwtt-7 .baner-box { width: 70%; }
    .maxwtt-8 .baner-box { width: 80%; }
    .maxwtt-9 .baner-box { width: 90%; }
    .maxwtt-0 .baner-box { width: 100%; }

    .maxht-1 .baner-box { height: 10%; overflow: hidden; }
    .maxht-2 .baner-box { height: 20%; overflow: hidden; }
    .maxht-3 .baner-box { height: 30%; overflow: hidden; }
    .maxht-4 .baner-box { height: 40%; overflow: hidden; }
    .maxht-5 .baner-box { height: 50%; overflow: hidden; }
    .maxht-6 .baner-box { height: 60%; overflow: hidden; }
    .maxht-7 .baner-box { height: 70%; overflow: hidden; }
    .maxht-8 .baner-box { height: 80%; overflow: hidden; }
    .maxht-9 .baner-box { height: 90%; overflow: hidden; }
    .maxht-0 .baner-box { height: 100%; overflow: hidden; }

}

/* =============================================
 * MOBILE (<576px)
 * ============================================= */
@media (max-width: 575px) {

    .vcm .image_title { align-items: center; }
    .vtm .image_title { align-items: flex-start; }
    .vbm .image_title { align-items: flex-end; }

    .hlm .image_title { justify-content: flex-start; }
    .hcm .image_title { justify-content: center; }
    .hrm .image_title { justify-content: flex-end; }

    .tlm .baner-box { text-align: left; }
    .tcm .baner-box { text-align: center; }
    .trm .baner-box { text-align: right; }

    .l3m  .image_title { padding-left: 3%; }
    .l5m  .image_title { padding-left: 5%; }
    .l10m .image_title { padding-left: 10%; }
    .l15m .image_title { padding-left: 15%; }

    .r3m  .image_title { padding-right: 3%; }
    .r5m  .image_title { padding-right: 5%; }
    .r10m .image_title { padding-right: 10%; }
    .r15m .image_title { padding-right: 15%; }

    .t3m  .image_title { padding-top: 3%; }
    .t5m  .image_title { padding-top: 5%; }
    .t10m .image_title { padding-top: 10%; }
    .t15m .image_title { padding-top: 15%; }

    .b3m  .image_title { padding-bottom: 3%; }
    .b5m  .image_title { padding-bottom: 5%; }
    .b10m .image_title { padding-bottom: 10%; }
    .b15m .image_title { padding-bottom: 15%; }

    .maxwt-1 .baner-box { width: 10%; }
    .maxwt-2 .baner-box { width: 20%; }
    .maxwt-3 .baner-box { width: 30%; }
    .maxwt-4 .baner-box { width: 40%; }
    .maxwt-5 .baner-box { width: 50%; }
    .maxwt-6 .baner-box { width: 60%; }
    .maxwt-7 .baner-box { width: 70%; }
    .maxwt-8 .baner-box { width: 80%; }
    .maxwt-9 .baner-box { width: 90%; }
    .maxwt-0 .baner-box { width: 100%; }

    .maxhm-1 .baner-box { height: 10%; overflow: hidden; }
    .maxhm-2 .baner-box { height: 20%; overflow: hidden; }
    .maxhm-3 .baner-box { height: 30%; overflow: hidden; }
    .maxhm-4 .baner-box { height: 40%; overflow: hidden; }
    .maxhm-5 .baner-box { height: 50%; overflow: hidden; }
    .maxhm-6 .baner-box { height: 60%; overflow: hidden; }
    .maxhm-7 .baner-box { height: 70%; overflow: hidden; }
    .maxhm-8 .baner-box { height: 80%; overflow: hidden; }
    .maxhm-9 .baner-box { height: 90%; overflow: hidden; }
    .maxhm-0 .baner-box { height: 100%; overflow: hidden; }

}




.epb-zone {
  overflow: hidden;
}

.epb-baner__inner {
  position: relative;
  display: block;
}

.epb-static.row,
.epb-slider {
  margin-left: calc(-1 * var(--epb-gap-xs, 0.625rem) / 2) !important;
  margin-right: calc(-1 * var(--epb-gap-xs, 0.625rem) / 2) !important;
}

.epb-static__item,
.epb-slider .swiper-slide {
  padding-left: calc(var(--epb-gap-xs, 0.625rem) / 2) !important;
  padding-right: calc(var(--epb-gap-xs, 0.625rem) / 2) !important;
}

.epb-static__item {
  margin-bottom: var(--epb-gap-xs, 0.625rem);
}

@media (min-width: 576px) {
  .epb-static.row,
  .epb-slider {
    margin-left: calc(-1 * var(--epb-gap-md, 0.625rem) / 2) !important;
    margin-right: calc(-1 * var(--epb-gap-md, 0.625rem) / 2) !important;
  }

  .epb-static__item,
  .epb-slider .swiper-slide {
    padding-left: calc(var(--epb-gap-md, 0.625rem) / 2) !important;
    padding-right: calc(var(--epb-gap-md, 0.625rem) / 2) !important;
  }

  .epb-static__item {
    margin-bottom: var(--epb-gap-md, 0.625rem);
  }
}

@media (min-width: 992px) {
  .epb-static.row,
  .epb-slider {
    margin-left: calc(-1 * var(--epb-gap-lg, 0.625rem) / 2) !important;
    margin-right: calc(-1 * var(--epb-gap-lg, 0.625rem) / 2) !important;
  }

  .epb-static__item,
  .epb-slider .swiper-slide {
    padding-left: calc(var(--epb-gap-lg, 0.625rem) / 2) !important;
    padding-right: calc(var(--epb-gap-lg, 0.625rem) / 2) !important;
  }

  .epb-static__item {
    margin-bottom: var(--epb-gap-lg, 0.625rem);
  }
}

/* Auto szerokość — każda klasa działa TYLKO w swoim przedziale (z !important) */

/* xs: 0-575px */
@media (max-width: 575px) {
.auto-auto {flex: 0 0 auto !important; width: auto !important; max-width: none !important;}
}

/* sm: 576-767px */
@media (min-width: 576px) and (max-width: 767px) {
.auto-sm {flex: 0 0 auto !important; width: auto !important; max-width: none !important;}
}

/* md: 768-991px */
@media (min-width: 768px) and (max-width: 991px) {
.auto-md {flex: 0 0 auto !important; width: auto !important; max-width: none !important;}
}

/* lg: 992-1199px */
@media (min-width: 992px) and (max-width: 1199px) {
.auto-lg {flex: 0 0 auto !important; width: auto !important; max-width: none !important;}
}

/* xl: 1200-1439px */
@media (min-width: 1200px) and (max-width: 1439px) {
.auto-xl {flex: 0 0 auto !important; width: auto !important; max-width: none !important;}
}

/* xxl: 1440px+ */
@media (min-width: 1440px) {
.auto-xxl {flex: 0 0 auto !important; width: auto !important; max-width: none !important;}
}


/* =============================================
 * BOKS Z KATEGORIAMI (element type=2)
 * Startowy CSS — dopracuj wg layoutu sklepu
 * ============================================= */

.epb-catbox {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Obrazek boksu (opcjonalny) */
.epb-catbox__image {
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 8px;
}
.epb-catbox__image-link {
    display: block;
}
.epb-catbox__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Nagłówek boksu (pole "Nagłówek banera") */
.epb-catbox__title {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 600;
}

/* Opis (pole "Treść banera") */
.epb-catbox__desc {
    margin-bottom: .75rem;
    color: #555;
    font-size: .9rem;
}

/* Nazwa kategorii głównej */
.epb-catbox__cat-title {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    font-weight: 600;
}
.epb-catbox__cat-title a {
    color: inherit;
    text-decoration: none;
}
.epb-catbox__cat-title a:hover {
    text-decoration: underline;
}

/* Lista podkategorii */
.epb-catbox__nav { margin-bottom: 1rem; }
.epb-catbox__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.epb-catbox__item {
    border-bottom: 1px solid #eee;
}
.epb-catbox__link {
    display: block;
    padding: .5rem .25rem;
    color: #333;
    text-decoration: none;
    transition: color .15s ease, padding-left .15s ease;
}
.epb-catbox__link:hover {
    color: var(--epb-accent, #2d72d9);
    padding-left: .5rem;
    text-decoration: none;
}

/* Button "Zobacz wszystkie produkty" */
.epb-catbox__all {
    margin-top: auto;
    padding-top: .75rem;
}
.epb-catbox__btn {
    display: inline-block;
}


/* =============================================
 * STREFA TEKSTOWA (element type=3)
 * Startowy CSS — dopracuj wg layoutu sklepu
 * ============================================= */

.epb-textzone {
    height: 100%;
}
.epb-textzone__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.epb-textzone__link:hover {
    text-decoration: none;
}
.epb-textzone__title {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 600;
}
.epb-textzone__content {
    line-height: 1.6;
}


/* =============================================
 * FILM MP4 (element type=1)
 * ============================================= */
.epb-baner__video {
    position: relative;
    display: block;
    line-height: 0;
}
.epb-baner__video-el {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* Okładka click-to-play (gdy autoplay wyłączony + okładka włączona) */
.epb-video-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    cursor: pointer;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.epb-video-cover__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.epb-video-cover__play {
    position: relative;
    z-index: 1;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    transition: background 0.2s ease, transform 0.2s ease;
}
.epb-video-cover__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 13px 0 13px 22px;
    border-color: transparent transparent transparent #fff;
}
.epb-video-cover:hover .epb-video-cover__play {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.05);
}

/* =============================================
 * Film YouTube (element type=4)
 * ============================================= */
.epb-yt {
    position: relative;
    aspect-ratio: 16 / 9;
}
.epb-yt-slot {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.epb-yt-slot .epb-yt-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.epb-yt-text--below {
    position: static;
}
.epb-yt-modal .modal-body {
    padding: 0 !important;
}

/* =============================================
 * BAZOWY STYL TREŚCI BANERA (do nadpisania)
 * .baner-head — niezależnie od tagu (p/h1/h2/h3/h4)
 * .baner-text — treść (p, span, a)
 * Kolor nadpisywany przez .white-text. Rozmiary płynne (clamp).
 * ============================================= */
.baner-module .baner-head {
    font-size: clamp(20px, 3vw, 36px);
    line-height: 1.2;
    font-weight: 700;
    color: #333;
    margin: 0 0 12px;
}
.baner-module .baner-text p,
.baner-module .baner-text span,
.baner-module .baner-text a {
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.6;
    color: #333;
}
.baner-module .baner-text a {
    text-decoration: underline;
}
.baner-module .baner-text p:last-child {
    margin-bottom: 0;
}

/* =============================================
 * WEWNĘTRZNY ODSTĘP BOKSU TREŚCI (padding)
 * Wspólny dla wszystkich rozdzielczości.
 * p10/p20/p30/p40 = 10/20/30/40px
 * ============================================= */
.p10 .baner-box { padding: 10px; }
.p20 .baner-box { padding: 20px; }
.p30 .baner-box { padding: 30px; }
.p40 .baner-box { padding: 40px; }

/* =============================================
 * ANIMACJE ELEMENTÓW (slider + statyczny grid)
 * Znaczniki w "custom_class" elementu.
 * OBRAZEK: animation-1..5 (desktop), animationm-1..5 (mobile) — wjazd + pływanie
 * TEKST (.baner-box): animationtext-1..5, animationtextm-1..5 — sam wjazd
 * 1=lewo 2=prawo 3=góra 4=dół 5=grow
 * Wyzwalanie: slider = .swiper-slide-active (natywnie Swiper), statyczny = .epb-in-view (JS)
 * ============================================= */

@keyframes epbSlideRight {
  0% { transform: translateX(200%); opacity: 0; }
  30% { transform: translateX(-40px); opacity: 0.5; }
  60% { transform: translateX(5px); opacity: 0.75; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes epbSlideLeft {
  0% { transform: translateX(-200%); opacity: 0; }
  30% { transform: translateX(-40px); opacity: 0.5; }
  60% { transform: translateX(5px); opacity: 0.75; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes epbSlideUp {
  0% { opacity: 0; transform: translateY(-100%); }
  60% { opacity: 1; transform: translateY(60px); }
  80% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
@keyframes epbSlideDown {
  0% { opacity: 0; transform: translateY(100%); }
  60% { opacity: 1; transform: translateY(-20px); }
  80% { transform: translateY(30px); }
  100% { transform: translateY(0); }
}
@keyframes epbFloatAndGrow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(2px, -2px) scale(1.02); }
  50% { transform: translate(-2px, 2px) scale(1.02); }
  75% { transform: translate(2px, 2px) scale(1.02); }
}
@keyframes epbGrowBrightenShake {
  0% { transform: scale(0) translate(0,0); opacity: 0; }
  20% { transform: scale(0.2) translate(-3px,-3px); opacity: 0.5; }
  30% { transform: scale(0.3) translate(-3px,-3px); opacity: 0.5; }
  40% { transform: scale(0.4) translate(3px,3px); opacity: 0.7; }
  50% { transform: scale(0.5) translate(3px,3px); opacity: 0.7; }
  60% { transform: scale(0.6) translate(-2px,2px); opacity: 0.9; }
  70% { transform: scale(0.7) translate(-2px,2px); opacity: 0.9; }
  80% { transform: scale(0.9) translate(2px,-2px); opacity: 0.95; }
  100% { transform: scale(1) translate(0,0); opacity: 1; }
}
@keyframes epbSlideLeftNew {
  0% { transform: translateX(-200%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes epbSlideRightNew {
  0% { transform: translateX(200%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes epbSlideTopNew {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes epbSlideBottomNew {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@media (min-width: 576px) {
.swiper-slide-active.animation-1 .epb-baner__inner img,
.epb-in-view.animation-1 .epb-baner__inner img {
    animation: epbSlideLeft 2.5s ease-out, epbFloatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active.animation-2 .epb-baner__inner img,
.epb-in-view.animation-2 .epb-baner__inner img {
    animation: epbSlideRight 2.5s ease-out, epbFloatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active.animation-3 .epb-baner__inner img,
.epb-in-view.animation-3 .epb-baner__inner img {
    animation: epbSlideUp 1s ease-out, epbFloatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active.animation-4 .epb-baner__inner img,
.epb-in-view.animation-4 .epb-baner__inner img {
    animation: epbSlideDown 1s ease-out, epbFloatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active.animation-5 .epb-baner__inner img,
.epb-in-view.animation-5 .epb-baner__inner img {
    animation: epbGrowBrightenShake 0.5s ease-in-out, epbFloatAndGrow 8s ease-in-out 1s infinite;
}
.swiper-slide-active.animationtext-1 .baner-box,
.epb-in-view.animationtext-1 .baner-box {
    opacity: 0; transform: translateX(-100%); animation: epbSlideLeftNew 0.5s ease-out forwards;
}
.swiper-slide-active.animationtext-2 .baner-box,
.epb-in-view.animationtext-2 .baner-box {
    opacity: 0; transform: translateX(100%); animation: epbSlideRightNew 0.5s ease-out forwards;
}
.swiper-slide-active.animationtext-3 .baner-box,
.epb-in-view.animationtext-3 .baner-box {
    opacity: 0; transform: translateY(-100%); animation: epbSlideTopNew 0.6s ease-out forwards;
}
.swiper-slide-active.animationtext-4 .baner-box,
.epb-in-view.animationtext-4 .baner-box {
    opacity: 0; transform: translateY(100%); animation: epbSlideBottomNew 0.6s ease-out forwards;
}
.swiper-slide-active.animationtext-5 .baner-box,
.epb-in-view.animationtext-5 .baner-box {
    animation: epbGrowBrightenShake 0.5s ease-in-out; animation-delay: 0.5s;
}
}

@media (max-width: 575px) {
.swiper-slide-active.animationm-1 .epb-baner__inner img,
.epb-in-view.animationm-1 .epb-baner__inner img {
    animation: epbSlideLeft 1.5s ease-out, epbFloatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active.animationm-2 .epb-baner__inner img,
.epb-in-view.animationm-2 .epb-baner__inner img {
    animation: epbSlideRight 1.5s ease-out, epbFloatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active.animationm-3 .epb-baner__inner img,
.epb-in-view.animationm-3 .epb-baner__inner img {
    animation: epbSlideUp 1s ease-out, epbFloatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active.animationm-4 .epb-baner__inner img,
.epb-in-view.animationm-4 .epb-baner__inner img {
    animation: epbSlideDown 1s ease-out, epbFloatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active.animationm-5 .epb-baner__inner img,
.epb-in-view.animationm-5 .epb-baner__inner img {
    animation: epbGrowBrightenShake 0.3s ease-in-out, epbFloatAndGrow 8s ease-in-out 0.6s infinite;
}
.swiper-slide-active.animationtextm-1 .baner-box,
.epb-in-view.animationtextm-1 .baner-box {
    opacity: 0; transform: translateX(-100%); animation: epbSlideLeftNew 0.5s ease-out forwards;
}
.swiper-slide-active.animationtextm-2 .baner-box,
.epb-in-view.animationtextm-2 .baner-box {
    opacity: 0; transform: translateX(100%); animation: epbSlideRightNew 0.5s ease-out forwards;
}
.swiper-slide-active.animationtextm-3 .baner-box,
.epb-in-view.animationtextm-3 .baner-box {
    opacity: 0; transform: translateY(-100%); animation: epbSlideTopNew 0.6s ease-out forwards;
}
.swiper-slide-active.animationtextm-4 .baner-box,
.epb-in-view.animationtextm-4 .baner-box {
    opacity: 0; transform: translateY(100%); animation: epbSlideBottomNew 0.6s ease-out forwards;
}
.swiper-slide-active.animationtextm-5 .baner-box,
.epb-in-view.animationtextm-5 .baner-box {
    animation: epbGrowBrightenShake 0.5s ease-in-out; animation-delay: 0.5s;
}
}

/* =============================================
 * KOLEKCJA — Wersja 1 (małe produkty)
 * Element type=5, układ col-8 (baner) / col-4 (produkty)
 * ============================================= */
.epb-collection--v1.collection-zone { position: relative; padding: 50px 0; }
.epb-collection--v1.collection-zone:before {
    content: ''; width: 100%; position: absolute; left: 0; top: 0;
    height: 85%; background: #f5f5f5; z-index: -1;
}
.epb-collection--v1 .info-box { padding-right: 0; padding-left: 0; }
.epb-collection--v1 .col-collection-img { width: 100%; height: auto; display: block; }
.epb-collection--v1 .image_title { padding-left: 40px; padding-top: 40px; }
.epb-collection--v1 .collection-text {
    background: #fff; padding: 30px; border-radius: 5px; max-width: 320px;
}
.epb-collection--v1 .collection-text p {
    font-size: 13px; font-weight: 500; margin-bottom: 20px; line-height: 24px;
}
.epb-collection--v1 .prod-box {
    background: #fff; padding-left: 30px; padding-right: 30px;
}
.epb-collection--v1 .baner-head {
    margin-top: 35px; font-size: 20px; font-weight: 600;
    padding-left: 0; margin-bottom: 25px !important;
}
.epb-collection--v1 .more-collections { margin-top: 20px !important; }
.epb-collection--v1 .more-collections .btn-border {
    padding: 10px 16px; font-size: 12px; margin-left: 140px;
}
@media (min-width: 1200px) {
    .epb-collection--v1 .prod-box { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 576px) {
    .epb-collection--v1 .collection-text { max-width: 260px; padding: 25px; }
    .epb-collection--v1 .image_title { padding-left: 25px; padding-top: 25px; }
    .epb-collection--v1 .collection-text p { line-height: 22px; }
    .epb-collection--v1 .collection-text img { max-width: 130px; }
}

/* ===== Kolekcja — Wersja 2 (duże produkty) — CSS STARTOWY (do dopracowania) ===== */
.epb-collection--v2.collection-zone {
    position: relative;
    padding: 60px 0;
    background: #f3ede3;
    overflow: hidden;
}
.epb-collection--v2 .epb-cv2__row { align-items: stretch; }

/* Lewa kolumna: treść + produkty + button */
.epb-collection--v2 .epb-cv2__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 40px;
}
.epb-collection--v2 .epb-cv2__head { text-align: center; margin: 0 0 16px; }
.epb-collection--v2 .epb-cv2__desc {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 30px;
}
.epb-collection--v2 .epb-cv2__products { margin-bottom: 30px; }

/* Button "Zobacz galerię kolekcji" */
.epb-collection--v2 .epb-cv2__btn-wrap { text-align: center; margin-top: 10px; }
.epb-collection--v2 .epb-cv2__btn {
    display: inline-block;
    background: #6b7280;
    color: #fff;
    padding: 14px 32px;
    border-radius: 30px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s;
}
.epb-collection--v2 .epb-cv2__btn:hover { background: #4b5563; color: #fff; }

/* Prawa kolumna: duże zdjęcie pełnej wysokości */
.epb-collection--v2 .epb-cv2__image { padding: 0; }
.epb-collection--v2 .epb-cv2__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tablet/mobile: kolumny pionowo */
@media (max-width: 1199px) {
    .epb-collection--v2 .epb-cv2__image { margin-top: 30px; min-height: 300px; }
}
@media (max-width: 575px) {
    .epb-collection--v2.collection-zone { padding: 40px 0; }
    .epb-collection--v2 .epb-cv2__content { padding: 15px 20px; }
    .epb-collection--v2 .epb-cv2__btn { padding: 12px 24px; }
}

/* ===== Przyciski pod treścią (button_type 1=tekstowy, 2=graficzny) — CSS STARTOWY ===== */
.epb-btn { display: inline-block; margin-top: 14px; cursor: pointer; }
/* Button tekstowy */
.btn-eptext {
    color: #333;
    text-decoration: underline;
    font-weight: 600;
    background: none;
    border: 0;
    padding: 0;
}
.btn-eptext:hover { color: #000; }
/* Button graficzny — bazuje na btn btn-primary z motywu; tu tylko hook do dostrojenia */
.btn-epbaner { margin-top: 14px; }
/* Span pełniący rolę buttona (nie dziedziczy stylu linku motywu) */
span.epb-btn[role="button"] { text-decoration: none; }
span.btn-eptext[role="button"] { text-decoration: underline; }

/* ===== Mozaika (group.type=2) — CSS Grid, bez JS ===== */
.epb-mosaic {
    display: grid;
    grid-template-columns: repeat(var(--epb-m-cols-lg, 3), 1fr);
    gap: var(--epb-m-gap, 15px);
    align-items: start;
}
.epb-mosaic__item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    min-height: 0;
    aspect-ratio: 1 / 1; /* domyślnie kwadrat (1x1) */
}
.epb-mosaic__item--2x1 { grid-column: span 2; aspect-ratio: 2 / 1; }
.epb-mosaic__item--1x2 { aspect-ratio: 1 / 2; }
.epb-mosaic__item--2x2 { grid-column: span 2; aspect-ratio: 1 / 1; }
.epb-mosaic__item--3x1 { grid-column: span 3; aspect-ratio: 3 / 1; }
.epb-mosaic__link { display: block; width: 100%; height: 100%; }
.epb-mosaic__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Film w mozaice wypełnia kafelek tak jak obrazek (niezależnie od natywnych proporcji) */
.epb-mosaic__item .epb-baner__video,
.epb-mosaic__item .epb-video-cover { height: 100%; }
.epb-mosaic__item .epb-baner__video-el { height: 100%; object-fit: cover; }
.epb-mosaic picture { display: block; width: 100%; height: 100%; }
.epb-mosaic__text { padding: 24px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.epb-mosaic__overlay { inset: 0; }

/* Tablet */
@media (max-width: 991px) {
    .epb-mosaic { grid-template-columns: repeat(var(--epb-m-cols-md, 2), 1fr); }
    .epb-mosaic__item--3x1 { grid-column: span 2; aspect-ratio: 2 / 1; }
}
/* Mobile */
@media (max-width: 575px) {
    .epb-mosaic { grid-template-columns: repeat(var(--epb-m-cols-xs, 1), 1fr); }
    /* Przy 1 kolumnie duże kafelki nie mogą jej przekroczyć — proporcje dopasowane */
    .epb-mosaic__item--2x1 { grid-column: span 1; aspect-ratio: 2 / 1; }
    .epb-mosaic__item--2x2 { grid-column: span 1; aspect-ratio: 1 / 1; }
    .epb-mosaic__item--3x1 { grid-column: span 1; aspect-ratio: 3 / 1; }
}

/* ===== Tryb 2: ciasne upakowanie (mosaic_mode=1) — duże kafelki wpuszczają małe obok ===== */
.epb-mosaic--packed {
    grid-auto-rows: 280px;
    grid-auto-flow: dense;
    align-items: stretch;
}
.epb-mosaic--packed .epb-mosaic__item { aspect-ratio: auto; }
.epb-mosaic--packed .epb-mosaic__item--1x2 { grid-row: span 2; }
.epb-mosaic--packed .epb-mosaic__item--2x2 { grid-row: span 2; }
@media (max-width: 991px) {
    .epb-mosaic--packed { grid-auto-rows: 220px; }
}
@media (max-width: 575px) {
    /* Na mobile (1 kolumna) wracamy do proporcji, bez span wierszy */
    .epb-mosaic--packed { grid-auto-rows: auto; }
    .epb-mosaic--packed .epb-mosaic__item { aspect-ratio: 1 / 1; }
    .epb-mosaic--packed .epb-mosaic__item--1x2 { grid-row: span 1; aspect-ratio: 1 / 1; }
    .epb-mosaic--packed .epb-mosaic__item--2x2 { grid-row: span 1; aspect-ratio: 1 / 1; }
    .epb-mosaic--packed .epb-mosaic__item--2x1 { aspect-ratio: 2 / 1; }
    .epb-mosaic--packed .epb-mosaic__item--3x1 { aspect-ratio: 3 / 1; }
}