:root {
    --tofaa-purple: #7C4FA0;
    --tofaa-purple-light: #B083BC;
    --tofaa-beige: #F8EAE1;
    --tofaa-green: #ABB538;
    --tofaa-white: #fffdfb;
}

body.page-template-home-page {
    margin: 0;
    background: var(--tofaa-beige);
}

body.page-template-home-page header#masthead,
body.page-template-home-page .to_top {
    display: none !important;
}

body.page-template-home-page #page,
body.page-template-home-page .site {
    overflow: visible;
}

.tofaa-home,
.tofaa-home * {
    box-sizing: border-box;
}

.tofaa-home {
    min-height: 100svh;
    padding: clamp(14px, 2.2vw, 34px);
    background:
        radial-gradient(circle at 48% 9%, rgba(255,255,255,.72), transparent 28%),
        var(--tofaa-beige);
    color: var(--tofaa-purple);
    font-family: "Rubik", Arial, sans-serif;
    position: relative;
    overflow: hidden;
}

.tofaa-nav {
    width: min(1480px, 100%);
    min-height: 100px;
    margin: 0 auto;
    padding: 15px clamp(22px, 3vw, 46px);
    display: grid;
    grid-template-columns: minmax(180px, 250px) 1fr auto;
    align-items: center;
    gap: 24px;
    background: var(--tofaa-white);
    border: 1px solid rgba(124, 79, 160, .15);
    border-radius: 30px;
    box-shadow: 0 14px 38px rgba(91, 49, 87, .12);
    position: relative;
    z-index: 20;
    isolation: isolate;
    overflow: visible;
}

.tofaa-nav__brand {
    width: 190px;
    height: 70px;
    display: flex;
    align-items: center;
    color: var(--tofaa-purple);
}

.tofaa-nav__brand svg,
.tofaa-nav__brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tofaa-nav__menu {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: clamp(24px, 2.7vw, 52px);
}

.tofaa-nav__item {
    position: relative;
    display: flex;
    align-items: center;
}

.tofaa-nav__link,
.tofaa-nav__trigger,
.tofaa-nav__action {
    color: var(--tofaa-purple);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Wszystkie pozycje głównego menu i akcje korzystają z tej samej animacji hover. */
.tofaa-nav__link,
.tofaa-nav__trigger,
.tofaa-nav__action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    position: relative;
    isolation: isolate;
}

.tofaa-nav__trigger {
    padding: 0;
    gap: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.tofaa-nav__link::after,
.tofaa-nav__trigger::after,
.tofaa-nav__action::after {
    content: "";
    height: 2px;
    position: absolute;
    right: 0;
    bottom: 6px;
    left: 0;
    border-radius: 999px;
    background: var(--tofaa-purple-light);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
}

.tofaa-nav__link:hover::after,
.tofaa-nav__link:focus-visible::after,
.tofaa-nav__item--dropdown:hover > .tofaa-nav__trigger::after,
.tofaa-nav__item--dropdown:focus-within > .tofaa-nav__trigger::after,
.tofaa-nav__item--dropdown.is-open > .tofaa-nav__trigger::after,
.tofaa-nav__action:hover::after,
.tofaa-nav__action:focus-visible::after {
    transform: scaleX(1);
}

.tofaa-nav__item--dropdown:hover > .tofaa-nav__trigger--featured::after,
.tofaa-nav__item--dropdown:focus-within > .tofaa-nav__trigger--featured::after,
.tofaa-nav__item--dropdown.is-open > .tofaa-nav__trigger--featured::after {
    transform: none;
}

.tofaa-nav__link,
.tofaa-nav__trigger,
.tofaa-nav__action {
    transition: color .2s ease, opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}

.tofaa-nav__link:hover,
.tofaa-nav__link:focus-visible,
.tofaa-nav__trigger:hover,
.tofaa-nav__item:focus-within > .tofaa-nav__trigger,
.tofaa-nav__action:hover,
.tofaa-nav__action:focus-visible {
    color: var(--tofaa-purple);
    opacity: 1;
    transform: translateY(-2px);
    outline: none;
}

/* Wyróżnione wejście do sklepu: animowany gradient wyłącznie na ramce.
 * Nie obracamy pseudo-elementu — zmieniamy tylko kąt gradientu, więc nic
 * nie wychodzi poza obrys przycisku i nie może zostać ucięte.
 */
@property --tofaa-shop-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.tofaa-nav__trigger--featured {
    --tofaa-shop-angle: 0deg;
    min-height: 42px;
    padding: 10px 16px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 999px;
    color: var(--tofaa-purple);
    background:
        linear-gradient(var(--tofaa-white), var(--tofaa-white)) padding-box,
        conic-gradient(
            from var(--tofaa-shop-angle),
            var(--tofaa-purple) 0deg,
            var(--tofaa-beige) 90deg,
            var(--tofaa-purple) 180deg,
            var(--tofaa-beige) 270deg,
            var(--tofaa-purple) 360deg
        ) border-box;
    box-shadow: 0 7px 18px rgba(124, 79, 160, .14);
    animation: tofaa-shop-border-spin 4.5s linear infinite;
}

.tofaa-nav__trigger--featured > span,
.tofaa-nav__trigger--featured .tofaa-nav__chevron {
    position: relative;
    z-index: 1;
}

/* Standardowa linia hover jest wyłączona tylko dla wyróżnionego przycisku. */
.tofaa-nav__trigger--featured::before,
.tofaa-nav__trigger--featured::after {
    display: none;
}

.tofaa-nav__trigger--featured:hover,
.tofaa-nav__item:focus-within > .tofaa-nav__trigger--featured,
.tofaa-nav__item.is-open > .tofaa-nav__trigger--featured {
    color: var(--tofaa-purple);
    background:
        linear-gradient(rgba(248, 234, 225, .78), rgba(248, 234, 225, .78)) padding-box,
        conic-gradient(
            from var(--tofaa-shop-angle),
            var(--tofaa-purple) 0deg,
            var(--tofaa-beige) 90deg,
            var(--tofaa-purple) 180deg,
            var(--tofaa-beige) 270deg,
            var(--tofaa-purple) 360deg
        ) border-box;
    box-shadow: 0 11px 24px rgba(124, 79, 160, .24);
    animation-duration: 2.2s;
}

.tofaa-nav__trigger--featured .tofaa-nav__chevron {
    color: var(--tofaa-purple);
    background: rgba(176, 131, 188, .14);
}

.tofaa-nav__item--dropdown:hover .tofaa-nav__trigger--featured .tofaa-nav__chevron,
.tofaa-nav__item--dropdown:focus-within .tofaa-nav__trigger--featured .tofaa-nav__chevron,
.tofaa-nav__item--dropdown.is-open .tofaa-nav__trigger--featured .tofaa-nav__chevron {
    background: rgba(176, 131, 188, .28);
}

@keyframes tofaa-shop-border-spin {
    to { --tofaa-shop-angle: 1turn; }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-nav__trigger--featured {
        animation: none;
    }
}

.tofaa-nav__chevron {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 22px;
    border-radius: 50%;
    background: rgba(176, 131, 188, .14);
    transition: transform .32s cubic-bezier(.2,.8,.2,1), background-color .22s ease;
}

.tofaa-nav__chevron svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tofaa-nav__item--dropdown:hover .tofaa-nav__chevron,
.tofaa-nav__item--dropdown:focus-within .tofaa-nav__chevron,
.tofaa-nav__item--dropdown.is-open .tofaa-nav__chevron {
    background: rgba(176, 131, 188, .28);
    transform: translateY(1px) rotate(180deg);
}

.tofaa-nav__submenu {
    min-width: 292px;
    padding-top: 16px;
    position: absolute;
    top: calc(100% + 13px);
    left: 50%;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -24px) scale(.985);
    transform-origin: top center;
    transition: opacity .24s ease, visibility .24s ease, transform .34s cubic-bezier(.2,.8,.2,1);
}

.tofaa-nav__submenu::before {
    content: "";
    height: 32px;
    position: absolute;
    top: -16px;
    right: 0;
    left: 0;
}

.tofaa-nav__submenu-panel {
    padding: 15px 0;
    overflow: hidden;
    border: 1px solid rgba(124, 79, 160, .14);
    border-radius: 0 0 26px 26px;
    background: var(--tofaa-white);
    box-shadow: 0 20px 34px rgba(65, 30, 71, .18);
}

.tofaa-nav__submenu a {
    padding: 13px 24px;
    display: block;
    color: var(--tofaa-purple);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
    text-transform: uppercase;
    white-space: normal;
    transition: background .18s ease, padding-left .18s ease;
}

.tofaa-nav__submenu a:hover,
.tofaa-nav__submenu a:focus-visible {
    color: var(--tofaa-purple);
    background: rgba(176, 131, 188, .16);
    padding-left: 30px;
    outline: none;
}

.tofaa-nav__item--dropdown:hover > .tofaa-nav__submenu,
.tofaa-nav__item--dropdown:focus-within > .tofaa-nav__submenu,
.tofaa-nav__item--dropdown.is-open > .tofaa-nav__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

.tofaa-nav__submenu--about {
    min-width: 270px;
}

.tofaa-nav__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(18px, 2vw, 34px);
}

.tofaa-nav__action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #7C4FA0 !important;
}

.tofaa-nav__action svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tofaa-nav__cart b {
    min-width: 23px;
    height: 23px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tofaa-green);
    color: var(--tofaa-white);
    font-size: 12px;
}

.tofaa-nav__toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 11px;
    border: 0;
    border-radius: 50%;
    background: var(--tofaa-beige);
}

.tofaa-nav__toggle span {
    width: 100%;
    height: 2px;
    margin: 4px 0;
    display: block;
    background: var(--tofaa-purple);
}

.tofaa-hero {
    width: min(1480px, 100%);
    min-height: calc(100svh - 155px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(480px, .88fr) minmax(620px, 1.12fr);
    align-items: center;
    gap: clamp(25px, 4vw, 80px);
    position: relative;
    z-index: 2;
}

.tofaa-hero__copy {
    padding: clamp(50px, 7vh, 95px) 0 clamp(40px, 6vh, 80px) 10px;
    position: relative;
    z-index: 10;
}

.tofaa-hero__copy-layout {
    display: grid;
    grid-template-columns: minmax(180px, 215px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 2.6vw, 38px);
}

.tofaa-hero__moments {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tofaa-moment-card {
    min-height: 98px;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    border: 0;
    border-radius: 28px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(65, 30, 71, .12);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.tofaa-moment-card:hover,
.tofaa-moment-card:focus-visible {
    transform: translateX(4px) translateY(-2px);
    box-shadow: 0 18px 30px rgba(65, 30, 71, .16);
    outline: none;
}

.tofaa-moment-card__number {
    position: absolute;
    inset: -6px auto auto 14px;
    color: rgba(255, 255, 255, .28);
    font-size: 86px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
    pointer-events: none;
}

.tofaa-moment-card__text {
    position: relative;
    z-index: 1;
    max-width: 125px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.08;
    text-transform: none;
}

.tofaa-moment-card--1 {
    background: #7C4FA0;
    color: #F8EAE1;
}

.tofaa-moment-card--2 {
    background: #B083BC;
    color: #F8EAE1;
}

.tofaa-moment-card--3 {
    background: #F8EAE1;
    color: #7C4FA0;
    border: 1px solid rgba(124, 79, 160, .14);
}

.tofaa-moment-card--3 .tofaa-moment-card__number {
    color: rgba(124, 79, 160, .14);
}

.tofaa-moment-card--4 {
    background: #ABB538;
    color: #7C4FA0;
}

.tofaa-moment-card--4 .tofaa-moment-card__number {
    color: rgba(124, 79, 160, .18);
}

.tofaa-hero__copy-main {
    min-width: 0;
}

.tofaa-hero__eyebrow {
    margin: 0 0 16px;
    color: var(--tofaa-purple-light);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tofaa-hero h1 {
    max-width: 720px;
    margin: 0;
    color: var(--tofaa-purple);
    font-family: "Rubik", Arial, sans-serif;
    font-size: clamp(58px, 5.7vw, 100px);
    font-weight: 760;
    line-height: .98;
    letter-spacing: -.055em;
}

.tofaa-hero__lead {
    margin: 28px 0 0;
    color: var(--tofaa-purple);
    font-size: clamp(20px, 1.55vw, 27px);
    font-weight: 650;
}

.tofaa-benefits {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(5, minmax(95px, 1fr));
    gap: 18px;
}

.tofaa-benefit {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--tofaa-purple);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
}

.tofaa-benefits__note {
    margin: 12px 0 0;
    color: #7C4FA0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefits__note {
    display: none;
}

.tofaa-benefit__icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border: 6px solid rgba(176, 131, 188, .2);
    border-radius: 50%;
    background: rgba(255,255,255,.26);
}

.tofaa-benefit__icon svg {
    width: 43px;
    height: 43px;
    fill: none;
    stroke: var(--tofaa-purple);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tofaa-benefit__icon--filled {
    background: var(--tofaa-purple);
    color: var(--tofaa-white);
    font-size: 22px;
    font-weight: 850;
}

.tofaa-hero__buttons {
    margin-top: 42px;
    display: flex;
    align-items: center;
    gap: 36px;
}

.tofaa-btn {
    min-height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    color: var(--tofaa-purple);
    font-size: 16px;
    font-weight: 850;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.tofaa-btn:hover {
    color: var(--tofaa-purple);
    text-decoration: none;
    transform: translateY(-2px);
}

.tofaa-btn--primary {
    min-width: 310px;
    padding: 0 34px;
    border-radius: 999px;
    background: var(--tofaa-green);
    color: #7C4FA0 !important;
    box-shadow: 0 13px 30px rgba(171,181,56,.22);
}

.tofaa-btn--primary:hover,
.tofaa-btn--primary:focus-visible {
    color: #7C4FA0 !important;
}

.tofaa-btn--primary span {
    font-size: 30px;
    font-weight: 400;
}

.tofaa-btn--text {
    min-height: 48px;
    border-bottom: 3px solid var(--tofaa-green);
}

.tofaa-hero__visual {
    min-height: 700px;
    align-self: stretch;
    position: relative;
}

.tofaa-visual__blob {
    width: 106%;
    height: 83%;
    position: absolute;
    top: 8%;
    left: -3%;
    border-radius: 43% 57% 55% 45% / 35% 38% 62% 65%;
    background:
        radial-gradient(circle at 24% 20%, rgba(255,255,255,.42), transparent 28%),
        linear-gradient(145deg, #cba6d4 0%, var(--tofaa-purple-light) 55%, #9b6bb0 100%);
    transform: rotate(-4deg);
    box-shadow: inset 0 0 75px rgba(255,255,255,.18);
}

.tofaa-visual__blob::after {
    content: "";
    width: 115%;
    height: 35%;
    position: absolute;
    left: -7%;
    bottom: -18%;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: var(--tofaa-purple-light);
    transform: rotate(-2deg);
}

.tofaa-visual__product {
    width: min(92%, 840px);
    height: auto;
    position: absolute;
    top: 29%;
    left: 0;
    z-index: 5;
    object-fit: contain;
    transform: rotate(4deg);
    filter: drop-shadow(0 28px 22px rgba(65,30,71,.27));
}

.tofaa-visual__badge {
    width: 145px;
    height: 145px;
    padding: 13px;
    position: absolute;
    top: 13%;
    right: 7%;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tofaa-green);
    color: var(--tofaa-purple);
    font-weight: 850;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(5deg);
}

.tofaa-visual__badge span {
    font-size: 14px;
    letter-spacing: .12em;
}

.tofaa-visual__badge strong {
    margin: 2px 0;
    font-size: 62px;
}

.tofaa-visual__mascot {
    width: clamp(142px, 12vw, 188px);
    height: auto;
    position: absolute;
    right: 7%;
    bottom: 6%;
    z-index: 10;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 16px 10px rgba(64,37,73,.18));
    pointer-events: none;
}

.tofaa-visual__orb {
    position: absolute;
    z-index: 3;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fff 0 4%, #df91a0 7%, #a73554 50%, #742946 100%);
    box-shadow: 0 14px 15px rgba(68,28,62,.25);
}

.tofaa-visual__orb--one {
    width: 66px;
    height: 66px;
    top: 23%;
    left: 55%;
}

.tofaa-visual__orb--two {
    width: 54px;
    height: 54px;
    right: 30%;
    bottom: 22%;
}

.tofaa-visual__apple {
    width: 155px;
    height: 105px;
    position: absolute;
    top: 11%;
    left: 16%;
    z-index: 4;
    border: 10px solid #b76f42;
    border-left-width: 5px;
    border-radius: 55% 40% 54% 40%;
    background: linear-gradient(135deg, #fffaf2 0%, #f4d8af 100%);
    transform: rotate(28deg) skewX(-8deg);
    box-shadow: 0 15px 18px rgba(77,42,63,.18);
}

.tofaa-floating-actions {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tofaa-float {
    width: 62px;
    height: 62px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(124,79,160,.20);
    border-radius: 50%;
    background: #B083BC;
    color: #7C4FA0;
    box-shadow: 0 9px 22px rgba(65,30,71,.18);
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s ease, opacity .25s ease, visibility .25s ease;
}

.tofaa-float:hover,
.tofaa-float:focus-visible {
    color: #F8EAE1;
    transform: translateY(-2px);
    outline: none;
}

.tofaa-float svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tofaa-floating-cart {
    background: #B083BC;
    color: #7C4FA0;
}

.tofaa-floating-cart:hover,
.tofaa-floating-cart:focus-visible {
    color: #F8EAE1;
}

.tofaa-floating-cart span {
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--tofaa-green);
    color: var(--tofaa-white);
    font-size: 11px;
    font-weight: 800;
}

.tofaa-back-to-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

.tofaa-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Przycisk przewijania ma identyczne uniesienie jak koszyk.
 * Reguła musi być po stanie .is-visible, aby nie nadpisywał hovera.
 */
.tofaa-back-to-top.is-visible:hover,
.tofaa-back-to-top.is-visible:focus-visible {
    transform: translateY(-2px);
}

@media (max-width: 1250px) {
    .tofaa-nav {
        grid-template-columns: 175px 1fr auto;
        gap: 16px;
    }

    .tofaa-nav__brand {
        width: 165px;
    }

    .tofaa-nav__menu {
        gap: 22px;
    }

    .tofaa-nav__link,
    .tofaa-nav__trigger,
    .tofaa-nav__action {
        font-size: 13px;
    }

    .tofaa-hero {
        grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.1fr);
        gap: 20px;
    }

    .tofaa-hero__copy-layout {
        grid-template-columns: minmax(160px, 190px) minmax(0, 1fr);
        gap: 20px;
    }

    .tofaa-moment-card {
        min-height: 88px;
        padding: 14px 15px;
        border-radius: 24px;
    }

    .tofaa-moment-card__number {
        font-size: 74px;
    }

    .tofaa-moment-card__text {
        max-width: 110px;
        font-size: 15px;
    }

    .tofaa-benefits {
        gap: 8px;
    }

    .tofaa-benefit {
        font-size: 10px;
    }

    .tofaa-benefit__icon {
        width: 59px;
        height: 59px;
    }

    .tofaa-hero__visual {
        min-height: 620px;
    }
}

@media (max-width: 980px) {
    .tofaa-home {
        padding: 14px;
    }

    .tofaa-nav {
        min-height: 82px;
        padding: 10px 18px;
        grid-template-columns: 145px 1fr auto;
        border-radius: 24px;
    }

    .tofaa-nav__brand {
        width: 140px;
        height: 56px;
    }

    .tofaa-nav__toggle {
        display: block;
        justify-self: end;
    }

    .tofaa-nav__menu {
        width: calc(100% - 28px);
        padding: 18px;
        position: absolute;
        top: calc(100% + 10px);
        left: 14px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-radius: 20px;
        background: var(--tofaa-white);
        box-shadow: 0 18px 30px rgba(65,30,71,.16);
    }

    .tofaa-nav__menu.is-open {
        display: flex;
    }

    .tofaa-nav__item {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(124,79,160,.12);
    }

    .tofaa-nav__link,
    .tofaa-nav__trigger {
        width: 100%;
        min-height: 50px;
        padding: 14px 10px;
        justify-content: space-between;
        border-bottom: 1px solid rgba(124,79,160,.12);
    }

    .tofaa-nav__item > .tofaa-nav__trigger {
        border-bottom: 0;
    }

    .tofaa-nav__trigger--featured {
        width: 100%;
        margin: 6px 0;
        padding: 14px 16px;
        border-radius: 16px;
    }


    .tofaa-nav__trigger::after {
        bottom: 8px;
    }
    .tofaa-nav__submenu,
    .tofaa-nav__submenu--about {
        width: 100%;
        min-width: 0;
        max-height: 0;
        padding: 0;
        position: static;
        z-index: auto;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: max-height .3s ease;
    }

    .tofaa-nav__submenu::before {
        display: none;
    }

    .tofaa-nav__submenu-panel {
        margin: 0 4px 12px;
        padding: 7px 0;
        border-radius: 18px;
        box-shadow: none;
        background: var(--tofaa-white);
    }

    .tofaa-nav__submenu a {
        padding: 11px 18px;
        border: 0;
        font-size: 13px;
    }

    .tofaa-nav__submenu a:hover,
    .tofaa-nav__submenu a:focus-visible {
        padding-left: 23px;
    }

    .tofaa-nav__item--dropdown:hover > .tofaa-nav__submenu,
    .tofaa-nav__item--dropdown:focus-within > .tofaa-nav__submenu {
        max-height: 0;
    }

    .tofaa-nav__item--dropdown.is-open > .tofaa-nav__submenu {
        max-height: 360px;
    }

    .tofaa-nav__actions .tofaa-nav__action span:not(.screen-reader-text),
    .tofaa-nav__cart b {
        display: none;
    }

    .tofaa-nav__actions {
        gap: 12px;
    }

    .tofaa-hero {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .tofaa-hero__copy {
        padding: 62px 10px 10px;
        text-align: center;
    }

    .tofaa-hero__copy-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tofaa-hero__moments {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding-top: 0;
    }

    .tofaa-moment-card {
        min-height: 94px;
        padding: 16px;
        align-items: flex-end;
    }

    .tofaa-moment-card__text {
        max-width: 150px;
        font-size: 16px;
    }

    .tofaa-hero h1 {
        margin: 0 auto;
        font-size: clamp(49px, 9vw, 76px);
    }

    .tofaa-benefits {
        max-width: 650px;
        margin: 36px auto 0;
    }

    .tofaa-hero__buttons {
        justify-content: center;
    }

    .tofaa-hero__visual {
        min-height: 590px;
    }
}

@media (max-width: 620px) {
    .tofaa-nav {
        grid-template-columns: 115px 1fr auto;
        padding: 8px 12px;
    }

    .tofaa-nav__brand {
        width: 110px;
        height: 48px;
    }

    .tofaa-nav__actions {
        display: none;
    }

    .tofaa-hero__copy {
        padding-top: 45px;
    }

    .tofaa-hero__moments {
        grid-template-columns: 1fr;
    }

    .tofaa-moment-card {
        min-height: 82px;
        border-radius: 22px;
    }

    .tofaa-moment-card__number {
        inset: -3px auto auto 12px;
        font-size: 66px;
    }

    .tofaa-moment-card__text {
        max-width: 100%;
        font-size: 15px;
    }

    .tofaa-hero__eyebrow {
        font-size: 11px;
    }

    .tofaa-hero h1 {
        font-size: clamp(43px, 13.4vw, 62px);
        line-height: 1;
    }

    .tofaa-hero__lead {
        margin-top: 20px;
        font-size: 18px;
    }

    .tofaa-benefits {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }

    .tofaa-hero__buttons {
        margin-top: 34px;
        flex-direction: column;
        gap: 14px;
    }

    .tofaa-btn--primary {
        width: 100%;
        min-width: 0;
    }

    .tofaa-hero__visual {
        min-height: 465px;
    }

    .tofaa-visual__blob {
        width: 116%;
        height: 77%;
        left: -8%;
    }

    .tofaa-visual__product {
        width: 106%;
        top: 30%;
        left: -7%;
    }

    .tofaa-visual__badge {
        width: 104px;
        height: 104px;
        top: 12%;
        right: 4%;
    }

    .tofaa-visual__badge strong {
        font-size: 43px;
    }

    .tofaa-visual__badge span {
        font-size: 10px;
    }

    .tofaa-visual__apple {
        width: 105px;
        height: 72px;
        left: 7%;
    }

    .tofaa-visual__mascot {
        width: 118px;
        right: 7%;
        bottom: 6%;
    }

    .tofaa-visual__orb--one {
        width: 46px;
        height: 46px;
        left: 49%;
    }

    .tofaa-visual__orb--two {
        width: 38px;
        height: 38px;
    }

    .tofaa-floating-actions {
        right: 14px;
        bottom: 14px;
        gap: 10px;
    }

    .tofaa-float {
        width: 54px;
        height: 54px;
    }
}

/* V8: Motyw bazowy dodaje własne podkreślenie linków przy hover.
 * Usuwamy je wyłącznie z linków nowego navbara. Animowana kreska ::after
 * pozostaje bez zmian i jest jedynym efektem pod elementami menu.
 */
.tofaa-nav a.tofaa-nav__link,
.tofaa-nav a.tofaa-nav__link:link,
.tofaa-nav a.tofaa-nav__link:visited,
.tofaa-nav a.tofaa-nav__link:hover,
.tofaa-nav a.tofaa-nav__link:focus,
.tofaa-nav a.tofaa-nav__link:focus-visible,
.tofaa-nav a.tofaa-nav__link:active,
.tofaa-nav a.tofaa-nav__action,
.tofaa-nav a.tofaa-nav__action:link,
.tofaa-nav a.tofaa-nav__action:visited,
.tofaa-nav a.tofaa-nav__action:hover,
.tofaa-nav a.tofaa-nav__action:focus,
.tofaa-nav a.tofaa-nav__action:focus-visible,
.tofaa-nav a.tofaa-nav__action:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* V12: utrzymanie poprawnego koloru ikony koszyka także po odwiedzeniu linku.
 * Globalny styl motywu `a:visited { color: #800080; }` nie może nadpisywać
 * koloru pływającego przycisku.
 */
a.tofaa-floating-cart,
a.tofaa-floating-cart:link,
a.tofaa-floating-cart:visited,
a.tofaa-floating-cart:active {
    color: #7C4FA0 !important;
}

a.tofaa-floating-cart:hover,
a.tofaa-floating-cart:focus,
a.tofaa-floating-cart:focus-visible {
    color: #F8EAE1 !important;
}

.tofaa-floating-cart svg,
.tofaa-floating-cart svg path,
.tofaa-floating-cart svg circle {
    fill: none !important;
    stroke: currentColor !important;
}

/* V13: navbar podążający za użytkownikiem + efekt liquid glass.
 * Navbar jest przypięty do okna przeglądarki, dlatego pozostaje widoczny
 * także po opuszczeniu sekcji hero. Dodatkowy padding u góry strony
 * zachowuje miejsce, które wcześniej zajmował w normalnym układzie.
 */
body.page-template-home-page {
    overflow-x: clip;
}

.tofaa-home {
    padding-top: clamp(132px, 9.2vw, 154px);
}

.tofaa-nav {
    width: min(1480px, calc(100vw - clamp(28px, 4.4vw, 68px)));
    margin: 0;
    position: fixed;
    top: clamp(14px, 1.45vw, 24px);
    left: 50%;
    z-index: 9990;
    transform: translateX(-50%);

    /* Fallback dla przeglądarek bez backdrop-filter. */
    background-color: rgba(255, 253, 251, .88);
    background-image:
        radial-gradient(circle at 12% -35%, rgba(255, 255, 255, .96) 0 22%, transparent 48%),
        radial-gradient(circle at 88% 145%, rgba(176, 131, 188, .22) 0 18%, transparent 48%),
        linear-gradient(135deg, rgba(255, 255, 255, .64), rgba(248, 234, 225, .38));
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow:
        0 18px 48px rgba(72, 38, 76, .15),
        inset 0 1px 0 rgba(255, 255, 255, .92),
        inset 0 -1px 0 rgba(124, 79, 160, .08);
    -webkit-backdrop-filter: blur(24px) saturate(165%);
    backdrop-filter: blur(24px) saturate(165%);
}

/* Pasek administracyjny WordPressa nie może zasłaniać navbara. */
body.admin-bar .tofaa-nav {
    top: calc(32px + clamp(14px, 1.45vw, 24px));
}

@media (max-width: 980px) {
    .tofaa-home {
        padding-top: 112px;
    }

    .tofaa-nav {
        width: calc(100vw - 28px);
        top: 14px;
        background-color: rgba(255, 253, 251, .9);
    }

    /* Rozwijane menu mobilne zachowuje ten sam szklany charakter. */
    .tofaa-nav__menu {
        background-color: rgba(255, 253, 251, .9);
        background-image: linear-gradient(135deg, rgba(255,255,255,.66), rgba(248,234,225,.44));
        border: 1px solid rgba(255, 255, 255, .72);
        -webkit-backdrop-filter: blur(22px) saturate(155%);
        backdrop-filter: blur(22px) saturate(155%);
    }
}

@media (max-width: 782px) {
    body.admin-bar .tofaa-nav {
        top: 56px;
    }
}

@media (max-width: 620px) {
    .tofaa-home {
        padding-top: 100px;
    }

    .tofaa-nav {
        width: calc(100vw - 20px);
        top: 10px;
    }

    body.admin-bar .tofaa-nav {
        top: 52px;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .tofaa-nav,
    .tofaa-nav__menu {
        background-color: rgba(255, 253, 251, .97);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* V14: prawdziwie półprzezroczysty navbar bez kolorowego gradientu. */
.tofaa-nav {
    background-color: rgba(248, 234, 225, .38) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, .62);
    box-shadow:
        0 16px 42px rgba(72, 38, 76, .13),
        inset 0 1px 0 rgba(255, 255, 255, .78),
        inset 0 -1px 0 rgba(124, 79, 160, .08);
    -webkit-backdrop-filter: blur(22px) saturate(140%) contrast(104%);
    backdrop-filter: blur(22px) saturate(140%) contrast(104%);
}

/* Wszystkie tekstowe linki navbara mają zawsze ten sam kolor,
 * również po odwiedzeniu strony docelowej.
 */
.tofaa-nav a.tofaa-nav__link,
.tofaa-nav a.tofaa-nav__link:link,
.tofaa-nav a.tofaa-nav__link:visited,
.tofaa-nav a.tofaa-nav__link:hover,
.tofaa-nav a.tofaa-nav__link:focus,
.tofaa-nav a.tofaa-nav__link:focus-visible,
.tofaa-nav a.tofaa-nav__link:active,
.tofaa-nav a.tofaa-nav__action,
.tofaa-nav a.tofaa-nav__action:link,
.tofaa-nav a.tofaa-nav__action:visited,
.tofaa-nav a.tofaa-nav__action:hover,
.tofaa-nav a.tofaa-nav__action:focus,
.tofaa-nav a.tofaa-nav__action:focus-visible,
.tofaa-nav a.tofaa-nav__action:active {
    color: #7C4FA0 !important;
}

/* Wersja mobilna bez gradientu — ten sam efekt szkła. */
@media (max-width: 980px) {
    .tofaa-nav,
    .tofaa-nav__menu {
        background-color: rgba(248, 234, 225, .42) !important;
        background-image: none !important;
        -webkit-backdrop-filter: blur(22px) saturate(140%) contrast(104%);
        backdrop-filter: blur(22px) saturate(140%) contrast(104%);
    }
}

/* V15: przezroczyste wnętrze przycisku „Kup Tofaa!”.
 * Animowany gradient pozostaje wyłącznie na obwódce.
 */
.tofaa-nav__trigger--featured,
.tofaa-nav__trigger--featured:hover,
.tofaa-nav__item:focus-within > .tofaa-nav__trigger--featured,
.tofaa-nav__item.is-open > .tofaa-nav__trigger--featured {
    background: transparent !important;
}

/* Gradientowa ramka jest osobną, zamaskowaną warstwą.
 * Dzięki temu środek przycisku pokazuje liquid glass navbara.
 */
.tofaa-nav__trigger--featured::before {
    content: "";
    display: block !important;
    position: absolute;
    inset: -2px;
    z-index: 0;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--tofaa-shop-angle),
        #7C4FA0 0deg,
        #F8EAE1 90deg,
        #7C4FA0 180deg,
        #F8EAE1 270deg,
        #7C4FA0 360deg
    );
    pointer-events: none;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.tofaa-nav__trigger--featured::after {
    display: none !important;
}

/* V16 — poprawka ramki „Kup Tofaa!”:
 * środek pozostaje przezroczysty, a gradient wraca dokładnie do animacji z V14.
 */
.tofaa-nav__trigger--featured,
.tofaa-nav__trigger--featured:hover,
.tofaa-nav__item:focus-within > .tofaa-nav__trigger--featured,
.tofaa-nav__item.is-open > .tofaa-nav__trigger--featured {
    background: transparent !important;
    border-color: transparent !important;
    animation: none !important;
}

/* W V15 ramka była przesunięta o 2 px na zewnątrz i została ucięta
 * przez overflow:hidden. Teraz cała animowana obwódka mieści się
 * wewnątrz przycisku.
 */
.tofaa-nav__trigger--featured::before {
    --tofaa-shop-angle: 0deg;
    content: "";
    display: block !important;
    position: absolute;
    inset: 0 !important;
    z-index: 0;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--tofaa-shop-angle),
        #7C4FA0 0deg,
        #F8EAE1 90deg,
        #7C4FA0 180deg,
        #F8EAE1 270deg,
        #7C4FA0 360deg
    ) !important;
    pointer-events: none;
    animation: tofaa-shop-border-spin 4.5s linear infinite;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.tofaa-nav__trigger--featured:hover::before,
.tofaa-nav__item:focus-within > .tofaa-nav__trigger--featured::before,
.tofaa-nav__item.is-open > .tofaa-nav__trigger--featured::before {
    animation-duration: 2.2s;
}

.tofaa-nav__trigger--featured::after {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-nav__trigger--featured::before {
        animation: none;
    }
}

/* ============================================================
   V17 — liquid-glass dropdowny i szerokie mega menu „Kup Tofaa!”
   ============================================================ */

/*
 * Dropdown zaczyna się nieco pod górną krawędzią navbara i wysuwa
 * z jego tylnej części. Pozostaje w tym samym kontekście szerokości.
 */
.tofaa-nav__submenu {
    top: calc(100% - 16px);
    padding-top: 26px;
}

/* Liquid glass identyczny wizualnie z navbarem. */
.tofaa-nav__submenu-panel {
    border-color: rgba(255, 255, 255, .62) !important;
    background-color: rgba(248, 234, 225, .38) !important;
    background-image: none !important;
    box-shadow:
        0 24px 48px rgba(72, 38, 76, .15),
        inset 0 1px 0 rgba(255, 255, 255, .78),
        inset 0 -1px 0 rgba(124, 79, 160, .08);
    -webkit-backdrop-filter: blur(22px) saturate(140%) contrast(104%);
    backdrop-filter: blur(22px) saturate(140%) contrast(104%);
}

/* Pierwszy dropdown pozycjonuje się względem całego navbara. */
.tofaa-nav__item--shop {
    position: static;
}

.tofaa-nav__submenu--shop {
    width: 100%;
    min-width: 0;
    padding-top: 30px;
    top: calc(100% - 20px);
    right: 0;
    left: 0;
    transform: translateY(-28px) scale(.992);
    transform-origin: top center;
}

.tofaa-nav__submenu--shop::before {
    height: 42px;
    top: -12px;
}

.tofaa-nav__item--shop:hover > .tofaa-nav__submenu--shop,
.tofaa-nav__item--shop:focus-within > .tofaa-nav__submenu--shop,
.tofaa-nav__item--shop.is-open > .tofaa-nav__submenu--shop {
    transform: translateY(0) scale(1);
}

.tofaa-nav__submenu--shop .tofaa-nav__submenu-panel {
    padding: 34px clamp(22px, 3vw, 46px) 26px;
    border-radius: 0 0 30px 30px;
    overflow: hidden;
}

.tofaa-nav__category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 22px);
}

/*
 * Nadpisujemy ogólne style linków z małego dropdownu. Każda kategoria
 * jest teraz wizualną kartą ze zdjęciem.
 */
.tofaa-nav__submenu--shop a.tofaa-nav__category-card,
.tofaa-nav__submenu--shop a.tofaa-nav__category-card:link,
.tofaa-nav__submenu--shop a.tofaa-nav__category-card:visited {
    min-width: 0;
    min-height: 190px;
    padding: 12px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 124px auto;
    gap: 10px 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .54);
    border-radius: 22px;
    background: rgba(255, 255, 255, .16);
    color: #7C4FA0 !important;
    text-decoration: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .56),
        0 8px 20px rgba(72, 38, 76, .06);
    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        background-color .24s ease,
        border-color .24s ease,
        box-shadow .28s ease;
}

