/*
Theme Name: VINOVE
Theme URI:  https://www.efektiwa.pl
Author:     Mirosław Tarasiewicz
Author URI: https://www.efektiwa.pl
Description: Najszybszy szablon
Version: 1.0
Template: twentytwentyfive
License:    GNU General Public License v2 or later
*/

.odstep-gorny-menu {
    margin-top: auto;
}

/* UKRYJ */
.ukryj {
	display: none;
}

/* Efekt hover - szare na kolorowe dla karuzeli - start */
/* Efekt tylko dla sliderów z klasą .szarosc-hover */
.szarosc-hover .wp-block-cb-slide-v2 img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.4s ease;
}

.szarosc-hover .wp-block-cb-slide-v2:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
}
/* Efekt hover - szare na kolorowe dla karuzeli - koniec */

body.page-template-wp-custom-template-zapach main.wp-block-group.has-global-padding.is-layout-constrained {
    margin-top: 0px !important;
}

/* UNIWERSALNY STYL AKTYWNEGO ZAPACHU - DLA WSZYSTKICH STRON /zapachy/* - start*/
/* === SYSTEM ZAPACHÓW - ULEPSZONY === */

/* 1. CHEVRONY W SZAROŚCI */
.cb-carousel-block .cb-button-prev,
.cb-carousel-block .cb-button-next {
    transition: all 0.3s ease !important;
    color: #ffffff50;
}

.cb-carousel-block .cb-button-prev:hover,
.cb-carousel-block .cb-button-next:hover {
    color: #ffffff50;
    transform: scale(1.25) !important;
}

.cb-carousel-block .cb-button-prev::after,
.cb-carousel-block .cb-button-next::after {
    font-size: 55px !important;
    color: #ffffff50;
    font-weight: 300 !important;
}

/* 2. HOVER EFFECT TYLKO Z KLASĄ .szarosc-hover */
/* POPRAWIONE POWIĘKSZENIE - TYLKO GRAFIKA */
.szarosc-hover .wp-block-cb-slide-v2 {
    position: relative;
}

.szarosc-hover .wp-block-cb-slide-v2 img {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(1);
    border: none !important;
    /* Zapewnij że tylko obrazek się powiększa */
    display: block;
    margin: 0 auto;
}

.szarosc-hover .wp-block-cb-slide-v2:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.8); /* POWIĘKSZENIE TYLKO OBRAZKA */
    border: none !important;
    /* USUŃ WSZELKIE CIENIE I RAMKI */
    box-shadow: none !important;
    outline: none !important;
    /* Zapobiegaj przesuwaniu sąsiednich elementów */
    position: relative;
    z-index: 100;
}

/* Zapobiegaj powiększaniu się kontenera */
.szarosc-hover .wp-block-cb-slide-v2:hover {
    transform: none !important;
}

/* 3. AKTYWNY ZAPACH - NA ŚRODKU */
/* AKTYWNY ZAPACH - TYLKO POWIĘKSZENIE I KOLOR */
.cb-carousel-block img.fragrance-active {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    transform: scale(1.4) !important; /* POWIĘKSZENIE */
    /* USUŃ WSZELKIE RAMKI I CIENIE */
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    /* Pozostałe style */
    z-index: 50;
    position: relative;
    transition: all 0.4s ease !important;
}

/* Wyłącz efekt hover dla aktywnego */
.szarosc-hover .wp-block-cb-slide-v2 img.fragrance-active:hover {
    transform: scale(1.4) !important; /* Zostaw takie samo powiększenie */
    filter: grayscale(0%) !important; /* Zostaw kolor */
}

/* Responsywność */
@media (max-width: 768px) {
    .szarosc-hover .wp-block-cb-slide-v2:hover img {
        transform: scale(1.25);
    }
    
    .cb-carousel-block img.fragrance-active {
        transform: scale(1.15) !important;
    }
}

