/**
 * Theme Name:     Blocksy Child
 * Author:         Karolina
 * Author URI:     https://lekkiekwiaty.pl
 * Description:    Blocksy Child Theme dla Lekkie Kwiaty
 * Version:        1.0
 * Template:       blocksy
 * Text Domain:    blocksy-child
 */



body.woocommerce-shop h1.page-title {
    color: #ffffff !important;
}

/* Załaduj czcionkę Lato w grubości 500 i ustaw rozmiar czcionki na 20px */
body, input, label {
    font-family: 'Lato', sans-serif !important;
    font-weight: 500 !important;
    font-size: 20px !important;
}

/* Stylizacja dla etykiet formularza HappyForms */
.happyforms-styles .happyforms-part__label .happyforms-optional, 
.happyforms-styles .happyforms-part__label .label {
    font-family: 'Lato', sans-serif !important;
    font-weight: 500 !important;
    font-size: 18px !important;
}

.uagb-block-0cb5d008 .uagb-heading-text:hover,
.uagb-block-d8ab52c2 .uagb-heading-text:hover {
  color: #DB7256 !important;
  transition: color 0.3s ease;
}

#show-lightbox-btn {
  width: 185px;
  height: 50px;
  background-color: #f4785e;
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

/* ==============================
   NEW YORK FONT - Wszystkie nagłówki
   ============================== */
h1, h2, h3,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-family: 'new-york', sans-serif !important;
    font-weight: 300 !important;
    line-height: 1.2;
}

/* ==============================
   Tytuły produktów w sklepie - Desktop
   ============================== */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: clamp(20px, 2vw, 22px); /* płynne skalowanie między minimalnym a maksymalnym */
}

/* ==============================
   Mobile: max-width 768px
   ============================== */
@media only screen and (max-width: 768px) {

    /* Wszystkie nagłówki poza tytułem strony */
    h1:not(.page-title),
    h2,
    h3 {
        font-family: 'new-york', sans-serif !important;
        font-weight: 300 !important;
    }

    /* Tytuły produktów - mobile */
    .woocommerce ul.products li.product h2.woocommerce-loop-product__title {
        font-size: 18px !important; /* stały, mniejszy font na mobile */
    }
}

.single-product .product_title {
    font-family: 'new-york', sans-serif !important;
    font-weight: 300 !important;
    font-size: clamp(24px, 4vw, 36px); /* płynne skalowanie na desktop */
    line-height: 1.2;
    color: #000; /* dopasuj kolor jeśli trzeba */
}


/* ==============================
   Mobile: max-width 768px
   ============================== */
@media only screen and (max-width: 768px) {
    .single-product .product_title {
        font-size: 28px !important; /* mniejszy font na mobile */
        line-height: 1.2;
    }
}


/* Ustawienie koloru tła #B6B4DA tylko na stronach sklepu i produktów WooCommerce */
body.post-type-archive-product #header [data-row*=middle],
body.tax-product_cat #header [data-row*=middle],
body.single-product #header [data-row*=middle] {
    background-color: #B6B4DA !important;
}

/* Stylizacja .accordion-item na stronach sklepu i produktów WooCommerce */
body.post-type-archive-product .accordion-item,
body.tax-product_cat .accordion-item,
body.single-product .accordion-item {
    border: 1px solid #B6B4DA !important;
    border-radius: 3px !important;
    overflow: hidden;
}

/* ==============================
   CUSTOM SLIDER - STYLIZACJA
   ============================== */

/* Kontener slidera */
.custom-slider .wp-block-uagb-slider {
  width: 100%;
  overflow: visible; /* Pozwala widzieć częściowo następny slajd */
  padding-left: 10px; /* Drobny margines jak na Rituals */
}

/* Pojedynczy slajd w sliderze */
.custom-slider .wp-block-uagb-slide {
  width: 80%; /* Slajdy nie zajmują całej szerokości */
  margin-right: 15px; /* Odstęp między slajdami */
}

