/* 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;
}

#hero-slider.section.section-hero {
    margin: 0 !important;
    padding: 0 !important;
}

@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 */
.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;
  }
}

/*
 * STATYCZNY HERO – fotografia GAYA w naturze
 */

.frontpage .section.section-home-hero {
    position: relative;
    display: flex;
    min-height: 620px;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
    isolation: isolate;
    background: #1b2a1d;
}

.frontpage .gaya-home-hero__media,
.frontpage .gaya-home-hero__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.frontpage .gaya-home-hero__media img {
    object-fit: cover;
    object-position: center;
}

.frontpage .section-home-hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(19, 37, 21, 0.48) 0%,
        rgba(19, 37, 21, 0.12) 48%,
        rgba(19, 37, 21, 0) 74%
    );
}

.frontpage .gaya-home-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 620px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 64px 48px;
}

.frontpage .gaya-home-hero__content {
    width: min(100%, 490px);
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 28px;
    color: #ffffff;
    background: rgba(23, 48, 27, 0.76);
    box-shadow: 0 28px 70px rgba(20, 35, 22, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.frontpage .gaya-home-hero__eyebrow {
    display: block;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.16em;
}

.frontpage .gaya-home-hero__title {
    margin: 0;
    color: inherit;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 4.5vw, 62px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.frontpage .gaya-home-hero__text {
    max-width: 410px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 17px;
    line-height: 1.62;
}

.frontpage .gaya-home-hero__button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding: 13px 22px;
    border-radius: 999px;
    color: #203923;
    background: #f6f2e8;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.frontpage .gaya-home-hero__button-arrow::before {
    content: "\2197";
}

.frontpage .gaya-home-hero__button:hover,
.frontpage .gaya-home-hero__button:focus-visible {
    color: #203923;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(12, 31, 15, 0.2);
    transform: translateY(-2px);
}

.frontpage .gaya-home-hero__button:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

@media (min-width: 768px) and (max-width: 1100px) {
    .frontpage .gaya-home-hero__media img {
        object-position: left center;
    }

    .frontpage .gaya-home-hero__inner {
        padding: 48px 32px;
    }

    .frontpage .gaya-home-hero__content {
        width: min(100%, 420px);
        padding: 34px;
    }

    .frontpage .gaya-home-hero__title {
        font-size: clamp(42px, 5.4vw, 52px);
    }
}

@media (max-width: 767px) {
    body.home {
        background: #ffffff !important;
    }

    body.home .frontpage {
        background: #ffffff;
    }

    body.home #masthead.site-header {
        position: absolute;
        z-index: 50;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        background: #f1f2e9 !important;
        box-shadow: 0 1px 0 rgba(36, 49, 38, 0.1);
    }

    body.home #masthead .site-header-wrap {
        padding-right: 0 !important;
        padding-left: 0 !important;
        background: #f1f2e9 !important;
    }

    body.home #mobile-header {
        height: auto;
        padding-top: env(safe-area-inset-top);
    }

    body.home #mobile-header .site-main-header-wrap,
    body.home #mobile-header .site-header-row-container-inner,
    body.home #mobile-header .site-container {
        height: 64px;
        min-height: 64px;
        background: transparent;
    }

    body.home #mobile-header .site-container {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    body.home #mobile-header .site-main-header-inner-wrap {
        grid-template-columns: minmax(0, 1fr) auto;
        box-sizing: border-box;
        height: 64px !important;
        min-height: 64px !important;
        padding: 0 !important;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.home #mobile-header .site-header-section {
        height: 100%;
        min-height: 0;
    }

    body.home #mobile-header .site-header-main-section-left {
        justify-content: flex-start;
    }

    body.home #mobile-header .site-header-main-section-right {
        justify-content: flex-end;
        gap: 8px;
    }

    body.home #mobile-header .site-header-item {
        margin: 0 !important;
    }

    body.home #mobile-header .site-branding .brand {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: #334236;
    }

    body.home #mobile-header .site-branding .brand::after {
        display: block;
        width: 100px;
        height: 28px;
        content: "";
        background: url("../img/gaya-logo.png") center / contain no-repeat;
    }

    body.home #mobile-header .gaya-signet {
        width: 18px !important;
        height: 21px !important;
    }

    body.home #mobile-header .site-branding .custom-logo {
        display: none !important;
    }

    body.home #mobile-header .header-cart-total,
    body.home #mobile-header .gaya-cart-count,
    body.home #mobile-header .gaya-cart-gross {
        display: none !important;
    }

    body.home #mobile-header .header-cart-button,
    body.home #mobile-header #mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 4px !important;
        color: #334236;
    }

    body.home #mobile-header .custom-cart-img {
        width: 17px;
        height: 17px;
    }

    body.home #mobile-header .custom-hamburger-img {
        width: 16px;
        height: 16px;
    }

    .frontpage .section.section-home-hero {
        display: flex;
        width: 100%;
        height: max(640px, 100svh);
        min-height: 0;
        margin: 0;
        border-radius: 0;
        background: #18251a;
    }

    .frontpage .gaya-home-hero__media {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        overflow: hidden;
    }

    .frontpage .gaya-home-hero__media img {
        object-position: 50% center;
    }

    .frontpage .section-home-hero::after {
        display: block;
        background: linear-gradient(
            180deg,
            rgba(10, 25, 12, 0) 34%,
            rgba(10, 25, 12, 0.14) 48%,
            rgba(10, 25, 12, 0.82) 100%
        );
    }

    .frontpage .gaya-home-hero__inner {
        display: flex;
        align-items: flex-end;
        height: 100%;
        min-height: 100%;
        margin: 0;
        padding: 112px 18px 36px;
    }

    .frontpage .gaya-home-hero__content {
        width: 100%;
        max-width: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        color: #ffffff;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .frontpage .gaya-home-hero__eyebrow {
        display: inline-flex;
        margin-bottom: 15px;
        padding: 6px 11px;
        border-radius: 999px;
        color: #ffffff;
        background: rgba(101, 105, 98, 0.78);
        font-size: 10px;
        line-height: 1.1;
        letter-spacing: 0.08em;
    }

    .frontpage .gaya-home-hero__eyebrow-brand {
        display: none;
    }

    .frontpage .gaya-home-hero__title {
        max-width: 290px;
        color: #ffffff;
        font-family: inherit;
        font-size: clamp(30px, 8.4vw, 34px);
        font-weight: 700;
        line-height: 1.02;
        letter-spacing: -0.035em;
    }

    .frontpage .gaya-home-hero__text {
        max-width: 310px;
        margin-top: 12px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 13px;
        line-height: 1.45;
    }

    .frontpage .gaya-home-hero__button {
        display: flex;
        justify-content: space-between;
        width: 100%;
        min-height: 50px;
        margin-top: 18px;
        padding: 7px 8px 7px 18px;
        color: #243126;
        background: #f1f2e9;
        font-size: 12px;
        font-weight: 500;
    }

    .frontpage .gaya-home-hero__button-arrow {
        display: grid;
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #d9dcd4;
        place-items: center;
    }

    .frontpage .gaya-home-hero__button-arrow::before {
        font-size: 14px;
        line-height: 1;
    }

    .frontpage .gaya-home-hero__button:hover,
    .frontpage .gaya-home-hero__button:focus-visible {
        color: #243126;
        background: #ffffff;
        transform: none;
    }

    .frontpage .gaya-home-hero__button:focus-visible {
        outline-color: #ffffff;
    }
}