.tofaa-nav__submenu--shop a.tofaa-nav__category-card:hover,
.tofaa-nav__submenu--shop a.tofaa-nav__category-card:focus-visible {
    padding: 12px;
    color: #7C4FA0 !important;
    background: rgba(255, 255, 255, .32);
    border-color: rgba(255, 255, 255, .82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .74),
        0 15px 30px rgba(72, 38, 76, .13);
    transform: translateY(-5px);
    outline: none;
}

.tofaa-nav__category-image {
    grid-column: 1 / -1;
    min-width: 0;
    height: 124px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .64), transparent 52%),
        rgba(176, 131, 188, .14);
}

.tofaa-nav__category-image img {
    width: 92%;
    height: 112px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 12px 13px rgba(61, 24, 63, .18));
    transform: scale(.96) rotate(-2deg);
    transition: transform .36s cubic-bezier(.2,.8,.2,1);
}

.tofaa-nav__category-card:nth-child(even) .tofaa-nav__category-image img {
    transform: scale(.96) rotate(2deg);
}

.tofaa-nav__category-card:hover .tofaa-nav__category-image img,
.tofaa-nav__category-card:focus-visible .tofaa-nav__category-image img {
    transform: scale(1.04) rotate(0);
}

.tofaa-nav__category-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: 4px;
}

.tofaa-nav__category-copy strong {
    color: #7C4FA0;
    font-size: clamp(12px, .88vw, 15px);
    font-weight: 850;
    line-height: 1.18;
    text-transform: uppercase;
}

.tofaa-nav__category-copy > span {
    color: rgba(124, 79, 160, .72);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
}

.tofaa-nav__category-arrow {
    width: 32px;
    height: 32px;
    align-self: center;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(176, 131, 188, .18);
    color: #7C4FA0;
    font-size: 18px;
    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        background-color .24s ease;
}

.tofaa-nav__category-card:hover .tofaa-nav__category-arrow,
.tofaa-nav__category-card:focus-visible .tofaa-nav__category-arrow {
    background: rgba(176, 131, 188, .32);
    transform: translateX(3px);
}

/* „O nas” zachowuje kompaktowy rozmiar, lecz używa tego samego szkła. */
.tofaa-nav__submenu--about .tofaa-nav__submenu-panel {
    background-color: rgba(248, 234, 225, .38) !important;
}

/* Tablet i telefon: mega menu staje się rozwijanym gridem wewnątrz menu. */
@media (max-width: 980px) {
    .tofaa-nav__item--shop {
        position: relative;
    }

    .tofaa-nav__submenu,
    .tofaa-nav__submenu--shop {
        top: auto;
        right: auto;
        left: auto;
        padding-top: 0;
        transform: none;
    }

    .tofaa-nav__submenu-panel,
    .tofaa-nav__submenu--shop .tofaa-nav__submenu-panel {
        margin: 0 4px 12px;
        padding: 12px;
        border-radius: 18px;
        background-color: rgba(248, 234, 225, .42) !important;
    }

    .tofaa-nav__category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .tofaa-nav__submenu--shop a.tofaa-nav__category-card,
    .tofaa-nav__submenu--shop a.tofaa-nav__category-card:hover,
    .tofaa-nav__submenu--shop a.tofaa-nav__category-card:focus-visible {
        min-height: 152px;
        padding: 9px;
        grid-template-rows: 88px auto;
        border-radius: 16px;
    }

    .tofaa-nav__category-image {
        height: 88px;
        border-radius: 12px;
    }

    .tofaa-nav__category-image img {
        height: 80px;
    }

    .tofaa-nav__category-copy strong {
        font-size: 11px;
    }

    .tofaa-nav__category-copy > span {
        display: none;
    }

    .tofaa-nav__category-arrow {
        width: 27px;
        height: 27px;
        font-size: 15px;
    }

    .tofaa-nav__item--shop.is-open > .tofaa-nav__submenu--shop {
        max-height: 720px;
    }
}

@media (max-width: 480px) {
    .tofaa-nav__category-grid {
        grid-template-columns: 1fr;
    }

    .tofaa-nav__submenu--shop a.tofaa-nav__category-card,
    .tofaa-nav__submenu--shop a.tofaa-nav__category-card:hover,
    .tofaa-nav__submenu--shop a.tofaa-nav__category-card:focus-visible {
        min-height: 132px;
        grid-template-columns: 116px minmax(0, 1fr) auto;
        grid-template-rows: 1fr;
        align-items: center;
    }

    .tofaa-nav__category-image {
        grid-column: auto;
        width: 116px;
        height: 104px;
    }

    .tofaa-nav__category-image img {
        width: 108px;
        height: 94px;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .tofaa-nav__submenu-panel {
        background-color: rgba(255, 253, 251, .97) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ============================================================
   V18 — ten sam prawdziwy liquid glass na navbarze i dropdownach
   oraz identyczna przerwa pod navbarem
   ============================================================ */

.tofaa-nav {
    --tofaa-glass-background: rgba(248, 234, 225, .38);
    --tofaa-glass-border: rgba(255, 255, 255, .62);
    --tofaa-glass-blur: blur(22px) saturate(140%) contrast(104%);
    --tofaa-dropdown-gap: 12px;

    /* Backdrop-filter przenosimy na osobną warstwę. Dzięki temu
       zagnieżdżone dropdowny mogą rozmywać treść strony znajdującą
       się faktycznie za nimi. */
    isolation: auto !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.tofaa-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 1px solid var(--tofaa-glass-border);
    border-radius: inherit;
    background-color: var(--tofaa-glass-background);
    background-image: none;
    box-shadow:
        0 16px 42px rgba(72, 38, 76, .13),
        inset 0 1px 0 rgba(255, 255, 255, .78),
        inset 0 -1px 0 rgba(124, 79, 160, .08);
    -webkit-backdrop-filter: var(--tofaa-glass-blur);
    backdrop-filter: var(--tofaa-glass-blur);
    pointer-events: none;
}

/* Zawartość navbara pozostaje ponad jego szklaną warstwą. */
.tofaa-nav__brand,
.tofaa-nav__toggle,
.tofaa-nav__menu,
.tofaa-nav__actions {
    position: relative;
    z-index: 2;
}

/* Oba dropdowny zaczynają się dokładnie 12 px pod navbarem. */
.tofaa-nav__submenu,
.tofaa-nav__submenu--shop {
    top: 100% !important;
    padding-top: var(--tofaa-dropdown-gap) !important;
}

/* Przezroczysty mostek zapobiega zamykaniu menu podczas przejazdu
   kursorem przez przerwę. */
.tofaa-nav__submenu::before,
.tofaa-nav__submenu--shop::before {
    height: var(--tofaa-dropdown-gap) !important;
    top: 0 !important;
}

/* Panel używa dokładnie tych samych parametrów szkła co navbar. */
.tofaa-nav__submenu-panel,
.tofaa-nav__submenu--about .tofaa-nav__submenu-panel,
.tofaa-nav__submenu--shop .tofaa-nav__submenu-panel {
    border-color: var(--tofaa-glass-border) !important;
    background-color: var(--tofaa-glass-background) !important;
    background-image: none !important;
    box-shadow:
        0 20px 42px rgba(72, 38, 76, .13),
        inset 0 1px 0 rgba(255, 255, 255, .78),
        inset 0 -1px 0 rgba(124, 79, 160, .08);
    -webkit-backdrop-filter: var(--tofaa-glass-blur) !important;
    backdrop-filter: var(--tofaa-glass-blur) !important;
}

/* Ta sama odległość i ta sama animacja wysuwania dla obu menu. */
@media (min-width: 981px) {
    .tofaa-nav__submenu {
        transform: translate(-50%, -16px) scale(.985);
    }

    .tofaa-nav__submenu--shop {
        transform: translateY(-16px) scale(.992);
    }

    .tofaa-nav__item--dropdown:hover > .tofaa-nav__submenu,
    .tofaa-nav__item--dropdown:focus-within > .tofaa-nav__submenu,
    .tofaa-nav__item--dropdown.is-open > .tofaa-nav__submenu {
        transform: translate(-50%, 0) scale(1);
    }

    .tofaa-nav__item--shop:hover > .tofaa-nav__submenu--shop,
    .tofaa-nav__item--shop:focus-within > .tofaa-nav__submenu--shop,
    .tofaa-nav__item--shop.is-open > .tofaa-nav__submenu--shop {
        transform: translateY(0) scale(1);
    }
}

/* Na telefonach również zachowujemy tę samą teksturę szkła. */
@media (max-width: 980px) {
    .tofaa-nav__menu,
    .tofaa-nav__submenu-panel,
    .tofaa-nav__submenu--about .tofaa-nav__submenu-panel,
    .tofaa-nav__submenu--shop .tofaa-nav__submenu-panel {
        background-color: var(--tofaa-glass-background) !important;
        background-image: none !important;
        border-color: var(--tofaa-glass-border) !important;
        -webkit-backdrop-filter: var(--tofaa-glass-blur) !important;
        backdrop-filter: var(--tofaa-glass-blur) !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .tofaa-nav::before,
    .tofaa-nav__menu,
    .tofaa-nav__submenu-panel {
        background-color: rgba(255, 253, 251, .97) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* ============================================================
   V20 — poprawne zakotwiczenie obu dropdownów do całego navbara
   ============================================================ */

@media (min-width: 981px) {
    /*
     * Navbar ma transform: translateX(-50%), dlatego jest naturalnym
     * containing blockiem dla position: fixed. Dropdowny nie liczą już
     * szerokości od środkowej grupy linków.
     */
    .tofaa-nav__submenu,
    .tofaa-nav__submenu--shop,
    .tofaa-nav__submenu--about {
        position: fixed !important;
        top: calc(100% + 10px) !important;
        right: auto !important;
        padding-top: 0 !important;
        z-index: 1 !important;
    }

    /*
     * Niewidoczny mostek wypełnia wyłącznie 10-pikselową przerwę.
     * Dzięki niemu menu nie zamyka się podczas przejazdu kursorem.
     */
    .tofaa-nav__submenu::before,
    .tofaa-nav__submenu--shop::before,
    .tofaa-nav__submenu--about::before {
        height: 10px !important;
        top: -10px !important;
        right: 0 !important;
        left: 0 !important;
    }

    /*
     * Mega menu „Kup Tofaa!” — dokładnie od lewej do prawej
     * krawędzi całego navbara.
     */
    .tofaa-nav__submenu--shop {
        width: 100% !important;
        min-width: 0 !important;
        left: 0 !important;
        transform: translateY(-6px) scale(.992) !important;
        transform-origin: top center !important;
    }

    .tofaa-nav__item--shop:hover > .tofaa-nav__submenu--shop,
    .tofaa-nav__item--shop:focus-within > .tofaa-nav__submenu--shop,
    .tofaa-nav__item--shop.is-open > .tofaa-nav__submenu--shop {
        transform: translateY(0) scale(1) !important;
    }

    /*
     * „O nas” — kompaktowy panel wyśrodkowany względem przycisku.
     * Wartość X jest liczona przez JS względem całego navbara.
     */
    .tofaa-nav__submenu--about {
        width: 290px !important;
        min-width: 290px !important;
        left: var(--tofaa-about-center-x, 50%) !important;
        transform: translate(-50%, -6px) scale(.985) !important;
        transform-origin: top center !important;
    }

    .tofaa-nav__item--dropdown:hover > .tofaa-nav__submenu--about,
    .tofaa-nav__item--dropdown:focus-within > .tofaa-nav__submenu--about,
    .tofaa-nav__item--dropdown.is-open > .tofaa-nav__submenu--about {
        transform: translate(-50%, 0) scale(1) !important;
    }

    /*
     * Oba panele zachowują obecny blur i teksturę liquid glass z V18.
     * Nie zmieniamy ich wyglądu — wyłącznie geometrię.
     */
    .tofaa-nav__submenu-panel,
    .tofaa-nav__submenu--shop .tofaa-nav__submenu-panel,
    .tofaa-nav__submenu--about .tofaa-nav__submenu-panel {
        -webkit-backdrop-filter: var(--tofaa-glass-blur) !important;
        backdrop-filter: var(--tofaa-glass-blur) !important;
    }
}

/* ============================================================
   V23 — nowe fioletowe bloby w tle hero
   Inspirowane referencją: bardziej organiczne, nachodzące na siebie,
   z bardzo delikatnym, spokojnym ruchem.
   ============================================================ */

.tofaa-hero__visual {
    overflow: hidden;
}

.tofaa-visual__blob {
    width: 108%;
    height: 70%;
    position: absolute;
    top: 9%;
    left: -1%;
    z-index: 1;
    border-radius: 42% 58% 52% 48% / 34% 38% 62% 66%;
    background:
        radial-gradient(circle at 24% 18%, rgba(255,255,255,.42), transparent 24%),
        radial-gradient(circle at 67% 35%, rgba(255,255,255,.14), transparent 28%),
        linear-gradient(145deg, #d7b8e3 0%, #c49ed6 34%, var(--tofaa-purple-light) 68%, #ac82c3 100%);
    box-shadow:
        inset 0 0 72px rgba(255,255,255,.16),
        0 24px 52px rgba(121, 79, 160, .10);
    transform: rotate(-6deg);
    will-change: transform, border-radius;
    animation: tofaa-blob-main 13.5s ease-in-out infinite;
}

.tofaa-visual__blob::before {
    content: "";
    width: 86%;
    height: 43%;
    position: absolute;
    right: -2%;
    bottom: -16%;
    z-index: 0;
    border-radius: 53% 47% 0 0 / 100% 100% 0 0;
    background:
        radial-gradient(circle at 26% 18%, rgba(255,255,255,.16), transparent 30%),
        linear-gradient(160deg, #b98fd0 0%, #b083bc 60%, #a577bf 100%);
    transform: rotate(2deg);
    box-shadow: inset 0 0 44px rgba(255,255,255,.08);
    will-change: transform, border-radius;
    animation: tofaa-blob-bottom 16s ease-in-out infinite;
}

.tofaa-visual__blob::after {
    content: "";
    width: 47%;
    height: 27%;
    position: absolute;
    left: 28%;
    bottom: -4%;
    z-index: -1;
    border-radius: 50% 50% 48% 52% / 52% 54% 46% 48%;
    background:
        radial-gradient(circle at 35% 26%, rgba(255,255,255,.12), transparent 35%),
        linear-gradient(145deg, rgba(202, 165, 220, .96) 0%, rgba(176, 131, 188, .94) 100%);
    filter: blur(1px);
    opacity: .92;
    transform: rotate(-3deg);
    will-change: transform, border-radius;
    animation: tofaa-blob-middle 14.5s ease-in-out infinite;
}

@keyframes tofaa-blob-main {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-6deg) scale(1);
        border-radius: 42% 58% 52% 48% / 34% 38% 62% 66%;
    }
    25% {
        transform: translate3d(10px, -8px, 0) rotate(-4deg) scale(1.015);
        border-radius: 46% 54% 49% 51% / 37% 45% 55% 63%;
    }
    50% {
        transform: translate3d(-12px, 8px, 0) rotate(-7deg) scale(.995);
        border-radius: 39% 61% 56% 44% / 32% 41% 59% 68%;
    }
    75% {
        transform: translate3d(7px, 12px, 0) rotate(-5deg) scale(1.01);
        border-radius: 44% 56% 48% 52% / 39% 36% 64% 61%;
    }
}

@keyframes tofaa-blob-bottom {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(2deg) scale(1);
        border-radius: 53% 47% 0 0 / 100% 100% 0 0;
    }
    33% {
        transform: translate3d(-12px, -10px, 0) rotate(.5deg) scale(1.02);
        border-radius: 58% 42% 0 0 / 100% 100% 0 0;
    }
    66% {
        transform: translate3d(10px, 8px, 0) rotate(3.5deg) scale(.992);
        border-radius: 48% 52% 0 0 / 100% 100% 0 0;
    }
}

@keyframes tofaa-blob-middle {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-3deg) scale(1);
        border-radius: 50% 50% 48% 52% / 52% 54% 46% 48%;
    }
    40% {
        transform: translate3d(14px, -6px, 0) rotate(-1deg) scale(1.025);
        border-radius: 54% 46% 51% 49% / 47% 58% 42% 53%;
    }
    70% {
        transform: translate3d(-10px, 10px, 0) rotate(-4deg) scale(.985);
        border-radius: 47% 53% 44% 56% / 57% 49% 51% 43%;
    }
}

/* Subtelniejsze ułożenie na tabletach i telefonach. */
@media (max-width: 1180px) {
    .tofaa-visual__blob {
        width: 112%;
        left: -4%;
        height: 69%;
    }

    .tofaa-visual__blob::before {
        width: 92%;
        right: -5%;
        bottom: -19%;
    }
}

@media (max-width: 980px) {
    .tofaa-visual__blob {
        width: 120%;
        height: 72%;
        top: 10%;
        left: -9%;
        transform: rotate(-5deg);
    }

    .tofaa-visual__blob::before {
        width: 96%;
        height: 39%;
        right: -9%;
        bottom: -17%;
    }

    .tofaa-visual__blob::after {
        width: 52%;
        height: 24%;
        left: 24%;
        bottom: -1%;
    }
}

@media (max-width: 640px) {
    .tofaa-visual__blob {
        width: 128%;
        height: 74%;
        top: 9%;
        left: -15%;
    }

    .tofaa-visual__blob::before {
        width: 102%;
        height: 42%;
        right: -10%;
        bottom: -19%;
    }

    .tofaa-visual__blob::after {
        width: 58%;
        left: 22%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__blob,
    .tofaa-visual__blob::before,
    .tofaa-visual__blob::after {
        animation: none !important;
    }
}

/* ============================================================
   V24 — bloby nie są już ucięte + dodane małe, lewitujące bloby
   ============================================================ */

.tofaa-hero__visual {
    overflow: hidden;
    isolation: isolate;
}

/* Główny, górny blob bardziej mieści się w kadrze. */
.tofaa-visual__blob {
    width: 95%;
    height: 66%;
    top: 10%;
    left: 5%;
    border-radius: 44% 56% 52% 48% / 34% 38% 62% 66%;
}

/* Dolny duży blob zostaje w całości w obrębie sekcji hero. */
.tofaa-visual__blob::before {
    width: 82%;
    height: 39%;
    right: -1%;
    bottom: -6%;
    border-radius: 54% 46% 0 0 / 100% 100% 0 0;
}

/* Środkowy łączący blob również nie wychodzi poza kadr. */
.tofaa-visual__blob::after {
    width: 40%;
    height: 23%;
    left: 31%;
    bottom: 2%;
    z-index: -1;
}

/* Dwa dodatkowe, małe, fioletowe bloby — lekkie i spokojne. */
.tofaa-hero__visual::before,
.tofaa-hero__visual::after {
    content: "";
    position: absolute;
    z-index: 2;
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,.28), transparent 34%),
        linear-gradient(145deg, rgba(211, 177, 229, .96) 0%, rgba(176, 131, 188, .94) 100%);
    box-shadow:
        inset 0 0 26px rgba(255,255,255,.10),
        0 14px 28px rgba(121, 79, 160, .08);
    opacity: .95;
    will-change: transform, border-radius;
    pointer-events: none;
}

.tofaa-hero__visual::before {
    width: 132px;
    height: 92px;
    top: 18%;
    right: 14%;
    border-radius: 47% 53% 45% 55% / 55% 48% 52% 45%;
    transform: rotate(-14deg);
    animation: tofaa-mini-blob-one 11.5s ease-in-out infinite;
}

.tofaa-hero__visual::after {
    width: 112px;
    height: 78px;
    bottom: 14%;
    right: 24%;
    border-radius: 52% 48% 56% 44% / 45% 58% 42% 55%;
    transform: rotate(10deg);
    animation: tofaa-mini-blob-two 12.8s ease-in-out infinite;
}

@keyframes tofaa-mini-blob-one {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-14deg) scale(1);
        border-radius: 47% 53% 45% 55% / 55% 48% 52% 45%;
    }
    35% {
        transform: translate3d(10px, -8px, 0) rotate(-10deg) scale(1.04);
        border-radius: 51% 49% 42% 58% / 49% 55% 45% 51%;
    }
    70% {
        transform: translate3d(-8px, 9px, 0) rotate(-16deg) scale(.98);
        border-radius: 44% 56% 49% 51% / 58% 43% 57% 42%;
    }
}

@keyframes tofaa-mini-blob-two {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(10deg) scale(1);
        border-radius: 52% 48% 56% 44% / 45% 58% 42% 55%;
    }
    40% {
        transform: translate3d(-9px, -10px, 0) rotate(14deg) scale(1.03);
        border-radius: 56% 44% 50% 50% / 41% 61% 39% 59%;
    }
    75% {
        transform: translate3d(7px, 8px, 0) rotate(7deg) scale(.985);
        border-radius: 48% 52% 59% 41% / 51% 50% 50% 49%;
    }
}

@media (max-width: 1180px) {
    .tofaa-visual__blob {
        width: 97%;
        left: 3%;
        height: 66%;
    }

    .tofaa-visual__blob::before {
        width: 86%;
        bottom: -7%;
    }

    .tofaa-hero__visual::before {
        width: 116px;
        height: 82px;
        right: 11%;
    }

    .tofaa-hero__visual::after {
        width: 96px;
        height: 70px;
        right: 22%;
    }
}

@media (max-width: 980px) {
    .tofaa-visual__blob {
        width: 102%;
        height: 69%;
        top: 10%;
        left: 0;
    }

    .tofaa-visual__blob::before {
        width: 89%;
        height: 38%;
        right: -2%;
        bottom: -8%;
    }

    .tofaa-visual__blob::after {
        width: 42%;
        height: 21%;
        left: 30%;
        bottom: 3%;
    }

    .tofaa-hero__visual::before {
        width: 88px;
        height: 62px;
        top: 17%;
        right: 9%;
    }

    .tofaa-hero__visual::after {
        width: 72px;
        height: 52px;
        bottom: 16%;
        right: 19%;
    }
}

@media (max-width: 640px) {
    .tofaa-visual__blob {
        width: 106%;
        left: -2%;
        height: 71%;
    }

    .tofaa-visual__blob::before {
        width: 92%;
        height: 40%;
        right: -3%;
        bottom: -9%;
    }

    .tofaa-hero__visual::before {
        width: 68px;
        height: 48px;
        top: 16%;
        right: 7%;
    }

    .tofaa-hero__visual::after {
        width: 58px;
        height: 42px;
        right: 17%;
        bottom: 17%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-hero__visual::before,
    .tofaa-hero__visual::after {
        animation: none !important;
    }
}

/* ============================================================
   V25 — bloby mogą wychodzić poza prawą krawędź + usunięte
   maskotka, żurawiny/orby i owalny plaster
   ============================================================ */

.tofaa-hero,
.tofaa-hero__visual {
    overflow: visible !important;
}

/* Główne fioletowe formy nie są już "zamknięte" w obrębie prawej krawędzi.
   Pozwalamy im spokojnie wyjść poza sekcję jak w referencji. */
.tofaa-visual__blob {
    width: 103%;
    height: 67%;
    top: 10%;
    left: 8%;
    border-radius: 44% 56% 52% 48% / 34% 38% 62% 66%;
}

.tofaa-visual__blob::before {
    width: 88%;
    height: 41%;
    right: -11%;
    bottom: -7%;
}

.tofaa-visual__blob::after {
    width: 43%;
    height: 24%;
    left: 34%;
    bottom: 3%;
}

/* Usuwamy wszystkie elementy, których nie chcesz w tej sekcji. */
.tofaa-visual__mascot,
.tofaa-visual__orb,
.tofaa-visual__apple {
    display: none !important;
}

/* Dodatkowe małe bloby zostają, ale są trochę subtelniejsze i bardziej "w tle". */
.tofaa-hero__visual::before,
.tofaa-hero__visual::after {
    opacity: .72;
    z-index: 1;
    filter: blur(.2px);
}

.tofaa-hero__visual::before {
    width: 124px;
    height: 86px;
    top: 17%;
    right: 7%;
}

.tofaa-hero__visual::after {
    width: 108px;
    height: 74px;
    bottom: 15%;
    right: 14%;
}

/* Responsywne dopasowanie bez ucinania po prawej. */
@media (max-width: 1180px) {
    .tofaa-visual__blob {
        width: 106%;
        left: 5%;
    }

    .tofaa-visual__blob::before {
        width: 90%;
        right: -12%;
    }

    .tofaa-hero__visual::before {
        right: 5%;
    }

    .tofaa-hero__visual::after {
        right: 12%;
    }
}

@media (max-width: 980px) {
    .tofaa-visual__blob {
        width: 110%;
        height: 69%;
        left: 1%;
    }

    .tofaa-visual__blob::before {
        width: 92%;
        right: -10%;
        bottom: -9%;
    }

    .tofaa-visual__blob::after {
        width: 45%;
        left: 31%;
    }

    .tofaa-hero__visual::before {
        width: 84px;
        height: 58px;
        right: 4%;
    }

    .tofaa-hero__visual::after {
        width: 68px;
        height: 48px;
        right: 10%;
    }
}

@media (max-width: 640px) {
    .tofaa-visual__blob {
        width: 114%;
        left: -1%;
        height: 71%;
    }

    .tofaa-visual__blob::before {
        width: 94%;
        right: -9%;
    }

    .tofaa-hero__visual::before {
        width: 62px;
        height: 44px;
        right: 2%;
    }

    .tofaa-hero__visual::after {
        width: 52px;
        height: 38px;
        right: 8%;
    }
}

/* ============================================================
   V26 — pełny dolny blob zachodzący na stopkę + dwa mini-bloby
   umieszczone poza obszarem dużych form
   ============================================================ */

/*
 * Pozwalamy elementom hero wychodzić pionowo poza jego obszar.
 * Poziomy nadmiar jest obcinany dopiero na poziomie strony, aby
 * nie pojawił się boczny pasek przewijania.
 */
body.page-template-home-page {
    overflow-x: clip;
}

.tofaa-home {
    overflow: visible !important;
    position: relative;
    z-index: 2;
}

.tofaa-hero,
.tofaa-hero__visual {
    overflow: visible !important;
}

.tofaa-hero__visual {
    z-index: 3;
}

/*
 * Dolny blob jest teraz pełną, miękką elipsą. Wychodzi poniżej hero
 * i wizualnie zachodzi na początek stopki zamiast kończyć się prostą linią.
 */
.tofaa-visual__blob::before {
    width: 96%;
    height: 62%;
    right: -25%;
    bottom: -42%;
    border-radius: 50%;
    transform: rotate(3deg);
    z-index: -1;
}

/* Środkowy łączący blob pozostaje subtelny i nachodzi na oba duże kształty. */
.tofaa-visual__blob::after {
    width: 44%;
    height: 25%;
    left: 33%;
    bottom: -2%;
}

/*
 * Pierwszy mały blob: po lewej stronie, poza obszarem dużych blobów.
 */
.tofaa-hero__visual::before {
    width: 104px;
    height: 72px;
    top: 34%;
    left: -5%;
    right: auto;
    bottom: auto;
    opacity: .76;
    z-index: 2;
    border-radius: 47% 53% 45% 55% / 55% 48% 52% 45%;
    animation: tofaa-mini-blob-one 11.5s ease-in-out infinite;
}

/*
 * Drugi mały blob: wysoko po prawej stronie, również poza główną formą.
 */
.tofaa-hero__visual::after {
    width: 82px;
    height: 58px;
    top: 7%;
    right: -7%;
    left: auto;
    bottom: auto;
    opacity: .72;
    z-index: 2;
    border-radius: 52% 48% 56% 44% / 45% 58% 42% 55%;
    animation: tofaa-mini-blob-two 12.8s ease-in-out infinite;
}

@media (max-width: 1180px) {
    .tofaa-visual__blob::before {
        width: 98%;
        height: 60%;
        right: -26%;
        bottom: -40%;
    }

    .tofaa-hero__visual::before {
        width: 92px;
        height: 64px;
        left: -4%;
    }

    .tofaa-hero__visual::after {
        width: 74px;
        height: 52px;
        right: -5%;
    }
}

@media (max-width: 980px) {
    .tofaa-visual__blob::before {
        width: 101%;
        height: 58%;
        right: -24%;
        bottom: -38%;
    }

    .tofaa-hero__visual::before {
        width: 74px;
        height: 52px;
        top: 31%;
        left: -2%;
    }

    .tofaa-hero__visual::after {
        width: 62px;
        height: 44px;
        top: 8%;
        right: -2%;
    }
}

@media (max-width: 640px) {
    .tofaa-visual__blob::before {
        width: 105%;
        height: 56%;
        right: -23%;
        bottom: -35%;
    }

    .tofaa-hero__visual::before {
        width: 58px;
        height: 42px;
        top: 30%;
        left: 0;
    }

    .tofaa-hero__visual::after {
        width: 50px;
        height: 36px;
        top: 8%;
        right: 0;
    }
}

/* ============================================================
   V27 — pełny, okrągły dolny blob delikatnie wsuwający się pod footer
   ============================================================ */

/*
 * W poprzedniej wersji wcześniejsze keyframes nadal nadpisywały
 * border-radius i zamieniały blob w półkole z płaskim dołem.
 * Dolny blob dostaje własną animację, w której pozostaje zaokrąglony
 * w każdej klatce.
 */
.tofaa-visual__blob::before {
    width: 88%;
    height: 56%;
    right: -17%;
    bottom: -34%;
    z-index: -1;
    border-radius: 49% 51% 47% 53% / 54% 47% 53% 46%;
    transform: rotate(3deg);
    transform-origin: 50% 50%;
    animation: tofaa-footer-blob-float 17s ease-in-out infinite !important;
    will-change: transform, border-radius;
}

/*
 * Ruch jest spokojny, a cały kształt pozostaje elipsą.
 * Dolna część wychodzi poza hero, dzięki czemu wygląda jak wsuwająca
 * się pod zielony footer, a nie jak ucięta prostą linią.
 */
@keyframes tofaa-footer-blob-float {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(3deg) scale(1);
        border-radius: 49% 51% 47% 53% / 54% 47% 53% 46%;
    }
    33% {
        transform: translate3d(-10px, -8px, 0) rotate(1.5deg) scale(1.012);
        border-radius: 52% 48% 50% 50% / 51% 55% 45% 49%;
    }
    66% {
        transform: translate3d(9px, 7px, 0) rotate(4.5deg) scale(.993);
        border-radius: 46% 54% 52% 48% / 56% 45% 55% 44%;
    }
}

@media (max-width: 1180px) {
    .tofaa-visual__blob::before {
        width: 90%;
        height: 55%;
        right: -18%;
        bottom: -33%;
    }
}

@media (max-width: 980px) {
    .tofaa-visual__blob::before {
        width: 94%;
        height: 54%;
        right: -18%;
        bottom: -31%;
    }
}

@media (max-width: 640px) {
    .tofaa-visual__blob::before {
        width: 98%;
        height: 52%;
        right: -17%;
        bottom: -28%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__blob::before {
        animation: none !important;
    }
}

/* V28 — środkowy blob przesunięty wyraźniej w lewo. */
.tofaa-visual__blob::after {
    left: 18% !important;
}

@media (max-width: 1180px) {
    .tofaa-visual__blob::after {
        left: 16% !important;
    }
}

@media (max-width: 980px) {
    .tofaa-visual__blob::after {
        left: 14% !important;
    }
}

@media (max-width: 640px) {
    .tofaa-visual__blob::after {
        left: 12% !important;
    }
}


/* ============================================================
   V29 — animacja batonika i wachlarza smaków
   ============================================================ */

.tofaa-hero__visual {
    overflow: visible !important;
}

.tofaa-visual__product-stage {
    width: min(96%, 890px);
    height: clamp(300px, 34vw, 470px);
    position: absolute;
    top: 21%;
    left: 1%;
    z-index: 6;
    pointer-events: none;
}

.tofaa-visual__product {
    width: 100%;
    max-width: 820px;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    object-fit: contain;
    filter: drop-shadow(0 28px 22px rgba(65,30,71,.27));
    will-change: transform, opacity;
}

.tofaa-visual__product--main {
    z-index: 8;
    transform: translate3d(110vw, 0, 0) rotate(10deg);
    animation:
        tofaa-hero-main-enter 1.15s cubic-bezier(.18,.88,.18,1) .08s forwards,
        tofaa-hero-main-float 6.8s ease-in-out 1.32s infinite;
}

.tofaa-visual__product--fan {
    top: 6%;
    left: 13%;
    max-width: 520px;
    z-index: 5;
    opacity: 0;
    transform: translate3d(42px, 18px, 0) rotate(4deg) scale(.92);
    filter: drop-shadow(0 16px 14px rgba(65,30,71,.16));
    animation:
        tofaa-hero-fan-reveal .9s cubic-bezier(.2,.9,.24,1) var(--fan-delay) forwards,
        tofaa-hero-fan-float 6.4s ease-in-out calc(var(--fan-delay) + .92s) infinite;
}

.tofaa-visual__product--fan-a {
    --fan-delay: 1.08s;
    --fan-final-transform: translate3d(-176px, -84px, 0) rotate(-22deg) scale(.93);
}

.tofaa-visual__product--fan-b {
    --fan-delay: 1.22s;
    --fan-final-transform: translate3d(-112px, -42px, 0) rotate(-13deg) scale(.95);
}

.tofaa-visual__product--fan-c {
    --fan-delay: 1.36s;
    --fan-final-transform: translate3d(8px, -8px, 0) rotate(0deg) scale(.96);
}

.tofaa-visual__product--fan-d {
    --fan-delay: 1.50s;
    --fan-final-transform: translate3d(118px, 20px, 0) rotate(12deg) scale(.95);
}

.tofaa-visual__product--fan-e {
    --fan-delay: 1.64s;
    --fan-final-transform: translate3d(188px, 58px, 0) rotate(22deg) scale(.92);
}

@keyframes tofaa-hero-main-enter {
    0% {
        transform: translate3d(110vw, -10px, 0) rotate(10deg);
    }
    65% {
        transform: translate3d(-16px, 6px, 0) rotate(2deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(4deg);
    }
}

@keyframes tofaa-hero-main-float {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(4deg);
    }
    50% {
        transform: translate3d(0, -9px, 0) rotate(5.5deg);
    }
}

@keyframes tofaa-hero-fan-reveal {
    0% {
        opacity: 0;
        transform: translate3d(42px, 18px, 0) rotate(4deg) scale(.92);
    }
    55% {
        opacity: .98;
    }
    100% {
        opacity: 1;
        transform: var(--fan-final-transform);
    }
}

@keyframes tofaa-hero-fan-float {
    0%, 100% {
        transform: var(--fan-final-transform);
    }
    50% {
        transform: var(--fan-final-transform) translateY(-8px);
    }
}

/* Utrzymujemy znaczek ponad wachlarzem. */
.tofaa-visual__badge {
    z-index: 10;
}

@media (max-width: 1280px) {
    .tofaa-visual__product-stage {
        top: 23%;
        left: 0;
        width: min(99%, 860px);
    }

    .tofaa-visual__product--fan {
        max-width: 470px;
        left: 16%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-148px, -74px, 0) rotate(-22deg) scale(.92);
    }
    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-92px, -36px, 0) rotate(-13deg) scale(.94);
    }
    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(0, -6px, 0) rotate(0deg) scale(.95);
    }
    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(94px, 16px, 0) rotate(12deg) scale(.94);
    }
    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(150px, 48px, 0) rotate(22deg) scale(.91);
    }
}

@media (max-width: 980px) {
    .tofaa-visual__product-stage {
        position: relative;
        top: auto;
        left: auto;
        width: min(100%, 760px);
        height: clamp(240px, 54vw, 390px);
        margin: 0 auto;
    }

    .tofaa-visual__product {
        max-width: 100%;
    }

    .tofaa-visual__product--fan {
        left: 15%;
        max-width: 54%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-82px, -44px, 0) rotate(-18deg) scale(.90);
    }
    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-52px, -22px, 0) rotate(-10deg) scale(.92);
    }
    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(0, -2px, 0) rotate(0deg) scale(.93);
    }
    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(56px, 10px, 0) rotate(10deg) scale(.92);
    }
    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(88px, 28px, 0) rotate(18deg) scale(.89);
    }
}