/* ==============================
   RESPONSYWNOŚĆ - MOBILE
   ============================== */
@media (max-width: 768px) {
  /* Slajdy na telefonach */
  .custom-slider .wp-block-uagb-slide {
    width: 85%; /* Na telefonach nieco szersze slajdy */
  }
}

/* ==============================
   MAILERLITE ONCLICK FORM - PRZYCISK
   ============================== */

/* Styl podstawowy przycisku */
.ml-onclick-form {
    color: #ffffff; /* Kolor tekstu */
    font-family: "Lato", sans-serif; /* Czcionka */
    font-size: 15px; /* Rozmiar czcionki */
    background-color: transparent; /* Brak tła */
    border: 1px solid #ffffff; /* Białe obramowanie o grubości 1px */
    border-radius: 25px; /* Zaokrąglenie rogów */
    padding: 14px 25px 16px 25px; /* Padding: góra, prawa, dół, lewa */
    cursor: pointer; /* Styl kursora */
    text-align: center; /* Wyrównanie tekstu */
    display: inline-block; /* Poprawne wyświetlanie */
    transition: all 0.3s ease-in-out; /* Płynna animacja */
}

/* ==============================
   MAILERLITE ONCLICK FORM - EFEKT HOVER
   ============================== */

/* Efekt po najechaniu myszką */
.ml-onclick-form:hover {
    background-color: #DB7256; /* Kolor tła po najechaniu */
    border: 1px solid #ffffff; /* Białe obramowanie pozostaje */
}

/* ==========================================
   🎨 STYL SLIDERA – LEKKIE KWIATY Z OVERLAY (FONT LATO)
   ========================================== */

/* 🔹 Kontener slidera */
.slider-lekkiekwiaty {
  position: relative;
  width: 100%;
  min-height: 400px; /* dostosuj do wysokości największego obrazka */
  overflow: hidden;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

/* 🔹 Viewport – wyświetla kafelki w rzędzie */
.slider-lekkiekwiaty .kafel-viewport {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 12px 0;
  scrollbar-width: none;
  justify-content: flex-start;
  flex-wrap: nowrap; /* zapobiega zawijaniu */
}

.slider-lekkiekwiaty .kafel-viewport::-webkit-scrollbar {
  display: none;
}

/* 🔹 Kafelki */
.slider-lekkiekwiaty .kafel-slide {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 33.33%;
  min-width: 250px;
  min-height: 400px; /* w miarę stała wysokość dla wszystkich kafelków */
  position: relative;
  overflow: hidden;
}

/* 🔹 Zdjęcia */
.slider-lekkiekwiaty .kafel-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  vertical-align: middle;
}

/* 🔹 Overlay zaciemniający zdjęcia */
.slider-lekkiekwiaty .kafel-slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  pointer-events: none;
}

/* 🔹 Tytuły przesunięte w górę o 50px, na dole zdjęcia */
.slider-lekkiekwiaty h2 {
  position: absolute;
  bottom: 40px;
  left: 22px;
  font-size: 26px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  z-index: 2;
  pointer-events: none;
}

/* 🔹 Overlay wysuwający się po najechaniu */
.slider-lekkiekwiaty .kafel-slide a::after {
  content: attr(data-overlay);
  position: absolute;
  bottom: -40px;       /* start ukryty */
  left: 0;
  width: 100%;
  height: 40px;        /* faktyczna wysokość overlay */
  background: #b4b3e2;
  color: #ffffff;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 16px;     /* mniejszy font, dopasowany do wysokości */
  display: flex;
  align-items: flex-start; /* tekst przy górze */
  justify-content: flex-start;
  text-align: left;
  transition: bottom 0.3s ease, opacity 0.3s ease;
  padding: 2px 10px;   /* mniejszy padding */
  box-sizing: border-box;
  z-index: 3;
  opacity: 0.95;
}


.slider-lekkiekwiaty .kafel-slide:hover a::after {
  bottom: 0; /* wysuwanie overlay */
}