/* POPRAWKI DLA KARUZELI - LEPSZE CENTROWANIE */
/* WYMUSZONE CENTROWANIE KARUZELI */
.cb-carousel-block .swiper-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.cb-carousel-block .swiper-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* Aktywny slajd - wyśrodkowany wizualnie */
.cb-carousel-block img.fragrance-active {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    transform: scale(1.4) !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 50;
    /* Wymuś wyśrodkowanie */
    margin: 0 auto !important;
    display: block !important;
}

/* PŁYNNIEJSZE ANIMACJE */
.cb-carousel-block .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.szarosc-hover .wp-block-cb-slide-v2 img {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.cb-carousel-block img.fragrance-active {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
/* UNIWERSALNY STYL AKTYWNEGO ZAPACHU - DLA WSZYSTKICH STRON /zapachy/* - koniec */

/* linia przed i za tekstem - start */
.responsive-lines {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 800px;
  margin: 30px auto;
  text-align: center;
  font-weight: 200;
  color: #878b8f;
  cursor: pointer;
}

.responsive-lines::before,
.responsive-lines::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.5s ease;
}

/* Kreski startują jako widoczne */
.responsive-lines::before,
.responsive-lines::after {
  transform: scaleX(1);
}

/* Po najechaniu kreski znikają i wracają */
.responsive-lines:hover::before {
  transform: scaleX(0);
  transform-origin: left center;
}

.responsive-lines:hover::after {
  transform: scaleX(0);
  transform-origin: right center;
}

.responsive-lines:hover::before,
.responsive-lines:hover::after {
  transition-delay: 0.1s;
}

/* WERSJA DLA GRAFIKI - KRESKI PO BOKACH */
/* GŁÓWNY STYL DLA GRAFIKI */
.responsive-lines-img {
  display: flex !important;
  align-items: center !important;
  gap: 30px !important;
  max-width: 900px !important;
  margin: 50px auto !important;
  cursor: pointer;
  position: relative;
}

.responsive-lines-img::before,
.responsive-lines-img::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background-color: #333 !important;
  transition: all 0.3s ease !important;
}

.responsive-lines-img:hover::before,
.responsive-lines-img:hover::after {
  height: 2px !important;
  /* USUNIĘTA: background-color: #000 !important; */
}

.responsive-lines-img img {
  transition: transform 0.3s ease !important;
}

.responsive-lines-img:hover img {
  transform: scale(1.05) !important;
}

/* RESPONSYWNOŚĆ */
@media (max-width: 768px) {
  .responsive-lines-img {
    flex-direction: column !important;
    gap: 20px !important;
    margin: 30px 20px !important;
  }
}
/* linia przed i za tekstem - koniec */

.off {
	display: none;
}

/* Centrowanie elementów siatki w CSS - start */
/* Dla konkretnego kontenera z twojego kodu */

    /* ZAMIANA: z .wp-container-core-group-is-layout-099f7769 na .moja-siatka-grid */
    .moja-siatka-grid.wp-block-group-is-layout-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 20px !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
    }
    
    /* Każdy boks - 9 kolumn na 1400px */
    .moja-siatka-grid > .wp-block-group.is-vertical {
        flex: 0 0 calc(11.11% - 10px) !important; /* 100% / 9 = 11.11% */
        box-sizing: border-box !important;
        min-width: 140px !important; /* Minimalna szerokość */
        max-width: 155px !important; /* Maksymalna szerokość */
    }
	
	    /* Wewnątrz każdego boksu użyj grid dla precyzyjnego układu */
    .moja-siatka-grid > .wp-block-group.is-vertical {
        display: grid !important;
        grid-template-rows: 1fr auto !important; /* Pierwszy obraz zajmuje dostępne miejsce, drugi ma auto */
        align-items: start !important; /* Wyrównanie do góry */
        justify-items: center !important;
        padding: 5px !important;
        gap: 2px !important;
        height: auto !important;
        min-height: unset !important;
    }
    
    /* Kontener dla dużego obrazu */
    .moja-siatka-grid .wp-container-content-b83b6736 {
        height: 170px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Kontener dla logo */
    .moja-siatka-grid .wp-container-content-6e7a3b65 {
        height: 35px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
	
/* Centrowanie elementów siatki w CSS - koniec */