@media (max-width: 640px) {
    .tofaa-visual__product-stage {
        height: clamp(220px, 58vw, 320px);
    }

    .tofaa-visual__product--fan {
        left: 17%;
        max-width: 52%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-58px, -34px, 0) rotate(-16deg) scale(.88);
    }
    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-34px, -16px, 0) rotate(-9deg) scale(.90);
    }
    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(0, 0, 0) rotate(0deg) scale(.91);
    }
    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(36px, 8px, 0) rotate(9deg) scale(.90);
    }
    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(58px, 22px, 0) rotate(15deg) scale(.87);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        animation: none !important;
    }

    .tofaa-visual__product--main {
        transform: rotate(4deg) !important;
    }

    .tofaa-visual__product--fan {
        opacity: 1 !important;
        transform: var(--fan-final-transform) !important;
    }
}

/* ============================================================
   V30 — wachlarz smaków bardziej otwarty, tak aby wszystkie
   batoniki były wyraźnie widoczne
   ============================================================ */

.tofaa-visual__product-stage {
    top: 20%;
    left: -1%;
    width: min(100%, 910px);
}

.tofaa-visual__product--fan {
    top: 2%;
    left: 10%;
    max-width: 470px;
    opacity: 0;
    transform-origin: 50% 55%;
    z-index: 6;
}

/* Bardziej otwarty wachlarz */
.tofaa-visual__product--fan-a {
    --fan-delay: 1.08s;
    --fan-final-transform: translate3d(-250px, -122px, 0) rotate(-30deg) scale(.88);
}

.tofaa-visual__product--fan-b {
    --fan-delay: 1.22s;
    --fan-final-transform: translate3d(-150px, -78px, 0) rotate(-18deg) scale(.90);
}

.tofaa-visual__product--fan-c {
    --fan-delay: 1.36s;
    --fan-final-transform: translate3d(-6px, -44px, 0) rotate(-6deg) scale(.91);
}

.tofaa-visual__product--fan-d {
    --fan-delay: 1.50s;
    --fan-final-transform: translate3d(144px, 8px, 0) rotate(11deg) scale(.90);
}

.tofaa-visual__product--fan-e {
    --fan-delay: 1.64s;
    --fan-final-transform: translate3d(248px, 72px, 0) rotate(24deg) scale(.87);
}

/* Główny batonik zostaje na froncie */
.tofaa-visual__product--main {
    z-index: 8;
}

@media (max-width: 1280px) {
    .tofaa-visual__product-stage {
        top: 21%;
        width: min(100%, 860px);
    }

    .tofaa-visual__product--fan {
        top: 3%;
        left: 11%;
        max-width: 430px;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-212px, -108px, 0) rotate(-28deg) scale(.87);
    }

    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-128px, -68px, 0) rotate(-17deg) scale(.89);
    }

    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-4px, -36px, 0) rotate(-5deg) scale(.90);
    }

    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(118px, 6px, 0) rotate(10deg) scale(.89);
    }

    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(202px, 58px, 0) rotate(22deg) scale(.86);
    }
}

@media (max-width: 980px) {
    .tofaa-visual__product-stage {
        width: min(100%, 760px);
        height: clamp(250px, 56vw, 390px);
    }

    .tofaa-visual__product--fan {
        top: 4%;
        left: 12%;
        max-width: 50%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-108px, -58px, 0) rotate(-22deg) scale(.86);
    }

    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-66px, -34px, 0) rotate(-14deg) scale(.88);
    }

    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-4px, -18px, 0) rotate(-4deg) scale(.89);
    }

    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(74px, 8px, 0) rotate(9deg) scale(.88);
    }

    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(118px, 36px, 0) rotate(18deg) scale(.85);
    }
}

@media (max-width: 640px) {
    .tofaa-visual__product--fan {
        top: 5%;
        left: 14%;
        max-width: 47%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-78px, -44px, 0) rotate(-20deg) scale(.84);
    }

    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-46px, -24px, 0) rotate(-12deg) scale(.86);
    }

    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-4px, -10px, 0) rotate(-4deg) scale(.87);
    }

    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(48px, 8px, 0) rotate(8deg) scale(.86);
    }

    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(78px, 26px, 0) rotate(16deg) scale(.83);
    }
}

/* ============================================================
   V31 — wachlarz batonów rozłożony zgodnie ze szkicem:
   góra-lewo, lewo-środek, góra-prawo, dół-lewo, dół-prawo
   ============================================================ */

.tofaa-visual__product-stage {
    top: 19%;
    left: 2%;
    width: min(98%, 900px);
}

.tofaa-visual__product--fan {
    top: 7%;
    left: 16%;
    max-width: 410px;
    opacity: 0;
    transform-origin: 50% 50%;
}

/* kolejność warstw za głównym batonikiem */
.tofaa-visual__product--fan-a { z-index: 3; } /* zielony */
.tofaa-visual__product--fan-b { z-index: 4; } /* malinowy */
.tofaa-visual__product--fan-c { z-index: 4; } /* fioletowy */
.tofaa-visual__product--fan-d { z-index: 3; } /* truskawka */
.tofaa-visual__product--fan-e { z-index: 3; } /* wiśnia */

/* Rozłożenie w wachlarz wg szkicu użytkownika */
.tofaa-visual__product--fan-a {
    --fan-delay: 1.08s;
    --fan-final-transform: translate3d(-170px, -142px, 0) rotate(-28deg) scale(.82);
}

.tofaa-visual__product--fan-b {
    --fan-delay: 1.22s;
    --fan-final-transform: translate3d(-150px, -32px, 0) rotate(-12deg) scale(.84);
}

.tofaa-visual__product--fan-c {
    --fan-delay: 1.36s;
    --fan-final-transform: translate3d(82px, -42px, 0) rotate(12deg) scale(.83);
}

.tofaa-visual__product--fan-d {
    --fan-delay: 1.50s;
    --fan-final-transform: translate3d(-118px, 122px, 0) rotate(-16deg) scale(.83);
}

.tofaa-visual__product--fan-e {
    --fan-delay: 1.64s;
    --fan-final-transform: translate3d(154px, 112px, 0) rotate(18deg) scale(.81);
}

.tofaa-visual__product--main {
    z-index: 8;
}

@media (max-width: 1280px) {
    .tofaa-visual__product-stage {
        top: 20%;
        left: 1%;
        width: min(99%, 860px);
    }

    .tofaa-visual__product--fan {
        left: 15%;
        max-width: 385px;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-152px, -126px, 0) rotate(-27deg) scale(.81);
    }

    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-132px, -28px, 0) rotate(-11deg) scale(.83);
    }

    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(72px, -36px, 0) rotate(11deg) scale(.82);
    }

    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-104px, 108px, 0) rotate(-15deg) scale(.82);
    }

    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(134px, 98px, 0) rotate(17deg) scale(.80);
    }
}

@media (max-width: 980px) {
    .tofaa-visual__product-stage {
        width: min(100%, 760px);
        height: clamp(260px, 56vw, 390px);
    }

    .tofaa-visual__product--fan {
        top: 8%;
        left: 15%;
        max-width: 46%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-88px, -82px, 0) rotate(-24deg) scale(.80);
    }

    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-78px, -18px, 0) rotate(-10deg) scale(.82);
    }

    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(44px, -22px, 0) rotate(10deg) scale(.81);
    }

    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-66px, 76px, 0) rotate(-14deg) scale(.81);
    }

    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(84px, 70px, 0) rotate(15deg) scale(.79);
    }
}

@media (max-width: 640px) {
    .tofaa-visual__product--fan {
        top: 9%;
        left: 16%;
        max-width: 44%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-62px, -58px, 0) rotate(-20deg) scale(.79);
    }

    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-56px, -12px, 0) rotate(-9deg) scale(.81);
    }

    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(34px, -16px, 0) rotate(9deg) scale(.80);
    }

    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-46px, 58px, 0) rotate(-12deg) scale(.80);
    }

    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(58px, 52px, 0) rotate(14deg) scale(.78);
    }
}

/* ============================================================
   V33 — wachlarz batoników jak poziome karty w dłoni:
   ten sam rozmiar, lewa część każdego batona wyraźnie widoczna,
   delikatne nakładanie po prawej stronie.
   ============================================================ */

.tofaa-visual__product-stage {
    top: 18%;
    left: 4%;
    width: min(100%, 920px);
    height: clamp(360px, 38vw, 540px);
}

.tofaa-visual__product--main,
.tofaa-visual__product--fan {
    width: clamp(420px, 35vw, 640px);
    max-width: none;
}

/* Wszystkie smaki za głównym batonikiem mają ten sam rozmiar
   i rozkładają się jak karty trzymane w dłoni w poziomie. */
.tofaa-visual__product--fan {
    top: 18%;
    left: 22%;
    opacity: 0;
    transform-origin: 82% 50%;
    z-index: 4;
}

.tofaa-visual__product--main {
    top: 17%;
    left: 18%;
    z-index: 8;
    transform: translate3d(110vw, 0, 0) rotate(6deg);
    animation:
        tofaa-hero-main-enter 1.15s cubic-bezier(.18,.88,.18,1) .08s forwards,
        tofaa-hero-main-float 6.8s ease-in-out 1.32s infinite;
}

/* Warstwy wachlarza — środek nieco wyżej, skrajne bardziej z tyłu */
.tofaa-visual__product--fan-a { z-index: 3; }
.tofaa-visual__product--fan-b { z-index: 4; }
.tofaa-visual__product--fan-c { z-index: 5; }
.tofaa-visual__product--fan-d { z-index: 4; }
.tofaa-visual__product--fan-e { z-index: 3; }

/* Rozłożenie jak poziomy wachlarz kart: dużo widać z lewej,
   prawa strona schodzi się bliżej razem. */
.tofaa-visual__product--fan-a {
    --fan-delay: 1.08s;
    --fan-final-transform: translate3d(-190px, -130px, 0) rotate(-23deg) scale(1);
}

.tofaa-visual__product--fan-b {
    --fan-delay: 1.22s;
    --fan-final-transform: translate3d(-145px, -68px, 0) rotate(-14deg) scale(1);
}

.tofaa-visual__product--fan-c {
    --fan-delay: 1.36s;
    --fan-final-transform: translate3d(-92px, -8px, 0) rotate(-6deg) scale(1);
}

.tofaa-visual__product--fan-d {
    --fan-delay: 1.50s;
    --fan-final-transform: translate3d(-70px, 64px, 0) rotate(7deg) scale(1);
}

.tofaa-visual__product--fan-e {
    --fan-delay: 1.64s;
    --fan-final-transform: translate3d(-24px, 132px, 0) rotate(18deg) scale(1);
}

@media (max-width: 1280px) {
    .tofaa-visual__product-stage {
        top: 19%;
        left: 2%;
        width: min(100%, 860px);
        height: clamp(330px, 38vw, 500px);
    }

    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        width: clamp(390px, 35vw, 590px);
    }

    .tofaa-visual__product--fan {
        left: 23%;
    }

    .tofaa-visual__product--main {
        left: 19%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-172px, -118px, 0) rotate(-22deg) scale(1);
    }
    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-132px, -60px, 0) rotate(-13deg) scale(1);
    }
    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-84px, -6px, 0) rotate(-6deg) scale(1);
    }
    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-62px, 58px, 0) rotate(7deg) scale(1);
    }
    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(-18px, 118px, 0) rotate(17deg) scale(1);
    }
}

@media (max-width: 980px) {
    .tofaa-visual__product-stage {
        width: min(100%, 760px);
        height: clamp(280px, 56vw, 420px);
    }

    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        width: clamp(300px, 56vw, 470px);
    }

    .tofaa-visual__product--fan {
        top: 18%;
        left: 23%;
    }

    .tofaa-visual__product--main {
        top: 17%;
        left: 20%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-100px, -72px, 0) rotate(-19deg) scale(1);
    }
    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-78px, -38px, 0) rotate(-12deg) scale(1);
    }
    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-48px, -4px, 0) rotate(-5deg) scale(1);
    }
    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-34px, 36px, 0) rotate(6deg) scale(1);
    }
    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(-8px, 76px, 0) rotate(14deg) scale(1);
    }
}

@media (max-width: 640px) {
    .tofaa-visual__product-stage {
        height: clamp(250px, 58vw, 360px);
    }

    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        width: clamp(260px, 58vw, 400px);
    }

    .tofaa-visual__product--fan {
        left: 24%;
    }

    .tofaa-visual__product--main {
        left: 21%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-76px, -54px, 0) rotate(-18deg) scale(1);
    }
    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-58px, -28px, 0) rotate(-11deg) scale(1);
    }
    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-36px, -2px, 0) rotate(-5deg) scale(1);
    }
    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-24px, 28px, 0) rotate(5deg) scale(1);
    }
    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(-2px, 58px, 0) rotate(12deg) scale(1);
    }
}

/* ============================================================
   V34 — poprawiony wachlarz:
   - każdy batonik ma ten sam rozmiar
   - każdy batonik jest w pełni widoczny
   - zero efektu "stosu", tylko wachlarz jak karty
   - dopuszczalne jest tylko lekkie zbliżenie po prawej stronie
   ============================================================ */

.tofaa-visual__product-stage {
    top: 16%;
    left: 2%;
    width: min(100%, 1020px);
    height: clamp(430px, 43vw, 620px);
}

/* Wszystkie batoniki mają identyczny rozmiar. */
.tofaa-visual__product--main,
.tofaa-visual__product--fan {
    width: clamp(360px, 33vw, 520px);
    max-width: none;
}

/* Główny batonik lekko bardziej na prawo, aby odsłonić wachlarz. */
.tofaa-visual__product--main {
    top: 24%;
    left: 36%;
    z-index: 8;
}

/* Smaki rozłożone jak poziome karty w wachlarzu.
   Punkt zbiegu jest po prawej, a lewa część każdego opakowania
   pozostaje dobrze widoczna. */
.tofaa-visual__product--fan {
    top: 24%;
    left: 44%;
    opacity: 0;
    transform-origin: 92% 50%;
    z-index: 4;
}

/* Kolejność warstw */
.tofaa-visual__product--fan-a { z-index: 3; } /* zielony */
.tofaa-visual__product--fan-b { z-index: 4; } /* jasny róż */
.tofaa-visual__product--fan-c { z-index: 5; } /* fioletowy */
.tofaa-visual__product--fan-d { z-index: 4; } /* różowy */
.tofaa-visual__product--fan-e { z-index: 3; } /* biały */

/* Góra-lewo */
.tofaa-visual__product--fan-a {
    --fan-delay: 1.08s;
    --fan-final-transform: translate3d(-255px, -170px, 0) rotate(-24deg) scale(1);
}

/* Lewo-środek */
.tofaa-visual__product--fan-b {
    --fan-delay: 1.22s;
    --fan-final-transform: translate3d(-235px, -82px, 0) rotate(-12deg) scale(1);
}

/* Środek / lekko dół, nadal w pełni widoczny */
.tofaa-visual__product--fan-c {
    --fan-delay: 1.36s;
    --fan-final-transform: translate3d(-205px, 10px, 0) rotate(-3deg) scale(1);
}

/* Dół-lewo */
.tofaa-visual__product--fan-d {
    --fan-delay: 1.50s;
    --fan-final-transform: translate3d(-165px, 105px, 0) rotate(8deg) scale(1);
}

/* Dół-prawo — nadal pełny batonik, tylko lekko zbliżony do reszty */
.tofaa-visual__product--fan-e {
    --fan-delay: 1.64s;
    --fan-final-transform: translate3d(-110px, 195px, 0) rotate(18deg) scale(1);
}

@media (max-width: 1280px) {
    .tofaa-visual__product-stage {
        top: 17%;
        left: 1%;
        width: min(100%, 950px);
        height: clamp(400px, 42vw, 570px);
    }

    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        width: clamp(340px, 33vw, 485px);
    }

    .tofaa-visual__product--main {
        left: 35%;
    }

    .tofaa-visual__product--fan {
        left: 43%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-232px, -152px, 0) rotate(-23deg) scale(1);
    }
    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-214px, -74px, 0) rotate(-12deg) scale(1);
    }
    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-188px, 8px, 0) rotate(-3deg) scale(1);
    }
    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-150px, 92px, 0) rotate(8deg) scale(1);
    }
    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(-100px, 172px, 0) rotate(17deg) scale(1);
    }
}

@media (max-width: 980px) {
    .tofaa-visual__product-stage {
        width: min(100%, 760px);
        height: clamp(320px, 58vw, 470px);
    }

    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        width: clamp(260px, 48vw, 380px);
    }

    .tofaa-visual__product--main {
        top: 24%;
        left: 33%;
    }

    .tofaa-visual__product--fan {
        top: 24%;
        left: 42%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-150px, -100px, 0) rotate(-20deg) scale(1);
    }
    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-138px, -48px, 0) rotate(-11deg) scale(1);
    }
    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-122px, 6px, 0) rotate(-3deg) scale(1);
    }
    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-98px, 62px, 0) rotate(7deg) scale(1);
    }
    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(-66px, 120px, 0) rotate(15deg) scale(1);
    }
}

@media (max-width: 640px) {
    .tofaa-visual__product-stage {
        height: clamp(280px, 66vw, 400px);
    }

    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        width: clamp(220px, 52vw, 320px);
    }

    .tofaa-visual__product--main {
        left: 31%;
    }

    .tofaa-visual__product--fan {
        left: 41%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-108px, -72px, 0) rotate(-18deg) scale(1);
    }
    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-98px, -34px, 0) rotate(-10deg) scale(1);
    }
    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-86px, 2px, 0) rotate(-3deg) scale(1);
    }
    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-70px, 42px, 0) rotate(6deg) scale(1);
    }
    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(-46px, 82px, 0) rotate(13deg) scale(1);
    }
}

/* ============================================================
   V35 — układ wachlarza odwzorowany z przygotowanej makiety:
   pionowy wachlarz sześciu jednakowych batoników.
   ============================================================ */

.tofaa-visual__product-stage {
    top: 7%;
    left: 7%;
    width: min(96%, 900px);
    height: clamp(560px, 48vw, 720px);
}

/* Każdy batonik, łącznie z głównym, ma identyczny rozmiar. */
.tofaa-visual__product--main,
.tofaa-visual__product--fan {
    width: clamp(390px, 31vw, 550px);
    max-width: none;
    top: 22%;
    left: 26%;
    transform-origin: 84% 52%;
}

/*
 * Układ warstw odpowiada makiecie:
 * czerwony u góry, później zielony, różowy, fioletowy,
 * truskawka i biały na dole.
 */
.tofaa-visual__product--main {
    z-index: 9;
    animation:
        tofaa-hero-main-enter 1.15s cubic-bezier(.18,.88,.18,1) .08s forwards,
        tofaa-hero-main-float 7.2s ease-in-out 1.32s infinite;
}

.tofaa-visual__product--fan-a { z-index: 8; }
.tofaa-visual__product--fan-b { z-index: 7; }
.tofaa-visual__product--fan-c { z-index: 6; }
.tofaa-visual__product--fan-d { z-index: 5; }
.tofaa-visual__product--fan-e { z-index: 4; }

/* Główny czerwony batonik — najwyżej i najbardziej obrócony w prawo. */
@keyframes tofaa-hero-main-enter {
    0% {
        transform: translate3d(110vw, -20px, 0) rotate(34deg);
    }
    68% {
        transform: translate3d(-14px, 8px, 0) rotate(25deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(27deg);
    }
}

@keyframes tofaa-hero-main-float {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(27deg);
    }
    50% {
        transform: translate3d(0, -8px, 0) rotate(28.5deg);
    }
}

/*
 * Kolejne smaki wysuwają się spod czerwonego batonika,
 * tworząc pionowy wachlarz dokładnie jak na makiecie.
 */
.tofaa-visual__product--fan-a {
    --fan-delay: 1.08s;
    --fan-final-transform: translate3d(-38px, 72px, 0) rotate(18deg) scale(1);
}

.tofaa-visual__product--fan-b {
    --fan-delay: 1.22s;
    --fan-final-transform: translate3d(-50px, 145px, 0) rotate(10deg) scale(1);
}

.tofaa-visual__product--fan-c {
    --fan-delay: 1.36s;
    --fan-final-transform: translate3d(-55px, 220px, 0) rotate(1deg) scale(1);
}

.tofaa-visual__product--fan-d {
    --fan-delay: 1.50s;
    --fan-final-transform: translate3d(-45px, 294px, 0) rotate(-9deg) scale(1);
}

.tofaa-visual__product--fan-e {
    --fan-delay: 1.64s;
    --fan-final-transform: translate3d(-18px, 368px, 0) rotate(-19deg) scale(1);
}

/* Delikatniejsza, wspólna lewitacja wachlarza. */
@keyframes tofaa-hero-fan-float {
    0%, 100% {
        transform: var(--fan-final-transform);
    }
    50% {
        transform: var(--fan-final-transform) translateY(-6px);
    }
}

@media (max-width: 1280px) {
    .tofaa-visual__product-stage {
        top: 8%;
        left: 5%;
        width: min(98%, 830px);
        height: clamp(520px, 49vw, 670px);
    }

    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        width: clamp(360px, 31vw, 510px);
        left: 25%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-34px, 64px, 0) rotate(18deg) scale(1);
    }
    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-44px, 128px, 0) rotate(10deg) scale(1);
    }
    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-49px, 194px, 0) rotate(1deg) scale(1);
    }
    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-40px, 260px, 0) rotate(-9deg) scale(1);
    }
    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(-16px, 326px, 0) rotate(-19deg) scale(1);
    }
}

@media (max-width: 980px) {
    .tofaa-visual__product-stage {
        top: 4%;
        left: 0;
        width: min(100%, 700px);
        height: clamp(410px, 82vw, 590px);
    }

    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        width: clamp(280px, 55vw, 430px);
        top: 19%;
        left: 25%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-24px, 48px, 0) rotate(17deg) scale(1);
    }
    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-31px, 96px, 0) rotate(9deg) scale(1);
    }
    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-34px, 146px, 0) rotate(1deg) scale(1);
    }
    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-28px, 196px, 0) rotate(-8deg) scale(1);
    }
    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(-12px, 246px, 0) rotate(-17deg) scale(1);
    }
}

@media (max-width: 640px) {
    .tofaa-visual__product-stage {
        height: clamp(360px, 98vw, 500px);
    }

    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        width: clamp(240px, 62vw, 360px);
        left: 23%;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-18px, 40px, 0) rotate(16deg) scale(1);
    }
    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-23px, 80px, 0) rotate(9deg) scale(1);
    }
    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-25px, 120px, 0) rotate(1deg) scale(1);
    }
    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-20px, 160px, 0) rotate(-7deg) scale(1);
    }
    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(-8px, 200px, 0) rotate(-15deg) scale(1);
    }
}

/* ============================================================
   V40 — usuwa stary różowy header motywu na stronie głównej
   ============================================================ */

body.tofaa-landing-page {
    margin: 0;
    overflow-x: clip;
    background: var(--tofaa-beige);
}

body.tofaa-landing-page header#masthead,
body.tofaa-landing-page #masthead.site-header,
body.tofaa-landing-page .site-header,
body.tofaa-landing-page .to_top {
    display: none !important;
}

body.tofaa-landing-page #page,
body.tofaa-landing-page .site {
    overflow: visible;
}

/* ============================================================
   V41 — tekst navbara 18 px na dużym desktopie
   ============================================================ */
@media (min-width: 1251px) {
    .tofaa-nav__link,
    .tofaa-nav__trigger,
    .tofaa-nav__action {
        font-size: 18px !important;
    }
}

/* ============================================================
   V42 — główny CTA hero
   - usunięty przycisk „Dowiedz się więcej”
   - tło #ABB538
   - animowana ramka #7C4FA0 / #ABB538
   ============================================================ */

.tofaa-btn--text {
    display: none !important;
}

.tofaa-hero__buttons {
    gap: 0;
}