/* 🔹 Strzałki slidera – ikona wyżej w przycisku */
.slider-lekkiekwiaty .kafel-btn {
  position: absolute;
  top: 50%; /* pozycja przycisku */
  z-index: 9999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #B6B4DA;
  color: #fff;
  font-size: 36px;
  font-weight: 100;
  line-height: 1;
  display: flex;
  align-items: flex-start; /* ikona w górnej części przycisku */
  justify-content: center;
  border: 1px solid #fff;
  padding-top: 8px; /* przesunięcie ikony w górę */
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: background 0.2s ease, color 0.2s ease;
}



.slider-lekkiekwiaty .kafel-btn:hover {
  background: #EC917D;
  color: #fff;
}

.slider-lekkiekwiaty .kafel-btn--prev { left: 30px; }
.slider-lekkiekwiaty .kafel-btn--next { right: 30px; }

/* 🔹 Tablet (601–900px) */
@media (max-width: 900px) {
  .slider-lekkiekwiaty .kafel-slide {
    width: 50%;
    min-width: 200px;
  }
}

/* 🔹 Mobile (≤600px) */
@media (max-width: 600px) {
  .slider-lekkiekwiaty .kafel-slide {
    width: 80%;
    min-width: 180px;
  }
  .slider-lekkiekwiaty h2 {
    font-size: 22px;
    bottom: 50px;
    left: 12px;
  }
  .slider-lekkiekwiaty .kafel-btn {
    top: 50%;
    width: 45px;
    height: 45px;
    font-size: 24px;
    border: 1px solid #fff;
  }
  .slider-lekkiekwiaty .kafel-btn--prev { left: 15px; }
  .slider-lekkiekwiaty .kafel-btn--next { right: 15px; }
}




/* ==============================
   GALERIA - KONFIGURACJA OGÓLNA
   ============================== */

/* Galeria - kontener */
.my-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 zdjęcia w wierszu na dużych ekranach */
  gap: 20px;
  width: 100%;
  margin: 40px 0;
}

/* ==============================
   ELEMENTY GALERII
   ============================== */

/* Pojedynczy element galerii */
.my-gallery-item {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5; /* proporcje zdjęcia */
  overflow: hidden;
  border-radius: 0px;
  cursor: pointer;
}

/* Pojedynczy element galerii - modyfikacja mateusza*/
.my-gallery-item-mos {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 6; /* proporcje zdjęcia */
  overflow: hidden;
  border-radius: 0px;
  cursor: pointer;
}

/* Zdjęcia w galerii */
.my-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s, filter 0.3s;
  display: block;
}

/* ==============================
   NAKŁADKA
   ============================== */

/* Nakładka - domyślnie niewidoczna */
.my-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(180, 179, 226, 0.8); /* lekko przezroczysta nakładka */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0; /* niewidoczna na start */
  transition: opacity 0.3s;
  padding: 10px;
}

/* Pojawienie się nakładki na hover */
.my-gallery-item:hover .my-overlay {
  opacity: 1; /* nakładka tylko na hover */
}

/* Pojawienie się nakładki na hover - modyfikacja mateusza*/
.my-gallery-item-mos:hover .my-overlay {
  opacity: 1; /* nakładka tylko na hover */
}

/* Tekst na nakładce */
.my-overlay span {
  color: #fff; /* zawsze biały */
  font-weight: 600;
  font-size: 16px;
  z-index: 2;
}

/* Efekt hover dla zdjęcia */
.my-gallery-item:hover img {
  filter: brightness(70%); /* przyciemnienie zdjęcia */
  transform: scale(1.05);   /* lekkie powiększenie */
}

/* Efekt hover dla zdjęcia - modyfikacja mateusza*/
.my-gallery-item-mos:hover img {
  filter: brightness(70%); /* przyciemnienie zdjęcia */
  transform: scale(1.05);   /* lekkie powiększenie */
}

