/* Gaya frontpage – extracted styles for homepage sections */


/* =========================================================
 * FRONT PAGE – GAYA (MAKIETA 1:1)
 * ======================================================= */

.frontpage {
    font-family: inherit;
    color: #111111;
    background: #ffffff;
}

/* Podstawowy kontener — Kadence domyślnie centruje */

/* Ogólne sekcje */
.frontpage .section {
    position: relative;
    padding: 96px 0;
    background-color: #ffffff;
}

@media (max-width: 991px) {
    .frontpage .section {
        padding: 72px 0;
    }
}
@media (max-width: 767px) {
    .frontpage .section {
        padding: 56px 0;
    }
}

/* ---------------------------------
 * TYPOGRAFIA SEKCJI
 * --------------------------------- */

.frontpage .section-header {
    margin-bottom: 40px;
}
.frontpage .section-header--center {
    text-align: center;
}

.frontpage .section-title {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 12px;
}

.frontpage .section-subtitle {
    font-size: 15px;
    line-height: 1.7;
    color: #666666;
    margin: 0 auto;
    max-width: 520px;
}

/* ---------------------------------
 * BUTTONY (kolory z makiety)
 * --------------------------------- */

.frontpage .btn,
.frontpage .button,
.frontpage a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Ciemny przycisk (np. “Poznaj nas lepiej”) */
.frontpage .btn-dark,
.frontpage .btn-main {
    background-color: #111111;
    color: #ffffff;
    border-color: #111111;
}
.frontpage .btn-dark:hover,
.frontpage .btn-main:hover {
    background-color: #333333;
}

/* Obrysowany (np. “Zobacz więcej produktów”) */
.frontpage .btn-outline {
    background-color: #ffffff;
    color: #111111;
    border-color: #111111;
}
.frontpage .btn-outline:hover {
    background-color: #111111;
    color: #ffffff;
}
/* HERO SLIDER – slider_front1 – tło cover na całą szerokość */

.gaya-hero-slider {
    position: relative;
    padding: 0;
    overflow: hidden;
}

/* pojedynczy slajd – tło z butelkami */
.gaya-hero-slide {
    position: relative;
    min-height: 520px;
    background-color: #f3f0fb;          /* pastel bazowy */
    background-repeat: no-repeat;
    background-size: cover;             /* TU robimy cover */
    background-position: right top;     /* produkty widoczne w całości */
}

/* delikatny overlay żeby tekst był czytelny */
.gaya-hero-slide__overlay {
    position: relative;
    width: 100%;
    height: 100%;
}

/* kontener treści jak w makiecie */
.gaya-hero-slide__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.gaya-hero-slide__content {
    max-width: 480px;
}

.gaya-hero-slide__title {
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    line-height:1.05;
    font-weight:500;
    color:#222;
}

.gaya-hero-slide__btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 12px 28px;
    margin-top:30px;
    border-radius:999px;
    background:#111;
    color:#fff;
    font-size:0.95rem;
    text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.gaya-hero-slide__btn:hover,
.gaya-hero-slide__btn:focus,
.gaya-hero-slide__btn:visited {
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,.15);
    background:#000;
    color:#fff;
}

/* usuwamy starą kolumnę z obrazkiem */
.gaya-hero-slide__image,
.gaya-hero-slide__image img {
    display: none !important;
}

/* STRZAŁKI – jeśli używasz .gaya-arrow jak ustalaliśmy */

#gaya-hero-slider .gaya-hero-slider__arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    pointer-events: none;
}

#gaya-hero-slider .gaya-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    pointer-events: auto;
    z-index: 20;
}

#gaya-hero-slider .gaya-arrow--prev {
    left: 40px;
    background-image: url('/wp-content/themes/gaya-child/assets/img/slider-lewa.png');
}

#gaya-hero-slider .gaya-arrow--next {
    right: 40px;
    background-image: url('/wp-content/themes/gaya-child/assets/img/slider-prawa.png');
}

/* MOBILE – hero */

@media (max-width: 768px) {
  .gaya-hero-slide {
      min-height: 480px;
      background-position: center top;
  }

  .gaya-hero-slide__inner {
      padding: 72px 20px 40px;
  }

  .gaya-hero-slide__title {
      font-size: 2rem;
  }

  #gaya-hero-slider .gaya-arrow {
      width: 40px;
      height: 40px;
  }
  #gaya-hero-slider .gaya-arrow--prev {
      left: 16px;
  }
  #gaya-hero-slider .gaya-arrow--next {
      right: 16px;
  }
}


/* =========================================================
 * BESTSELLERY
 * ======================================================= */

.frontpage .section-bestsellers {
    padding-top: 88px;
    padding-bottom: 96px;
    background: #ffffff;
}