.tofaa-btn--primary,
.tofaa-btn--primary:link,
.tofaa-btn--primary:visited {
    --tofaa-shop-angle: 0deg;
    min-width: 310px;
    padding: 0 34px;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(#ABB538, #ABB538) padding-box,
        conic-gradient(
            from var(--tofaa-shop-angle),
            #7C4FA0 0deg,
            #ABB538 90deg,
            #7C4FA0 180deg,
            #ABB538 270deg,
            #7C4FA0 360deg
        ) border-box !important;
    color: #7C4FA0 !important;
    box-shadow: 0 13px 30px rgba(171, 181, 56, .25);
    animation: tofaa-shop-border-spin 4.5s linear infinite;
}

.tofaa-btn--primary:hover,
.tofaa-btn--primary:focus-visible {
    background:
        linear-gradient(#ABB538, #ABB538) padding-box,
        conic-gradient(
            from var(--tofaa-shop-angle),
            #7C4FA0 0deg,
            #ABB538 90deg,
            #7C4FA0 180deg,
            #ABB538 270deg,
            #7C4FA0 360deg
        ) border-box !important;
    color: #7C4FA0 !important;
    box-shadow: 0 17px 36px rgba(124, 79, 160, .22);
    animation-duration: 2.2s;
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-btn--primary {
        animation: none !important;
    }
}

/* ============================================================
   V43 — ramka CTA ma dokładnie 2 px, jak „Kup Tofaa!”
   ============================================================ */

.tofaa-btn--primary,
.tofaa-btn--primary:link,
.tofaa-btn--primary:visited,
.tofaa-btn--primary:hover,
.tofaa-btn--primary:focus-visible {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0 !important;
    background: #ABB538 !important;
    animation: none !important;
}

/*
 * Używamy dokładnie tej samej techniki co w przycisku „Kup Tofaa!”:
 * osobna, maskowana warstwa z paddingiem 2 px.
 */
.tofaa-btn--primary::before {
    --tofaa-shop-angle: 0deg;
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--tofaa-shop-angle),
        #7C4FA0 0deg,
        #ABB538 90deg,
        #7C4FA0 180deg,
        #ABB538 270deg,
        #7C4FA0 360deg
    );
    pointer-events: none;
    animation: tofaa-shop-border-spin 4.5s linear infinite;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.tofaa-btn--primary:hover::before,
.tofaa-btn--primary:focus-visible::before {
    animation-duration: 2.2s;
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-btn--primary::before {
        animation: none !important;
    }
}

/* ============================================================
   V44 — ramka CTA zwiększona do 4 px
   ============================================================ */

.tofaa-btn--primary::before {
    padding: 4px !important;
}

/* ============================================================
   V45 — nowe ikony benefitów SVG + dodatkowy benefit
   ============================================================ */

.tofaa-benefits {
    grid-template-columns: repeat(5, minmax(86px, 1fr)) !important;
    gap: 16px !important;
}

.tofaa-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tofaa-benefit__icon img {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
}

@media (max-width: 1100px) {
    .tofaa-benefits {
        grid-template-columns: repeat(3, minmax(95px, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .tofaa-benefits {
        grid-template-columns: repeat(2, minmax(110px, 1fr)) !important;
    }
}

/* ============================================================
   V47 — delikatnie większe ikony benefitów
   ============================================================ */

.tofaa-benefit__icon img {
    width: 36px !important;
    height: 36px !important;
}

/* ============================================================
   V48 — ikony benefitów 45 px
   ============================================================ */

.tofaa-benefit__icon img {
    width: 45px !important;
    height: 45px !important;
}

/* ============================================================
   V51 — każdy batonik oddycha i lewituje niezależnie
   ============================================================ */

.tofaa-visual__product--fan {
    will-change: transform;
    animation:
        tofaa-hero-fan-reveal .9s cubic-bezier(.2,.9,.24,1) var(--fan-delay) forwards,
        tofaa-hero-fan-breathe var(--float-duration) ease-in-out
        calc(var(--fan-delay) + .96s + var(--float-offset)) infinite !important;
}

/*
 * Różne tempo, faza i kierunek ruchu sprawiają, że batoniki
 * nie poruszają się jednocześnie jak jeden sztywny stos.
 */
.tofaa-visual__product--fan-a {
    --float-duration: 7.6s;
    --float-offset: 0s;
    --float-x-up: -3px;
    --float-y-up: -8px;
    --float-x-down: 3px;
    --float-y-down: 3px;
    --float-rotate-up: -.7deg;
    --float-rotate-down: .45deg;
}

.tofaa-visual__product--fan-b {
    --float-duration: 8.35s;
    --float-offset: .42s;
    --float-x-up: 3px;
    --float-y-up: -7px;
    --float-x-down: -2px;
    --float-y-down: 4px;
    --float-rotate-up: .55deg;
    --float-rotate-down: -.4deg;
}

.tofaa-visual__product--fan-c {
    --float-duration: 6.95s;
    --float-offset: .83s;
    --float-x-up: -2px;
    --float-y-up: -6px;
    --float-x-down: 3px;
    --float-y-down: 3px;
    --float-rotate-up: -.45deg;
    --float-rotate-down: .6deg;
}

.tofaa-visual__product--fan-d {
    --float-duration: 8.8s;
    --float-offset: .18s;
    --float-x-up: 4px;
    --float-y-up: -8px;
    --float-x-down: -3px;
    --float-y-down: 3px;
    --float-rotate-up: .65deg;
    --float-rotate-down: -.5deg;
}

.tofaa-visual__product--fan-e {
    --float-duration: 7.25s;
    --float-offset: .67s;
    --float-x-up: -4px;
    --float-y-up: -7px;
    --float-x-down: 2px;
    --float-y-down: 4px;
    --float-rotate-up: -.6deg;
    --float-rotate-down: .4deg;
}

@keyframes tofaa-hero-fan-breathe {
    0%,
    100% {
        transform: var(--fan-final-transform);
    }

    30% {
        transform:
            var(--fan-final-transform)
            translate3d(var(--float-x-up), var(--float-y-up), 0)
            rotate(var(--float-rotate-up))
            scale(1.006);
    }

    64% {
        transform:
            var(--fan-final-transform)
            translate3d(var(--float-x-down), var(--float-y-down), 0)
            rotate(var(--float-rotate-down))
            scale(.997);
    }

    82% {
        transform:
            var(--fan-final-transform)
            translate3d(1px, -3px, 0)
            scale(1.002);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__product--fan {
        animation: none !important;
        opacity: 1 !important;
        transform: var(--fan-final-transform) !important;
    }
}

/* ============================================================
   V52 — gradientowe fale zamiast blobów
   3 fale wychodzące z prawej krawędzi ekranu, nakładające się
   na siebie i falujące niezależnie. Gradient: #7C4FA0 → #B083BC
   + delikatne grain.
   ============================================================ */

.tofaa-hero__visual {
    overflow: visible;
    isolation: isolate;
}

.tofaa-visual__apple,
.tofaa-visual__orb,
.tofaa-hero__visual::before,
.tofaa-hero__visual::after {
    display: none !important;
}

.tofaa-visual__blob {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 22% 26%, rgba(255,255,255,.26), transparent 30%),
        linear-gradient(135deg, rgba(124,79,160,.94) 0%, rgba(176,131,188,.92) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    background-size: auto, auto, 180px 180px;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: screen, normal, soft-light;
    box-shadow:
        inset 0 0 55px rgba(255,255,255,.08),
        0 16px 30px rgba(124,79,160,.10) !important;
    opacity: .92;
    right: -32%;
    left: auto;
    top: 18%;
    width: 88%;
    height: 56%;
    border-radius: 58% 0 0 42% / 54% 0 0 46% !important;
    transform-origin: 100% 50%;
    animation: tofaa-wave-main 17s ease-in-out infinite;
}

.tofaa-visual__blob::before,
.tofaa-visual__blob::after {
    content: "";
    position: absolute;
    pointer-events: none;
    right: -10%;
    background-size: auto, auto, 180px 180px;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: screen, normal, soft-light;
    box-shadow:
        inset 0 0 48px rgba(255,255,255,.08),
        0 15px 28px rgba(124,79,160,.08);
}

.tofaa-visual__blob::before {
    top: -16%;
    width: 92%;
    height: 44%;
    opacity: .72;
    border-radius: 62% 0 0 38% / 60% 0 0 40%;
    background:
        radial-gradient(circle at 20% 24%, rgba(255,255,255,.22), transparent 32%),
        linear-gradient(135deg, rgba(124,79,160,.78) 0%, rgba(176,131,188,.82) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    animation: tofaa-wave-top 18.8s ease-in-out infinite;
}

.tofaa-visual__blob::after {
    bottom: -23%;
    width: 108%;
    height: 48%;
    opacity: .84;
    border-radius: 56% 0 0 44% / 48% 0 0 52%;
    background:
        radial-gradient(circle at 26% 28%, rgba(255,255,255,.18), transparent 28%),
        linear-gradient(135deg, rgba(124,79,160,.88) 0%, rgba(176,131,188,.90) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    animation: tofaa-wave-bottom 20.5s ease-in-out infinite;
}

@keyframes tofaa-wave-main {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-4deg) scale(1);
        border-radius: 58% 0 0 42% / 54% 0 0 46%;
    }
    30% {
        transform: translate3d(-18px, -10px, 0) rotate(-2deg) scale(1.03, .985);
        border-radius: 61% 0 0 39% / 49% 0 0 51%;
    }
    62% {
        transform: translate3d(10px, 12px, 0) rotate(-5deg) scale(.985, 1.025);
        border-radius: 53% 0 0 47% / 58% 0 0 42%;
    }
    82% {
        transform: translate3d(-8px, 4px, 0) rotate(-3deg) scale(1.012, .992);
        border-radius: 59% 0 0 41% / 52% 0 0 48%;
    }
}

@keyframes tofaa-wave-top {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-8deg) scale(1);
        border-radius: 62% 0 0 38% / 60% 0 0 40%;
    }
    35% {
        transform: translate3d(-22px, -14px, 0) rotate(-5deg) scale(1.035, .975);
        border-radius: 56% 0 0 44% / 52% 0 0 48%;
    }
    68% {
        transform: translate3d(12px, 10px, 0) rotate(-9deg) scale(.99, 1.025);
        border-radius: 66% 0 0 34% / 63% 0 0 37%;
    }
}

@keyframes tofaa-wave-bottom {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(3deg) scale(1);
        border-radius: 56% 0 0 44% / 48% 0 0 52%;
    }
    28% {
        transform: translate3d(-16px, 8px, 0) rotate(5deg) scale(1.025, .985);
        border-radius: 61% 0 0 39% / 44% 0 0 56%;
    }
    60% {
        transform: translate3d(14px, -12px, 0) rotate(1deg) scale(.99, 1.03);
        border-radius: 51% 0 0 49% / 54% 0 0 46%;
    }
    84% {
        transform: translate3d(-7px, -4px, 0) rotate(4deg) scale(1.012, .992);
        border-radius: 58% 0 0 42% / 50% 0 0 50%;
    }
}

@media (max-width: 1180px) {
    .tofaa-visual__blob {
        width: 94%;
        height: 52%;
        top: 20%;
        right: -30%;
    }

    .tofaa-visual__blob::before {
        width: 98%;
        height: 42%;
        top: -14%;
    }

    .tofaa-visual__blob::after {
        width: 112%;
        height: 46%;
        bottom: -21%;
    }
}

@media (max-width: 980px) {
    .tofaa-visual__blob {
        width: 108%;
        height: 50%;
        top: 22%;
        right: -40%;
    }

    .tofaa-visual__blob::before {
        width: 112%;
        height: 40%;
        top: -12%;
        right: -6%;
    }

    .tofaa-visual__blob::after {
        width: 124%;
        height: 44%;
        bottom: -18%;
        right: -9%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__blob,
    .tofaa-visual__blob::before,
    .tofaa-visual__blob::after {
        animation: none !important;
        transform: none !important;
    }
}


/* ============================================================
   V53 — usuń bloby i wprowadź 3 gradientowe fale z grainem
   ============================================================ */

.tofaa-hero__visual {
    overflow: visible !important;
    isolation: isolate;
}

/* Wyłącz stare dodatki tła, żeby nie wracały bloby/orby. */
.tofaa-hero__visual::before,
.tofaa-hero__visual::after,
.tofaa-visual__orb,
.tofaa-visual__apple,
.tofaa-visual__mascot {
    display: none !important;
}

.tofaa-visual__blob {
    position: absolute;
    top: 18% !important;
    right: -38% !important;
    left: auto !important;
    width: 106% !important;
    height: 52% !important;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
    border-radius: 58% 0 0 42% / 62% 0 0 38% !important;
    background:
        radial-gradient(circle at 22% 26%, rgba(255,255,255,.24), transparent 28%),
        linear-gradient(135deg, rgba(124,79,160,.96) 0%, rgba(176,131,188,.94) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
    background-size: auto, auto, 180px 180px;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: screen, normal, soft-light;
    box-shadow:
        inset 0 0 48px rgba(255,255,255,.10),
        0 16px 32px rgba(124,79,160,.10);
    opacity: .92;
    transform: rotate(-2deg);
    will-change: transform, border-radius;
    animation: tofaa-wave-main 16s ease-in-out infinite;
}

.tofaa-visual__blob::before,
.tofaa-visual__blob::after {
    content: "";
    position: absolute;
    right: 0;
    pointer-events: none;
    background-size: auto, auto, 180px 180px;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: screen, normal, soft-light;
    box-shadow:
        inset 0 0 44px rgba(255,255,255,.08),
        0 14px 26px rgba(124,79,160,.08);
}

/* Fala górna */
.tofaa-visual__blob::before {
    top: -18% !important;
    right: 8% !important;
    width: 92% !important;
    height: 38% !important;
    border-radius: 64% 0 0 36% / 70% 0 0 30% !important;
    background:
        radial-gradient(circle at 18% 26%, rgba(255,255,255,.20), transparent 30%),
        linear-gradient(135deg, rgba(124,79,160,.86) 0%, rgba(176,131,188,.80) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
    opacity: .72;
    transform: rotate(-6deg);
    will-change: transform, border-radius;
    animation: tofaa-wave-top 18.5s ease-in-out infinite;
}

/* Fala dolna */
.tofaa-visual__blob::after {
    bottom: -26% !important;
    right: -3% !important;
    width: 114% !important;
    height: 44% !important;
    z-index: -1;
    border-radius: 54% 0 0 46% / 52% 0 0 48% !important;
    background:
        radial-gradient(circle at 28% 28%, rgba(255,255,255,.18), transparent 28%),
        linear-gradient(135deg, rgba(124,79,160,.88) 0%, rgba(176,131,188,.90) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
    opacity: .82;
    transform: rotate(4deg);
    will-change: transform, border-radius;
    animation: tofaa-wave-bottom 20s ease-in-out infinite;
}

@keyframes tofaa-wave-main {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-2deg) scale(1);
        border-radius: 58% 0 0 42% / 62% 0 0 38%;
    }
    33% {
        transform: translate3d(-18px, -10px, 0) rotate(-3deg) scale(1.015, .99);
        border-radius: 54% 0 0 46% / 58% 0 0 42%;
    }
    66% {
        transform: translate3d(-8px, 14px, 0) rotate(-1deg) scale(.99, 1.02);
        border-radius: 61% 0 0 39% / 66% 0 0 34%;
    }
}

@keyframes tofaa-wave-top {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-6deg) scale(1);
        border-radius: 64% 0 0 36% / 70% 0 0 30%;
    }
    50% {
        transform: translate3d(-14px, 12px, 0) rotate(-4deg) scale(1.02, .98);
        border-radius: 58% 0 0 42% / 64% 0 0 36%;
    }
}

@keyframes tofaa-wave-bottom {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(4deg) scale(1);
        border-radius: 54% 0 0 46% / 52% 0 0 48%;
    }
    40% {
        transform: translate3d(-22px, -12px, 0) rotate(2deg) scale(1.03, .98);
        border-radius: 48% 0 0 52% / 48% 0 0 52%;
    }
    75% {
        transform: translate3d(-6px, 16px, 0) rotate(5deg) scale(.98, 1.02);
        border-radius: 58% 0 0 42% / 56% 0 0 44%;
    }
}

@media (max-width: 1180px) {
    .tofaa-visual__blob {
        top: 21% !important;
        right: -42% !important;
        width: 112% !important;
        height: 50% !important;
    }

    .tofaa-visual__blob::before {
        width: 96% !important;
        height: 36% !important;
        top: -15% !important;
    }

    .tofaa-visual__blob::after {
        width: 118% !important;
        height: 42% !important;
        bottom: -23% !important;
    }
}

@media (max-width: 980px) {
    .tofaa-visual__blob {
        top: 24% !important;
        right: -52% !important;
        width: 128% !important;
        height: 46% !important;
    }

    .tofaa-visual__blob::before {
        width: 104% !important;
        right: 5% !important;
    }

    .tofaa-visual__blob::after {
        width: 126% !important;
        right: -6% !important;
    }
}

@media (max-width: 640px) {
    .tofaa-visual__blob {
        top: 30% !important;
        right: -74% !important;
        width: 158% !important;
        height: 42% !important;
    }

    .tofaa-visual__blob::before {
        top: -12% !important;
        width: 110% !important;
        height: 34% !important;
    }

    .tofaa-visual__blob::after {
        width: 134% !important;
        height: 38% !important;
        bottom: -18% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__blob,
    .tofaa-visual__blob::before,
    .tofaa-visual__blob::after {
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================
   V54 — bez eyebrow + szerszy heading / kolumna tekstowa
   ============================================================ */

.tofaa-hero__eyebrow {
    display: none !important;
}

@media (min-width: 1251px) {
    .tofaa-hero {
        width: min(1540px, 100%);
        grid-template-columns: minmax(620px, 1.06fr) minmax(570px, .94fr) !important;
        gap: clamp(18px, 2.4vw, 42px) !important;
    }

    .tofaa-hero__copy {
        width: 100%;
        padding-left: 10px;
    }

    .tofaa-hero h1 {
        width: 100%;
        max-width: 880px !important;
        text-wrap: balance;
    }
}

@media (min-width: 981px) and (max-width: 1250px) {
    .tofaa-hero {
        grid-template-columns: minmax(520px, 1.04fr) minmax(430px, .96fr) !important;
        gap: 14px !important;
    }

    .tofaa-hero h1 {
        width: 100%;
        max-width: 760px !important;
        text-wrap: balance;
    }
}

/* ============================================================
   V56 — przyciski w osobnej kolumnie, bez zwężania treści hero
   ============================================================ */

/* Dodajemy trzecią, niezależną kolumnę i zwiększamy szerokość całego hero,
 * dzięki czemu nagłówek, benefity i CTA zachowują wcześniejszą szerokość. */
.tofaa-hero {
    width: min(1700px, calc(100vw - 24px)) !important;
    grid-template-columns:
        minmax(180px, 220px)
        minmax(480px, .88fr)
        minmax(620px, 1.12fr) !important;
    align-items: stretch !important;
    gap: clamp(24px, 2.4vw, 44px) !important;
}

.tofaa-hero__copy {
    min-width: 0;
    padding-left: 0 !important;
}

.tofaa-hero__copy-layout {
    display: contents !important;
}

.tofaa-hero__copy-main {
    width: 100%;
    min-width: 0;
}

/* Kolumna przycisków ma tę samą wysokość roboczą co kolumna tekstowa. */
.tofaa-hero__moments {
    align-self: stretch;
    padding: clamp(50px, 7vh, 95px) 0 clamp(40px, 6vh, 80px);
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.tofaa-moment-card {
    width: 100%;
    min-height: 0 !important;
    height: 100%;
    padding: 18px 18px;
    border-radius: 28px;
}

.tofaa-moment-card__number {
    inset: 0 auto auto 14px;
    font-size: clamp(76px, 6vw, 104px);
}

.tofaa-moment-card__text {
    max-width: 150px;
    font-size: 17px;
}

@media (max-width: 1350px) {
    .tofaa-hero {
        width: min(1320px, calc(100vw - 24px)) !important;
        grid-template-columns:
            minmax(150px, 180px)
            minmax(390px, .9fr)
            minmax(500px, 1.1fr) !important;
        gap: 22px !important;
    }

    .tofaa-moment-card {
        padding: 15px;
        border-radius: 24px;
    }

    .tofaa-moment-card__text {
        max-width: 125px;
        font-size: 15px;
    }
}

@media (max-width: 980px) {
    .tofaa-hero {
        width: min(100%, 760px) !important;
        grid-template-columns: 1fr !important;
    }

    .tofaa-hero__copy {
        order: 1;
    }

    .tofaa-hero__moments {
        order: 2;
        padding: 18px 10px 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(94px, auto));
    }

    .tofaa-hero__visual {
        order: 3;
    }

    .tofaa-moment-card {
        min-height: 94px !important;
    }
}

@media (max-width: 620px) {
    .tofaa-hero__moments {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(4, minmax(82px, auto));
    }

    .tofaa-moment-card {
        min-height: 82px !important;
    }
}

/* ============================================================
   V57 — szersza kolumna tekstowa + zamiana kolorów 2 i 4
   ============================================================ */

@media (min-width: 1351px) {
    .tofaa-hero {
        grid-template-columns:
            minmax(180px, 220px)
            minmax(590px, 1.03fr)
            minmax(560px, .97fr) !important;
    }
}

@media (min-width: 981px) and (max-width: 1350px) {
    .tofaa-hero {
        grid-template-columns:
            minmax(150px, 180px)
            minmax(460px, 1.03fr)
            minmax(450px, .97fr) !important;
    }
}

/* 2 — zielony */
.tofaa-moment-card--2 {
    background: #ABB538 !important;
    color: #7C4FA0 !important;
}

.tofaa-moment-card--2 .tofaa-moment-card__number {
    color: rgba(124, 79, 160, .18) !important;
}

/* 4 — jasny fiolet */
.tofaa-moment-card--4 {
    background: #B083BC !important;
    color: #F8EAE1 !important;
}

.tofaa-moment-card--4 .tofaa-moment-card__number {
    color: rgba(248, 234, 225, .25) !important;
}

/* ============================================================
   V58 — większe napisy w przyciskach 1–4
   ============================================================ */

.tofaa-moment-card__text {
    max-width: 155px !important;
    font-size: 20px !important;
    line-height: 1.08 !important;
}

@media (max-width: 1250px) {
    .tofaa-moment-card__text {
        max-width: 135px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 980px) {
    .tofaa-moment-card__text {
        max-width: 180px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 620px) {
    .tofaa-moment-card__text {
        max-width: 100% !important;
        font-size: 17px !important;
    }
}

/* ============================================================
   V59 — przełączane sceny: batoniki / chrupki / pastila
   ============================================================ */

.tofaa-moment-card.is-active {
    box-shadow:
        0 0 0 4px rgba(124, 79, 160, .16),
        0 18px 34px rgba(65, 30, 71, .18);
    transform: translateX(5px);
}

.tofaa-visual__scene {
    position: absolute;
    inset: 0;
    z-index: 6;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(28px, 0, 0) scale(.96);
    transform-origin: center;
    transition:
        opacity .42s ease,
        visibility .42s ease,
        transform .58s cubic-bezier(.2, .8, .2, 1);
}

.tofaa-visual__scene.is-active {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
}

.tofaa-visual__scene-products {
    width: 100%;
    height: 100%;
    position: relative;
}

.tofaa-visual__scene-product {
    position: absolute;
    z-index: 7;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 28px 24px rgba(65, 30, 71, .24));
    will-change: transform;
}

.tofaa-visual__scene-product--crisps-apple {
    height: min(78%, 650px);
    width: auto;
    top: 8%;
    left: 16%;
    transform: rotate(-8deg);
}

.tofaa-visual__scene-product--crisps-blackcurrant {
    height: min(74%, 620px);
    width: auto;
    top: 14%;
    right: 10%;
    transform: rotate(8deg);
}

.tofaa-visual__scene--crisps.is-active .tofaa-visual__scene-product--crisps-apple {
    animation: tofaa-crisps-float-a 7.2s ease-in-out infinite;
}

.tofaa-visual__scene--crisps.is-active .tofaa-visual__scene-product--crisps-blackcurrant {
    animation: tofaa-crisps-float-b 8s ease-in-out .7s infinite;
}

.tofaa-visual__scene-product--pastila {
    height: min(84%, 690px);
    width: auto;
    top: 6%;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
}

.tofaa-visual__scene--pastila.is-active .tofaa-visual__scene-product--pastila {
    animation: tofaa-pastila-float 7.8s ease-in-out infinite;
}

@keyframes tofaa-crisps-float-a {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(1); }
    45% { transform: translate3d(-5px, -13px, 0) rotate(-6deg) scale(1.018); }
    72% { transform: translate3d(4px, 5px, 0) rotate(-9deg) scale(.996); }
}

@keyframes tofaa-crisps-float-b {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg) scale(1); }
    38% { transform: translate3d(6px, -10px, 0) rotate(6deg) scale(1.012); }
    70% { transform: translate3d(-4px, 6px, 0) rotate(9deg) scale(.997); }
}

@keyframes tofaa-pastila-float {
    0%, 100% { transform: translate3d(-50%, 0, 0) rotate(-3deg) scale(1); }
    46% { transform: translate3d(calc(-50% - 4px), -14px, 0) rotate(-1deg) scale(1.016); }
    74% { transform: translate3d(calc(-50% + 4px), 5px, 0) rotate(-4deg) scale(.997); }
}

@media (max-width: 1250px) {
    .tofaa-visual__scene-product--crisps-apple {
        height: min(72%, 560px);
        left: 14%;
    }

    .tofaa-visual__scene-product--crisps-blackcurrant {
        height: min(69%, 540px);
        right: 8%;
    }

    .tofaa-visual__scene-product--pastila {
        height: min(78%, 590px);
    }
}

@media (max-width: 980px) {
    .tofaa-visual__scene-product--crisps-apple {
        height: 72%;
        left: 20%;
    }

    .tofaa-visual__scene-product--crisps-blackcurrant {
        height: 68%;
        right: 17%;
    }

    .tofaa-visual__scene-product--pastila {
        height: 80%;
    }
}

@media (max-width: 620px) {
    .tofaa-visual__scene-product--crisps-apple {
        height: 67%;
        left: 8%;
        top: 13%;
    }

    .tofaa-visual__scene-product--crisps-blackcurrant {
        height: 63%;
        right: 3%;
        top: 18%;
    }

    .tofaa-visual__scene-product--pastila {
        height: 73%;
        top: 12%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__scene,
    .tofaa-visual__scene-product {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   V60 — dwie Pastile w scenie 3
   ============================================================ */

.tofaa-visual__scene-products--pastila {
    display: block;
}

.tofaa-visual__scene-product--pastila {
    height: min(56%, 450px) !important;
    width: auto !important;
    left: auto !important;
    opacity: 0;
    will-change: transform, opacity;
}

.tofaa-visual__scene-product--pastila-blackcurrant {
    top: 2% !important;
    left: 3% !important;
    right: auto !important;
    transform: rotate(-6deg);
    z-index: 7;
}

.tofaa-visual__scene-product--pastila-cherry {
    top: 36% !important;
    right: 3% !important;
    left: auto !important;
    transform: rotate(5deg);
    z-index: 8;
}

.tofaa-visual__scene--pastila.is-active .tofaa-visual__scene-product--pastila-blackcurrant {
    animation-name: tofaa-pastila-reveal-blackcurrant, tofaa-pastila-float-blackcurrant;
    animation-duration: .78s, 8.4s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1), ease-in-out;
    animation-delay: .02s, 1s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
}

.tofaa-visual__scene--pastila.is-active .tofaa-visual__scene-product--pastila-cherry {
    animation-name: tofaa-pastila-reveal-cherry, tofaa-pastila-float-cherry;
    animation-duration: .78s, 7.8s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1), ease-in-out;
    animation-delay: .18s, .96s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
}

@keyframes tofaa-pastila-reveal-blackcurrant {
    0% { opacity: 0; transform: translate3d(-24px, 18px, 0) rotate(-10deg) scale(.9); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-6deg) scale(1); }
}

@keyframes tofaa-pastila-reveal-cherry {
    0% { opacity: 0; transform: translate3d(24px, 26px, 0) rotate(10deg) scale(.9); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(5deg) scale(1); }
}

@keyframes tofaa-pastila-float-cherry {
    0%, 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(5deg) scale(1); }
    44% { opacity: 1; transform: translate3d(-4px, -12px, 0) rotate(7deg) scale(1.012); }
    73% { opacity: 1; transform: translate3d(4px, 5px, 0) rotate(4deg) scale(.997); }
}

@keyframes tofaa-pastila-float-blackcurrant {
    0%, 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-6deg) scale(1); }
    38% { opacity: 1; transform: translate3d(6px, -10px, 0) rotate(-4deg) scale(1.01); }
    72% { opacity: 1; transform: translate3d(-4px, 5px, 0) rotate(-7deg) scale(.997); }
}

@media (max-width: 1250px) {
    .tofaa-visual__scene-product--pastila {
        height: min(52%, 410px) !important;
    }

    .tofaa-visual__scene-product--pastila-blackcurrant {
        top: 4% !important;
        left: 2% !important;
    }

    .tofaa-visual__scene-product--pastila-cherry {
        top: 39% !important;
        right: 2% !important;
    }
}

@media (max-width: 980px) {
    .tofaa-visual__scene-product--pastila {
        height: 50% !important;
    }

    .tofaa-visual__scene-product--pastila-blackcurrant {
        top: 10% !important;
        left: 0% !important;
    }

    .tofaa-visual__scene-product--pastila-cherry {
        top: 42% !important;
        right: 0% !important;
    }
}

@media (max-width: 620px) {
    .tofaa-visual__scene-product--pastila {
        height: 46% !important;
    }

    .tofaa-visual__scene-product--pastila-blackcurrant {
        top: 13% !important;
        left: -2% !important;
    }

    .tofaa-visual__scene-product--pastila-cherry {
        top: 44% !important;
        right: -3% !important;
    }
}


/* ============================================================
   V62 — prawdziwe fale SVG zamiast blobów
   ============================================================ */

.tofaa-hero__visual {
    overflow: visible !important;
    isolation: isolate;
}

.tofaa-visual__blob,
.tofaa-visual__orb,
.tofaa-visual__apple,
.tofaa-visual__mascot,
.tofaa-hero__visual::before,
.tofaa-hero__visual::after {
    display: none !important;
}

.tofaa-visual__waves {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.tofaa-visual__wave {
    position: absolute;
    right: -14%;
    width: min(86%, 820px);
    height: auto;
    max-width: none;
    display: block;
    opacity: 0.98;
    transform-origin: 100% 50%;
    will-change: transform;
    filter: drop-shadow(0 18px 28px rgba(124, 79, 160, 0.10));
}

/* kolejność warstw: dolna na wierzchu, środkowa pośrodku, górna pod spodem */
.tofaa-visual__wave--top {
    top: 10%;
    z-index: 1;
    animation: tofaa-wave-top-svg 17.5s ease-in-out infinite;
}

.tofaa-visual__wave--middle {
    top: 24%;
    right: -11%;
    z-index: 2;
    animation: tofaa-wave-middle-svg 19s ease-in-out infinite;
}

.tofaa-visual__wave--bottom {
    top: 48%;
    right: -17%;
    z-index: 3;
    animation: tofaa-wave-bottom-svg 20.5s ease-in-out infinite;
}

.tofaa-visual__badge {
    z-index: 9;
}

.tofaa-visual__scene {
    position: absolute;
    inset: 0;
    z-index: 6;
}

.tofaa-visual__product-stage,
.tofaa-visual__scene-products {
    position: relative;
    z-index: 6;
}

@keyframes tofaa-wave-top-svg {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    30% {
        transform: translate3d(-18px, -10px, 0) rotate(-1.1deg) scale(1.01, 0.99);
    }
    65% {
        transform: translate3d(10px, 10px, 0) rotate(0.7deg) scale(0.995, 1.01);
    }
}

@keyframes tofaa-wave-middle-svg {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    35% {
        transform: translate3d(-22px, 14px, 0) rotate(-1.4deg) scale(1.015, 0.99);
    }
    70% {
        transform: translate3d(14px, -8px, 0) rotate(0.9deg) scale(0.99, 1.015);
    }
}

@keyframes tofaa-wave-bottom-svg {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    28% {
        transform: translate3d(-26px, -14px, 0) rotate(-1deg) scale(1.02, 0.985);
    }
    62% {
        transform: translate3d(16px, 12px, 0) rotate(0.8deg) scale(0.99, 1.02);
    }
}

@media (max-width: 1280px) {
    .tofaa-visual__wave {
        width: min(92%, 780px);
    }

    .tofaa-visual__wave--top {
        top: 12%;
        right: -18%;
    }

    .tofaa-visual__wave--middle {
        top: 25%;
        right: -14%;
    }

    .tofaa-visual__wave--bottom {
        top: 49%;
        right: -20%;
    }
}

@media (max-width: 980px) {
    .tofaa-visual__wave {
        width: min(112%, 760px);
    }

    .tofaa-visual__wave--top {
        top: 18%;
        right: -28%;
    }

    .tofaa-visual__wave--middle {
        top: 31%;
        right: -24%;
    }

    .tofaa-visual__wave--bottom {
        top: 57%;
        right: -30%;
    }
}

@media (max-width: 640px) {
    .tofaa-visual__wave {
        width: 145%;
    }

    .tofaa-visual__wave--top {
        top: 22%;
        right: -42%;
    }

    .tofaa-visual__wave--middle {
        top: 36%;
        right: -36%;
    }

    .tofaa-visual__wave--bottom {
        top: 59%;
        right: -44%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__wave {
        animation: none !important;
    }
}


/* ============================================================
   V63 — korekta fal: szersze, pełna szerokość sekcji, bez wejścia na footer
   ============================================================ */

.tofaa-hero {
    overflow: hidden;
}

.tofaa-hero__visual {
    overflow: visible !important;
}

.tofaa-visual__waves {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * ((100vw - 100%) + 2vw));
    width: calc(100vw + 6vw);
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.tofaa-visual__wave {
    position: absolute;
    right: 0;
    width: 100%;
    height: auto;
    max-width: none;
    display: block;
    opacity: 0.98;
    transform-origin: 100% 50%;
    will-change: transform;
    filter: drop-shadow(0 18px 28px rgba(124, 79, 160, 0.10));
}

.tofaa-visual__wave--top {
    top: 8%;
    z-index: 1;
    animation: tofaa-wave-top-svg-v63 17.5s ease-in-out infinite;
}

.tofaa-visual__wave--middle {
    top: 21%;
    z-index: 2;
    animation: tofaa-wave-middle-svg-v63 19s ease-in-out infinite;
}

.tofaa-visual__wave--bottom {
    top: 41%;
    z-index: 3;
    animation: tofaa-wave-bottom-svg-v63 20.5s ease-in-out infinite;
}

@keyframes tofaa-wave-top-svg-v63 {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1.14) scaleY(0.88);
    }
    30% {
        transform: translate3d(-18px, -10px, 0) rotate(-1.1deg) scaleX(1.17) scaleY(0.86);
    }
    65% {
        transform: translate3d(10px, 10px, 0) rotate(0.7deg) scaleX(1.12) scaleY(0.90);
    }
}

@keyframes tofaa-wave-middle-svg-v63 {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1.18) scaleY(0.90);
    }
    35% {
        transform: translate3d(-22px, 14px, 0) rotate(-1.4deg) scaleX(1.21) scaleY(0.88);
    }
    70% {
        transform: translate3d(14px, -8px, 0) rotate(0.9deg) scaleX(1.15) scaleY(0.92);
    }
}

@keyframes tofaa-wave-bottom-svg-v63 {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1.20) scaleY(0.92);
    }
    28% {
        transform: translate3d(-26px, -14px, 0) rotate(-1deg) scaleX(1.23) scaleY(0.89);
    }
    62% {
        transform: translate3d(16px, 12px, 0) rotate(0.8deg) scaleX(1.17) scaleY(0.95);
    }
}

@media (max-width: 1280px) {
    .tofaa-visual__waves {
        left: calc(-1 * ((100vw - 100%) + 3vw));
        width: calc(100vw + 8vw);
    }

    .tofaa-visual__wave--top { top: 10%; }
    .tofaa-visual__wave--middle { top: 23%; }
    .tofaa-visual__wave--bottom { top: 44%; }
}

@media (max-width: 980px) {
    .tofaa-visual__waves {
        left: calc(-1 * ((100vw - 100%) + 6vw));
        width: calc(100vw + 14vw);
    }

    .tofaa-visual__wave--top { top: 16%; }
    .tofaa-visual__wave--middle { top: 30%; }
    .tofaa-visual__wave--bottom { top: 49%; }
}

@media (max-width: 640px) {
    .tofaa-visual__waves {
        left: calc(-1 * ((100vw - 100%) + 10vw));
        width: calc(100vw + 20vw);
    }

    .tofaa-visual__wave--top { top: 22%; }
    .tofaa-visual__wave--middle { top: 37%; }
    .tofaa-visual__wave--bottom { top: 56%; }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__wave--top,
    .tofaa-visual__wave--middle,
    .tofaa-visual__wave--bottom {
        animation: none !important;
        transform: scaleX(1.16) scaleY(0.90);
    }
}


/* ============================================================
   V64 — korekta ustawienia fal wg nowej makiety użytkownika
   - fale zajmują prawą część sekcji (nie ciągną się od lewej krawędzi)
   - są bardziej poziomo rozciągnięte
   - układ warstw jak w referencji: dolna na wierzchu, potem środkowa, górna pod spodem
   - dolna fala zostaje nad footerem
   ============================================================ */

.tofaa-hero {
    overflow: hidden;
}

.tofaa-hero__visual {
    overflow: hidden !important;
}

.tofaa-visual__waves {
    position: absolute;
    top: 10%;
    right: calc((100vw - 100%) / -2);
    left: auto;
    width: min(74vw, 1160px);
    height: 78%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.tofaa-visual__wave {
    position: absolute;
    right: 0;
    left: auto;
    height: auto;
    max-width: none;
    display: block;
    opacity: 0.985;
    transform-origin: 100% 50%;
    will-change: transform;
    filter: none;
}

.tofaa-visual__wave--top {
    top: 2%;
    width: 84%;
    z-index: 1;
    animation: tofaa-wave-top-svg-v64 18s ease-in-out infinite;
}

.tofaa-visual__wave--middle {
    top: 24%;
    width: 88%;
    z-index: 2;
    animation: tofaa-wave-middle-svg-v64 20s ease-in-out infinite;
}

.tofaa-visual__wave--bottom {
    bottom: 0;
    top: auto;
    width: 94%;
    z-index: 3;
    animation: tofaa-wave-bottom-svg-v64 21.5s ease-in-out infinite;
}

@keyframes tofaa-wave-top-svg-v64 {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1.48) scaleY(0.86);
    }
    32% {
        transform: translate3d(-16px, -10px, 0) rotate(-1deg) scaleX(1.53) scaleY(0.84);
    }
    68% {
        transform: translate3d(10px, 10px, 0) rotate(0.8deg) scaleX(1.45) scaleY(0.88);
    }
}

@keyframes tofaa-wave-middle-svg-v64 {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1.54) scaleY(0.90);
    }
    34% {
        transform: translate3d(-20px, 14px, 0) rotate(-1.2deg) scaleX(1.58) scaleY(0.88);
    }
    72% {
        transform: translate3d(12px, -8px, 0) rotate(0.9deg) scaleX(1.50) scaleY(0.92);
    }
}

@keyframes tofaa-wave-bottom-svg-v64 {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1.62) scaleY(0.95);
    }
    30% {
        transform: translate3d(-24px, -10px, 0) rotate(-0.9deg) scaleX(1.67) scaleY(0.92);
    }
    66% {
        transform: translate3d(14px, 8px, 0) rotate(0.7deg) scaleX(1.58) scaleY(0.97);
    }
}

@media (max-width: 1400px) {
    .tofaa-visual__waves {
        top: 12%;
        width: min(78vw, 1080px);
        height: 76%;
    }
}

@media (max-width: 1250px) {
    .tofaa-visual__waves {
        top: 16%;
        width: min(82vw, 980px);
        height: 72%;
    }

    .tofaa-visual__wave--top { width: 82%; }
    .tofaa-visual__wave--middle { width: 87%; top: 27%; }
    .tofaa-visual__wave--bottom { width: 92%; }
}

@media (max-width: 980px) {
    .tofaa-visual__waves {
        top: 22%;
        right: -10vw;
        width: 98vw;
        height: 66%;
    }

    .tofaa-visual__wave--top { top: 4%; }
    .tofaa-visual__wave--middle { top: 30%; }
    .tofaa-visual__wave--bottom { bottom: 2%; }
}

@media (max-width: 640px) {
    .tofaa-visual__waves {
        top: 26%;
        right: -16vw;
        width: 108vw;
        height: 62%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__wave--top,
    .tofaa-visual__wave--middle,
    .tofaa-visual__wave--bottom {
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================
   V65 — fale jako osobna warstwa całego hero
   - produkty pozostają w pełni widoczne
   - fale dochodzą dokładnie do prawej krawędzi ekranu
   - widoczna część fal zaczyna się w okolicy ikon benefitów
   ============================================================ */

.tofaa-hero {
    overflow: visible !important;
    isolation: isolate;
}

.tofaa-hero__moments,
.tofaa-hero__copy,
.tofaa-hero__visual {
    position: relative;
    z-index: 4;
}

.tofaa-hero__visual {
    overflow: visible !important;
}

.tofaa-visual__waves {
    display: none !important;
}

.tofaa-hero__wave-layer {
    position: absolute;
    top: 37%;
    right: min(0px, calc((1480px - 100vw) / 2));
    bottom: 0;
    left: -220px;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.tofaa-hero__wave-layer .tofaa-visual__wave {
    position: absolute;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: fill;
    transform-origin: 100% 50%;
    will-change: transform;
    filter: none;
}

/* Warstwy jak w makiecie: górna najniżej, dolna na wierzchu. */
.tofaa-hero__wave-layer .tofaa-visual__wave--top {
    top: 0;
    z-index: 1;
    animation: tofaa-wave-top-svg-v65 18s ease-in-out infinite;
}

.tofaa-hero__wave-layer .tofaa-visual__wave--middle {
    top: 0;
    z-index: 2;
    animation: tofaa-wave-middle-svg-v65 20s ease-in-out infinite;
}

.tofaa-hero__wave-layer .tofaa-visual__wave--bottom {
    top: 0;
    bottom: auto;
    z-index: 3;
    animation: tofaa-wave-bottom-svg-v65 21.5s ease-in-out infinite;
}

@keyframes tofaa-wave-top-svg-v65 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scaleX(1.01) scaleY(.985);
    }
    34% {
        transform: translate3d(-14px, -8px, 0) scaleX(1.025) scaleY(.97);
    }
    68% {
        transform: translate3d(10px, 9px, 0) scaleX(.995) scaleY(1.01);
    }
}

@keyframes tofaa-wave-middle-svg-v65 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scaleX(1.015) scaleY(.99);
    }
    38% {
        transform: translate3d(-20px, 12px, 0) scaleX(1.035) scaleY(.975);
    }
    72% {
        transform: translate3d(12px, -7px, 0) scaleX(.998) scaleY(1.012);
    }
}

@keyframes tofaa-wave-bottom-svg-v65 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scaleX(1.02) scaleY(.995);
    }
    30% {
        transform: translate3d(-24px, -9px, 0) scaleX(1.04) scaleY(.98);
    }
    66% {
        transform: translate3d(14px, 8px, 0) scaleX(1) scaleY(1.015);
    }
}

@media (max-width: 1480px) {
    .tofaa-hero__wave-layer {
        right: calc(-1 * clamp(14px, 2.2vw, 34px));
        left: -180px;
    }
}

@media (max-width: 1250px) {
    .tofaa-hero__wave-layer {
        top: 40%;
        left: -130px;
    }
}

@media (max-width: 980px) {
    .tofaa-hero__wave-layer {
        top: 58%;
        right: -14px;
        left: -90px;
    }
}

@media (max-width: 640px) {
    .tofaa-hero__wave-layer {
        top: 62%;
        right: -14px;
        left: -50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-hero__wave-layer .tofaa-visual__wave {
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================
   V66 — prawa krawędź fal wyrównana do viewportu
   ============================================================ */

/*
 * Poprzednia wersja używała stałej wartości 1480 px:
 * right: min(0px, calc((1480px - 100vw) / 2));
 *
 * Przy zoomie przeglądarki albo węższym viewportcie 100vw może być
 * mniejsze niż 1480 px. Wtedy wynik wynosił 0 i fale kończyły się
 * na krawędzi wyśrodkowanego kontenera, zamiast na krawędzi ekranu.
 *
 * Obliczenie poniżej korzysta z faktycznej szerokości hero i viewportu,
 * więc działa niezależnie od zoomu, paddingu strony i rozdzielczości.
 */
.tofaa-hero__wave-layer {
    right: calc(50% - 50vw) !important;
}

@media (max-width: 1480px) {
    .tofaa-hero__wave-layer {
        right: calc(50% - 50vw) !important;
    }
}

@media (max-width: 980px) {
    .tofaa-hero__wave-layer {
        right: calc(50% - 50vw) !important;
    }
}

@media (max-width: 640px) {
    .tofaa-hero__wave-layer {
        right: calc(50% - 50vw) !important;
    }
}

/* ============================================================
   V67 — uporządkowany hero po testach przy różnych poziomach zoomu
   ============================================================ */

/*
 * Fale są warstwą pełnej sekcji .tofaa-home, a nie wyśrodkowanego
 * kontenera hero. Dzięki temu ich prawa krawędź zawsze pokrywa się
 * z prawą krawędzią viewportu.
 */
.tofaa-home {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

.tofaa-hero__wave-layer,
.tofaa-visual__waves {
    display: none !important;
}

.tofaa-home__wave-layer {
    position: absolute;
    top: clamp(480px, 53vh, 570px);
    right: 0;
    bottom: 0;
    left: 20%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.tofaa-home__wave-layer .tofaa-visual__wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: fill;
    transform-origin: 100% 50%;
    will-change: transform;
    filter: none;
}

/* Górna pod spodem, środkowa pośrodku, dolna na wierzchu. */
.tofaa-home__wave-layer .tofaa-visual__wave--top {
    z-index: 1;
    animation: tofaa-wave-top-svg-v67 18s ease-in-out infinite;
}

.tofaa-home__wave-layer .tofaa-visual__wave--middle {
    z-index: 2;
    animation: tofaa-wave-middle-svg-v67 20s ease-in-out infinite;
}

.tofaa-home__wave-layer .tofaa-visual__wave--bottom {
    z-index: 3;
    animation: tofaa-wave-bottom-svg-v67 21.5s ease-in-out infinite;
}

/*
 * Nie przesuwamy fal poziomo. Przy transform-origin po prawej
 * ich prawa krawędź pozostaje stale przy krawędzi ekranu.
 */
@keyframes tofaa-wave-top-svg-v67 {
    0%, 100% {
        transform: translateY(0) scaleX(1.02) scaleY(.985);
    }
    35% {
        transform: translateY(-8px) scaleX(1.035) scaleY(.97);
    }
    70% {
        transform: translateY(9px) scaleX(1.01) scaleY(1.008);
    }
}

@keyframes tofaa-wave-middle-svg-v67 {
    0%, 100% {
        transform: translateY(0) scaleX(1.025) scaleY(.99);
    }
    38% {
        transform: translateY(11px) scaleX(1.045) scaleY(.975);
    }
    72% {
        transform: translateY(-7px) scaleX(1.012) scaleY(1.012);
    }
}

@keyframes tofaa-wave-bottom-svg-v67 {
    0%, 100% {
        transform: translateY(0) scaleX(1.03) scaleY(.995);
    }
    32% {
        transform: translateY(-9px) scaleX(1.05) scaleY(.98);
    }
    68% {
        transform: translateY(8px) scaleX(1.018) scaleY(1.015);
    }
}

/* Treść i produkty zawsze nad falami. */
.tofaa-hero {
    min-height: 800px !important;
    padding-bottom: 42px;
    position: relative;
    z-index: 3;
    overflow: visible !important;
    align-items: stretch !important;
}

.tofaa-hero__moments,
.tofaa-hero__copy,
.tofaa-hero__visual {
    position: relative;
    z-index: 4;
}

.tofaa-hero__visual {
    min-height: 760px !important;
    overflow: visible !important;
}

/*
 * Wachlarz mieści się w hero także przy zoomie 80%.
 * Każdy batonik zachowuje ten sam rozmiar, ale odstępy są nieco
 * bardziej zwarte, dzięki czemu biały smak na dole jest cały widoczny.
 */
@media (min-width: 1281px) {
    .tofaa-visual__product-stage {
        top: 0 !important;
        left: -2% !important;
        width: 104% !important;
        height: 740px !important;
    }

    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        width: clamp(360px, 27vw, 490px) !important;
        max-width: none !important;
        top: 9% !important;
        left: 20% !important;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-34px, 56px, 0) rotate(18deg) scale(1);
    }

    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-44px, 112px, 0) rotate(10deg) scale(1);
    }

    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-48px, 168px, 0) rotate(1deg) scale(1);
    }

    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-39px, 224px, 0) rotate(-9deg) scale(1);
    }

    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(-15px, 280px, 0) rotate(-18deg) scale(1);
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .tofaa-hero {
        min-height: 760px !important;
    }

    .tofaa-hero__visual {
        min-height: 720px !important;
    }

    .tofaa-visual__product-stage {
        top: 0 !important;
        left: -1% !important;
        width: 102% !important;
        height: 690px !important;
    }

    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        width: clamp(330px, 30vw, 420px) !important;
        top: 9% !important;
        left: 19% !important;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-29px, 48px, 0) rotate(18deg) scale(1);
    }

    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-38px, 96px, 0) rotate(10deg) scale(1);
    }

    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-41px, 144px, 0) rotate(1deg) scale(1);
    }

    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-33px, 192px, 0) rotate(-9deg) scale(1);
    }

    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(-13px, 240px, 0) rotate(-17deg) scale(1);
    }
}