/* ==============================
   RESPONSYWNOŚĆ
   ============================== */

/* Tablet: 2 zdjęcia w wierszu */
@media (max-width: 1024px) {
  .my-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

/* Telefon: 1 zdjęcie w wierszu */
@media (max-width: 600px) {
  .my-gallery {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ==============================
   DRUGA GALERIA - KONFIGURACJA OGÓLNA
   ============================== */

/* Druga galeria - kontener */
.second-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 zdjęcia w wierszu na dużych ekranach */
  gap: 20px;
  width: 100%;
  margin: 40px 0;
}

/* ==============================
   ELEMENTY GALERII
   ============================== */

/* Pojedynczy element galerii */
.second-gallery .my-gallery-item {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5; /* wysokie zdjęcia */
  overflow: hidden;
  border-radius: 0px;
  cursor: pointer;
}

/* Zdjęcia w galerii */
.second-gallery .my-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s, filter 0.3s; /* efekt płynnego zoom */
  display: block;
}

/* ==============================
   NAKŁADKA
   ============================== */

/* Nakładka - domyślnie niewidoczna */
.second-gallery .my-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(180, 179, 226, 0.8); /* lekko przezroczysta nakładka */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0; /* nakładka tylko na hover */
  transition: opacity 0.3s;
  padding: 10px;
}

/* Pojawienie się nakładki po hover */
.second-gallery .my-gallery-item:hover .my-overlay {
  opacity: 1;
}

/* Tekst na nakładce */
.second-gallery .my-overlay span {
  color: #fff; /* napis zawsze biały */
  font-weight: 600;
  font-size: 16px;
  z-index: 2;
}

/* Efekt hover dla zdjęcia: zoom + przygaszenie */
.second-gallery .my-gallery-item:hover img {
  filter: brightness(70%); /* przyciemnienie zdjęcia */
  transform: scale(1.05);   /* efekt lekkiego powiększenia (zoom) */
}

/* ==============================
   RESPONSYWNOŚĆ
   ============================== */

/* Tablet: 2 zdjęcia w wierszu */
@media (max-width: 1024px) {
  .second-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

/* Telefon: 1 zdjęcie w wierszu */
@media (max-width: 600px) {
  .second-gallery {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ==============================
   RESPONSYWNE PRODUKTY SKLEPU
   ============================== */

/* Kontener produktów */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px; /* odstępy między produktami */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Pojedynczy produkt */
.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Obrazek i info zachowują proporcje */
.woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Tablet / mniejsze ekrany */
@media (max-width: 1024px) {
    .woocommerce ul.products {
        gap: 20px;
    }
}

/* Telefon */
@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr; /* jeden produkt w wierszu */
        gap: 15px;
    }
}

/* ==============================
   PayU - Mini Installments Widget
   ============================== */

/* Link "Zapłać później" */
.payu-mini-installments-widget a.payu-widget-installments-mini {
    font-family: 'Poppins', sans-serif !important; /* Czcionka Poppins */
    font-size: 14px !important;                     /* Rozmiar 14px */
    color: #000000 !important;                      /* Czarny tekst */
    text-decoration: underline !important;         /* Podkreślenie */
    text-decoration-color: #DB7256 !important;     /* Kolor podkreślenia */
    text-decoration-thickness: 1px !important;     /* Grubość podkreślenia */
    font-weight: normal !important;
    cursor: pointer;
}

/* Cena w widgetcie */
.payu-mini-installments-widget .payu-mini-installments-widget-amount {
    font-family: 'Poppins', sans-serif !important; /* Czcionka Poppins */
    font-size: 14px !important;                     /* Rozmiar 14px */
    color: #000000 !important;                      /* Czarny tekst */
    font-weight: normal !important;
}

/* Ukrycie oryginalnych SVG */
.ct-product-additional-info .ct-icon-container svg {
    display: none !important;
}

/* PNG zamiast SVG - większa ikona, mniejsze tło */
.ct-product-additional-info .ct-icon-container {
    display: inline-block;
    width: 45px;  
    height: 45px; 
    background-color: #fff; /* białe tło */
    border-radius: 50%; /* okrągłe tło */
    background-image: url('https://lekkiekwiaty.pl/wp-content/uploads/2025/04/Grafika-03_2.png');
    background-size: 80% auto; /* większa ikona, proporcjonalna */
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0; 
}

/* Odstęp między ikoną a tekstem */
.ct-product-additional-info .ct-label {
    margin-left: 10px;
}

/* Tekst Poppins 14px czarny */
.ct-product-additional-info {
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    color: #000 !important;
}

/* ==============================
   Pogrubione elementy w short description produktów
   ============================== */
.woocommerce-product-details__short-description strong {
    color: #db7256 !important;
}

body.post-type-archive-product .accordion-item,
body.tax-product_cat .accordion-item,
body.single-product .accordion-item {
    border: 2px solid #B6B4DA !important; /* grubszy border */
    border-radius: 0 !important;          /* brak zaokrągleń */
    overflow: hidden;
}

/* ==============================
   Styl dla rozwijanego contentu wewnątrz accordion / short content
   ============================== */
.wb_cptb_content {
    padding-left: 0 !important;   /* usuwa padding po lewej */
    padding-right: 0 !important;  /* usuwa padding po prawej, jeśli chcesz */
    margin-bottom: -10px;           /* mały odstęp na dole */
}

/* Kolor tekstu w rozwijanej liście */
#kwota option {
    color: #205c9e;
}