.frontpage .section-bestsellers .section-header {
    margin-bottom: 32px;
}
.frontpage .section-bestsellers .section-title {
    font-size: 32px;
}

.frontpage .products-wrap {
    margin-top: 8px;
}

/* panel z produktami na jasnym tle */
.frontpage .section-bestsellers .products-grid {
    background: #f8f8f8;
    padding: 40px 48px 28px;
    box-shadow: none;
}

@media (max-width: 991px) {
    .frontpage .section-bestsellers .products-grid {
        padding: 32px 28px 24px;
    }
}

.frontpage .section-bestsellers ul.products {
    margin: 0 auto !important;
}

/* “Zobacz więcej produktów” pod kartą */
.frontpage .products-more {
    text-align: center;
    margin-top: 24px;
}
.frontpage .products-more .btn-outline {
    padding-inline: 40px;
    background-color: #c3e0ba !important;
    color: #151515;
    border-color: #c3e0ba !important;
}
.frontpage .products-more .btn-outline:hover {
    background-color: #b5d6aa !important;
    color: #151515;
    border-color: #b5d6aa !important;
}

/* =========================================================
 * MAŁE GESTY / O NAS – DUŻA BIAŁA KARTA
 * ======================================================= */

.frontpage .section-story {
    background: #f7f7f7; /* lekko szare tło sekcji */
    padding-top: 96px;
    padding-bottom: 96px;
}

/* biała karta 2-kolumnowa, jak na makiecie */
.frontpage .story-layout {
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0,0,0,0.06);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-column-gap: 64px;
    align-items: center;
}

@media (max-width: 991px) {
    .frontpage .story-layout {
        grid-template-columns: 1fr;
        grid-row-gap: 32px;
        padding: 32px 28px 36px;
    }
}

/* obraz po lewej */
.frontpage .story-media {
    position: relative;
    text-align: center;
}
.frontpage .story-figure {
    margin: 0;
    overflow: hidden;
}
.frontpage .story-figure img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* tekst po prawej */
.frontpage .story-content .section-title {
    font-size: 28px;
    margin-bottom: 6px;
}
.frontpage .story-subbrand {
    margin: 6px 0 18px;
}
.frontpage .story-wecare-logo {
    height: 16px;
    width: auto;
}
.story-content {text-align:center;}
.frontpage .story-content p {
    font-size: 15px;
    line-height: 1.8;
    color: #555555;
	 text-align: center;
    max-width: 420px;
}
.frontpage .story-content * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.frontpage .story-content .btn-dark {
    margin-top: 22px;
}

/* =========================================================
 * 3 PROSTE KROKI – ikony PNG, 3 kolumny na desktopie
 * ======================================================= */

.frontpage .section-steps {
    background: #ffffff;
    text-align: center;
    padding: 96px 0;
}

.frontpage .section-steps .section-title {
    font-size: 30px;
    margin-bottom: 8px;
}

/* GRID: 3 kolumny na desktopie, 1 kolumna na mobile */
.frontpage .steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 80px;
    row-gap: 32px;
    margin-top: 40px;
}

@media (max-width: 767px) {
    .frontpage .steps-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
}

.frontpage .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* IKONY – TYLKO CSS, BEZ PHP */
.frontpage .step-icon {
    width: 72px;
    height: 150px;
    margin: 0 auto 16px auto;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

/* ścieżki względne od style.css -> assets/img */
.frontpage .step-icon.step-1 {
    background-image: url('assets/img/krok1.png');
}
.frontpage .step-icon.step-2 {
    background-image: url('assets/img/krok2.png');
}
.frontpage .step-icon.step-3 {
    background-image: url('assets/img/krok3.png');
}

/* tekst pod ikonkami */
.frontpage .steps-grid .step-item h3 {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    margin: 8px 0 0 0;
    text-align: center;
}

.frontpage .steps-footnote {
    margin-top: 36px;
    font-size: 14px;
    color: #555;
    text-align: center;
}


/* =========================================================
 * DRUGI SLIDER – MIEJSCE ZAMIAST ZIELONEJ KARTY
 * ======================================================= */

.frontpage .section-gaya-card {
    padding-top: 88px;
    padding-bottom: 96px;
    background: #ffffff;
}

/* ukrywamy poprzednie elementy karty story slider */
.frontpage .section-gaya-card .gaya-card-bg,
.frontpage .section-gaya-card .gaya-card-content,
.frontpage .section-gaya-card .gaya-card-product,
.frontpage .section-gaya-card .gaya-card-dots {
    display: none !important;
}

/* =========================================================
 * FAQ – prostokątna karta +/-
 * ======================================================= */

.frontpage .section-faq {
    background: #f7f7fb;          /* delikatne jasne tło sekcji */
    padding: 88px 0;
}

.frontpage .section-faq .container {
    max-width: 1160px;
}

.frontpage .section-faq .section-title {
    font-size: 34px;
    font-weight: 600;
}

/* Karta FAQ – prostokąt, lekkie zaokrąglenie jak w projekcie */
.frontpage .faq-list {
    margin-top: 28px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;          /* małe zaokrąglenie, nie „tablet” */
    overflow: hidden;
    box-shadow: none;            /* zero cienia */
}

.frontpage .faq-item + .faq-item {
    border-top: 1px solid #e4e4e4;
}

/* Pytanie */
.frontpage .faq-question {
    width: 100%;
    padding: 16px 22px;
    background: #ffffff;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    line-height: 1.5;
    color: #333333;
    cursor: pointer;
    text-align: left;
}

.frontpage .faq-question-text {
    flex: 1 1 auto;
}

/* + / - po prawej */
.frontpage .faq-toggle {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    margin-left: 16px;
}

/* Odpowiedź – wrapper grid trick dla animacji auto-height */
.frontpage .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    background: #ffffff;
}