/* Navbar: 16 px na całym desktopie. */
@media (min-width: 981px) {
    .tofaa-nav__link,
    .tofaa-nav__trigger,
    .tofaa-nav__action {
        font-size: 16px !important;
    }
}

@media (max-width: 1250px) {
    .tofaa-home__wave-layer {
        top: clamp(500px, 57vh, 590px);
        left: 18%;
    }
}

@media (max-width: 980px) {
    .tofaa-home__wave-layer {
        top: 67%;
        left: 8%;
    }

    .tofaa-hero {
        min-height: auto !important;
        padding-bottom: 30px;
    }
}

@media (max-width: 640px) {
    .tofaa-home__wave-layer {
        top: 70%;
        left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-home__wave-layer .tofaa-visual__wave {
        animation: none !important;
        transform: none !important;
    }
}


/* ============================================================
   V73 — porządkowanie hero po uwagach użytkownika
   - batoniki niżej, aby nie chowały się pod navbar
   - wszystkie batoniki mają pozostać widoczne
   - fale dociągnięte do prawej krawędzi ekranu
   - fale nie mogą nachodzić na footer
   - navbar desktop wraca do 16px
   ============================================================ */

@media (min-width: 981px) {
    .tofaa-nav__link,
    .tofaa-nav__trigger,
    .tofaa-nav__action {
        font-size: 16px !important;
    }

    .tofaa-home {
        padding-bottom: clamp(90px, 8vw, 130px) !important;
    }

    .tofaa-hero {
        min-height: 900px !important;
        padding-bottom: 120px !important;
    }

    .tofaa-hero__visual {
        min-height: 840px !important;
    }

    /* Produktowy stack schodzi niżej i dostaje więcej miejsca w pionie. */
    .tofaa-visual__product-stage {
        top: 46px !important;
        left: 0 !important;
        width: 102% !important;
        height: 780px !important;
    }

    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        top: 12% !important;
        left: 18% !important;
    }

    /* Delikatne korekty rozłożenia, żeby wszystkie batoniki były w całości widoczne. */
    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-34px, 34px, 0) rotate(18deg) scale(1);
    }

    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-42px, 84px, 0) rotate(10deg) scale(1);
    }

    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-45px, 136px, 0) rotate(1deg) scale(1);
    }

    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-36px, 190px, 0) rotate(-9deg) scale(1);
    }

    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(-12px, 242px, 0) rotate(-18deg) scale(1);
    }

    /* Fale mają startować niżej, zostać poza footerem i dojść do prawej krawędzi ekranu. */
    .tofaa-home__wave-layer {
        top: clamp(390px, 45vh, 500px) !important;
        right: -10vw !important;
        bottom: clamp(88px, 8vw, 128px) !important;
        left: auto !important;
        width: min(88vw, 1600px) !important;
        overflow: visible !important;
    }

    .tofaa-home__wave-layer .tofaa-visual__wave {
        position: absolute !important;
        inset: auto auto 0 auto !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        object-fit: contain !important;
        object-position: right bottom !important;
        transform-origin: 100% 50% !important;
    }

    .tofaa-home__wave-layer .tofaa-visual__wave--top {
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: min(60vw, 940px) !important;
        z-index: 1 !important;
    }

    .tofaa-home__wave-layer .tofaa-visual__wave--middle {
        top: 58px !important;
        right: -2vw !important;
        bottom: auto !important;
        width: min(68vw, 1080px) !important;
        z-index: 2 !important;
    }

    .tofaa-home__wave-layer .tofaa-visual__wave--bottom {
        right: -5vw !important;
        bottom: 0 !important;
        width: min(78vw, 1280px) !important;
        z-index: 3 !important;
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .tofaa-hero {
        min-height: 840px !important;
    }

    .tofaa-hero__visual {
        min-height: 770px !important;
    }

    .tofaa-visual__product-stage {
        top: 42px !important;
        left: 1% !important;
        width: 100% !important;
        height: 720px !important;
    }

    .tofaa-visual__product--main,
    .tofaa-visual__product--fan {
        width: clamp(320px, 29vw, 410px) !important;
        top: 11.5% !important;
        left: 17% !important;
    }

    .tofaa-visual__product--fan-a {
        --fan-final-transform: translate3d(-30px, 30px, 0) rotate(18deg) scale(1);
    }

    .tofaa-visual__product--fan-b {
        --fan-final-transform: translate3d(-36px, 78px, 0) rotate(10deg) scale(1);
    }

    .tofaa-visual__product--fan-c {
        --fan-final-transform: translate3d(-39px, 124px, 0) rotate(1deg) scale(1);
    }

    .tofaa-visual__product--fan-d {
        --fan-final-transform: translate3d(-31px, 170px, 0) rotate(-9deg) scale(1);
    }

    .tofaa-visual__product--fan-e {
        --fan-final-transform: translate3d(-10px, 214px, 0) rotate(-17deg) scale(1);
    }

    .tofaa-home__wave-layer {
        top: clamp(420px, 49vh, 520px) !important;
        right: -12vw !important;
        bottom: 96px !important;
        width: min(92vw, 1420px) !important;
    }

    .tofaa-home__wave-layer .tofaa-visual__wave--top {
        width: min(66vw, 860px) !important;
    }

    .tofaa-home__wave-layer .tofaa-visual__wave--middle {
        top: 50px !important;
        width: min(74vw, 980px) !important;
    }

    .tofaa-home__wave-layer .tofaa-visual__wave--bottom {
        width: min(84vw, 1140px) !important;
    }
}

@media (max-width: 980px) {
    .tofaa-home__wave-layer {
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: auto !important;
    }
}

/* ============================================================
   V74 — fale kończą się miękko przed kolejną sekcją
   ============================================================ */

/*
 * Warstwa kończy się wyżej, a jej dolna część stopniowo zanika.
 * Dzięki temu nie powstaje pozioma krawędź SVG przy następnej sekcji.
 */
.tofaa-home__wave-layer {
    bottom: clamp(150px, 11vw, 210px) !important;
    overflow: hidden !important;

    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 67%,
        rgba(0, 0, 0, .96) 73%,
        rgba(0, 0, 0, .72) 82%,
        rgba(0, 0, 0, .36) 91%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 67%,
        rgba(0, 0, 0, .96) 73%,
        rgba(0, 0, 0, .72) 82%,
        rgba(0, 0, 0, .36) 91%,
        transparent 100%
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/*
 * Delikatnie skracamy dolną falę, żeby organiczny kształt zniknął
 * jeszcze przed końcem maski, zamiast dochodzić do następnej sekcji.
 */
.tofaa-home__wave-layer .tofaa-visual__wave--bottom {
    bottom: 4% !important;
}

/* Na mniejszych desktopach fade zaczyna się nieco wcześniej. */
@media (min-width: 981px) and (max-width: 1280px) {
    .tofaa-home__wave-layer {
        bottom: clamp(135px, 10vw, 180px) !important;

        -webkit-mask-image: linear-gradient(
            to bottom,
            #000 0%,
            #000 63%,
            rgba(0, 0, 0, .92) 71%,
            rgba(0, 0, 0, .62) 82%,
            rgba(0, 0, 0, .26) 92%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            #000 0%,
            #000 63%,
            rgba(0, 0, 0, .92) 71%,
            rgba(0, 0, 0, .62) 82%,
            rgba(0, 0, 0, .26) 92%,
            transparent 100%
        );
    }
}

@media (max-width: 980px) {
    .tofaa-home__wave-layer {
        bottom: 90px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-home__wave-layer {
        -webkit-mask-image: linear-gradient(
            to bottom,
            #000 0%,
            #000 68%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            #000 0%,
            #000 68%,
            transparent 100%
        );
    }
}

/* ============================================================
   V75 — miękkie tło ambient zamiast fal
   ============================================================ */

/* Wyłączenie wszystkich wcześniejszych warstw fal i blobów. */
.tofaa-home__wave-layer,
.tofaa-hero__wave-layer,
.tofaa-visual__waves,
.tofaa-visual__blob,
.tofaa-visual__orb,
.tofaa-visual__apple,
.tofaa-visual__mascot,
.tofaa-hero__visual::before,
.tofaa-hero__visual::after {
    display: none !important;
}

.tofaa-home {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

/*
 * Warstwa dekoracyjna kończy się przed dołem hero i zanika sama w sobie,
 * więc nie tworzy poziomej linii przed kolejną sekcją.
 */
.tofaa-home__ambient-bg {
    position: absolute;
    top: clamp(120px, 11vw, 180px);
    right: -7vw;
    bottom: clamp(90px, 8vw, 135px);
    left: 43%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;

    -webkit-mask-image: radial-gradient(
        ellipse 88% 78% at 68% 48%,
        #000 0%,
        #000 59%,
        rgba(0, 0, 0, .88) 70%,
        rgba(0, 0, 0, .36) 86%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 88% 78% at 68% 48%,
        #000 0%,
        #000 59%,
        rgba(0, 0, 0, .88) 70%,
        rgba(0, 0, 0, .36) 86%,
        transparent 100%
    );
}

/* Delikatne ziarno, bez dodatkowego pliku graficznego. */
.tofaa-home__ambient-bg::after {
    content: "";
    position: absolute;
    inset: -8%;
    z-index: 5;
    opacity: .045;
    pointer-events: none;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(circle, rgba(54, 31, 65, .58) .55px, transparent .75px),
        radial-gradient(circle, rgba(255, 255, 255, .75) .55px, transparent .75px);
    background-position: 0 0, 7px 8px;
    background-size: 13px 13px, 17px 17px;
}

.tofaa-home__ambient-shape {
    position: absolute;
    display: block;
    border-radius: 52% 48% 58% 42% / 45% 55% 45% 55%;
    transform-origin: center;
    will-change: transform;
    filter: blur(3px);
}

.tofaa-home__ambient-shape--one {
    width: min(58vw, 900px);
    height: min(64vw, 720px);
    top: 2%;
    right: -3%;
    z-index: 1;
    opacity: .72;
    background:
        radial-gradient(circle at 36% 24%, rgba(255,255,255,.44), transparent 31%),
        linear-gradient(
            145deg,
            rgba(248, 234, 225, .88) 0%,
            rgba(226, 207, 231, .76) 44%,
            rgba(176, 131, 188, .45) 100%
        );
    animation: tofaa-ambient-float-one 15s ease-in-out infinite;
}

.tofaa-home__ambient-shape--two {
    width: min(48vw, 760px);
    height: min(48vw, 590px);
    top: 19%;
    right: 7%;
    z-index: 2;
    opacity: .42;
    border-radius: 44% 56% 48% 52% / 58% 43% 57% 42%;
    background:
        radial-gradient(circle at 68% 28%, rgba(255,255,255,.32), transparent 30%),
        linear-gradient(
            132deg,
            rgba(176, 131, 188, .32),
            rgba(124, 79, 160, .54)
        );
    animation: tofaa-ambient-float-two 18s ease-in-out infinite;
}

.tofaa-home__ambient-shape--three {
    width: min(54vw, 860px);
    height: min(32vw, 430px);
    right: -5%;
    bottom: 5%;
    z-index: 3;
    opacity: .28;
    border-radius: 62% 38% 54% 46% / 52% 58% 42% 48%;
    background:
        radial-gradient(circle at 34% 25%, rgba(255,255,255,.28), transparent 28%),
        linear-gradient(
            128deg,
            rgba(176, 131, 188, .38),
            rgba(124, 79, 160, .60)
        );
    animation: tofaa-ambient-float-three 20s ease-in-out infinite;
}

/* Ręcznie rysowana linia z makiety. */
.tofaa-home__ambient-line {
    position: absolute;
    right: -1%;
    bottom: 1%;
    width: min(66vw, 1020px);
    height: min(31vw, 430px);
    z-index: 4;
    overflow: visible;
    opacity: .78;
    fill: none;
    stroke: #7C4FA0;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: tofaa-ambient-line-float 13s ease-in-out infinite;
}

.tofaa-home__ambient-line-accent {
    stroke-width: 6;
}

@keyframes tofaa-ambient-float-one {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-1deg) scale(1);
    }
    50% {
        transform: translate3d(-14px, 10px, 0) rotate(1deg) scale(1.018);
    }
}

@keyframes tofaa-ambient-float-two {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(2deg) scale(1);
    }
    50% {
        transform: translate3d(16px, -12px, 0) rotate(-1deg) scale(1.025);
    }
}

@keyframes tofaa-ambient-float-three {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-2deg) scale(1);
    }
    50% {
        transform: translate3d(-10px, -9px, 0) rotate(.5deg) scale(1.02);
    }
}

@keyframes tofaa-ambient-line-float {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(7px, -5px, 0);
    }
}

/* Treść hero i produkty zawsze pozostają nad dekoracją. */
.tofaa-nav,
.tofaa-hero,
.tofaa-hero__moments,
.tofaa-hero__copy,
.tofaa-hero__visual {
    position: relative;
    z-index: 4;
}

/* Produkty nie chowają się pod navbar. */
@media (min-width: 981px) {
    .tofaa-hero {
        min-height: 850px !important;
        padding-bottom: 70px !important;
    }

    .tofaa-hero__visual {
        min-height: 790px !important;
        overflow: visible !important;
    }

    .tofaa-visual__product-stage {
        top: 50px !important;
        height: 735px !important;
    }

    .tofaa-nav__link,
    .tofaa-nav__trigger,
    .tofaa-nav__action {
        font-size: 16px !important;
    }
}

@media (max-width: 1250px) {
    .tofaa-home__ambient-bg {
        top: 150px;
        right: -10vw;
        bottom: 85px;
        left: 40%;
    }

    .tofaa-home__ambient-line {
        width: 75vw;
    }
}

@media (max-width: 980px) {
    .tofaa-home__ambient-bg {
        top: 54%;
        right: -18vw;
        bottom: 45px;
        left: 8%;
    }

    .tofaa-home__ambient-shape--one {
        width: 108vw;
        height: 82vw;
    }

    .tofaa-home__ambient-shape--two {
        width: 86vw;
        height: 72vw;
    }

    .tofaa-home__ambient-shape--three {
        width: 105vw;
        height: 54vw;
    }

    .tofaa-home__ambient-line {
        width: 110vw;
        height: 56vw;
    }
}

@media (max-width: 640px) {
    .tofaa-home__ambient-bg {
        top: 58%;
        right: -26vw;
        left: 0;
    }

    .tofaa-home__ambient-line {
        opacity: .52;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-home__ambient-shape,
    .tofaa-home__ambient-line {
        animation: none !important;
    }
}

/* ============================================================
   V76 — naprawa navbara, dropdownów i pozycji produktów
   ============================================================ */

/*
 * V75 przypadkowo nadpisało position: fixed oraz z-index navbara
 * wspólną regułą z elementami hero. Przywracamy wcześniejsze zachowanie.
 */
.tofaa-nav {
    position: fixed !important;
    z-index: 9990 !important;
    transform: translateX(-50%) !important;
}

/* Navbar i jego dropdowny zawsze znajdują się ponad treścią hero. */
.tofaa-nav__brand,
.tofaa-nav__toggle,
.tofaa-nav__menu,
.tofaa-nav__actions {
    position: relative;
    z-index: 2;
}

@media (min-width: 981px) {
    .tofaa-nav__submenu,
    .tofaa-nav__submenu--shop,
    .tofaa-nav__submenu--about {
        z-index: 20 !important;
    }

    .tofaa-nav__submenu-panel,
    .tofaa-nav__submenu--shop .tofaa-nav__submenu-panel,
    .tofaa-nav__submenu--about .tofaa-nav__submenu-panel {
        position: relative;
        z-index: 21 !important;
    }
}

/*
 * Treść hero pozostaje ponad ambientowym tłem, lecz poniżej navbara
 * i wysuwanych paneli.
 */
.tofaa-hero,
.tofaa-hero__moments,
.tofaa-hero__copy,
.tofaa-hero__visual {
    position: relative;
    z-index: 4;
}

/* Wstążka została usunięta z HTML; reguła jest dodatkowym zabezpieczeniem. */
.tofaa-home__ambient-line,
.tofaa-home__ambient-line-accent {
    display: none !important;
}

/*
 * Cały stack schodzi niżej. Dzięki zarezerwowanemu paddingowi strony
 * i temu przesunięciu żadne opakowanie nie wchodzi pod navbar.
 */
@media (min-width: 1281px) {
    .tofaa-hero {
        min-height: 900px !important;
        padding-bottom: 80px !important;
    }

    .tofaa-hero__visual {
        min-height: 840px !important;
        overflow: visible !important;
    }

    .tofaa-visual__product-stage {
        top: 82px !important;
        height: 760px !important;
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .tofaa-hero {
        min-height: 850px !important;
        padding-bottom: 70px !important;
    }

    .tofaa-hero__visual {
        min-height: 790px !important;
        overflow: visible !important;
    }

    .tofaa-visual__product-stage {
        top: 76px !important;
        height: 720px !important;
    }
}

/* Zachowujemy rozmiar 16 px w navbarze na desktopie. */
@media (min-width: 981px) {
    .tofaa-nav__link,
    .tofaa-nav__trigger,
    .tofaa-nav__action {
        font-size: 16px !important;
    }
}

@media (max-width: 980px) {
    .tofaa-nav {
        position: fixed !important;
        z-index: 9990 !important;
    }

    .tofaa-nav__menu {
        z-index: 30 !important;
    }
}

/* ============================================================
   V77 — delikatne przesunięcie ambientowego tła w lewo
   ============================================================ */

@media (min-width: 1251px) {
    .tofaa-home__ambient-bg {
        right: -1vw !important;
    }
}

@media (min-width: 981px) and (max-width: 1250px) {
    .tofaa-home__ambient-bg {
        right: -4vw !important;
    }
}

/* ============================================================
   V78 — kolor ambientowego tła zależny od aktywnego przycisku
   ============================================================ */

/*
 * Każdy wariant definiuje trzy kolory używane przez trzy niezależne
 * formy tła. Wariant batoników został celowo przyciemniony.
 */
.tofaa-home,
.tofaa-home[data-tofaa-theme="bars"] {
    --tofaa-ambient-one-a: rgba(210, 183, 219, .84);
    --tofaa-ambient-one-b: rgba(159, 111, 177, .72);
    --tofaa-ambient-one-c: rgba(124, 79, 160, .58);

    --tofaa-ambient-two-a: rgba(176, 131, 188, .58);
    --tofaa-ambient-two-b: rgba(124, 79, 160, .72);

    --tofaa-ambient-three-a: rgba(143, 92, 166, .62);
    --tofaa-ambient-three-b: rgba(101, 58, 132, .76);
}

/* 2 — Podziel się z innymi: #ABB538 i odcienie zieleni. */
.tofaa-home[data-tofaa-theme="green"] {
    --tofaa-ambient-one-a: rgba(232, 235, 180, .88);
    --tofaa-ambient-one-b: rgba(194, 202, 100, .72);
    --tofaa-ambient-one-c: rgba(171, 181, 56, .58);

    --tofaa-ambient-two-a: rgba(190, 200, 89, .56);
    --tofaa-ambient-two-b: rgba(137, 148, 38, .70);

    --tofaa-ambient-three-a: rgba(171, 181, 56, .58);
    --tofaa-ambient-three-b: rgba(116, 126, 30, .72);
}

/*
 * 3 — Chwila relaksu: kremowo-różowe odcienie bliskie #F8EAE1,
 * ale wyraźnie ciemniejsze od bazowego tła strony.
 */
.tofaa-home[data-tofaa-theme="cream"] {
    --tofaa-ambient-one-a: rgba(249, 232, 225, .96);
    --tofaa-ambient-one-b: rgba(231, 202, 204, .80);
    --tofaa-ambient-one-c: rgba(207, 171, 184, .62);

    --tofaa-ambient-two-a: rgba(225, 193, 201, .64);
    --tofaa-ambient-two-b: rgba(195, 154, 172, .70);

    --tofaa-ambient-three-a: rgba(213, 177, 190, .60);
    --tofaa-ambient-three-b: rgba(180, 135, 159, .68);
}

/* 4 — Podaruj innym radość: #B083BC i jego odcienie. */
.tofaa-home[data-tofaa-theme="lavender"] {
    --tofaa-ambient-one-a: rgba(230, 209, 234, .90);
    --tofaa-ambient-one-b: rgba(196, 157, 207, .76);
    --tofaa-ambient-one-c: rgba(176, 131, 188, .64);

    --tofaa-ambient-two-a: rgba(189, 145, 200, .62);
    --tofaa-ambient-two-b: rgba(151, 99, 171, .72);

    --tofaa-ambient-three-a: rgba(176, 131, 188, .64);
    --tofaa-ambient-three-b: rgba(132, 79, 153, .74);
}

.tofaa-home__ambient-shape {
    transition:
        background .65s ease,
        opacity .65s ease,
        filter .65s ease;
}

.tofaa-home__ambient-shape--one {
    background:
        radial-gradient(circle at 36% 24%, rgba(255,255,255,.42), transparent 31%),
        linear-gradient(
            145deg,
            var(--tofaa-ambient-one-a) 0%,
            var(--tofaa-ambient-one-b) 48%,
            var(--tofaa-ambient-one-c) 100%
        ) !important;
}

.tofaa-home__ambient-shape--two {
    background:
        radial-gradient(circle at 68% 28%, rgba(255,255,255,.28), transparent 30%),
        linear-gradient(
            132deg,
            var(--tofaa-ambient-two-a),
            var(--tofaa-ambient-two-b)
        ) !important;
}

.tofaa-home__ambient-shape--three {
    background:
        radial-gradient(circle at 34% 25%, rgba(255,255,255,.24), transparent 28%),
        linear-gradient(
            128deg,
            var(--tofaa-ambient-three-a),
            var(--tofaa-ambient-three-b)
        ) !important;
}

/* Krótkie rozświetlenie przy przełączeniu pomaga zauważyć zmianę sceny. */
.tofaa-home[data-tofaa-theme="green"] .tofaa-home__ambient-bg,
.tofaa-home[data-tofaa-theme="cream"] .tofaa-home__ambient-bg,
.tofaa-home[data-tofaa-theme="lavender"] .tofaa-home__ambient-bg,
.tofaa-home[data-tofaa-theme="bars"] .tofaa-home__ambient-bg {
    transition: filter .45s ease;
}

/* ============================================================
   V79 — ciemniejszy wariant 1 + wolniejsze, płynne przejścia
   ============================================================ */

/*
 * Rejestrujemy kolory jako animowalne właściwości CSS.
 * Dzięki temu zmiana palety nie przeskakuje między gradientami,
 * tylko płynnie interpoluje każdy kolor.
 */
@property --tofaa-ambient-one-a {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(124, 79, 160, .92);
}

@property --tofaa-ambient-one-b {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(96, 55, 127, .82);
}

@property --tofaa-ambient-one-c {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(67, 34, 91, .76);
}

@property --tofaa-ambient-two-a {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(111, 67, 143, .70);
}

@property --tofaa-ambient-two-b {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(75, 40, 101, .80);
}

@property --tofaa-ambient-three-a {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(91, 52, 119, .72);
}

@property --tofaa-ambient-three-b {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(49, 24, 66, .84);
}

/* 1 — bazowy #7C4FA0 i wyraźnie ciemniejsze odcienie. */
.tofaa-home,
.tofaa-home[data-tofaa-theme="bars"] {
    --tofaa-ambient-one-a: rgba(124, 79, 160, .94);
    --tofaa-ambient-one-b: rgba(94, 53, 124, .86);
    --tofaa-ambient-one-c: rgba(64, 31, 87, .80);

    --tofaa-ambient-two-a: rgba(107, 62, 139, .74);
    --tofaa-ambient-two-b: rgba(72, 37, 98, .84);

    --tofaa-ambient-three-a: rgba(88, 48, 116, .76);
    --tofaa-ambient-three-b: rgba(45, 22, 61, .88);
}

/*
 * Dłuższa i spokojniejsza animacja zmiany wszystkich kolorów.
 * Przejście trwa 2,4 s i zwalnia na początku oraz końcu.
 */
.tofaa-home {
    transition:
        --tofaa-ambient-one-a 2.4s cubic-bezier(.22, .61, .36, 1),
        --tofaa-ambient-one-b 2.4s cubic-bezier(.22, .61, .36, 1),
        --tofaa-ambient-one-c 2.4s cubic-bezier(.22, .61, .36, 1),
        --tofaa-ambient-two-a 2.4s cubic-bezier(.22, .61, .36, 1),
        --tofaa-ambient-two-b 2.4s cubic-bezier(.22, .61, .36, 1),
        --tofaa-ambient-three-a 2.4s cubic-bezier(.22, .61, .36, 1),
        --tofaa-ambient-three-b 2.4s cubic-bezier(.22, .61, .36, 1);
}

/* Usuwamy szybszą animację tła z poprzedniej wersji. */
.tofaa-home__ambient-shape {
    transition:
        opacity 1.6s ease-in-out,
        filter 1.6s ease-in-out !important;
}

.tofaa-home__ambient-bg {
    transition: filter 1.8s ease-in-out !important;
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-home,
    .tofaa-home__ambient-shape,
    .tofaa-home__ambient-bg {
        transition: none !important;
    }
}

/* ============================================================
   V80 — powrót animowanych blobów z dynamiczną paletą V79
   ============================================================ */

/*
 * Zachowujemy istniejące data-tofaa-theme i animowane zmienne kolorów.
 * Zmieniamy wyłącznie geometrię ambientowego tła na pełne,
 * zaokrąglone bloby, które nie tworzą poziomej krawędzi.
 */
.tofaa-home__ambient-bg {
    position: absolute !important;
    top: clamp(145px, 12vw, 195px) !important;
    right: -3vw !important;
    bottom: clamp(105px, 8vw, 145px) !important;
    left: 48% !important;
    z-index: 1 !important;
    overflow: visible !important;
    pointer-events: none !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Ziarno zostaje subtelne i jest ograniczone do samych blobów. */
.tofaa-home__ambient-bg::after {
    inset: 4% -2% 2% 5% !important;
    opacity: .035 !important;
    border-radius: 46% 54% 51% 49% / 52% 44% 56% 48%;
    -webkit-mask-image: radial-gradient(
        ellipse 76% 72% at 62% 48%,
        #000 0%,
        #000 70%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 76% 72% at 62% 48%,
        #000 0%,
        #000 70%,
        transparent 100%
    );
}

.tofaa-home__ambient-shape {
    position: absolute !important;
    display: block !important;
    filter: none !important;
    box-shadow:
        inset 0 0 65px rgba(255, 255, 255, .08),
        0 28px 55px rgba(88, 48, 116, .10);
    transition:
        opacity 1.8s ease-in-out,
        filter 1.8s ease-in-out !important;
}

/* Główny duży blob za produktami. */
.tofaa-home__ambient-shape--one {
    width: min(47vw, 720px) !important;
    height: min(47vw, 720px) !important;
    top: 4% !important;
    right: 2% !important;
    z-index: 1 !important;
    opacity: .88 !important;
    border-radius: 54% 46% 59% 41% / 47% 57% 43% 53% !important;
    background:
        radial-gradient(circle at 29% 23%, rgba(255,255,255,.32), transparent 31%),
        linear-gradient(
            145deg,
            var(--tofaa-ambient-one-a) 0%,
            var(--tofaa-ambient-one-b) 52%,
            var(--tofaa-ambient-one-c) 100%
        ) !important;
    animation: tofaa-blob-breathe-one 15.5s ease-in-out infinite !important;
}

/* Drugi blob nachodzący od dołu. */
.tofaa-home__ambient-shape--two {
    width: min(43vw, 660px) !important;
    height: min(31vw, 470px) !important;
    right: -2% !important;
    bottom: 2% !important;
    top: auto !important;
    z-index: 2 !important;
    opacity: .72 !important;
    border-radius: 58% 42% 49% 51% / 48% 61% 39% 52% !important;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.22), transparent 30%),
        linear-gradient(
            132deg,
            var(--tofaa-ambient-two-a),
            var(--tofaa-ambient-two-b)
        ) !important;
    animation: tofaa-blob-breathe-two 18s ease-in-out infinite !important;
}

/* Mniejszy łączący blob pomiędzy dużymi formami. */
.tofaa-home__ambient-shape--three {
    width: min(24vw, 360px) !important;
    height: min(18vw, 270px) !important;
    left: 10% !important;
    bottom: 17% !important;
    right: auto !important;
    top: auto !important;
    z-index: 3 !important;
    opacity: .50 !important;
    border-radius: 47% 53% 56% 44% / 58% 45% 55% 42% !important;
    background:
        radial-gradient(circle at 35% 26%, rgba(255,255,255,.22), transparent 29%),
        linear-gradient(
            128deg,
            var(--tofaa-ambient-three-a),
            var(--tofaa-ambient-three-b)
        ) !important;
    animation: tofaa-blob-breathe-three 13.5s ease-in-out infinite !important;
}

/* Dwa małe lewitujące bąbelki. */
.tofaa-home__ambient-bg::before {
    content: "";
    position: absolute;
    width: clamp(58px, 5vw, 82px);
    height: clamp(42px, 3.8vw, 62px);
    top: 10%;
    right: 4%;
    z-index: 4;
    opacity: .48;
    border-radius: 51% 49% 57% 43% / 43% 58% 42% 57%;
    background: linear-gradient(
        135deg,
        var(--tofaa-ambient-two-a),
        var(--tofaa-ambient-two-b)
    );
    box-shadow: 0 15px 28px rgba(88, 48, 116, .10);
    animation: tofaa-mini-blob-float 11s ease-in-out infinite;
}

.tofaa-home__ambient-shape--three::after {
    content: "";
    position: absolute;
    width: clamp(52px, 4.2vw, 70px);
    height: clamp(38px, 3.2vw, 54px);
    left: -34%;
    top: 12%;
    opacity: .46;
    border-radius: 44% 56% 48% 52% / 56% 43% 57% 44%;
    background: linear-gradient(
        145deg,
        var(--tofaa-ambient-one-a),
        var(--tofaa-ambient-one-b)
    );
    animation: tofaa-mini-blob-float-two 12.5s ease-in-out infinite;
}

@keyframes tofaa-blob-breathe-one {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-1.2deg) scale(1);
        border-radius: 54% 46% 59% 41% / 47% 57% 43% 53%;
    }
    34% {
        transform: translate3d(-12px, -9px, 0) rotate(.5deg) scale(1.018, .988);
        border-radius: 58% 42% 53% 47% / 52% 48% 52% 48%;
    }
    68% {
        transform: translate3d(9px, 12px, 0) rotate(-.4deg) scale(.992, 1.018);
        border-radius: 49% 51% 61% 39% / 44% 61% 39% 56%;
    }
}

@keyframes tofaa-blob-breathe-two {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(1.4deg) scale(1);
        border-radius: 58% 42% 49% 51% / 48% 61% 39% 52%;
    }
    38% {
        transform: translate3d(-15px, 10px, 0) rotate(-.8deg) scale(1.025, .985);
        border-radius: 52% 48% 56% 44% / 55% 47% 53% 45%;
    }
    73% {
        transform: translate3d(12px, -8px, 0) rotate(.6deg) scale(.988, 1.022);
        border-radius: 62% 38% 46% 54% / 43% 59% 41% 57%;
    }
}

@keyframes tofaa-blob-breathe-three {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-2deg) scale(1);
        border-radius: 47% 53% 56% 44% / 58% 45% 55% 42%;
    }
    50% {
        transform: translate3d(-11px, -13px, 0) rotate(1.2deg) scale(1.035, .97);
        border-radius: 56% 44% 49% 51% / 46% 58% 42% 54%;
    }
}

@keyframes tofaa-mini-blob-float {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-4deg);
    }
    50% {
        transform: translate3d(-9px, 12px, 0) rotate(5deg);
    }
}

@keyframes tofaa-mini-blob-float-two {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(3deg);
    }
    50% {
        transform: translate3d(10px, -9px, 0) rotate(-5deg);
    }
}

/* Tło jest całkowicie lokalne dla hero i nie dotyka kolejnej sekcji. */
@media (min-width: 981px) {
    .tofaa-home__ambient-bg {
        bottom: clamp(105px, 8vw, 145px) !important;
    }
}

@media (max-width: 1250px) {
    .tofaa-home__ambient-bg {
        top: 165px !important;
        right: -5vw !important;
        bottom: 92px !important;
        left: 43% !important;
    }

    .tofaa-home__ambient-shape--one {
        width: min(54vw, 680px) !important;
        height: min(54vw, 680px) !important;
    }

    .tofaa-home__ambient-shape--two {
        width: min(49vw, 610px) !important;
        height: min(36vw, 440px) !important;
    }
}

@media (max-width: 980px) {
    .tofaa-home__ambient-bg {
        top: 56% !important;
        right: -20vw !important;
        bottom: 55px !important;
        left: 7% !important;
    }

    .tofaa-home__ambient-shape--one {
        width: 100vw !important;
        height: 100vw !important;
    }

    .tofaa-home__ambient-shape--two {
        width: 94vw !important;
        height: 66vw !important;
    }

    .tofaa-home__ambient-shape--three {
        width: 50vw !important;
        height: 36vw !important;
    }
}

@media (max-width: 640px) {
    .tofaa-home__ambient-bg {
        right: -27vw !important;
        left: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-home__ambient-shape,
    .tofaa-home__ambient-bg::before,
    .tofaa-home__ambient-shape--three::after {
        animation: none !important;
    }
}


/* ============================================================
   V81 — bez stickera, bloby lekko w lewo, bez cukru ukryte dla pastili
   ============================================================ */

/* Usuwamy całkowicie sticker "Tylko 3 składniki". */
.tofaa-visual__badge {
    display: none !important;
}

/* Bloby przesunięte odrobinę w lewo, aby lepiej balansowały kompozycję. */
.tofaa-home__ambient-bg {
    left: 44% !important;
    right: -1vw !important;
}

.tofaa-home__ambient-shape--one {
    right: 4% !important;
}

.tofaa-home__ambient-shape--two {
    right: 0 !important;
}

.tofaa-home__ambient-shape--three {
    left: 7% !important;
}

.tofaa-home__ambient-bg::before {
    right: 2% !important;
}

/* Po aktywacji sceny 3 (pastila) ukrywamy benefit "Bez dodatku cukru". */
.tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefit--no-sugar {
    display: none !important;
}

.tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefits {
    grid-template-columns: repeat(4, minmax(86px, 1fr)) !important;
}

@media (max-width: 1250px) {
    .tofaa-home__ambient-bg {
        left: 40% !important;
        right: -2vw !important;
    }
}

@media (max-width: 980px) {
    .tofaa-home__ambient-bg {
        left: 3% !important;
        right: -18vw !important;
    }
}


/* ============================================================
   V82 — chrupki mniejsze, po przekątnej, ze staggered entrance
   ============================================================ */

/* Domyślnie chowamy oba opakowania, a aktywacja sceny odpala wejście. */
.tofaa-visual__scene-product--crisps-apple,
.tofaa-visual__scene-product--crisps-blackcurrant {
    opacity: 0;
}

/* Mniejsze opakowania i wyraźny układ po przekątnej:
   jabłko/porzeczka niżej po lewej, drugie wyżej po prawej. */
.tofaa-visual__scene-product--crisps-apple {
    height: min(66%, 520px) !important;
    width: auto;
    top: 22% !important;
    left: -4.5% !important;
    right: auto;
    transform: translate3d(-18px, 22px, 0) rotate(-7deg) scale(.94);
    z-index: 7;
}

.tofaa-visual__scene-product--crisps-blackcurrant {
    height: min(61%, 490px) !important;
    width: auto;
    top: 3% !important;
    right: 5% !important;
    left: auto;
    transform: translate3d(22px, -18px, 0) rotate(8deg) scale(.94);
    z-index: 8;
}

/* Najpierw pojawia się lewy-dolny wariant, zaraz po nim prawy-górny. */
.tofaa-visual__scene--crisps.is-active .tofaa-visual__scene-product--crisps-apple {
    animation:
        tofaa-crisps-enter-a .68s cubic-bezier(.2, .8, .2, 1) both,
        tofaa-crisps-float-a 7.2s ease-in-out .72s infinite;
}

.tofaa-visual__scene--crisps.is-active .tofaa-visual__scene-product--crisps-blackcurrant {
    animation:
        tofaa-crisps-enter-b .72s cubic-bezier(.2, .8, .2, 1) .18s both,
        tofaa-crisps-float-b 8s ease-in-out .96s infinite;
}

@keyframes tofaa-crisps-enter-a {
    0% {
        opacity: 0;
        transform: translate3d(-26px, 34px, 0) rotate(-10deg) scale(.9);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(-7deg) scale(1);
    }
}

@keyframes tofaa-crisps-enter-b {
    0% {
        opacity: 0;
        transform: translate3d(30px, -26px, 0) rotate(11deg) scale(.9);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(8deg) scale(1);
    }
}

/* Delikatny niezależny oddech po wejściu. */
@keyframes tofaa-crisps-float-a {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-7deg) scale(1); }
    46% { transform: translate3d(-5px, -12px, 0) rotate(-5deg) scale(1.014); }
    74% { transform: translate3d(4px, 6px, 0) rotate(-8deg) scale(.996); }
}