/* Placeholder w kolorze domyślnym (szary) */
#kwota option:first-child {
    color: #999999;
}

/* ==============================
   Checkout mobile - teksty 14px czarne
   ============================== */
@media (max-width: 768px) {
    /* Opisy kroków */
    .wc-block-components-checkout-step__description,
    .wc-block-components-checkout-step__description p {
        font-family: 'Inter', sans-serif !important;
        font-size: 14px !important;
        color: #000 !important;
    }

    /* Checkboxy i etykiety */
    .wc-block-components-checkbox__label,
    .wc-block-components-checkbox__description,
    .wc-block-components-checkbox__label p,
    .wc-block-components-checkbox__description p {
        font-family: 'Poppins', sans-serif !important;
        font-size: 14px !important;
        color: #000 !important;
    }
}

/* ==============================
   Tekst przy newsletter checkbox - mobile
   ============================== */
@media (max-width: 768px) {
    /* Jeśli tekst jest w label dla checkboxa */
    #woo_ml_subscribe + span,
    #woo_ml_subscribe + label {
        font-family: 'Inter', sans-serif !important;
        font-size: 14px !important;
        color: #000 !important;
    }
}

/* ==============================
   Teksty metod płatności w checkout
   ============================== */
.wc-block-components-payment-method-label,
.wc-block-components-payment-method-description {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: #000 !important; /* jeśli chcesz czarny tekst */
}

.wc-block-components-checkout-order-summary__title-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: #000 !important;
}

/* ==============================
   Breadcrumbs AIOSEO - font Inter 12px, aktywny kolor #b4b3e2
   ============================== */
.aioseo-breadcrumbs,
.aioseo-breadcrumbs a,
.aioseo-breadcrumbs span {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: #000 !important; /* domyślny kolor tekstu */
}

/* Aktywny element / ostatni w breadcrumbs */
.aioseo-breadcrumbs .aioseo-breadcrumb:last-child {
    color: #b4b3e2 !important;
}

/* ==============================
   Nazwy produktów w checkout / produkty - Inter 400
   ============================== */
.wc-block-components-product-name {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
	font-size: 20px;
}

/* ==============================
   Nazwy produktów w checkout / produkty - Inter 400
   ============================== */
.wc-block-components-product-name {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 20px;
}

/* Mobilnie - do 768px */
@media (max-width: 768px) {
    .wc-block-components-product-name {
        font-size: 14px !important;
    }
}