.frontpage .faq-answer > * {
    overflow: hidden;
}

.frontpage .faq-answer__inner {
    padding: 0 22px;
    font-size: 14px;
    line-height: 1.7;
    color: #555555;
    transition: padding 0.3s ease;
}

/* Stan otwarty – pokaż odpowiedź */
.frontpage .faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
}

.frontpage .faq-item.is-open .faq-answer__inner {
    padding: 0 22px 16px;
}


/* =========================================================
 * PASEK BENEFITÓW NAD STOPKĄ
 * ======================================================= */

.frontpage .section-benefits {
    padding-top: 24px;
    padding-bottom: 40px;
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
}

.frontpage .section-benefits .container {
    max-width: 960px;
}

.frontpage .benefits-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column-gap: 40px;
    align-items: center;
    text-align: center;
}

@media (max-width: 767px) {
    .frontpage .benefits-layout {
        grid-template-columns: 1fr;
        grid-row-gap: 16px;
    }
}

.frontpage .benefit-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    color: #333333;
}

.frontpage .benefit-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}
.frontpage .benefit-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* strzałki i kropki */
.gaya-hero-slider__arrows {
    position:absolute;
    left:30px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:10px;
}
.gaya-hero-slider__arrow {
    background:#fff;
    border-radius:999px;
    border:0;
    width:32px;
    height:32px;
    cursor:pointer;
}

.gaya-hero-slider__bullets {
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:24px;
}
.gaya-hero-slider__bullet {
    width:8px;
    height:8px;
    border-radius:999px;
    border:0;
    background:#ddd;
}
.gaya-hero-slider__bullet.glide__bullet--active,
.gaya-hero-slider__bullet[aria-current="true"] {
    background:#111;
}


@media (max-width: 768px) {
  .gaya-hero-slider {
      padding: 56px 0;
  }

  .gaya-hero-slide__inner {
      flex-direction: column;
      padding: 40px 20px 32px 20px;
      gap: 28px;
  }

  .gaya-hero-slide__content {
      order: 1;
      text-align: left;
      width: 100%;
  }

  .gaya-hero-slide__title {
      font-size: 2rem;
  }

  .gaya-hero-slide__image {
      order: 0;
      justify-content: center;
      min-height: 0;
  }

  .gaya-hero-slider__arrows {
      left: 16px;
      top: auto;
      bottom: 32px;
      flex-direction: row;
  }
}

/* MOBILE – układ jak na screenie */
@media (max-width: 768px) {
  .gaya-hero-slider {
      padding:40px 0 32px;
  }
  .gaya-hero-slide__inner {
      flex-direction:column;
      align-items:flex-start;
      gap:24px;
      padding:0 16px;
  }
  .gaya-hero-slide__image {
      order:-1; /* butelki nad tekstem jeśli tak jest w makiecie – zmień na 1 jeśli odwrotnie */
      width:100%;
      justify-content:center;
  }
  .gaya-hero-slider__arrows {
      left:12px;
      top:auto;
      bottom:36px;
      flex-direction:row;
  }

  .gaya-story-slide__overlay {
      grid-template-columns:1fr;
      padding:32px 20px;
  }
  .gaya-story-slide__text {
      order:1;
  }
  .gaya-story-slide__product {
      order:0;
      justify-self:center;
      margin-bottom:20px;
  }
}
/* ===========================================================
   GAYA HERO SLIDER – STRZAŁKI JAK W MAKIETIE
   =========================================================== */

/* wrapper strzałek */
#gaya-hero-slider .gaya-hero-slider__arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    pointer-events: none; /* pozwala kliknąć tylko same strzałki */
}