@keyframes tofaa-crisps-float-b {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg) scale(1); }
    40% { transform: translate3d(6px, -10px, 0) rotate(6deg) scale(1.012); }
    72% { transform: translate3d(-4px, 6px, 0) rotate(9deg) scale(.997); }
}

@media (max-width: 1250px) {
    .tofaa-visual__scene-product--crisps-apple {
        height: min(62%, 470px) !important;
        top: 24% !important;
        left: -2.5% !important;
    }

    .tofaa-visual__scene-product--crisps-blackcurrant {
        height: min(58%, 440px) !important;
        top: 6% !important;
        right: 5% !important;
    }
}

@media (max-width: 980px) {
    .tofaa-visual__scene-product--crisps-apple {
        height: 60% !important;
        top: 26% !important;
        left: -1% !important;
    }

    .tofaa-visual__scene-product--crisps-blackcurrant {
        height: 56% !important;
        top: 8% !important;
        right: 6% !important;
    }
}

@media (max-width: 620px) {
    .tofaa-visual__scene-product--crisps-apple {
        height: 56% !important;
        top: 28% !important;
        left: -2% !important;
    }

    .tofaa-visual__scene-product--crisps-blackcurrant {
        height: 52% !important;
        top: 10% !important;
        right: 1% !important;
    }
}

/* ============================================================
   V89 — płynne znikanie benefitu „Bez dodatku cukru” dla pastili
   ============================================================ */

/* Przywracamy element do layoutu — wcześniejsze display:none blokowało animację. */
.tofaa-benefit--no-sugar,
.tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefit--no-sugar {
    display: flex !important;
    min-width: 0 !important;
    overflow: hidden;
    transform-origin: center top;
}

.tofaa-benefit--no-sugar {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    visibility: visible;
    max-width: 180px;
    transition:
        opacity .5s cubic-bezier(.22, .61, .36, 1),
        transform .58s cubic-bezier(.22, .61, .36, 1),
        max-width .66s cubic-bezier(.22, .61, .36, 1),
        visibility 0s linear 0s;
}

.tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefit--no-sugar {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(.72);
    visibility: hidden;
    max-width: 0;
    pointer-events: none;
    transition:
        opacity .5s cubic-bezier(.22, .61, .36, 1),
        transform .58s cubic-bezier(.22, .61, .36, 1),
        max-width .66s cubic-bezier(.22, .61, .36, 1),
        visibility 0s linear .58s;
}

/* Na desktopie także pozostałe cztery ikony płynnie zajmują zwolnione miejsce. */
@media (min-width: 1101px) {
    .tofaa-benefits {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        transition: grid-template-columns .66s cubic-bezier(.22, .61, .36, 1) !important;
    }

    .tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefits {
        grid-template-columns: minmax(0, 0fr) repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-benefit--no-sugar,
    .tofaa-benefits {
        transition: none !important;
    }
}

/* ============================================================
   V90 — „Bez dodatku cukru” ukryte dla przycisków 3 i 4
   - bez przesuwania i skalowania samej ikony
   - pozostałe ikony płynnie przesuwają się w wolne miejsce
   ============================================================ */

.tofaa-benefit--no-sugar {
    display: flex !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto;
    transition:
        opacity .42s ease-in-out,
        visibility 0s linear 0s !important;
}

/* Przycisk 3 — pastila. */
.tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefit--no-sugar,
/* Przycisk 4 — lawendowy wariant batonów. */
.tofaa-home[data-tofaa-theme="lavender"] .tofaa-benefit--no-sugar {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    pointer-events: none;
    transition:
        opacity .42s ease-in-out,
        visibility 0s linear .42s !important;
}

/*
 * Zmienia się wyłącznie szerokość pierwszej kolumny siatki.
 * Dzięki temu pozostałe ikony płynnie przesuwają się w bok,
 * bez animowanego przesuwania samej ikony „Bez dodatku cukru”.
 */
@media (min-width: 1101px) {
    .tofaa-benefits {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        transition:
            grid-template-columns .68s cubic-bezier(.22, .61, .36, 1) !important;
    }

    .tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefits,
    .tofaa-home[data-tofaa-theme="lavender"] .tofaa-benefits {
        grid-template-columns:
            minmax(0, 0fr)
            repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Na mniejszych ekranach element zwija swoją szerokość bez translacji. */
@media (max-width: 1100px) {
    .tofaa-benefit--no-sugar {
        width: auto !important;
        max-width: 180px !important;
        transition:
            opacity .42s ease-in-out,
            max-width .68s cubic-bezier(.22, .61, .36, 1),
            visibility 0s linear 0s !important;
    }

    .tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefit--no-sugar,
    .tofaa-home[data-tofaa-theme="lavender"] .tofaa-benefit--no-sugar {
        max-width: 0 !important;
        transition:
            opacity .42s ease-in-out,
            max-width .68s cubic-bezier(.22, .61, .36, 1),
            visibility 0s linear .42s !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-benefit--no-sugar,
    .tofaa-benefits {
        transition: none !important;
    }
}

/* ============================================================
   V91 — najpierw zanikanie, dopiero potem przesunięcie ikon
   ============================================================ */

/*
 * Przy przejściu z 3/4 do 1/2:
 * 1. siatka najpierw rozszerza wolną kolumnę,
 * 2. ikona pojawia się dopiero po rozpoczęciu rozsuwania.
 */
.tofaa-benefit--no-sugar {
    transition:
        opacity .42s ease-in-out .34s,
        visibility 0s linear 0s !important;
}

/*
 * Przy kliknięciu 3 lub 4:
 * 1. ikona najpierw płynnie zanika,
 * 2. po zakończeniu zanikania pozostałe ikony przesuwają się w jej miejsce.
 */
.tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefit--no-sugar,
.tofaa-home[data-tofaa-theme="lavender"] .tofaa-benefit--no-sugar {
    transition:
        opacity .42s ease-in-out 0s,
        visibility 0s linear .42s !important;
}

@media (min-width: 1101px) {
    .tofaa-benefits {
        transition:
            grid-template-columns .68s cubic-bezier(.22, .61, .36, 1) 0s !important;
    }

    .tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefits,
    .tofaa-home[data-tofaa-theme="lavender"] .tofaa-benefits {
        transition:
            grid-template-columns .68s cubic-bezier(.22, .61, .36, 1) .42s !important;
    }
}

@media (max-width: 1100px) {
    .tofaa-benefit--no-sugar {
        transition:
            opacity .42s ease-in-out .34s,
            max-width .68s cubic-bezier(.22, .61, .36, 1) 0s,
            visibility 0s linear 0s !important;
    }

    .tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefit--no-sugar,
    .tofaa-home[data-tofaa-theme="lavender"] .tofaa-benefit--no-sugar {
        transition:
            opacity .42s ease-in-out 0s,
            max-width .68s cubic-bezier(.22, .61, .36, 1) .42s,
            visibility 0s linear .42s !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-benefit--no-sugar,
    .tofaa-benefits {
        transition: none !important;
    }
}

/* ============================================================
   V92 — krótsze zanikanie i płynny ruch pozostałych ikon
   ============================================================ */

/*
 * Nie używamy visibility:hidden podczas przejścia, ponieważ jest to
 * właściwość skokowa. Niewidoczność zapewnia opacity: 0.
 */
.tofaa-benefit--no-sugar {
    display: flex !important;
    min-width: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto;
    transition:
        opacity .18s ease-in-out .30s !important;
}

.tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefit--no-sugar,
.tofaa-home[data-tofaa-theme="lavender"] .tofaa-benefit--no-sugar {
    opacity: 0 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: none;
    transition:
        opacity .18s ease-in-out 0s !important;
}

/*
 * Desktop: zamiast zmiany liczby kolumn Grid używamy animowanego Flexboxa.
 * Dzięki temu cztery pozostałe ikony nie przeskakują — płynnie zajmują
 * zwalniane miejsce i równie płynnie rozsuwają się przy powrocie.
 */
@media (min-width: 1101px) {
    .tofaa-benefits {
        display: flex !important;
        align-items: flex-start;
        gap: 16px !important;
        grid-template-columns: none !important;
    }

    .tofaa-benefits > .tofaa-benefit {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0%;
        min-width: 0 !important;
    }

    .tofaa-benefits > .tofaa-benefit--no-sugar {
        flex-grow: 1;
        flex-basis: 0%;
        max-width: 100% !important;
        margin-right: 0;
        transition:
            opacity .18s ease-in-out .30s,
            flex-grow .40s cubic-bezier(.22, .61, .36, 1) 0s,
            max-width .40s cubic-bezier(.22, .61, .36, 1) 0s,
            margin-right .40s cubic-bezier(.22, .61, .36, 1) 0s !important;
    }

    .tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefits > .tofaa-benefit--no-sugar,
    .tofaa-home[data-tofaa-theme="lavender"] .tofaa-benefits > .tofaa-benefit--no-sugar {
        flex-grow: 0;
        flex-basis: 0%;
        max-width: 0 !important;
        margin-right: -16px;
        transition:
            opacity .18s ease-in-out 0s,
            flex-grow .40s cubic-bezier(.22, .61, .36, 1) .18s,
            max-width .40s cubic-bezier(.22, .61, .36, 1) .18s,
            margin-right .40s cubic-bezier(.22, .61, .36, 1) .18s !important;
    }
}

/*
 * Mniejsze ekrany: skrócone zanikanie; szerokość elementu zwija się
 * dopiero po zakończeniu krótkiego fade-outu.
 */
@media (max-width: 1100px) {
    .tofaa-benefit--no-sugar {
        max-width: 180px !important;
        transition:
            opacity .18s ease-in-out .30s,
            max-width .40s cubic-bezier(.22, .61, .36, 1) 0s !important;
    }

    .tofaa-home[data-tofaa-scene="pastila"] .tofaa-benefit--no-sugar,
    .tofaa-home[data-tofaa-theme="lavender"] .tofaa-benefit--no-sugar {
        max-width: 0 !important;
        transition:
            opacity .18s ease-in-out 0s,
            max-width .40s cubic-bezier(.22, .61, .36, 1) .18s !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-benefit--no-sugar,
    .tofaa-benefits > .tofaa-benefit {
        transition: none !important;
    }
}

/* ============================================================
   V93 — stałe położenie przycisku „Sprawdź produkty”
   ============================================================ */

/*
 * Podczas zwijania pierwszego benefitu jego napis nie może łamać się
 * na dodatkowy wiersz. Pozostają tylko dwa wiersze wymuszone przez <br>,
 * więc wysokość całego rzędu ikon nie zmienia się i przycisk poniżej
 * pozostaje dokładnie w tym samym miejscu.
 */
.tofaa-benefit--no-sugar > .tofaa-benefit__icon,
.tofaa-benefit--no-sugar > span:last-child {
    flex-shrink: 0 !important;
}

.tofaa-benefit--no-sugar > span:last-child {
    white-space: nowrap !important;
}

/* ============================================================
   V96 — pełny blur od pierwszej widocznej klatki dropdownu
   ============================================================ */

/*
 * Nie animujemy opacity elementu zawierającego backdrop-filter.
 * W Chromium animowana przezroczystość rodzica potrafi wyłączyć
 * rozmywanie tła albo uruchomić je dopiero pod koniec animacji.
 *
 * Dropdown jest ukrywany poprzez clip-path. Backdrop-filter przez cały
 * czas ma swoją finalną wartość, więc każda odsłaniana część panelu
 * jest od razu w pełni wyblurowana.
 */
@media (min-width: 981px) {
    .tofaa-nav__submenu,
    .tofaa-nav__submenu--shop,
    .tofaa-nav__submenu--about {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none;
        transition:
            transform .34s cubic-bezier(.2, .8, .2, 1) !important;
    }

    .tofaa-nav__submenu-panel,
    .tofaa-nav__submenu--shop .tofaa-nav__submenu-panel,
    .tofaa-nav__submenu--about .tofaa-nav__submenu-panel {
        -webkit-backdrop-filter: var(--tofaa-glass-blur) !important;
        backdrop-filter: var(--tofaa-glass-blur) !important;

        clip-path: inset(0 0 100% 0 round 0 0 26px 26px);
        -webkit-clip-path: inset(0 0 100% 0 round 0 0 26px 26px);

        transition:
            clip-path .30s cubic-bezier(.2, .8, .2, 1),
            -webkit-clip-path .30s cubic-bezier(.2, .8, .2, 1) !important;
    }

    /* Treść zamkniętego dropdownu nie trafia do nawigacji klawiaturą. */
    .tofaa-nav__submenu-panel > * {
        visibility: hidden;
    }

    .tofaa-nav__item--dropdown:hover > .tofaa-nav__submenu,
    .tofaa-nav__item--dropdown:focus-within > .tofaa-nav__submenu,
    .tofaa-nav__item--dropdown.is-open > .tofaa-nav__submenu,
    .tofaa-nav__item--shop:hover > .tofaa-nav__submenu--shop,
    .tofaa-nav__item--shop:focus-within > .tofaa-nav__submenu--shop,
    .tofaa-nav__item--shop.is-open > .tofaa-nav__submenu--shop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto;
    }

    .tofaa-nav__item--dropdown:hover > .tofaa-nav__submenu .tofaa-nav__submenu-panel,
    .tofaa-nav__item--dropdown:focus-within > .tofaa-nav__submenu .tofaa-nav__submenu-panel,
    .tofaa-nav__item--dropdown.is-open > .tofaa-nav__submenu .tofaa-nav__submenu-panel,
    .tofaa-nav__item--shop:hover > .tofaa-nav__submenu--shop .tofaa-nav__submenu-panel,
    .tofaa-nav__item--shop:focus-within > .tofaa-nav__submenu--shop .tofaa-nav__submenu-panel,
    .tofaa-nav__item--shop.is-open > .tofaa-nav__submenu--shop .tofaa-nav__submenu-panel {
        clip-path: inset(0 0 0 0 round 0 0 26px 26px);
        -webkit-clip-path: inset(0 0 0 0 round 0 0 26px 26px);
    }

    .tofaa-nav__item--dropdown:hover > .tofaa-nav__submenu .tofaa-nav__submenu-panel > *,
    .tofaa-nav__item--dropdown:focus-within > .tofaa-nav__submenu .tofaa-nav__submenu-panel > *,
    .tofaa-nav__item--dropdown.is-open > .tofaa-nav__submenu .tofaa-nav__submenu-panel > *,
    .tofaa-nav__item--shop:hover > .tofaa-nav__submenu--shop .tofaa-nav__submenu-panel > *,
    .tofaa-nav__item--shop:focus-within > .tofaa-nav__submenu--shop .tofaa-nav__submenu-panel > *,
    .tofaa-nav__item--shop.is-open > .tofaa-nav__submenu--shop .tofaa-nav__submenu-panel > * {
        visibility: visible;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 981px) {
    .tofaa-nav__submenu,
    .tofaa-nav__submenu-panel {
        transition: none !important;
    }
}

/* ============================================================
   V97 — lewitujące owoce wokół batoników
   ============================================================ */

.tofaa-visual__fruit-cluster {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.tofaa-visual__fruit {
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
    will-change: transform, opacity;
    opacity: 1;
    filter: drop-shadow(0 16px 22px rgba(65, 30, 71, .16));
}

.tofaa-visual__fruit--strawberry {
    left: 4%;
    top: 16%;
    width: clamp(56px, 7vw, 92px);
    z-index: 6;
    animation: tofaa-fruit-float-a 6.8s ease-in-out infinite;
}

.tofaa-visual__fruit--apple {
    right: 1%;
    bottom: 14%;
    width: clamp(86px, 9vw, 132px);
    z-index: 4;
    animation: tofaa-fruit-float-b 7.6s ease-in-out infinite -.9s;
}

.tofaa-visual__fruit--blackcurrant {
    left: 10%;
    bottom: 20%;
    width: clamp(64px, 7.5vw, 102px);
    z-index: 12;
    animation: tofaa-fruit-float-c 7.2s ease-in-out infinite -1.4s;
}

.tofaa-visual__fruit--raspberry {
    right: 4%;
    top: 34%;
    width: clamp(64px, 7.2vw, 100px);
    z-index: 8;
    animation: tofaa-fruit-float-d 6.4s ease-in-out infinite -.5s;
}

.tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars.is-active .tofaa-visual__fruit {
    opacity: 1;
}

@keyframes tofaa-fruit-float-a {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg) scale(1); }
    35% { transform: translate3d(-10px, -14px, 0) rotate(-1deg) scale(1.03); }
    70% { transform: translate3d(8px, 10px, 0) rotate(-6deg) scale(.98); }
}

@keyframes tofaa-fruit-float-b {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(5deg) scale(1); }
    30% { transform: translate3d(12px, -12px, 0) rotate(8deg) scale(1.02); }
    68% { transform: translate3d(-8px, 10px, 0) rotate(2deg) scale(.985); }
}

@keyframes tofaa-fruit-float-c {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); }
    40% { transform: translate3d(-12px, 12px, 0) rotate(-6deg) scale(.985); }
    72% { transform: translate3d(10px, -12px, 0) rotate(2deg) scale(1.03); }
}

@keyframes tofaa-fruit-float-d {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(3deg) scale(1); }
    28% { transform: translate3d(10px, -14px, 0) rotate(7deg) scale(1.04); }
    65% { transform: translate3d(-10px, 8px, 0) rotate(0deg) scale(.98); }
}

@media (max-width: 1280px) {
    .tofaa-visual__fruit--strawberry { left: 6%; top: 18%; }
    .tofaa-visual__fruit--apple { right: 2%; bottom: 16%; }
    .tofaa-visual__fruit--blackcurrant { left: 11%; bottom: 18%; }
    .tofaa-visual__fruit--raspberry { right: 5%; top: 36%; }
}

@media (max-width: 980px) {
    .tofaa-visual__fruit--strawberry {
        left: 2%;
        top: 12%;
        width: clamp(46px, 10vw, 70px);
    }

    .tofaa-visual__fruit--apple {
        right: 0;
        bottom: 14%;
        width: clamp(70px, 12vw, 98px);
    }

    .tofaa-visual__fruit--blackcurrant {
        left: 4%;
        bottom: 16%;
        width: clamp(50px, 10vw, 72px);
    }

    .tofaa-visual__fruit--raspberry {
        right: 1%;
        top: 29%;
        width: clamp(54px, 10vw, 76px);
    }
}

@media (max-width: 767px) {
    .tofaa-visual__fruit-cluster {
        inset: 3% 0 0;
    }

    .tofaa-visual__fruit--strawberry {
        left: 4%;
        top: 12%;
        width: 44px;
    }

    .tofaa-visual__fruit--apple {
        right: 1%;
        bottom: 13%;
        width: 72px;
    }

    .tofaa-visual__fruit--blackcurrant {
        left: 2%;
        bottom: 17%;
        width: 52px;
    }

    .tofaa-visual__fruit--raspberry {
        right: 2%;
        top: 31%;
        width: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__fruit {
        animation: none !important;
    }
}

/* ============================================================
   V98 — trzy horyzontalne karty liquid glass pod hero
   ============================================================ */

.tofaa-community-section {
    width: min(1480px, 100%);
    margin: clamp(28px, 5vw, 72px) auto 0;
    padding: 0 0 clamp(72px, 8vw, 124px);
    position: relative;
    z-index: 10;
}

.tofaa-community-section__title {
    margin: 0 0 22px;
    color: var(--tofaa-purple);
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.035em;
}

.tofaa-community-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.16fr);
    gap: clamp(16px, 1.7vw, 26px);
    align-items: stretch;
}

.tofaa-community-card {
    --tofaa-card-glass-background: rgba(248, 234, 225, .38);
    --tofaa-card-glass-border: rgba(255, 255, 255, .68);
    --tofaa-card-glass-blur: blur(22px) saturate(140%) contrast(104%);

    min-width: 0;
    min-height: 420px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 30px;
    color: var(--tofaa-purple);
    transition: transform .34s cubic-bezier(.2, .8, .2, 1), box-shadow .34s ease;
}

.tofaa-community-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 1px solid var(--tofaa-card-glass-border);
    border-radius: inherit;
    background-color: var(--tofaa-card-glass-background);
    background-image:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .5), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.03));
    box-shadow:
        0 20px 52px rgba(72, 38, 76, .13),
        inset 0 1px 0 rgba(255, 255, 255, .82),
        inset 0 -1px 0 rgba(124, 79, 160, .08);
    -webkit-backdrop-filter: var(--tofaa-card-glass-blur);
    backdrop-filter: var(--tofaa-card-glass-blur);
    pointer-events: none;
}

.tofaa-community-card::after {
    content: "";
    width: 190px;
    height: 190px;
    position: absolute;
    right: -72px;
    bottom: -84px;
    z-index: 0;
    border-radius: 50%;
    background: rgba(176, 131, 188, .13);
    filter: blur(1px);
    pointer-events: none;
}

.tofaa-community-card:hover {
    transform: translateY(-5px);
}