/* ==============================
   Link "Zaloguj się" w checkout - tło + biały + Inter 400
   ============================== */
.wc-block-checkout__login-prompt {
    background-color: #db7256 !important; /* tło */
    color: #fff !important;               /* biały tekst */
    font-family: 'Inter', sans-serif !important; /* font Inter */
    font-size: 10px !important; 
    font-weight: 400 !important;          /* wagę 400 */
    padding: 6px 10px;                    /* padding dla przyciskowego wyglądu */
    border-radius: 4px;                   /* zaokrąglenie rogów */
    display: inline-block;                /* aby padding zadziałał poprawnie */
    text-decoration: none !important;     /* usuwa podkreślenie */
}

/* Mobilnie - mniejszy font 9px + przesunięcie w górę */
@media (max-width: 768px) {
    .wc-block-checkout__login-prompt {
        font-size: 9px !important;
        margin-top: -32px !important; /* dodajemy !important */
        display: inline-block !important; /* upewniamy się, że block/inline-block */
    }
}

/* ==============================
   Kafelki oferty - równa wysokość
   ============================== */
.wp-block-columns.alignfull.is-layout-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 20px !important;
    align-items: stretch; /* wymusza jednakową wysokość kolumn */
}

.wp-block-columns.alignfull.is-layout-flex .wp-block-column {
    display: flex !important;
    flex-direction: column; /* aby przyciski były na dole kolumny */
    justify-content: space-between; /* nagłówek na górze, przycisk na dole */
    flex: 1 1 calc(33.333% - 20px) !important; /* desktop */
    max-width: calc(33.333% - 20px) !important;
    min-width: 280px !important;
    box-sizing: border-box !important;
}