/*
 * BESTSELLERY
  */

.frontpage .section-bestsellers {
    padding-top: 64px !important;
    padding-bottom: 96px;
    background: #ffffff;
    overflow: hidden;
}

.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;
}

@media (max-width: 767px) {
    .frontpage .section-bestsellers {
        padding-top: 48px !important;
    }
}

/* Botanical animation layered under the product cards, without changing their width. */
.frontpage .gaya-bestsellers-composition {
    position: relative;
    display: block;
    overflow: visible;
}

.frontpage .gaya-bestsellers-content {
    --gaya-plant-x: 87px;
    --gaya-plant-y: 160px;
    --gaya-plant-width: 332px;
    --gaya-plant-opacity: 0.38;
    --gaya-stem-duration: 4s;
    --gaya-leaf-duration: 3s;
    --gaya-leaf-delay-shift: 0.2s;
    position: relative;
    z-index: 0;
    min-width: 0;
    isolation: isolate;
}

.frontpage .section-bestsellers .section-header,
.frontpage .products-more {
    position: relative;
    z-index: 4;
}

.frontpage .section-bestsellers .products-grid {
    position: relative;
}

.frontpage .section-bestsellers ul.products {
    position: relative;
    z-index: 3;
}

.frontpage .gaya-eco-points-intro {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 760px;
    margin-top: 20px;
    padding: 10px 12px 10px 10px;
    border: 1px solid rgba(104, 132, 85, 0.22);
    border-radius: 999px;
    background: rgba(244, 248, 241, 0.92);
    box-shadow: 0 8px 24px rgba(54, 73, 43, 0.06);
    color: #34402e;
    text-align: left;
}