/* pojedyncza strzałka */
#gaya-hero-slider .gaya-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;               /* dostosujesz pod PNG */
    height: 52px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    pointer-events: auto;      /* strzałki są klikalne */
    z-index: 20;
}

/* lewa strzałka */
#gaya-hero-slider .gaya-arrow--prev {
    left: 40px; /* jak w makiecie – możesz dać 56px */
    background-image: url('/wp-content/themes/gaya-child/assets/img/slider-lewa.png');
}

/* prawa strzałka */
#gaya-hero-slider .gaya-arrow--next {
    right: 40px;
    background-image: url('/wp-content/themes/gaya-child/assets/img/slider-prawa.png');
}

/* usuń wewnętrzne <span> z buttonów Glide, jeśli jeszcze są */
#gaya-hero-slider .gaya-hero-slider__arrow span {
    display: none !important;
}
#gaya-hero-slider .gaya-hero-slider__arrow {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

/* FAQ layout: title on the left, list on the right */
.frontpage .faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.25fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: flex-start;
}

.frontpage .faq-label {
    padding-top: 8px;
}

@media (max-width: 991px) {
    .frontpage .faq-layout {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }

    .frontpage .faq-label {
        padding-top: 0;
    }
}

/* =========================================================
 * NOWE SEKCJE — wspólny kontener (front page .container = 100%)
 * ======================================================= */

.frontpage .section-eco-effective .container,
.frontpage .section-why-gaya .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

/* =========================================================
 * DLACZEGO REFILL MA SENS – 4 kolumny z ikonami
 * ======================================================= */

.frontpage .section-refill-why {
    padding: 96px 0;
    background: #f9f9f7;
}

.frontpage .section-refill-why .section-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.frontpage .refill-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 36px;
    margin-top: 56px;
}

.frontpage .refill-why-item {
    text-align: center;
    padding: 0 8px;
}

.frontpage .refill-why-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: #e8f5e3;
    border-radius: 50%;
    color: #3a7d34;
}

.frontpage .refill-why-icon svg {
    width: 36px;
    height: 36px;
}

.frontpage .refill-why-item h3 {
    font-family: 'Aspekta', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px;
    color: #111;
}

.frontpage .refill-why-item p {
    font-family: 'Aspekta', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #666;
    margin: 0;
}

@media (max-width: 991px) {
    .frontpage .refill-why-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
    }
}

@media (max-width: 480px) {
    .frontpage .refill-why-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================================
 * CZY EKOLOGICZNE MOGĄ BYĆ SKUTECZNE — karta z akcentem
 * ======================================================= */

.frontpage .section-eco-effective {
    padding: 96px 0;
    background: #ffffff;
}

.frontpage .eco-effective-card {
    max-width: 960px;
    margin: 0 auto;
    background: #f4f9f2;
    border-radius: 16px;
    padding: 56px 64px;
    text-align: center;
    border: 1px solid #ddefd7;
}

.frontpage .eco-effective-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #c3e0ba;
    border-radius: 50%;
    color: #2d6b26;
    margin-bottom: 28px;
}

.frontpage .eco-effective-title {
    font-family: 'Aspekta', sans-serif;
    font-size: clamp(20px, 2.8vw, 26px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #111;
    margin: 0 0 24px;
    line-height: 1.35;
}

.frontpage .eco-effective-content {
    max-width: 740px;
    margin: 0 auto;
    text-align: center;
}

.frontpage .eco-effective-content p {
    font-family: 'Aspekta', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: #444;
    margin: 0 0 14px;
}

.frontpage .eco-effective-content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .frontpage .eco-effective-card {
        padding: 40px 24px;
        border-radius: 12px;
    }
}

/* =========================================================
 * DLACZEGO KLIENCI WYBIERAJĄ GAYA – 4 kolumny
 * ======================================================= */

.frontpage .section-why-gaya {
    padding: 96px 0;
    background: #f9f9f7;
}

.frontpage .section-why-gaya .section-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.frontpage .why-gaya-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 36px;
    margin-top: 56px;
}

.frontpage .why-gaya-item {
    text-align: center;
    padding: 0 8px;
}

.frontpage .why-gaya-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: #e8f5e3;
    border-radius: 50%;
    color: #3a7d34;
}

.frontpage .why-gaya-icon svg {
    width: 36px;
    height: 36px;
}

.frontpage .why-gaya-item h3 {
    font-family: 'Aspekta', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px;
    color: #111;
}

.frontpage .why-gaya-item p {
    font-family: 'Aspekta', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #666;
    margin: 0;
}

@media (max-width: 991px) {
    .frontpage .why-gaya-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
    }
}

@media (max-width: 480px) {
    .frontpage .why-gaya-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}