/* Tablet i Mobile: 1 kolumna */
@media (max-width: 1024px) {
    .wp-block-columns.alignfull.is-layout-flex .wp-block-column {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* Wyśrodkowanie przycisków w kafelkach */
.wp-block-uagb-marketing-button {
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

/* ==============================
   Hover: tło z czarną nakładką i obrazkiem
   ============================== */
.wp-block-columns.alignfull.is-layout-flex .wp-block-column > .wp-block-uagb-container {
    position: relative;
    transition: background 0.4s ease;
    overflow: hidden;
}

/* Nakładka */
.wp-block-columns.alignfull.is-layout-flex .wp-block-column > .wp-block-uagb-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.35); /* lekka czarna nakładka */
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

/* Hover - obrazki i pokazanie nakładki */
.wp-block-columns.alignfull.is-layout-flex .wp-block-column:nth-child(1) > .wp-block-uagb-container:hover {
    background-image: url('https://lekkiekwiaty.pl/wp-content/uploads/2025/11/Lekkie-Kwiaty_2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.wp-block-columns.alignfull.is-layout-flex .wp-block-column:nth-child(2) > .wp-block-uagb-container:hover {
    background-image: url('https://lekkiekwiaty.pl/wp-content/uploads/2025/11/Lekkie-Kwiaty_3.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.wp-block-columns.alignfull.is-layout-flex .wp-block-column:nth-child(3) > .wp-block-uagb-container:hover {
    background-image: url('https://lekkiekwiaty.pl/wp-content/uploads/2025/11/Voucher-podarunkowy_1-scaled.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Pokazanie nakładki przy hover */
.wp-block-columns.alignfull.is-layout-flex .wp-block-column > .wp-block-uagb-container:hover::after {
    opacity: 1;
}

/* Treść kafelka nad tłem i nakładką */
.wp-block-columns.alignfull.is-layout-flex .wp-block-column > .wp-block-uagb-container > * {
    position: relative;
    z-index: 2; /* tekst i przyciski nad tłem i nakładką */
}

/* ==============================
   Responsywne kafelki Voucher - układ (bez hover)
   ============================== */

/* Kontener główny kafelków - desktop */
.uag-blocks-common-selector.uagb-block-e76ea8ae.alignfull {
    display: flex;
    gap: 20px; /* odstęp między kafelkami */
    align-items: stretch; /* wymusza równą wysokość kafelków */
    flex-wrap: wrap;
    padding-left: 100px !important;  /* desktop padding */
    padding-right: 100px !important;
}

/* Pojedynczy kafelek */
.uag-blocks-common-selector.uagb-block-e76ea8ae.alignfull > .wp-block-uagb-container {
    flex: 1 1 calc(50% - 10px); /* 2 kafelki obok siebie na desktopie */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Wewnętrzny kontener - równomierna wysokość zawartości */
.uag-blocks-common-selector.uagb-block-e76ea8ae.alignfull > .wp-block-uagb-container > .wp-block-uagb-container {
    flex-grow: 1;
    position: relative;
    z-index: 2; /* tekst i przyciski nad tłem */
}

/* === Tablet: max 1024px - jedna kolumna, pełna szerokość, padding 40px === */
@media only screen and (max-width: 1024px) {
    .uag-blocks-common-selector.uagb-block-e76ea8ae.alignfull {
        gap: 15px;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .uag-blocks-common-selector.uagb-block-e76ea8ae.alignfull > .wp-block-uagb-container {
        flex: 1 1 100%; /* każdy kafelek na całą szerokość */
        max-width: none;
    }
}

/* === Mobile: max 768px - jedna kolumna, mniejszy gap, padding 18px === */
@media only screen and (max-width: 768px) {
    .uag-blocks-common-selector.uagb-block-e76ea8ae.alignfull {
        gap: 10px;
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}


/* Obrazek w tej sekcji – responsywny */
.wp-block-uagb-container.uagb-block-970109e5 img.uag-image-2900 {
    width: 100%;       /* dopasowuje szerokość do kontenera */
    height: auto;      /* zachowuje proporcje */
    max-width: 100%;   /* nigdy nie wychodzi poza kontener */
    display: block;
}
.wp-block-uagb-container.uagb-block-970109e5 figure.wp-block-uagb-image__figure {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Tablet i Mobile: obraz nad tekstem, marginesy dla tekstu */
@media (max-width: 1024px) {

  /* Kontener z obrazem - pełna szerokość, bez marginesów */
  .uagb-block-72d84a4f {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .uagb-block-72d84a4f img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* Kontener z tekstem - margines 50px po bokach */
  .uagb-block-613bd727 {
    width: 100% !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    box-sizing: border-box;
  }
}

/* 🔹 Premium Animated Heading */
.uagb-heading-text {
  display: inline-block;
  opacity: 0;
  transform: scale(0.95);
  animation: headingFadeZoom 1s ease forwards;
  font-family: 'Lato', sans-serif; /* lub Twój font */
  font-weight: 700; /* pogrubienie */
  font-size: 36px;  /* dopasuj do potrzeby */
}

/* Fade + Zoom całości */
@keyframes headingFadeZoom {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 🔹 Pojedyncze litery */
.uagb-heading-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: letterFadeIn 0.8s forwards;
}

@keyframes letterFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 🔹 Responsywne zdjęcie Olga – uag-image-185 */
.uag-image-185 {
    width: 100%;        /* dopasowuje szerokość do kontenera */
    height: auto;       /* zachowuje proporcje */
    max-width: 100%;    /* nie wychodzi poza kontener */
    display: block;
}

/* 🔹 Kontener obrazka – usuwa marginesy, dopasowuje do szerokości */
.uagb-block-623c7fe4 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 🔹 Tablet i Mobile – obraz nad tekstem, pełna szerokość */
@media (max-width: 1024px) {
    .uag-image-185 {
        width: 100% !important;
        height: auto !important;
    }
    .uagb-block-623c7fe4 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
}

#offcanvas .ct-toggle-close {
    position: absolute !important; /* upewniamy się, że można przesuwać */
    transform: translateX(-14px) !important; /* przesunięcie w prawo o 40px */
}