.frontpage .gaya-eco-points-intro__icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #dcebd5;
}

.frontpage .gaya-eco-points-intro__icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.frontpage .gaya-eco-points-intro__copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.35;
}

.frontpage .gaya-eco-points-intro__copy strong {
    color: #25341f;
    font-size: 15px;
    font-weight: 700;
}

.frontpage .gaya-eco-points-intro__link {
    flex: 0 0 auto;
    margin-left: 2px;
    color: #3d6331;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(61, 99, 49, 0.4);
    text-underline-offset: 3px;
}

.frontpage .gaya-eco-points-intro__link:hover,
.frontpage .gaya-eco-points-intro__link:focus-visible {
    color: #203d18;
    text-decoration-color: currentcolor;
}

.frontpage .section-bestsellers ul.products li.product {
    position: relative;
}

.frontpage .gaya-loop-eco-points {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid rgba(74, 103, 58, 0.18);
    border-radius: 999px;
    background: rgba(247, 250, 245, 0.94);
    box-shadow: 0 5px 16px rgba(44, 61, 35, 0.12);
    color: #314b28;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    backdrop-filter: blur(5px);
}

.frontpage .gaya-loop-eco-points img {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    object-fit: contain;
}

.frontpage .gaya-bestsellers-plant {
    position: absolute;
    top: var(--gaya-plant-y);
    right: calc(50% - 50vw);
    z-index: 2;
    width: var(--gaya-plant-width);
    height: auto;
    aspect-ratio: 290 / 690;
    overflow: visible;
    isolation: isolate;
    pointer-events: none;
    opacity: var(--gaya-plant-opacity);
    transform: translate3d(var(--gaya-plant-x), 0, 0);
}

.frontpage .gaya-bestsellers-plant__haze {
    position: absolute;
    inset: 12% -20% 10% -38%;
    visibility: hidden;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 42% 26%, rgba(98, 119, 83, 0.12), transparent 28%),
        radial-gradient(ellipse at 58% 62%, rgba(93, 112, 79, 0.1), transparent 52%);
    filter: blur(18px);
    opacity: 0;
}

.frontpage .gaya-bestsellers-plant__layers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    transform-origin: 64% 52%;
    isolation: isolate;
}

.frontpage .gaya-bestsellers-plant__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    object-fit: fill;
    opacity: 0;
    backface-visibility: hidden;
    user-select: none;
    transform: translate3d(0, 0, 0);
    will-change: clip-path, opacity, transform;
}

.frontpage .gaya-bestsellers-plant__stems {
    clip-path: circle(0% at 100% 18%);
    transform: translate3d(16px, 0, 0);
}

.frontpage .gaya-bestsellers-plant__leaf {
    --gaya-leaf-x: 50%;
    --gaya-leaf-y: 50%;
    --gaya-leaf-delay: calc(0.7s + var(--gaya-leaf-delay-shift));
    clip-path: circle(0% at var(--gaya-leaf-x) var(--gaya-leaf-y));
    transform: translate3d(0, 7px, 0) scale(0.985);
}