.tofaa-community-card__content {
    min-height: 100%;
    padding: clamp(27px, 2.7vw, 42px);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.tofaa-community-card__eyebrow {
    margin: 0 0 14px;
    display: inline-flex;
    align-self: flex-start;
    padding: 8px 13px;
    border: 1px solid rgba(124, 79, 160, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .26);
    color: var(--tofaa-purple);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .09em;
    line-height: 1;
    text-transform: uppercase;
}

.tofaa-community-card h3 {
    margin: 0 0 18px;
    color: var(--tofaa-purple);
    font-size: clamp(27px, 2.4vw, 40px);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -.035em;
}

.tofaa-community-card p {
    margin: 0;
    color: rgba(89, 51, 105, .9);
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 600;
    line-height: 1.6;
}

.tofaa-community-card__cta {
    min-height: 50px;
    margin-top: auto;
    padding: 13px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    align-self: flex-start;
    border: 1px solid rgba(124, 79, 160, .24);
    border-radius: 999px;
    color: #fff;
    background: var(--tofaa-purple);
    box-shadow: 0 12px 24px rgba(85, 44, 96, .2);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .26s cubic-bezier(.2, .8, .2, 1), box-shadow .26s ease, background .26s ease;
}

.tofaa-community-card__cta span {
    font-size: 21px;
    line-height: 1;
    transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}

.tofaa-community-card__cta:hover,
.tofaa-community-card__cta:focus-visible {
    color: #fff;
    background: #684087;
    box-shadow: 0 16px 30px rgba(85, 44, 96, .26);
    transform: translateY(-2px);
    outline: none;
}

.tofaa-community-card__cta:hover span,
.tofaa-community-card__cta:focus-visible span {
    transform: translateX(4px);
}

.tofaa-community-card--club::after {
    right: auto;
    bottom: -98px;
    left: -76px;
    background: rgba(171, 181, 56, .2);
}

.tofaa-community-card--reviews {
    min-height: 420px;
}

.tofaa-community-card--reviews .tofaa-community-card__content {
    padding-right: clamp(23px, 2.3vw, 34px);
    padding-left: clamp(23px, 2.3vw, 34px);
}

.tofaa-reviews-card__header {
    margin-bottom: 17px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.tofaa-reviews-card__header h3 {
    margin-bottom: 0;
    font-size: clamp(26px, 2vw, 34px);
}

.tofaa-reviews-card__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.tofaa-reviews-card__arrow {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(124, 79, 160, .2);
    border-radius: 50%;
    color: var(--tofaa-purple);
    background: rgba(255, 255, 255, .28);
    font-family: inherit;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .22s ease, background-color .22s ease;
}

.tofaa-reviews-card__arrow:hover:not(:disabled),
.tofaa-reviews-card__arrow:focus-visible:not(:disabled) {
    background: rgba(255, 255, 255, .58);
    transform: scale(1.06);
    outline: none;
}

.tofaa-reviews-card__arrow:disabled {
    opacity: .35;
    cursor: default;
}

.tofaa-reviews-card__counter {
    min-width: 42px;
    color: rgba(89, 51, 105, .78);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.tofaa-reviews-carousel {
    min-width: 0;
    overflow: hidden;
    border-radius: 22px;
    outline: none;
}

.tofaa-reviews-carousel:focus-visible {
    box-shadow: 0 0 0 3px rgba(124, 79, 160, .18);
}

.tofaa-reviews-carousel__track {
    display: flex;
    transform: translate3d(0, 0, 0);
    transition: transform .58s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}

.tofaa-review-slide {
    width: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tofaa-review-slide__product {
    min-height: 116px;
    padding: 12px;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    border: 1px solid rgba(124, 79, 160, .12);
    border-radius: 20px;
    background: rgba(255, 255, 255, .23);
}

.tofaa-review-slide__image {
    height: 90px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(255, 255, 255, .28);
    overflow: hidden;
}

.tofaa-review-slide__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.tofaa-review-slide__summary {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tofaa-review-slide__name {
    margin-bottom: 8px;
    color: var(--tofaa-purple);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
}

.tofaa-review-slide__name:hover,
.tofaa-review-slide__name:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: none;
}

.tofaa-review-rating {
    width: 105px;
    height: 22px;
    position: relative;
    overflow: hidden;
    font-size: 19px;
    letter-spacing: 2px;
    line-height: 1;
    white-space: nowrap;
}

.tofaa-review-rating__base,
.tofaa-review-rating__fill {
    position: absolute;
    top: 0;
    left: 0;
}

.tofaa-review-rating__base {
    color: rgba(124, 79, 160, .18);
}

.tofaa-review-rating__fill {
    overflow: hidden;
    color: #f0a828;
}

.tofaa-review-slide__rating-copy {
    margin-top: 5px;
    color: rgba(89, 51, 105, .75);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.tofaa-review-slide__reviews {
    display: grid;
    gap: 8px;
}

.tofaa-review-quote {
    margin: 0;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(124, 79, 160, .1);
}

.tofaa-review-quote:last-child {
    border-bottom: 0;
}

.tofaa-review-quote p {
    color: rgba(89, 51, 105, .86);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.38;
}

.tofaa-review-quote cite {
    color: var(--tofaa-purple);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.tofaa-review-slide__empty {
    min-height: 122px;
    padding: 20px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    border: 1px dashed rgba(124, 79, 160, .22);
    border-radius: 20px;
    text-align: center;
}

.tofaa-review-slide__empty span {
    color: var(--tofaa-purple-light);
    font-size: 25px;
}

.tofaa-review-slide__empty p {
    max-width: 310px;
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 1180px) {
    .tofaa-community-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tofaa-community-card--reviews {
        grid-column: 1 / -1;
    }

    .tofaa-review-slide__product {
        grid-template-columns: 140px minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .tofaa-community-section {
        margin-top: 34px;
        padding-bottom: 88px;
    }

    .tofaa-community-grid {
        grid-template-columns: 1fr;
    }

    .tofaa-community-card,
    .tofaa-community-card--reviews {
        min-height: 0;
        grid-column: auto;
    }

    .tofaa-community-card__content {
        min-height: 390px;
        padding: 27px 24px;
    }

    .tofaa-community-card--reviews .tofaa-community-card__content {
        min-height: 0;
    }

    .tofaa-reviews-card__header {
        align-items: center;
    }

    .tofaa-review-slide__product {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .tofaa-review-slide__image {
        height: 78px;
    }
}

@media (max-width: 460px) {
    .tofaa-community-section__title {
        font-size: 31px;
    }

    .tofaa-community-card h3 {
        font-size: 29px;
    }

    .tofaa-reviews-card__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .tofaa-reviews-card__controls {
        align-self: stretch;
        justify-content: flex-end;
    }

    .tofaa-review-slide__product {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
    }

    .tofaa-review-slide__image {
        height: 68px;
    }

    .tofaa-review-quote {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .tofaa-community-card::before {
        background-color: rgba(255, 253, 251, .96);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-community-card,
    .tofaa-community-card__cta,
    .tofaa-community-card__cta span,
    .tofaa-reviews-carousel__track {
        transition: none !important;
    }
}

/* ============================================================
   V99 — sekcja wyżej, zielone CTA i czyste tło bez blobów
   ============================================================ */

/* Cała sekcja znajduje się bliżej hero. */
.tofaa-community-section {
    margin-top: -110px !important;
    isolation: isolate;
}

/*
 * Pełne, jednolite tło sekcji zasłania ambientowe bloby hero.
 * Warstwa wychodzi poza szerokość kontenera na pełny viewport.
 */
.tofaa-community-section::before {
    content: "";
    position: absolute;
    top: -190px;
    right: auto;
    bottom: -40px;
    left: 50%;
    width: 100vw;
    z-index: -1;
    transform: translateX(-50%);
    background: var(--tofaa-beige);
    pointer-events: none;
}

/* Usunięcie dekoracyjnych kolorowych kół z kart. */
.tofaa-community-card::after,
.tofaa-community-card--club::after {
    display: none !important;
    content: none !important;
}

/* CTA na pierwszej i środkowej karcie. */
.tofaa-community-card--business .tofaa-community-card__cta,
.tofaa-community-card--club .tofaa-community-card__cta {
    color: #7C4FA0 !important;
    background: #ABB538 !important;
    border-color: rgba(124, 79, 160, .18) !important;
    box-shadow: 0 12px 24px rgba(91, 97, 26, .20) !important;
}

.tofaa-community-card--business .tofaa-community-card__cta:hover,
.tofaa-community-card--business .tofaa-community-card__cta:focus-visible,
.tofaa-community-card--club .tofaa-community-card__cta:hover,
.tofaa-community-card--club .tofaa-community-card__cta:focus-visible {
    color: #7C4FA0 !important;
    background: #BBC64A !important;
    box-shadow: 0 16px 30px rgba(91, 97, 26, .26) !important;
}

@media (max-width: 1180px) {
    .tofaa-community-section {
        margin-top: -72px !important;
    }

    .tofaa-community-section::before {
        top: -145px;
    }
}

@media (max-width: 760px) {
    .tofaa-community-section {
        margin-top: 18px !important;
    }

    .tofaa-community-section::before {
        top: -80px;
    }
}

/* ============================================================
   V100 — tło sekcji nie przykrywa hero
   ============================================================ */

/*
 * Sekcja nadal pozostaje przesunięta wyżej, ale jej kremowe tło
 * zaczyna się dopiero na wysokości samej sekcji. Nie wychodzi już
 * ponad nią i nie zakrywa dolnej części hero.
 */
.tofaa-community-section::before {
    top: 0 !important;
}

@media (max-width: 1180px) {
    .tofaa-community-section::before {
        top: 0 !important;
    }
}

@media (max-width: 760px) {
    .tofaa-community-section::before {
        top: 0 !important;
    }
}

/* ============================================================
   V101 — uproszczone nagłówki kart i większy odstęp od hero
   ============================================================ */

/* Sekcja jest nadal blisko hero, ale nie nachodzi już na blob powyżej. */
.tofaa-community-section {
    margin-top: -42px !important;
}

/* Etykiety usunięto z HTML; zabezpieczenie dla pamięci podręcznej. */
.tofaa-community-card__eyebrow {
    display: none !important;
}

@media (max-width: 1180px) {
    .tofaa-community-section {
        margin-top: -20px !important;
    }
}

@media (max-width: 760px) {
    .tofaa-community-section {
        margin-top: 28px !important;
    }
}

/* ============================================================
   V102 — karta #Tofaani podłączona do opinii WooCommerce
   ============================================================ */

.tofaa-review-quote {
    padding: 8px 11px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.tofaa-review-quote__top,
.tofaa-review-quote__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tofaa-review-quote__rating {
    width: 71px;
    height: 14px;
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 1;
    white-space: nowrap;
}

.tofaa-review-quote__rating-base,
.tofaa-review-quote__rating-fill {
    position: absolute;
    top: 0;
    left: 0;
}

.tofaa-review-quote__rating-base {
    color: rgba(124, 79, 160, .18);
}

.tofaa-review-quote__rating-fill {
    overflow: hidden;
    color: #f0a828;
}

.tofaa-review-quote__verified {
    padding: 3px 7px;
    border-radius: 999px;
    color: #66700f;
    background: rgba(171, 181, 56, .2);
    font-size: 8px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
}

.tofaa-review-quote .rbs-review-badges {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.tofaa-review-quote .rbs-review-badge {
    padding: 3px 7px;
    border-radius: 999px;
    color: #66700f;
    background: rgba(171, 181, 56, .2);
    font-size: 8px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
}

.tofaa-review-quote .rbs-review-badge--rewarded {
    color: #7c4fa0;
    background: rgba(124, 79, 160, .12);
}

.tofaa-review-quote .rbs-review-images {
    display: flex;
    gap: 4px;
}

.tofaa-review-quote .rbs-review-images a {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(89, 51, 105, .35);
    border-radius: 7px;
    overflow: hidden;
}

.tofaa-review-quote .rbs-review-images img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.tofaa-review-quote p {
    margin: 0;
}

.tofaa-review-quote__footer cite,
.tofaa-review-quote__footer time {
    font-size: 10px;
    line-height: 1.2;
}

.tofaa-review-quote__footer time {
    color: rgba(89, 51, 105, .56);
    font-weight: 750;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .tofaa-review-quote__verified,
    .tofaa-review-quote .rbs-review-badges {
        display: none;
    }
}

/* ============================================================
   V105 — dopracowanie kart: copy, kolory i centrowanie strzałek
   ============================================================ */

/* Teksty pomocnicze mają dokładnie ten sam fiolet co tytuły kart. */
.tofaa-community-card p,
.tofaa-reviews-card__counter,
.tofaa-review-slide__rating-copy,
.tofaa-review-quote p,
.tofaa-review-quote__footer time {
    color: #7C4FA0 !important;
}

/* SVG usuwa optyczne przesunięcie znaków strzałek wynikające z fontu. */
.tofaa-reviews-card__arrow {
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center;
}

.tofaa-reviews-card__arrow svg {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================================
   V106 — dwie karty: Gdzie kupić + Pytania i odpowiedzi
   ============================================================ */

.tofaa-buy-faq-section {
    width: min(1480px, 100%);
    margin: clamp(-62px, -3.8vw, -34px) auto 0;
    padding: 0 0 clamp(84px, 8vw, 128px);
    position: relative;
    z-index: 10;
}

.tofaa-buy-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.35fr);
    gap: clamp(18px, 2vw, 30px);
    align-items: stretch;
}

.tofaa-info-glass-card {
    --tofaa-info-glass-bg: rgba(248, 234, 225, .38);
    --tofaa-info-glass-border: rgba(255, 255, 255, .72);
    --tofaa-info-glass-filter: blur(22px) saturate(140%) contrast(104%);

    min-width: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 30px;
    color: #7C4FA0;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1), box-shadow .34s ease;
}

.tofaa-info-glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 1px solid var(--tofaa-info-glass-border);
    border-radius: inherit;
    background-color: var(--tofaa-info-glass-bg);
    background-image:
        radial-gradient(circle at 10% 0%, rgba(255, 255, 255, .54), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .03));
    box-shadow:
        0 20px 52px rgba(72, 38, 76, .12),
        inset 0 1px 0 rgba(255, 255, 255, .84),
        inset 0 -1px 0 rgba(124, 79, 160, .08);
    -webkit-backdrop-filter: var(--tofaa-info-glass-filter);
    backdrop-filter: var(--tofaa-info-glass-filter);
    pointer-events: none;
}

.tofaa-info-glass-card:hover {
    transform: translateY(-4px);
}

.tofaa-info-glass-card__content {
    min-height: 100%;
    padding: clamp(28px, 3vw, 46px);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.tofaa-info-glass-card h2 {
    margin: 0 0 14px;
    color: #7C4FA0;
    font-size: clamp(30px, 3vw, 48px);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -.04em;
}

.tofaa-info-glass-card__lead {
    max-width: 520px;
    margin: 0;
    color: #7C4FA0;
    font-size: clamp(16px, 1.25vw, 19px);
    font-weight: 650;
    line-height: 1.55;
}

.tofaa-store-links {
    margin-top: clamp(28px, 3.2vw, 48px);
    display: grid;
    gap: 14px;
}

.tofaa-store-link {
    min-height: 104px;
    padding: 17px 19px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 34px;
    gap: 16px;
    align-items: center;
    border: 1px solid rgba(124, 79, 160, .14);
    border-radius: 22px;
    color: #7C4FA0;
    background: rgba(255, 255, 255, .26);
    text-decoration: none;
    transition: transform .26s cubic-bezier(.2, .8, .2, 1), background-color .26s ease, box-shadow .26s ease;
}

.tofaa-store-link:hover,
.tofaa-store-link:focus-visible {
    color: #7C4FA0;
    background: rgba(255, 255, 255, .52);
    box-shadow: 0 14px 28px rgba(72, 38, 76, .11);
    transform: translateX(5px);
    outline: none;
}

.tofaa-store-link__icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #7C4FA0;
    background: #ABB538;
}

.tofaa-store-link__icon svg {
    width: 29px;
    height: 29px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tofaa-store-link__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tofaa-store-link__copy strong {
    color: #7C4FA0;
    font-size: clamp(21px, 1.8vw, 27px);
    font-weight: 900;
    line-height: 1.1;
}

.tofaa-store-link__copy span {
    color: #7C4FA0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.tofaa-store-link__arrow {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(124, 79, 160, .18);
    border-radius: 50%;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    transition: transform .25s ease;
}

.tofaa-store-link:hover .tofaa-store-link__arrow,
.tofaa-store-link:focus-visible .tofaa-store-link__arrow {
    transform: translate(2px, -2px);
}

.tofaa-info-glass-card--faq .tofaa-info-glass-card__content {
    padding-bottom: clamp(28px, 2.8vw, 42px);
}

.tofaa-home-faq {
    margin-top: 8px;
    border-top: 1px solid rgba(124, 79, 160, .16);
}

.tofaa-home-faq__item {
    border-bottom: 1px solid rgba(124, 79, 160, .16);
}

.tofaa-home-faq__question {
    width: 100%;
    padding: 20px 2px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 18px;
    align-items: center;
    border: 0;
    color: #7C4FA0;
    background: transparent;
    font-family: inherit;
    font-size: clamp(15px, 1.18vw, 18px);
    font-weight: 900;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.tofaa-home-faq__question:focus-visible {
    border-radius: 12px;
    outline: 3px solid rgba(124, 79, 160, .18);
    outline-offset: 3px;
}

.tofaa-home-faq__question svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1);
}

.tofaa-home-faq__item.is-open .tofaa-home-faq__question svg {
    transform: rotate(180deg);
}

.tofaa-home-faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows .38s cubic-bezier(.2, .8, .2, 1),
        opacity .22s ease;
}

.tofaa-home-faq__answer > div {
    min-height: 0;
    overflow: hidden;
}

.tofaa-home-faq__answer p {
    margin: 0;
    padding: 0 46px 21px 2px;
    color: #7C4FA0;
    font-size: clamp(14px, 1.08vw, 17px);
    font-weight: 600;
    line-height: 1.58;
}

.tofaa-home-faq__item.is-open .tofaa-home-faq__answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

.tofaa-info-glass-card__cta {
    min-height: 50px;
    margin-top: 24px;
    padding: 13px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    align-self: flex-start;
    border: 1px solid rgba(124, 79, 160, .18);
    border-radius: 999px;
    color: #7C4FA0;
    background: #ABB538;
    box-shadow: 0 12px 24px rgba(91, 97, 26, .18);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.tofaa-info-glass-card__cta:hover,
.tofaa-info-glass-card__cta:focus-visible {
    color: #7C4FA0;
    background: #BBC64A;
    box-shadow: 0 16px 30px rgba(91, 97, 26, .24);
    transform: translateY(-2px);
    outline: none;
}

.tofaa-info-glass-card__cta span {
    font-size: 20px;
    line-height: 1;
}

@media (max-width: 1100px) {
    .tofaa-buy-faq-section {
        margin-top: -42px;
    }

    .tofaa-buy-faq-grid {
        grid-template-columns: 1fr;
    }

    .tofaa-info-glass-card--stores .tofaa-info-glass-card__content {
        min-height: auto;
    }

    .tofaa-store-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .tofaa-buy-faq-section {
        margin-top: -18px;
        padding-bottom: 82px;
    }

    .tofaa-info-glass-card {
        border-radius: 24px;
    }

    .tofaa-info-glass-card__content {
        padding: 24px 20px;
    }

    .tofaa-store-links {
        grid-template-columns: 1fr;
    }

    .tofaa-store-link {
        min-height: 92px;
        grid-template-columns: 52px minmax(0, 1fr) 30px;
        padding: 15px;
    }

    .tofaa-store-link__icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .tofaa-home-faq__question {
        padding: 18px 0;
    }

    .tofaa-home-faq__answer p {
        padding-right: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-info-glass-card,
    .tofaa-store-link,
    .tofaa-store-link__arrow,
    .tofaa-home-faq__question svg,
    .tofaa-home-faq__answer,
    .tofaa-info-glass-card__cta {
        transition: none !important;
    }
}


/* ============================================================
   V107 — FAQ bez ramki po rozwinięciu
   ============================================================ */

.tofaa-home-faq__question:focus,
.tofaa-home-faq__question:focus-visible,
.tofaa-home-faq__question:active,
.tofaa-home-faq__item.is-open .tofaa-home-faq__question {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ============================================================
   V108 — logotypy marketplace + nowy zielony #d1d635
   ============================================================ */

/* Oficjalne logotypy Allegro i Amazon w karcie „Gdzie kupić?”. */
.tofaa-store-link__icon img {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: contain;
}

.tofaa-store-link--amazon .tofaa-store-link__icon img {
    width: 46px;
    height: 46px;
}

/* Nowy kolor wszystkich zielonych przycisków. */
.tofaa-btn--primary,
.tofaa-btn--primary:link,
.tofaa-btn--primary:visited,
.tofaa-btn--primary:hover,
.tofaa-btn--primary:focus-visible,
.tofaa-community-card--business .tofaa-community-card__cta,
.tofaa-community-card--business .tofaa-community-card__cta:hover,
.tofaa-community-card--business .tofaa-community-card__cta:focus-visible,
.tofaa-community-card--club .tofaa-community-card__cta,
.tofaa-community-card--club .tofaa-community-card__cta:hover,
.tofaa-community-card--club .tofaa-community-card__cta:focus-visible,
.tofaa-info-glass-card__cta,
.tofaa-info-glass-card__cta:hover,
.tofaa-info-glass-card__cta:focus-visible {
    background: #d1d635 !important;
    background-color: #d1d635 !important;
}

/* Zielone fragmenty animowanej ramki głównego CTA również używają nowego koloru. */
.tofaa-btn--primary::before {
    background: conic-gradient(
        from var(--tofaa-shop-angle),
        #7C4FA0 0deg,
        #d1d635 90deg,
        #7C4FA0 180deg,
        #d1d635 270deg,
        #7C4FA0 360deg
    ) !important;
}

/* Przycisk kategorii nr 2. */
.tofaa-moment-card--2,
.tofaa-moment-card--2:hover,
.tofaa-moment-card--2:focus-visible,
.tofaa-moment-card--2.is-active {
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    color: #7C4FA0 !important;
}

/* Kafelki z logotypami marketplace zachowują ten sam nowy zielony akcent. */
.tofaa-store-link__icon {
    background: #d1d635 !important;
}


/* ============================================================
   V109 — ikonki marketplace w fioletowych ramkach + CTA bez ramek
   ============================================================ */

/* Ikony marketplace siedzą w fioletowych, zaokrąglonych ramkach. */
.tofaa-store-link__icon {
    background: #B083BC !important;
    border: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

/* Usunięcie widocznej obwódki z zielonych CTA w kartach. */
.tofaa-community-card__cta,
.tofaa-community-card__cta:link,
.tofaa-community-card__cta:visited,
.tofaa-community-card__cta:hover,
.tofaa-community-card__cta:focus-visible,
.tofaa-info-glass-card__cta,
.tofaa-info-glass-card__cta:link,
.tofaa-info-glass-card__cta:visited,
.tofaa-info-glass-card__cta:hover,
.tofaa-info-glass-card__cta:focus-visible {
    border: 0 !important;
    outline: none !important;
}

/* ============================================================
   V110 — blob tła nie reaguje na rozwijanie FAQ
   ============================================================ */

/*
 * Ambientowe tło nie może mieć wysokości wyliczanej z dolnej krawędzi
 * całego .tofaa-home. Rozwinięcie odpowiedzi zwiększało wysokość strony,
 * a elementy pozycjonowane od bottom przesuwały się razem z sekcją.
 * Nadajemy warstwie stabilną wysokość zależną wyłącznie od viewportu.
 */
@media (min-width: 1181px) {
    .tofaa-home__ambient-bg {
        bottom: auto !important;
        height: clamp(1780px, 112vw, 2050px) !important;
    }
}

@media (min-width: 981px) and (max-width: 1180px) {
    .tofaa-home__ambient-bg {
        bottom: auto !important;
        height: 2260px !important;
    }
}

@media (max-width: 980px) {
    .tofaa-home__ambient-bg {
        bottom: auto !important;
        height: 2860px !important;
    }
}

/* ============================================================
   V111 — własny, nieruchomy blob sekcji FAQ
   ============================================================ */

/*
 * Cofamy wymuszoną wysokość warstwy ambientowej z V110,
 * ponieważ powodowała ucięcie wcześniejszych blobów.
 */
@media (min-width: 1181px) {
    .tofaa-home__ambient-bg {
        height: auto !important;
        bottom: clamp(105px, 8vw, 145px) !important;
    }
}

@media (min-width: 981px) and (max-width: 1180px) {
    .tofaa-home__ambient-bg {
        height: auto !important;
        bottom: 92px !important;
    }
}

@media (max-width: 980px) {
    .tofaa-home__ambient-bg {
        height: auto !important;
        bottom: 55px !important;
    }
}

/*
 * Sekcja „Gdzie kupić / Pytania i odpowiedzi” dostaje własne tło.
 * Jednolita warstwa zasłania ambientowe bloby hero, a nowy blob jest
 * przypięty do górnej krawędzi sekcji, więc rozwijanie FAQ go nie rusza.
 */
.tofaa-buy-faq-section {
    isolation: isolate;
    overflow: visible !important;
}

/* Czyste kremowe tło na pełną szerokość viewportu. */
.tofaa-buy-faq-section::after {
    content: "";
    position: absolute;
    top: -70px;
    right: auto;
    bottom: -70px;
    left: 50%;
    width: 100vw;
    z-index: -2;
    transform: translateX(-50%);
    background: var(--tofaa-beige);
    pointer-events: none;
}

/* Statyczny blob — jego top nie zależy od wysokości rozwiniętego FAQ. */
.tofaa-buy-faq-section::before {
    content: "";
    position: absolute;
    top: 92px;
    right: clamp(-150px, -7vw, -76px);
    width: min(48vw, 720px);
    height: min(32vw, 480px);
    z-index: -1;
    border-radius: 58% 42% 49% 51% / 48% 61% 39% 52%;
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.22), transparent 30%),
        linear-gradient(
            132deg,
            var(--tofaa-ambient-two-a),
            var(--tofaa-ambient-two-b)
        );
    box-shadow:
        inset 0 0 65px rgba(255,255,255,.08),
        0 28px 55px rgba(88,48,116,.10);
    opacity: .72;
    transform: rotate(1.4deg);
    pointer-events: none;
}

/* Bez animacji i bez pozycji zależnej od dolnej krawędzi sekcji. */
.tofaa-buy-faq-section::before {
    animation: none !important;
    transition:
        background-color 1.8s ease-in-out,
        opacity 1.8s ease-in-out !important;
}

@media (max-width: 1180px) {
    .tofaa-buy-faq-section::before {
        top: 108px;
        right: -120px;
        width: min(62vw, 660px);
        height: min(42vw, 450px);
    }
}

@media (max-width: 700px) {
    .tofaa-buy-faq-section::after {
        top: -42px;
        bottom: -48px;
    }

    .tofaa-buy-faq-section::before {
        top: 190px;
        right: -46vw;
        width: 112vw;
        height: 74vw;
        opacity: .58;
    }
}

/* ============================================================
   V112 — animowany blob sekcji FAQ
   ============================================================ */

/*
 * Wykorzystujemy dokładnie ten sam rodzaj spokojnego „oddychania”
 * i morfowania kształtu co w blobach sekcji hero.
 * Pozycja bazowa nadal jest przypięta do górnej części sekcji,
 * więc rozwijanie odpowiedzi nie wpływa na jej położenie.
 */
.tofaa-buy-faq-section::before {
    animation: tofaa-blob-breathe-two 18s ease-in-out -2.4s infinite !important;
    transform-origin: center center;
    will-change: transform, border-radius;
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-buy-faq-section::before {
        animation: none !important;
        transform: rotate(1.4deg);
    }
}

/* ============================================================
   V113 — lewitujące chrupki wokół opakowań w scenie 2
   ============================================================ */

.tofaa-visual__scene-products--crisps {
    position: relative;
    overflow: visible;
}

.tofaa-visual__scene-crisp {
    position: absolute;
    display: block;
    width: clamp(68px, 9vw, 150px);
    height: auto;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
    filter: drop-shadow(0 14px 24px rgba(103, 72, 33, 0.18));
}

.tofaa-visual__scene-crisp--whole {
    top: 8%;
    left: 14%;
    z-index: 6;
    transform: translate3d(-16px, 12px, 0) rotate(-14deg) scale(.94);
}

.tofaa-visual__scene-crisp--half {
    bottom: 8%;
    left: 6%;
    z-index: 9;
    transform: translate3d(-14px, 14px, 0) rotate(-26deg) scale(.96);
}

.tofaa-visual__scene-crisp--crunched {
    top: 60%;
    right: 6%;
    z-index: 9;
    transform: translate3d(16px, 10px, 0) rotate(18deg) scale(.95);
}

.tofaa-visual__scene--crisps.is-active .tofaa-visual__scene-crisp--whole {
    animation:
        tofaa-crisp-piece-enter-whole .58s cubic-bezier(.2, .8, .2, 1) .08s both,
        tofaa-crisp-piece-float-whole 7.6s ease-in-out .74s infinite;
}

.tofaa-visual__scene--crisps.is-active .tofaa-visual__scene-crisp--half {
    animation:
        tofaa-crisp-piece-enter-half .62s cubic-bezier(.2, .8, .2, 1) .18s both,
        tofaa-crisp-piece-float-half 8.2s ease-in-out .88s infinite;
}

.tofaa-visual__scene--crisps.is-active .tofaa-visual__scene-crisp--crunched {
    animation:
        tofaa-crisp-piece-enter-crunched .66s cubic-bezier(.2, .8, .2, 1) .28s both,
        tofaa-crisp-piece-float-crunched 7.2s ease-in-out 1s infinite;
}

@keyframes tofaa-crisp-piece-enter-whole {
    0% {
        opacity: 0;
        transform: translate3d(-28px, 20px, 0) rotate(-18deg) scale(.88);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(-14deg) scale(1);
    }
}

@keyframes tofaa-crisp-piece-enter-half {
    0% {
        opacity: 0;
        transform: translate3d(-22px, 24px, 0) rotate(-30deg) scale(.88);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(-26deg) scale(1);
    }
}

@keyframes tofaa-crisp-piece-enter-crunched {
    0% {
        opacity: 0;
        transform: translate3d(24px, 18px, 0) rotate(22deg) scale(.88);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(18deg) scale(1);
    }
}

@keyframes tofaa-crisp-piece-float-whole {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-14deg) scale(1); }
    40% { transform: translate3d(7px, -11px, 0) rotate(-11deg) scale(1.02); }
    72% { transform: translate3d(-4px, 6px, 0) rotate(-16deg) scale(.992); }
}

@keyframes tofaa-crisp-piece-float-half {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-26deg) scale(1); }
    42% { transform: translate3d(-8px, -9px, 0) rotate(-22deg) scale(1.018); }
    74% { transform: translate3d(5px, 7px, 0) rotate(-29deg) scale(.994); }
}

@keyframes tofaa-crisp-piece-float-crunched {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(18deg) scale(1); }
    36% { transform: translate3d(9px, -10px, 0) rotate(14deg) scale(1.02); }
    70% { transform: translate3d(-6px, 8px, 0) rotate(20deg) scale(.993); }
}

@media (max-width: 1250px) {
    .tofaa-visual__scene-crisp--whole {
        top: 10%;
        left: 15%;
        width: clamp(62px, 8vw, 124px);
    }

    .tofaa-visual__scene-crisp--half {
        left: 7%;
        bottom: 10%;
        width: clamp(58px, 7.5vw, 116px);
    }

    .tofaa-visual__scene-crisp--crunched {
        top: 61%;
        right: 7%;
        width: clamp(60px, 7.6vw, 118px);
    }
}

@media (max-width: 980px) {
    .tofaa-visual__scene-crisp--whole {
        top: 14%;
        left: 12%;
        width: clamp(52px, 9vw, 96px);
    }

    .tofaa-visual__scene-crisp--half {
        left: 3%;
        bottom: 14%;
        width: clamp(48px, 8vw, 90px);
    }

    .tofaa-visual__scene-crisp--crunched {
        top: 63%;
        right: 3%;
        width: clamp(48px, 8vw, 92px);
    }
}

@media (max-width: 620px) {
    .tofaa-visual__scene-crisp--whole {
        top: 14%;
        left: 10%;
        width: clamp(42px, 10vw, 72px);
    }

    .tofaa-visual__scene-crisp--half {
        left: 0%;
        bottom: 15%;
        width: clamp(40px, 9vw, 68px);
    }

    .tofaa-visual__scene-crisp--crunched {
        top: 65%;
        right: 0%;
        width: clamp(42px, 9vw, 70px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__scene--crisps.is-active .tofaa-visual__scene-crisp {
        animation: none !important;
        opacity: 1;
    }

    .tofaa-visual__scene-crisp--whole {
        transform: rotate(-14deg) !important;
    }

    .tofaa-visual__scene-crisp--half {
        transform: rotate(-26deg) !important;
    }

    .tofaa-visual__scene-crisp--crunched {
        transform: rotate(18deg) !important;
    }
}

/* ============================================================
   V114 — chmury cukru pudru wokół pastili
   ============================================================ */

.tofaa-visual__scene-products--pastila {
    position: relative;
    overflow: visible;
}

.tofaa-visual__scene-cloud {
    position: absolute;
    display: block;
    width: clamp(96px, 16vw, 250px);
    height: auto;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
    filter: drop-shadow(0 16px 28px rgba(206, 189, 175, 0.18));
}

.tofaa-visual__scene-cloud--one {
    top: 3%;
    left: -6%;
    width: clamp(88px, 14vw, 200px);
    z-index: 11;
    transform: translate3d(-10px, 8px, 0) rotate(-5deg) scale(.94);
}

.tofaa-visual__scene-cloud--two {
    top: 13%;
    right: 0%;
    width: clamp(112px, 18vw, 290px);
    z-index: 9;
    transform: translate3d(14px, 10px, 0) rotate(4deg) scale(.96);
}

.tofaa-visual__scene-cloud--three {
    bottom: 2%;
    left: 18%;
    width: clamp(120px, 20vw, 300px);
    z-index: 6;
    transform: translate3d(0, 14px, 0) rotate(-2deg) scale(.98);
}

.tofaa-visual__scene--pastila.is-active .tofaa-visual__scene-cloud--one {
    animation:
        tofaa-pastila-cloud-reveal-one .58s cubic-bezier(.2, .8, .2, 1) .08s both,
        tofaa-pastila-cloud-float-one 9.2s ease-in-out .78s infinite;
}

.tofaa-visual__scene--pastila.is-active .tofaa-visual__scene-cloud--two {
    animation:
        tofaa-pastila-cloud-reveal-two .62s cubic-bezier(.2, .8, .2, 1) .22s both,
        tofaa-pastila-cloud-float-two 8.8s ease-in-out .96s infinite;
}

.tofaa-visual__scene--pastila.is-active .tofaa-visual__scene-cloud--three {
    animation:
        tofaa-pastila-cloud-reveal-three .66s cubic-bezier(.2, .8, .2, 1) .34s both,
        tofaa-pastila-cloud-float-three 10s ease-in-out 1.08s infinite;
}

@keyframes tofaa-pastila-cloud-reveal-one {
    0% { opacity: 0; transform: translate3d(-22px, 18px, 0) rotate(-7deg) scale(.86); }
    100% { opacity: .84; transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
}

@keyframes tofaa-pastila-cloud-reveal-two {
    0% { opacity: 0; transform: translate3d(28px, 18px, 0) rotate(6deg) scale(.88); }
    100% { opacity: .96; transform: translate3d(0, 0, 0) rotate(4deg) scale(1); }
}

@keyframes tofaa-pastila-cloud-reveal-three {
    0% { opacity: 0; transform: translate3d(-8px, 24px, 0) rotate(-3deg) scale(.9); }
    100% { opacity: .9; transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); }
}

@keyframes tofaa-pastila-cloud-float-one {
    0%, 100% { opacity: .84; transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
    40% { opacity: .87; transform: translate3d(8px, -8px, 0) rotate(-3deg) scale(1.018); }
    74% { opacity: .82; transform: translate3d(-4px, 5px, 0) rotate(-6deg) scale(.992); }
}

@keyframes tofaa-pastila-cloud-float-two {
    0%, 100% { opacity: .96; transform: translate3d(0, 0, 0) rotate(4deg) scale(1); }
    42% { opacity: .98; transform: translate3d(-12px, -8px, 0) rotate(2deg) scale(1.018); }
    72% { opacity: .94; transform: translate3d(7px, 5px, 0) rotate(5deg) scale(.996); }
}

@keyframes tofaa-pastila-cloud-float-three {
    0%, 100% { opacity: .9; transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); }
    36% { opacity: .93; transform: translate3d(-8px, -10px, 0) rotate(0deg) scale(1.015); }
    70% { opacity: .89; transform: translate3d(10px, 6px, 0) rotate(-3deg) scale(.994); }
}

@media (max-width: 1250px) {
    .tofaa-visual__scene-cloud--one {
        top: 5%;
        left: -5%;
        width: clamp(84px, 14vw, 190px);
    }

    .tofaa-visual__scene-cloud--two {
        top: 16%;
        right: -2%;
        width: clamp(104px, 17vw, 240px);
    }

    .tofaa-visual__scene-cloud--three {
        bottom: 4%;
        left: 18%;
        width: clamp(110px, 18vw, 250px);
    }
}

@media (max-width: 980px) {
    .tofaa-visual__scene-cloud--one {
        top: 8%;
        left: -7%;
        width: clamp(74px, 15vw, 165px);
    }

    .tofaa-visual__scene-cloud--two {
        top: 16%;
        right: -6%;
        width: clamp(90px, 17vw, 195px);
    }

    .tofaa-visual__scene-cloud--three {
        bottom: 7%;
        left: 12%;
        width: clamp(96px, 18vw, 210px);
    }
}

@media (max-width: 620px) {
    .tofaa-visual__scene-cloud--one {
        top: 12%;
        left: -9%;
        width: clamp(60px, 16vw, 124px);
    }

    .tofaa-visual__scene-cloud--two {
        top: 18%;
        right: -9%;
        width: clamp(72px, 18vw, 150px);
    }

    .tofaa-visual__scene-cloud--three {
        bottom: 10%;
        left: 8%;
        width: clamp(78px, 19vw, 155px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__scene--pastila.is-active .tofaa-visual__scene-cloud {
        animation: none !important;
        opacity: .92;
    }

    .tofaa-visual__scene-cloud--one {
        opacity: .84 !important;
        transform: rotate(-5deg) !important;
    }

    .tofaa-visual__scene-cloud--two {
        transform: rotate(4deg) !important;
    }

    .tofaa-visual__scene-cloud--three {
        transform: rotate(-2deg) !important;
    }
}


/* V117 — owoce przy batonikach nad opakowaniami */
.tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars .tofaa-visual__fruit-cluster {
    z-index: 10;
}

.tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars .tofaa-visual__fruit--blackcurrant {
    z-index: 12;
}


/* ============================================================
   V118 — lekkie przesunięcie głównego bloba w dół
   żeby jego cień nie odcinał się przy kolejnej sekcji
   ============================================================ */

.tofaa-home__ambient-shape--one {
    top: 6.5% !important;
}

.tofaa-home__ambient-shape--two {
    bottom: 0% !important;
}


/* ============================================================
   V119 — korekta położenia bloba: lekko wyżej
   ============================================================ */

.tofaa-home__ambient-shape--one {
    top: 4.5% !important;
}


/* ============================================================
   V120 — sekcja „Więcej możliwości z Tofaa” 20px niżej
   ============================================================ */

.tofaa-community-section {
    margin-top: -22px !important;
}

@media (max-width: 1180px) {
    .tofaa-community-section {
        margin-top: 0 !important;
    }
}

@media (max-width: 760px) {
    .tofaa-community-section {
        margin-top: 48px !important;
    }
}

/* ============================================================
   V121 — sklep Tofaa jako pierwsza opcja w karcie „Gdzie kupić?”
   ============================================================ */

.tofaa-store-link--tofaa {
    --tofaa-shop-angle: 0deg;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0 !important;
}

/* Ta sama animowana ramka co w CTA „Kup Tofaa” i „Sprawdź produkty”. */
.tofaa-store-link--tofaa::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 3px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--tofaa-shop-angle),
        #7C4FA0 0deg,
        #d1d635 90deg,
        #7C4FA0 180deg,
        #d1d635 270deg,
        #7C4FA0 360deg
    );
    pointer-events: none;
    animation: tofaa-shop-border-spin 4.5s linear infinite;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.tofaa-store-link--tofaa:hover::before,
.tofaa-store-link--tofaa:focus-visible::before {
    animation-duration: 2.2s;
}

.tofaa-store-link--tofaa > * {
    position: relative;
    z-index: 1;
}

.tofaa-store-link--tofaa .tofaa-store-link__icon {
    background: #B083BC !important;
    border: 0 !important;
}

.tofaa-store-link--tofaa .tofaa-store-link__icon img {
    width: 46px;
    height: 46px;
    display: block;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-store-link--tofaa::before {
        animation: none !important;
    }
}

/* ============================================================
   V122 — zielony akcent animowanej ramki „Kup Tofaa!”
   ============================================================ */

.tofaa-nav__trigger--featured::before {
    background: conic-gradient(
        from var(--tofaa-shop-angle),
        #7C4FA0 0deg,
        #d1d635 90deg,
        #7C4FA0 180deg,
        #d1d635 270deg,
        #7C4FA0 360deg
    ) !important;
}

/* ============================================================
   V123 — stopka bez dużej przerwy pod ostatnią sekcją
   ============================================================ */

/*
 * Wcześniej odstęp sumował się z dwóch miejsc:
 * - padding-bottom całego kontenera .tofaa-home,
 * - padding-bottom sekcji „Gdzie kupić / Pytania i odpowiedzi”.
 */
.tofaa-home {
    padding-bottom: 0 !important;
}

.tofaa-buy-faq-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Kremowa warstwa kończy się równo przy stopce. */
.tofaa-buy-faq-section::after {
    bottom: 0 !important;
}

@media (max-width: 700px) {
    .tofaa-home {
        padding-bottom: 0 !important;
    }

    .tofaa-buy-faq-section {
        padding-bottom: 0 !important;
    }

    .tofaa-buy-faq-section::after {
        bottom: 0 !important;
    }
}

/* ============================================================
   V124 — 20 px oddechu przed stopką
   ============================================================ */

.tofaa-buy-faq-section {
    padding-bottom: 20px !important;
}

.tofaa-buy-faq-section::after {
    bottom: -20px !important;
}

@media (max-width: 700px) {
    .tofaa-buy-faq-section {
        padding-bottom: 20px !important;
    }

    .tofaa-buy-faq-section::after {
        bottom: -20px !important;
    }
}

/* ============================================================
   V133 — spójny kolor linków produktu w karcie #Tofaani
   ============================================================ */

.tofaa-review-slide__product a,
.tofaa-review-slide__product a:link,
.tofaa-review-slide__product a:visited,
.tofaa-review-slide__product a:hover,
.tofaa-review-slide__product a:focus-visible,
.tofaa-review-slide__image,
.tofaa-review-slide__image:link,
.tofaa-review-slide__image:visited,
.tofaa-review-slide__image img,
.tofaa-review-slide__name,
.tofaa-review-slide__name:link,
.tofaa-review-slide__name:visited,
.tofaa-review-slide__name:hover,
.tofaa-review-slide__name:focus-visible {
    color: #7C4FA0 !important;
}

/* ============================================================
   V140 — trzy batoniki zgodnie z makietą referencyjną

   Kolejność i geometria:
   1. Jabłko — góra, lekko uniesiony prawy koniec.
   2. Jabłko & Żurawina — środek, lekko opuszczony prawy koniec.
   3. Jabłko & Truskawka — dół, lekko uniesiony prawy koniec.

   Pozycje owoców nie są modyfikowane.
   ============================================================ */

/*
 * Grafiki źródłowe są kwadratowe i mają przezroczysty margines wokół
 * opakowania. Wspólna szerokość 31vw daje na desktopie wizualną szerokość
 * batonika zbliżoną do tej z makiety, bez wypełniania całego bloba.
 */
.tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars
.tofaa-visual__product--apple,
.tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars
.tofaa-visual__product--cranberry,
.tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars
.tofaa-visual__product--strawberry {
    width: clamp(420px, 31vw, 500px) !important;
    max-width: none !important;
    top: 12% !important;
    left: 18% !important;
    display: block !important;
    transform-origin: 50% 50% !important;
}

/* Jabłko — górny batonik. */
.tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__product--apple {
    z-index: 7 !important;
    --fan-final-transform: translate3d(-18px, -112px, 0) rotate(-9deg) scale(.94) !important;
}

/* Jabłko & Żurawina — środkowy i minimalnie większy. */
.tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__product--cranberry {
    z-index: 8 !important;
    animation:
        tofaa-hero-cranberry-enter-v140 1.15s cubic-bezier(.18,.88,.18,1) .08s forwards,
        tofaa-hero-cranberry-float-v140 7.2s ease-in-out 1.32s infinite !important;
}

/* Jabłko & Truskawka — dolny batonik. */
.tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__product--strawberry {
    z-index: 6 !important;
    --fan-final-transform: translate3d(-8px, 184px, 0) rotate(-8deg) scale(.94) !important;
}

@keyframes tofaa-hero-cranberry-enter-v140 {
    0% {
        transform: translate3d(110vw, 0, 0) rotate(18deg) scale(.97);
    }
    68% {
        transform: translate3d(5px, 38px, 0) rotate(6deg) scale(.97);
    }
    100% {
        transform: translate3d(2px, 44px, 0) rotate(8deg) scale(.97);
    }
}

@keyframes tofaa-hero-cranberry-float-v140 {
    0%, 100% {
        transform: translate3d(2px, 44px, 0) rotate(8deg) scale(.97);
    }
    50% {
        transform: translate3d(4px, 36px, 0) rotate(9deg) scale(.975);
    }
}

@media (min-width: 981px) and (max-width: 1280px) {
    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars
    .tofaa-visual__product--apple,
    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars
    .tofaa-visual__product--cranberry,
    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars
    .tofaa-visual__product--strawberry {
        width: clamp(370px, 34vw, 440px) !important;
        left: 17% !important;
    }

    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__product--apple {
        --fan-final-transform: translate3d(-16px, -96px, 0) rotate(-9deg) scale(.94) !important;
    }

    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__product--strawberry {
        --fan-final-transform: translate3d(-7px, 158px, 0) rotate(-8deg) scale(.94) !important;
    }

    @keyframes tofaa-hero-cranberry-enter-v140 {
        0% {
            transform: translate3d(110vw, 0, 0) rotate(17deg) scale(.97);
        }
        68% {
            transform: translate3d(4px, 34px, 0) rotate(6deg) scale(.97);
        }
        100% {
            transform: translate3d(2px, 38px, 0) rotate(8deg) scale(.97);
        }
    }

    @keyframes tofaa-hero-cranberry-float-v140 {
        0%, 100% {
            transform: translate3d(2px, 38px, 0) rotate(8deg) scale(.97);
        }
        50% {
            transform: translate3d(4px, 31px, 0) rotate(9deg) scale(.975);
        }
    }
}

@media (max-width: 980px) {
    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars
    .tofaa-visual__product--apple,
    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars
    .tofaa-visual__product--cranberry,
    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars
    .tofaa-visual__product--strawberry {
        width: clamp(300px, 62vw, 420px) !important;
        top: 16% !important;
        left: 20% !important;
    }

    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__product--apple {
        --fan-final-transform: translate3d(-10px, -72px, 0) rotate(-8deg) scale(.92) !important;
    }

    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__product--strawberry {
        --fan-final-transform: translate3d(-4px, 118px, 0) rotate(-7deg) scale(.92) !important;
    }

    @keyframes tofaa-hero-cranberry-enter-v140 {
        0% {
            transform: translate3d(110vw, 0, 0) rotate(15deg) scale(.95);
        }
        68% {
            transform: translate3d(3px, 25px, 0) rotate(6deg) scale(.95);
        }
        100% {
            transform: translate3d(1px, 29px, 0) rotate(7deg) scale(.95);
        }
    }

    @keyframes tofaa-hero-cranberry-float-v140 {
        0%, 100% {
            transform: translate3d(1px, 29px, 0) rotate(7deg) scale(.95);
        }
        50% {
            transform: translate3d(3px, 23px, 0) rotate(8deg) scale(.955);
        }
    }
}

@media (max-width: 640px) {
    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars
    .tofaa-visual__product--apple,
    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars
    .tofaa-visual__product--cranberry,
    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__scene--bars
    .tofaa-visual__product--strawberry {
        width: clamp(260px, 70vw, 350px) !important;
        left: 17% !important;
    }

    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__product--apple {
        --fan-final-transform: translate3d(-7px, -56px, 0) rotate(-8deg) scale(.90) !important;
    }

    .tofaa-home[data-tofaa-scene="bars"] .tofaa-visual__product--strawberry {
        --fan-final-transform: translate3d(-3px, 90px, 0) rotate(-7deg) scale(.90) !important;
    }
}



/* ============================================================
   V141 — wjazd batoników tylko przy pierwszym uruchomieniu

   Po zakończeniu początkowego intro atrybut
   data-tofaa-bars-intro-complete="true" pozostaje na kontenerze strony.
   Dzięki temu przełączanie kart pokazuje scenę batoników tym samym
   łagodnym przejściem co chrupki i pastila, bez ponownego wjazdu
   środkowego batonika z prawej strony.
   ============================================================ */

/* Pierwsze uruchomienie strony — zachowujemy obecny wjazd z prawej. */
.tofaa-home:not([data-tofaa-bars-intro-complete="true"])
.tofaa-visual__scene--bars .tofaa-visual__product--cranberry {
    animation:
        tofaa-hero-cranberry-enter-v140 1.15s cubic-bezier(.18,.88,.18,1) .08s forwards,
        tofaa-hero-cranberry-float-v140 7.2s ease-in-out 1.32s infinite !important;
}

/* Każde późniejsze pokazanie sceny — wyłącznie spokojna lewitacja. */
.tofaa-home[data-tofaa-bars-intro-complete="true"]
.tofaa-visual__scene--bars .tofaa-visual__product--cranberry {
    animation: tofaa-hero-cranberry-float-v140 7.2s ease-in-out infinite !important;
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-home .tofaa-visual__scene--bars .tofaa-visual__product--cranberry {
        animation: none !important;
        transform: translate3d(2px, 44px, 0) rotate(8deg) scale(.97) !important;
    }
}


/* ============================================================
   V142 — sekwencyjne pojawianie się batoników przy powrocie

   Dotyczy wyłącznie ponownego przełączenia na scenę batoników.
   Pierwszy start strony nadal korzysta z oryginalnego wjazdu.
   Kolejność powrotu: Żurawina → Truskawka → Jabłko.
   ============================================================ */

.tofaa-visual__scene--bars.is-reentering .tofaa-visual__product--apple {
    --tofaa-bars-enter-x: -12px;
    --tofaa-bars-enter-y: 16px;
    animation:
        tofaa-bars-reentry-reveal .56s cubic-bezier(.2, .8, .2, 1) .28s both,
        tofaa-hero-fan-breathe var(--float-duration) ease-in-out
        calc(.94s + var(--float-offset)) infinite !important;
}

.tofaa-visual__scene--bars.is-reentering .tofaa-visual__product--cranberry {
    --tofaa-bars-enter-x: 10px;
    --tofaa-bars-enter-y: 18px;
    animation:
        tofaa-bars-reentry-reveal .58s cubic-bezier(.2, .8, .2, 1) 0s both,
        tofaa-hero-cranberry-float-v140 7.2s ease-in-out .70s infinite !important;
}

.tofaa-visual__scene--bars.is-reentering .tofaa-visual__product--strawberry {
    --tofaa-bars-enter-x: -8px;
    --tofaa-bars-enter-y: 20px;
    animation:
        tofaa-bars-reentry-reveal .58s cubic-bezier(.2, .8, .2, 1) .14s both,
        tofaa-hero-fan-breathe var(--float-duration) ease-in-out
        calc(.84s + var(--float-offset)) infinite !important;
}

@keyframes tofaa-bars-reentry-reveal {
    0% {
        opacity: 0;
        translate: var(--tofaa-bars-enter-x, 0) var(--tofaa-bars-enter-y, 18px);
        scale: .92;
    }
    100% {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-visual__scene--bars.is-reentering .tofaa-visual__product--apple,
    .tofaa-visual__scene--bars.is-reentering .tofaa-visual__product--cranberry,
    .tofaa-visual__scene--bars.is-reentering .tofaa-visual__product--strawberry {
        animation: none !important;
        opacity: 1 !important;
        translate: 0 0 !important;
        scale: 1 !important;
    }
}


/* ============================================================
   V140 — cała scena „2 — Chrupki” +50 px w prawo i +100 px w dół
   Przesuwamy wspólny kontener, dlatego wzajemny układ opakowań
   i lewitujących chrupek pozostaje dokładnie bez zmian.
   ============================================================ */

.tofaa-visual__scene-products--crisps {
    transform: translate3d(50px, 100px, 0) !important;
}


/* ============================================================
   V143 — cała sekcja hero 50 px wyżej
   Navbar pozostaje w dotychczasowej pozycji.
   ============================================================ */

.tofaa-home > .tofaa-hero {
    top: -50px !important;
    margin-bottom: -50px !important;
}




/* ============================================================
   V145 — korekta hero / chrupki / pastila / blob
   - cała sekcja hero pozostaje 65 px wyżej,
   - scena „2 — Chrupki” zostaje 50 px wyżej niż pierwotnie,
   - scena „3 — Pastila” schodzi 50 px w dół,
   - lewa dolna chmura odzyskuje animację i schodzi dodatkowe 30 px,
   - duży blob tła przesunięty 30 px w górę dla wszystkich sekcji.
   ============================================================ */

/* Cały hero nadal 65 px wyżej. */
.tofaa-home > .tofaa-hero {
    top: -65px !important;
    margin-bottom: -65px !important;
}

/* Scena 2 — chrupki: 50 px w prawo i 50 px w dół względem stanu bazowego,
   czyli o 50 px wyżej od poprzedniej wersji 100 px w dół. */
.tofaa-visual__scene-products--crisps {
    transform: translate3d(50px, 50px, 0) !important;
}

/* Scena 3 — cała kompozycja niżej o 50 px. */
.tofaa-visual__scene-products--pastila {
    transform: translate3d(0, 50px, 0) !important;
}

/* Scena 3 — chmura po lewej na dole:
   zachowuje animację, bo nie nadpisujemy już transform/animation.
   Przesuwamy ją jeszcze 30 px niżej względem ostatniej pozycji. */
.tofaa-visual__scene-cloud--three {
    top: calc(46% + 30px) !important;
    bottom: auto !important;
    left: -6% !important;
    width: clamp(118px, 18vw, 280px) !important;
}

@media (max-width: 1250px) {
    .tofaa-visual__scene-cloud--three {
        top: calc(47% + 30px) !important;
        left: -6% !important;
        bottom: auto !important;
        width: clamp(108px, 17vw, 240px) !important;
    }
}

@media (max-width: 980px) {
    .tofaa-visual__scene-cloud--three {
        top: calc(49% + 30px) !important;
        left: -5% !important;
        bottom: auto !important;
        width: clamp(92px, 16vw, 190px) !important;
    }
}

@media (max-width: 620px) {
    .tofaa-visual__scene-cloud--three {
        top: calc(52% + 30px) !important;
        left: -4% !important;
        bottom: auto !important;
        width: clamp(74px, 16vw, 140px) !important;
    }
}

/* Duży blob tła — 30 px w górę dla każdej sekcji. */
.tofaa-visual__blob {
    top: calc(18% - 30px) !important;
}


/* ============================================================
   V146 — właściwe przesunięcie ambientowego bloba hero
   - faktyczny blob tła to .tofaa-home__ambient-bg z kształtami
   - cała warstwa ambientowego tła 50 px w górę
   ============================================================ */

.tofaa-home__ambient-bg {
    transform: translate3d(0, -50px, 0) !important;
}


/* ============================================================
   V147 — kolor tekstu CTA „Zobacz wszystkie pytania”
   ============================================================ */

.tofaa-info-glass-card__cta,
.tofaa-info-glass-card__cta:link,
.tofaa-info-glass-card__cta:visited,
.tofaa-info-glass-card__cta:hover,
.tofaa-info-glass-card__cta:focus-visible,
.tofaa-info-glass-card__cta span {
    color: #7C4FA0 !important;
}


/* ============================================================
   V148 — CTA strony głównej jak przycisk „Dodaj do koszyka”
   Dotyczy: „Wypełnij formularz”, „Dołącz do #TOFUNKLUB”
   i „Zobacz wszystkie pytania”. Zachowujemy dotychczasowe
   animacje uniesienia oraz ruch strzałki.
   ============================================================ */

.tofaa-community-card__cta,
.tofaa-community-card__cta:link,
.tofaa-community-card__cta:visited,
.tofaa-info-glass-card__cta,
.tofaa-info-glass-card__cta:link,
.tofaa-info-glass-card__cta:visited {
    border: 1px solid #171717 !important;
    outline: none !important;
    box-shadow: 0 10px 0 rgba(124, 79, 160, .18) !important;
}

.tofaa-community-card__cta:hover,
.tofaa-community-card__cta:focus-visible,
.tofaa-info-glass-card__cta:hover,
.tofaa-info-glass-card__cta:focus-visible {
    border: 1px solid #171717 !important;
    outline: none !important;
    box-shadow: 0 14px 0 rgba(124, 79, 160, .22) !important;
}


/* ============================================================
   V149 — hover CTA strony głównej identyczny jak „Dodaj do koszyka”
   - płynne uniesienie o 4 px,
   - cień przechodzi z 10 px do 14 px,
   - bez osobnego przesuwania strzałki i bez podkreślenia tekstu.
   ============================================================ */

.tofaa-community-card__cta,
.tofaa-community-card__cta:link,
.tofaa-community-card__cta:visited,
.tofaa-info-glass-card__cta,
.tofaa-info-glass-card__cta:link,
.tofaa-info-glass-card__cta:visited {
    text-decoration: none !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease !important;
    will-change: transform, box-shadow;
}

.tofaa-community-card__cta:hover,
.tofaa-community-card__cta:focus-visible,
.tofaa-info-glass-card__cta:hover,
.tofaa-info-glass-card__cta:focus-visible {
    text-decoration: none !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 0 rgba(124, 79, 160, .22) !important;
}

.tofaa-community-card__cta span,
.tofaa-info-glass-card__cta span,
.tofaa-community-card__cta:hover span,
.tofaa-community-card__cta:focus-visible span,
.tofaa-info-glass-card__cta:hover span,
.tofaa-info-glass-card__cta:focus-visible span {
    transform: none !important;
    transition: none !important;
    text-decoration: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-community-card__cta,
    .tofaa-info-glass-card__cta {
        transition: none !important;
    }
}


/* ============================================================
   V150 — hover dwóch CTA 1:1 jak „Dodaj do koszyka”
   Usuwa wcześniejszą zmianę koloru na hoverze i zachowuje dokładnie:
   - zielone tło #D1D635,
   - czarny kontur 1 px,
   - uniesienie o 4 px,
   - cień 10 px → 14 px,
   - transition .25s ease.
   ============================================================ */

.tofaa-community-card--business .tofaa-community-card__cta,
.tofaa-community-card--business .tofaa-community-card__cta:link,
.tofaa-community-card--business .tofaa-community-card__cta:visited,
.tofaa-community-card--club .tofaa-community-card__cta,
.tofaa-community-card--club .tofaa-community-card__cta:link,
.tofaa-community-card--club .tofaa-community-card__cta:visited {
    background: #D1D635 !important;
    color: #7C4FA0 !important;
    border: 1px solid #171717 !important;
    outline: none !important;
    box-shadow: 0 10px 0 rgba(124, 79, 160, .18) !important;
    text-decoration: none !important;
    transform: translateY(0) !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease !important;
}

.tofaa-community-card--business .tofaa-community-card__cta:hover,
.tofaa-community-card--business .tofaa-community-card__cta:focus-visible,
.tofaa-community-card--club .tofaa-community-card__cta:hover,
.tofaa-community-card--club .tofaa-community-card__cta:focus-visible {
    background: #D1D635 !important;
    color: #7C4FA0 !important;
    border: 1px solid #171717 !important;
    outline: none !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 0 rgba(124, 79, 160, .22) !important;
}

.tofaa-community-card--business .tofaa-community-card__cta span,
.tofaa-community-card--club .tofaa-community-card__cta span,
.tofaa-community-card--business .tofaa-community-card__cta:hover span,
.tofaa-community-card--business .tofaa-community-card__cta:focus-visible span,
.tofaa-community-card--club .tofaa-community-card__cta:hover span,
.tofaa-community-card--club .tofaa-community-card__cta:focus-visible span {
    transform: none !important;
    transition: none !important;
}

/* ============================================================
   V151 — ujednolicenie konturów, CTA „Gdzie kupić?” i FAQ
   ============================================================ */

/* Karty 1–4: czarny kontur 3 px i cień zgodny z CTA sklepu. */
.tofaa-moment-card,
.tofaa-moment-card.is-active {
    border: 3px solid #171717 !important;
    box-shadow: 0 10px 0 rgba(124, 79, 160, .18) !important;
}

.tofaa-moment-card:hover,
.tofaa-moment-card:focus-visible,
.tofaa-moment-card.is-active {
    box-shadow: 0 14px 0 rgba(124, 79, 160, .22) !important;
}

/* Pływające akcje: wyżej, zielone, z czarnym konturem i sklepowym cieniem. */
.tofaa-floating-actions {
    bottom: 58px !important;
}

.tofaa-floating-actions .tofaa-float,
.tofaa-floating-actions a.tofaa-floating-cart,
.tofaa-floating-actions a.tofaa-floating-cart:link,
.tofaa-floating-actions a.tofaa-floating-cart:visited,
.tofaa-floating-actions a.tofaa-floating-cart:active {
    border: 1px solid #171717 !important;
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    color: #7C4FA0 !important;
    box-shadow: 0 10px 0 rgba(124, 79, 160, .18) !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        opacity .25s ease,
        visibility .25s ease !important;
}

.tofaa-floating-actions .tofaa-float:hover,
.tofaa-floating-actions .tofaa-float:focus-visible,
.tofaa-floating-actions a.tofaa-floating-cart:hover,
.tofaa-floating-actions a.tofaa-floating-cart:focus,
.tofaa-floating-actions a.tofaa-floating-cart:focus-visible {
    border-color: #171717 !important;
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    color: #7C4FA0 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 0 rgba(124, 79, 160, .22) !important;
    outline: none !important;
}

/* Wszystkie trzy przyciski sklepów: zielone tło i hover jak CTA w katalogu. */
.tofaa-store-link,
.tofaa-store-link:link,
.tofaa-store-link:visited {
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    box-shadow: 0 10px 0 rgba(124, 79, 160, .18) !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease !important;
}

.tofaa-store-link:hover,
.tofaa-store-link:focus-visible {
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 0 rgba(124, 79, 160, .22) !important;
    outline: none !important;
}

/* Zwykły czarny kontur tylko dla Allegro i Amazon. */
.tofaa-store-link--allegro,
.tofaa-store-link--amazon {
    border: 1px solid #171717 !important;
}

/* Sklep Tofaa zachowuje swoją animowaną ramkę. */
.tofaa-store-link--tofaa {
    border: 0 !important;
}

/* FAQ strony głównej: plus zmieniający się w minus jak w accordionie produktu. */
.tofaa-home-faq__question {
    grid-template-columns: minmax(0, 1fr) 44px !important;
}

.tofaa-home-faq__toggle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    position: relative;
    display: block;
    border: 1px solid #171717;
    border-radius: 50%;
    background: #d1d635;
    transition:
        transform .32s cubic-bezier(.2, .8, .2, 1),
        background-color .28s ease;
}

.tofaa-home-faq__toggle::before,
.tofaa-home-faq__toggle::after {
    content: "";
    width: 16px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 999px;
    background: #7C4FA0;
    transform: translate(-50%, -50%);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}

.tofaa-home-faq__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.tofaa-home-faq__item.is-open .tofaa-home-faq__toggle {
    transform: rotate(180deg);
}

.tofaa-home-faq__item.is-open .tofaa-home-faq__toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

@media (max-width: 620px) {
    .tofaa-floating-actions {
        bottom: 44px !important;
    }

    .tofaa-home-faq__question {
        grid-template-columns: minmax(0, 1fr) 40px !important;
    }

    .tofaa-home-faq__toggle {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-home-faq__toggle,
    .tofaa-home-faq__toggle::before,
    .tofaa-home-faq__toggle::after {
        transition: none !important;
    }
}


/* ============================================================
   V152 — cienkie kontury kart, navbaru i zielone strzałki #Tofaani
   ============================================================ */

/* Karty 1–4: kontur taki sam jak w pozostałych przyciskach (1 px). */
.tofaa-moment-card,
.tofaa-moment-card.is-active {
    border: 1px solid #171717 !important;
}

/* Główne karty sekcji otrzymują jeden spójny czarny kontur. */
.tofaa-community-card,
.tofaa-info-glass-card {
    border: 1px solid #171717 !important;
}

/* Nawigacja po produktach w karcie #Tofaani. */
.tofaa-reviews-card__arrow,
.tofaa-reviews-card__arrow:not(:disabled),
.tofaa-reviews-card__arrow:hover:not(:disabled),
.tofaa-reviews-card__arrow:focus-visible:not(:disabled) {
    border: 1px solid #171717 !important;
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    color: #7C4FA0 !important;
    outline: none !important;
}

.tofaa-reviews-card__arrow svg {
    stroke: #7C4FA0 !important;
}


/* ============================================================
   V153 — CTA hero wciskany + pełny kontur kart społeczności
   ============================================================ */

/* „Sprawdź produkty”: zielony przycisk z czarnym konturem i
   fizycznym efektem wciśnięcia zamiast unoszenia. */
.tofaa-btn--primary,
.tofaa-btn--primary:link,
.tofaa-btn--primary:visited {
    background: #d1d635 !important;
    color: #7C4FA0 !important;
    border: 1px solid #171717 !important;
    box-shadow: 0 8px 0 #171717 !important;
    transform: translateY(0) !important;
    animation: none !important;
    overflow: visible !important;
    transition:
        transform .18s cubic-bezier(.2, .8, .2, 1),
        box-shadow .18s cubic-bezier(.2, .8, .2, 1),
        background-color .18s ease !important;
}

.tofaa-btn--primary::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.tofaa-btn--primary:hover,
.tofaa-btn--primary:focus-visible {
    background: #d1d635 !important;
    color: #7C4FA0 !important;
    border-color: #171717 !important;
    box-shadow: 0 2px 0 #171717 !important;
    transform: translateY(6px) !important;
    outline: none !important;
}

.tofaa-btn--primary:active {
    box-shadow: 0 0 0 #171717 !important;
    transform: translateY(8px) !important;
}

/* Kontur jest rysowany wewnątrz szklanej warstwy karty.
   Dzięki temu dolna krawędź nie może zostać ucięta przez clipping. */
.tofaa-community-card {
    border: 0 !important;
    box-sizing: border-box;
}

.tofaa-community-card::before {
    border: 1px solid #171717 !important;
    box-sizing: border-box;
}

.tofaa-community-grid {
    padding-bottom: 1px;
    overflow: visible !important;
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-btn--primary {
        transition: none !important;
    }
}

/* ============================================================
   V154 — CTA formularza, klubu, pytań i „Sklep Tofaa”
   jak wciskany przycisk „Sprawdź produkty”
   ============================================================ */

.tofaa-community-card__cta,
.tofaa-community-card__cta:link,
.tofaa-community-card__cta:visited,
.tofaa-info-glass-card__cta,
.tofaa-info-glass-card__cta:link,
.tofaa-info-glass-card__cta:visited,
.tofaa-store-link--tofaa,
.tofaa-store-link--tofaa:link,
.tofaa-store-link--tofaa:visited {
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    color: #7C4FA0 !important;
    border: 1px solid #171717 !important;
    outline: none !important;
    box-shadow: 0 8px 0 #171717 !important;
    transform: translateY(0) !important;
    animation: none !important;
    overflow: visible !important;
    text-decoration: none !important;
    transition:
        transform .18s cubic-bezier(.2, .8, .2, 1),
        box-shadow .18s cubic-bezier(.2, .8, .2, 1),
        background-color .18s ease !important;
}

/* Wyłączenie wcześniejszej animowanej obwódki przycisku „Sklep Tofaa”. */
.tofaa-store-link--tofaa::before,
.tofaa-store-link--tofaa::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.tofaa-community-card__cta:hover,
.tofaa-community-card__cta:focus-visible,
.tofaa-info-glass-card__cta:hover,
.tofaa-info-glass-card__cta:focus-visible,
.tofaa-store-link--tofaa:hover,
.tofaa-store-link--tofaa:focus-visible {
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    color: #7C4FA0 !important;
    border-color: #171717 !important;
    transform: translateY(6px) !important;
    box-shadow: 0 2px 0 #171717 !important;
    outline: none !important;
}

.tofaa-community-card__cta:active,
.tofaa-info-glass-card__cta:active,
.tofaa-store-link--tofaa:active {
    transform: translateY(8px) !important;
    box-shadow: 0 0 0 #171717 !important;
}

.tofaa-community-card__cta span,
.tofaa-info-glass-card__cta span,
.tofaa-store-link--tofaa > * {
    color: #7C4FA0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-community-card__cta,
    .tofaa-info-glass-card__cta,
    .tofaa-store-link--tofaa {
        transition: none !important;
    }
}


/* ============================================================
   V155 — odstęp następnej sekcji + jednolity efekt wciskanego CTA
   - sekcja „Gdzie kupić / Pytania” 10 px niżej,
   - karty 1–4 oraz CTA formularza/klubu jak „Sprawdź produkty”,
   - pływające akcje z fizycznym efektem wciśnięcia.
   ============================================================ */

/* Następna sekcja jest odsunięta o dodatkowe 10 px,
   dzięki czemu nie przykrywa dolnych konturów kart społeczności. */
.tofaa-buy-faq-section {
    margin-top: clamp(-52px, calc(-3.8vw + 10px), -24px) !important;
}

@media (max-width: 1100px) {
    .tofaa-buy-faq-section {
        margin-top: -32px !important;
    }
}

@media (max-width: 700px) {
    .tofaa-buy-faq-section {
        margin-top: -8px !important;
    }
}

/* Karty 1–4 — dokładnie ten sam mechaniczny efekt wciśnięcia
   co główne CTA „Sprawdź produkty”. */
.tofaa-moment-card,
.tofaa-moment-card.is-active {
    border: 1px solid #171717 !important;
    box-shadow: 0 8px 0 #171717 !important;
    transform: translateY(0) !important;
    animation: none !important;
    transition:
        transform .18s cubic-bezier(.2, .8, .2, 1),
        box-shadow .18s cubic-bezier(.2, .8, .2, 1) !important;
}

.tofaa-moment-card:hover,
.tofaa-moment-card:focus-visible,
.tofaa-moment-card.is-active:hover,
.tofaa-moment-card.is-active:focus-visible {
    box-shadow: 0 2px 0 #171717 !important;
    transform: translateY(6px) !important;
    outline: none !important;
}

.tofaa-moment-card:active,
.tofaa-moment-card.is-active:active {
    box-shadow: 0 0 0 #171717 !important;
    transform: translateY(8px) !important;
}

/* CTA formularza i #Tofaanklubu — bez ruchu samej strzałki;
   wciskana jest cała bryła przycisku. */
.tofaa-community-card__cta,
.tofaa-community-card__cta:link,
.tofaa-community-card__cta:visited {
    border: 1px solid #171717 !important;
    background: #d1d635 !important;
    color: #7C4FA0 !important;
    box-shadow: 0 8px 0 #171717 !important;
    transform: translateY(0) !important;
    transition:
        transform .18s cubic-bezier(.2, .8, .2, 1),
        box-shadow .18s cubic-bezier(.2, .8, .2, 1) !important;
}

.tofaa-community-card__cta:hover,
.tofaa-community-card__cta:focus-visible {
    border-color: #171717 !important;
    background: #d1d635 !important;
    color: #7C4FA0 !important;
    box-shadow: 0 2px 0 #171717 !important;
    transform: translateY(6px) !important;
    outline: none !important;
}

.tofaa-community-card__cta:active {
    box-shadow: 0 0 0 #171717 !important;
    transform: translateY(8px) !important;
}

.tofaa-community-card__cta span,
.tofaa-community-card__cta:hover span,
.tofaa-community-card__cta:focus-visible span {
    transform: none !important;
    transition: none !important;
}

/* Pływające przyciski — styl i animacja jak „Sprawdź produkty”. */
.tofaa-floating-actions .tofaa-float,
.tofaa-floating-actions a.tofaa-floating-cart,
.tofaa-floating-actions a.tofaa-floating-cart:link,
.tofaa-floating-actions a.tofaa-floating-cart:visited,
.tofaa-floating-actions a.tofaa-floating-cart:active {
    border: 1px solid #171717 !important;
    background: #d1d635 !important;
    color: #7C4FA0 !important;
    box-shadow: 0 8px 0 #171717 !important;
    transform: translateY(0) !important;
    transition:
        transform .18s cubic-bezier(.2, .8, .2, 1),
        box-shadow .18s cubic-bezier(.2, .8, .2, 1) !important;
}

.tofaa-floating-actions .tofaa-float:hover,
.tofaa-floating-actions .tofaa-float:focus-visible,
.tofaa-floating-actions a.tofaa-floating-cart:hover,
.tofaa-floating-actions a.tofaa-floating-cart:focus,
.tofaa-floating-actions a.tofaa-floating-cart:focus-visible {
    border-color: #171717 !important;
    background: #d1d635 !important;
    color: #7C4FA0 !important;
    box-shadow: 0 2px 0 #171717 !important;
    transform: translateY(6px) !important;
    outline: none !important;
}

.tofaa-floating-actions .tofaa-float:active,
.tofaa-floating-actions a.tofaa-floating-cart:active {
    box-shadow: 0 0 0 #171717 !important;
    transform: translateY(8px) !important;
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-moment-card,
    .tofaa-community-card__cta,
    .tofaa-floating-actions .tofaa-float,
    .tofaa-floating-actions a.tofaa-floating-cart {
        transition: none !important;
    }
}


/* ============================================================
   V156 — osobne zachowanie strzałki „w górę” i CTA kart
   - strzałka: cień i uniesienie jak „Dodaj do koszyka” w sklepie,
   - koszyk pływający pozostaje bez zmian,
   - CTA Firma / #Tofaanklub: dokładnie jak wciskane CTA hero.
   ============================================================ */

/* Tylko strzałka do góry — nie obejmuje pływającego koszyka. */
.tofaa-floating-actions--global .tofaa-back-to-top.is-visible,
.tofaa-floating-actions .tofaa-back-to-top.is-visible {
    border: 1px solid #171717 !important;
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    color: #7C4FA0 !important;
    box-shadow: 0 10px 0 rgba(124, 79, 160, .18) !important;
    transform: translateY(0) !important;
    filter: none !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        opacity .25s ease,
        visibility .25s ease !important;
}

.tofaa-floating-actions--global .tofaa-back-to-top.is-visible:hover,
.tofaa-floating-actions--global .tofaa-back-to-top.is-visible:focus-visible,
.tofaa-floating-actions .tofaa-back-to-top.is-visible:hover,
.tofaa-floating-actions .tofaa-back-to-top.is-visible:focus-visible {
    border-color: #171717 !important;
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    color: #7C4FA0 !important;
    box-shadow: 0 14px 0 rgba(124, 79, 160, .22) !important;
    transform: translateY(-4px) !important;
    outline: none !important;
}

.tofaa-floating-actions--global .tofaa-back-to-top.is-visible:active,
.tofaa-floating-actions .tofaa-back-to-top.is-visible:active {
    box-shadow: 0 12px 0 rgba(124, 79, 160, .20) !important;
    transform: translateY(-2px) !important;
}

/* CTA w kartach Firma oraz #Tofaanklub — identyczne zachowanie
   jak „Sprawdź produkty” i „Kup Tofaa!”. */
.tofaa-community-card--business a.tofaa-community-card__cta,
.tofaa-community-card--business a.tofaa-community-card__cta:link,
.tofaa-community-card--business a.tofaa-community-card__cta:visited,
.tofaa-community-card--club a.tofaa-community-card__cta,
.tofaa-community-card--club a.tofaa-community-card__cta:link,
.tofaa-community-card--club a.tofaa-community-card__cta:visited {
    border: 1px solid #171717 !important;
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    color: #7C4FA0 !important;
    box-shadow: 0 8px 0 0 #171717 !important;
    transform: translateY(0) !important;
    filter: none !important;
    animation: none !important;
    text-decoration: none !important;
    transition:
        transform .18s cubic-bezier(.2, .8, .2, 1),
        box-shadow .18s cubic-bezier(.2, .8, .2, 1),
        background-color .18s ease !important;
}

.tofaa-community-card--business a.tofaa-community-card__cta:hover,
.tofaa-community-card--business a.tofaa-community-card__cta:focus-visible,
.tofaa-community-card--club a.tofaa-community-card__cta:hover,
.tofaa-community-card--club a.tofaa-community-card__cta:focus-visible {
    border-color: #171717 !important;
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    color: #7C4FA0 !important;
    box-shadow: 0 2px 0 0 #171717 !important;
    transform: translateY(6px) !important;
    outline: none !important;
}

.tofaa-community-card--business a.tofaa-community-card__cta:active,
.tofaa-community-card--club a.tofaa-community-card__cta:active {
    box-shadow: 0 0 0 0 #171717 !important;
    transform: translateY(8px) !important;
}

.tofaa-community-card--business a.tofaa-community-card__cta span,
.tofaa-community-card--club a.tofaa-community-card__cta span,
.tofaa-community-card--business a.tofaa-community-card__cta:hover span,
.tofaa-community-card--club a.tofaa-community-card__cta:hover span {
    color: #7C4FA0 !important;
    transform: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .tofaa-floating-actions .tofaa-back-to-top,
    .tofaa-community-card--business a.tofaa-community-card__cta,
    .tofaa-community-card--club a.tofaa-community-card__cta {
        transition: none !important;
    }
}


/* ============================================================
   V162 — kontury strzałek „Gdzie kupić?”
   ============================================================ */
.tofaa-store-link__arrow,
.tofaa-store-link:hover .tofaa-store-link__arrow,
.tofaa-store-link:focus-visible .tofaa-store-link__arrow {
    border: 1px solid #171717 !important;
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    color: #7C4FA0 !important;
    box-sizing: border-box !important;
}

/* V163 — hover podkreśla opis sklepu, ale nie strzałkę Allegro/Amazon. */
.tofaa-store-link--allegro:hover,
.tofaa-store-link--allegro:focus-visible,
.tofaa-store-link--amazon:hover,
.tofaa-store-link--amazon:focus-visible {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

.tofaa-store-link--allegro:hover .tofaa-store-link__copy strong,
.tofaa-store-link--allegro:hover .tofaa-store-link__copy > span,
.tofaa-store-link--allegro:focus-visible .tofaa-store-link__copy strong,
.tofaa-store-link--allegro:focus-visible .tofaa-store-link__copy > span,
.tofaa-store-link--amazon:hover .tofaa-store-link__copy strong,
.tofaa-store-link--amazon:hover .tofaa-store-link__copy > span,
.tofaa-store-link--amazon:focus-visible .tofaa-store-link__copy strong,
.tofaa-store-link--amazon:focus-visible .tofaa-store-link__copy > span {
    text-decoration: underline;
}

.tofaa-store-link--allegro .tofaa-store-link__arrow,
.tofaa-store-link--allegro:hover .tofaa-store-link__arrow,
.tofaa-store-link--allegro:focus-visible .tofaa-store-link__arrow,
.tofaa-store-link--amazon .tofaa-store-link__arrow,
.tofaa-store-link--amazon:hover .tofaa-store-link__arrow,
.tofaa-store-link--amazon:focus-visible .tofaa-store-link__arrow {
    text-decoration: none !important;
    text-decoration-line: none !important;
}


/* Licznik pływającego koszyka na stronie głównej. */
.tofaa-home .tofaa-floating-cart .tofaa-cart-count,
.tofaa-home .tofaa-floating-actions .tofaa-cart-count {
    border: 1px solid #171717 !important;
    background: #d1d635 !important;
    background-color: #d1d635 !important;
    color: #7C4FA0 !important;
    box-sizing: border-box !important;
}


/* ============================================================
   V164 — czarny kontur okienka produktu w karcie #Tofaani
   ============================================================ */
.tofaa-review-slide__product {
    border: 1px solid #171717 !important;
}

/* ============================================================
   V165 — płynny fade-out strzałki przewijania na stronie głównej
   ============================================================ */

/*
 * Późniejsze reguły CTA usuwały przejście opacity ze stanu bazowego,
 * dlatego przy powrocie na górę strzałka znikała natychmiast. Stan ukryty
 * zachowuje teraz widoczność do końca animacji i dopiero potem ją wyłącza.
 */
.tofaa-floating-actions .tofaa-back-to-top {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
  transition:
    opacity .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    visibility 0s linear .25s !important;
}

/* ============================================================
   V167 — #Tofaani na stronie głównej w stylu aktualnych opinii
   ============================================================ */
.tofaa-community-card--reviews .tofaa-community-card__content {
    padding: clamp(24px, 2.2vw, 32px) !important;
}

.tofaa-community-card.tofaa-community-card--reviews {
    border: 1px solid #171717 !important;
}

.tofaa-community-card.tofaa-community-card--reviews::before {
    border: 0 !important;
}

.tofaa-community-card--reviews .tofaa-reviews-card__header {
    margin-bottom: 14px;
}

.tofaa-community-card--reviews .tofaa-review-slide {
    gap: 12px;
}

.tofaa-community-card--reviews .tofaa-review-slide__product {
    min-height: 92px;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    padding: 0 0 16px;
    border: 0 !important;
    border-bottom: 1px solid rgba(23, 23, 23, .28) !important;
    border-radius: 0;
    background: transparent;
}

.tofaa-community-card--reviews .tofaa-review-slide__image {
    position: relative;
    height: 70px;
    border: 0;
    border-radius: 12px;
    background: transparent;
}

.tofaa-community-card--reviews .tofaa-review-slide__image img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
}

.tofaa-community-card--reviews .tofaa-review-slide__image img.is-theme-fallback {
    transform: none;
}

.tofaa-community-card--reviews .tofaa-review-slide__name {
    margin-bottom: 5px;
    font-size: 16px;
}

.tofaa-community-card--reviews .tofaa-review-rating {
    width: 132px;
    height: 26px;
    font-size: 23px;
    letter-spacing: 3px;
}

.tofaa-community-card--reviews .tofaa-review-rating__base,
.tofaa-community-card--reviews .tofaa-review-quote__rating-base {
    color: rgba(124, 79, 160, .20);
}

.tofaa-community-card--reviews .tofaa-review-rating__fill,
.tofaa-community-card--reviews .tofaa-review-quote__rating-fill {
    color: #7C4FA0;
}

.tofaa-community-card--reviews .tofaa-review-quote {
    margin: 0;
    padding: 7px 4px 2px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
    row-gap: 11px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.tofaa-community-card--reviews .tofaa-review-quote__rating {
    flex: 0 0 116px;
    width: 116px;
    height: 24px;
    font-size: 21px;
    letter-spacing: 2.5px;
}

.tofaa-review-quote__reviewer {
    grid-column: 1;
    min-width: 0;
    display: flex;
    gap: 9px;
    align-items: center;
}

.tofaa-review-quote__avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #171717;
    border-radius: 50%;
    background: #d1d635;
    color: #7C4FA0;
    font-size: 17px;
    font-weight: 900;
}

.tofaa-review-quote__identity {
    flex: 0 1 auto;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.tofaa-review-quote__identity cite,
.tofaa-review-quote__identity time {
    color: #7C4FA0;
    font-style: normal;
}

.tofaa-review-quote__identity cite {
    font-size: 13px;
    font-weight: 900;
}

.tofaa-review-quote__identity time {
    font-size: 10px;
    font-weight: 700;
}

.tofaa-review-quote__reviewer .rbs-review-badges {
    flex: 0 0 auto;
    margin: 0;
}

.tofaa-community-card--reviews .tofaa-review-quote__top {
    grid-column: 2;
    min-width: 0;
    justify-self: end;
    align-self: center;
}

.tofaa-review-quote__recommend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #7C4FA0;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
}

.tofaa-review-quote__recommend > span {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #d1d635;
}

.tofaa-community-card--reviews .tofaa-review-quote h4 {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    min-width: 0;
    overflow: visible;
    color: #7C4FA0;
    font-family: "Rubik", Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.tofaa-community-card--reviews .tofaa-review-quote p {
    margin: 0 !important;
    color: #7C4FA0 !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.tofaa-community-card--reviews .tofaa-review-quote__content {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tofaa-community-card--reviews .tofaa-review-quote .rbs-review-images {
    display: none !important;
}

.tofaa-community-card--reviews .tofaa-review-quote__traits {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 6px;
    margin-top: 3px;
}

.tofaa-community-card--reviews .tofaa-review-quote__traits p {
    min-width: 0;
    font-size: 11px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
}

.tofaa-community-card--reviews .tofaa-review-quote__traits strong {
    font-weight: 900;
}

.tofaa-community-card--reviews .tofaa-review-quote .rbs-review-images a {
    width: 38px;
    height: 38px;
    border: 0 !important;
    border-radius: 8px;
    box-shadow: none !important;
}

@media (max-width: 460px) {
    .tofaa-community-card--reviews .tofaa-review-slide__product {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 10px;
    }

    .tofaa-community-card--reviews .tofaa-review-slide__image {
        height: 58px;
    }

    .tofaa-review-quote__reviewer {
        flex-wrap: wrap;
    }

    .tofaa-review-quote__avatar {
        width: 38px;
        height: 38px;
    }

    .tofaa-review-quote__reviewer .rbs-review-badges {
        margin-left: 47px;
    }

    .tofaa-community-card--reviews .tofaa-review-quote {
        grid-template-columns: minmax(0, 1fr);
    }

    .tofaa-community-card--reviews .tofaa-review-quote__top {
        grid-column: 1;
        justify-self: start;
        margin-left: 47px;
    }
}

@media (min-width: 461px) and (max-width: 1450px) {
    .tofaa-community-card--reviews .tofaa-review-quote {
        grid-template-columns: minmax(0, 1fr);
    }

    .tofaa-community-card--reviews .tofaa-review-quote__top {
        grid-column: 1;
        justify-self: start;
        margin-left: 51px;
    }
}

.tofaa-floating-actions .tofaa-back-to-top.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition:
    opacity .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    visibility 0s linear 0s !important;
}

.tofaa-floating-actions .tofaa-back-to-top.is-visible:hover,
.tofaa-floating-actions .tofaa-back-to-top.is-visible:focus-visible {
  transform: translateY(-4px) !important;
}

.tofaa-floating-actions .tofaa-back-to-top.is-visible:active {
  transform: translateY(-2px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .tofaa-floating-actions .tofaa-back-to-top,
  .tofaa-floating-actions .tofaa-back-to-top.is-visible {
    transition: none !important;
  }
}