.frontpage .gaya-bestsellers-plant__leaf--top {
    --gaya-leaf-x: 22%;
    --gaya-leaf-y: 18%;
    --gaya-leaf-delay: calc(0.64s + var(--gaya-leaf-delay-shift));
}

.frontpage .gaya-bestsellers-plant__leaf--center {
    --gaya-leaf-x: 68%;
    --gaya-leaf-y: 61%;
    --gaya-leaf-delay: calc(0.92s + var(--gaya-leaf-delay-shift));
}

.frontpage .gaya-bestsellers-plant__leaf--left {
    --gaya-leaf-x: 64%;
    --gaya-leaf-y: 60%;
    --gaya-leaf-delay: calc(1.12s + var(--gaya-leaf-delay-shift));
}

.frontpage .gaya-bestsellers-plant__leaf--right {
    --gaya-leaf-x: 73%;
    --gaya-leaf-y: 60%;
    --gaya-leaf-delay: calc(1.24s + var(--gaya-leaf-delay-shift));
}

.frontpage .gaya-bestsellers-plant__leaf--bottom {
    --gaya-leaf-x: 57%;
    --gaya-leaf-y: 84%;
    --gaya-leaf-delay: calc(1.45s + var(--gaya-leaf-delay-shift));
}

.frontpage .gaya-bestsellers-plant.is-ready .gaya-bestsellers-plant__haze {
    visibility: visible;
    animation: gayaBestsellersHazeReveal 1.25s ease 0.2s both;
}

.frontpage .gaya-bestsellers-plant.is-ready .gaya-bestsellers-plant__stems {
    animation: gayaBestsellersStemReveal var(--gaya-stem-duration) cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.frontpage .gaya-bestsellers-plant.is-ready .gaya-bestsellers-plant__leaf {
    animation: gayaBestsellersLeafReveal var(--gaya-leaf-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--gaya-leaf-delay) both;
}

.frontpage .gaya-bestsellers-plant.is-settled .gaya-bestsellers-plant__layers {
    animation: gayaBestsellersPlantSway 9s ease-in-out infinite alternate;
    will-change: transform;
}

.frontpage .gaya-bestsellers-plant.is-settled .gaya-bestsellers-plant__layer {
    will-change: auto;
}

.frontpage .gaya-bestsellers-plant.is-paused .gaya-bestsellers-plant__haze,
.frontpage .gaya-bestsellers-plant.is-paused .gaya-bestsellers-plant__layers,
.frontpage .gaya-bestsellers-plant.is-paused .gaya-bestsellers-plant__layer {
    animation-play-state: paused;
}

.frontpage .gaya-bestsellers-plant.is-debug-final .gaya-bestsellers-plant__haze,
.frontpage .gaya-bestsellers-plant.is-debug-final .gaya-bestsellers-plant__layer {
    visibility: visible !important;
    clip-path: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.frontpage .gaya-bestsellers-plant.is-debug-final .gaya-bestsellers-plant__haze {
    opacity: 0.9 !important;
}

.frontpage .gaya-bestsellers-plant.is-debug-final .gaya-bestsellers-plant__layers {
    animation: none !important;
}

@keyframes gayaBestsellersStemReveal {
    0% {
        visibility: hidden;
        clip-path: circle(0% at 100% 18%);
        opacity: 0;
        transform: translate3d(16px, 0, 0);
    }
    1% {
        visibility: visible;
        opacity: 0;
    }
    100% {
        visibility: visible;
        clip-path: circle(145% at 100% 18%);
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes gayaBestsellersLeafReveal {
    0% {
        visibility: hidden;
        clip-path: circle(0% at var(--gaya-leaf-x) var(--gaya-leaf-y));
        opacity: 0;
        transform: translate3d(0, 7px, 0) scale(0.985);
    }
    1% {
        visibility: visible;
        opacity: 0;
    }
    100% {
        visibility: visible;
        clip-path: circle(145% at var(--gaya-leaf-x) var(--gaya-leaf-y));
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes gayaBestsellersHazeReveal {
    from { opacity: 0; }
    to { opacity: 0.9; }
}

@keyframes gayaBestsellersPlantSway {
    from { transform: translate3d(0, 0, 0) rotate(-0.28deg); }
    to { transform: translate3d(0, 2px, 0) rotate(0.38deg); }
}

@media (max-width: 991px) {
    .frontpage .gaya-bestsellers-content {
        --gaya-plant-x: 105px;
        --gaya-plant-y: 145px;
        --gaya-plant-width: 330px;
        --gaya-plant-opacity: 0.2;
    }
}

@media (max-width: 767px) {
    .frontpage .gaya-bestsellers-content {
        --gaya-plant-x: 108px;
        --gaya-plant-y: 120px;
        --gaya-plant-width: 260px;
        --gaya-plant-opacity: 0.14;
    }

    .frontpage .section-bestsellers .section-header {
        padding-inline: 20px;
    }

    .frontpage .gaya-eco-points-intro {
        align-items: flex-start;
        width: 100%;
        padding: 11px 12px;
        border-radius: 18px;
    }

    .frontpage .gaya-eco-points-intro__copy {
        display: block;
        font-size: 13px;
    }

    .frontpage .gaya-eco-points-intro__copy strong {
        display: block;
        margin-bottom: 2px;
    }

    .frontpage .gaya-eco-points-intro__link {
        display: inline-block;
        margin-top: 5px;
        margin-left: 0;
    }

    .frontpage .gaya-loop-eco-points {
        top: 8px;
        right: 8px;
        gap: 4px;
        min-height: 26px;
        padding: 5px 7px;
        font-size: 10px;
    }

    .frontpage .gaya-loop-eco-points img {
        width: 14px !important;
        height: 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .frontpage .gaya-bestsellers-plant__haze,
    .frontpage .gaya-bestsellers-plant__layer {
        visibility: visible !important;
        clip-path: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .frontpage .gaya-bestsellers-plant__haze { opacity: 0.9 !important; }
    .frontpage .gaya-bestsellers-plant__layers { animation: none !important; }
}

/*
 * SOCIAL MEDIA – fotograficzne kafle
 */

.frontpage .section.section-social-media {
    padding: 88px 0 96px;
    background: #f4f1e9;
}

.frontpage .section-social-media .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 30px;
}

.frontpage .gaya-social-title {
    margin: 0 0 38px;
    color: #17331f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(36px, 4.2vw, 52px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-align: center;
}

.frontpage .gaya-social-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.frontpage .gaya-social-card {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 500px;
    overflow: hidden;
    border-radius: 28px;
    color: #ffffff;
    background: #243426;
    box-shadow: 0 18px 42px rgba(35, 49, 37, 0.1);
    text-decoration: none;
    isolation: isolate;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.frontpage .gaya-social-card::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(15, 27, 17, 0) 42%,
        rgba(15, 27, 17, 0.22) 62%,
        rgba(15, 27, 17, 0.88) 100%
    );
}

.frontpage .gaya-social-card > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.65s cubic-bezier(0.2, 0.65, 0.3, 1);
}

.frontpage .gaya-social-card:nth-child(1) > img {
    object-position: center 42%;
}

.frontpage .gaya-social-card:nth-child(2) > img {
    object-position: center 47%;
}

.frontpage .gaya-social-card:nth-child(3) > img {
    object-position: center 50%;
}

.frontpage .gaya-social-card__content {
    position: absolute;
    z-index: 2;
    right: 66px;
    bottom: 24px;
    left: 24px;
    display: grid;
    gap: 7px;
}

.frontpage .gaya-social-card__eyebrow {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.frontpage .gaya-social-card__name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(31px, 3vw, 39px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.025em;
}

.frontpage .gaya-social-card__arrow {
    position: absolute;
    z-index: 2;
    right: 24px;
    bottom: 24px;
    font-size: 29px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.frontpage .gaya-social-card__arrow::before {
    content: "\2197";
}

.frontpage .gaya-social-card:hover,
.frontpage .gaya-social-card:focus-visible {
    color: #ffffff;
    box-shadow: 0 26px 54px rgba(35, 49, 37, 0.2);
    transform: translateY(-4px);
}

.frontpage .gaya-social-card:hover > img,
.frontpage .gaya-social-card:focus-visible > img {
    transform: scale(1.045);
}

.frontpage .gaya-social-card:hover .gaya-social-card__arrow,
.frontpage .gaya-social-card:focus-visible .gaya-social-card__arrow {
    transform: translate(3px, -3px);
}

.frontpage .gaya-social-card:focus-visible {
    outline: 3px solid #2e5134;
    outline-offset: 5px;
}

@media (max-width: 991px) {
    .frontpage .section-social-media .container {
        padding: 0 24px;
    }

    .frontpage .gaya-social-card {
        min-height: 410px;
        border-radius: 24px;
    }

    .frontpage .gaya-social-card__content {
        right: 54px;
        bottom: 20px;
        left: 20px;
    }

    .frontpage .gaya-social-card__arrow {
        right: 20px;
        bottom: 20px;
    }
}

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

    .frontpage .section-social-media .container {
        padding: 0 16px;
    }

    .frontpage .gaya-social-title {
        margin-bottom: 26px;
        font-size: 32px;
    }

    .frontpage .gaya-social-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 560px;
        margin: 0 auto;
    }

    .frontpage .gaya-social-card {
        min-height: 0;
        aspect-ratio: 16 / 9;
        border-radius: 18px;
    }

    .frontpage .gaya-social-card__content {
        right: 48px;
        bottom: 16px;
        left: 16px;
        gap: 4px;
    }

    .frontpage .gaya-social-card__eyebrow {
        font-size: 10px;
    }

    .frontpage .gaya-social-card__name {
        font-size: 27px;
    }

    .frontpage .gaya-social-card__arrow {
        right: 16px;
        bottom: 16px;
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .frontpage .gaya-home-hero__button,
    .frontpage .gaya-social-card,
    .frontpage .gaya-social-card > img,
    .frontpage .gaya-social-card__arrow {
        transition: none;
    }
}

/*
 * MAŁE GESTY / JAK DZIAŁA GAYA – 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;
}

.frontpage .step-icon {
    width: 72px;
    height: 150px;
    margin: 0 auto 16px auto;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

.frontpage .step-icon.step-1 {
    background-image: url('../img/krok1.png');
}
.frontpage .step-icon.step-2 {
    background-image: url('../img/krok2.png');
}
.frontpage .step-icon.step-3 {
    background-image: url('../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;
}

/* FAQ – style layoutowe (reszta w style.css) */
.frontpage .faq-list {
    margin-top: 28px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}


/*
 * 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 .gaya-hero-slider__bullets {
    position: absolute;
    right: 22px;
    bottom: 16px;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 0;
}
#gaya-hero-slider .gaya-hero-slider__bullet {
    width:24px;
    height:24px;
    padding:0;
    border-radius:999px;
    border:0;
    background:transparent;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
#gaya-hero-slider .gaya-hero-slider__bullet::before {
    content:"";
    width:6px;
    height:6px;
    border-radius:999px;
    background:rgba(28,42,30,.22);
    transition:all .4s cubic-bezier(.4,0,.2,1);
}
#gaya-hero-slider .gaya-hero-slider__bullet.glide__bullet--active,
#gaya-hero-slider .gaya-hero-slider__bullet[aria-current="true"] {
    background:transparent;
}
#gaya-hero-slider .gaya-hero-slider__bullet.glide__bullet--active::before,
#gaya-hero-slider .gaya-hero-slider__bullet[aria-current="true"]::before {
    width:18px;
    background:rgba(74,122,74,.72);
}


@media (max-width: 768px) {
  .gaya-hero-slider {
      padding: 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: 0;
  }
  .gaya-hero-slide {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      aspect-ratio: auto !important;
  }
  .gaya-hero-slide__inner {
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 20px;
      min-height: 360px;
      padding: 44px 24px;
  }
  .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;
    }
}