/* =========================================================
   EKOMEDICA HOMEPAGE BENTO V1
   Scoped redesign of the upper homepage only.
   Active only after JS adds body.ekm-bento-active.
   ========================================================= */

body.ekm-bento-active {
    --ekm-bento-bg: #f7f5ef;
    --ekm-bento-card: #fffefa;
    --ekm-bento-green: #0f5a3c;
    --ekm-bento-green-dark: #08452e;
    --ekm-bento-green-soft: #eaf1e7;
    --ekm-bento-text: #24352d;
    --ekm-bento-muted: #647068;
    --ekm-bento-border: #dfe7da;
    --ekm-bento-gap: 14px;
    --ekm-bento-radius: 20px;
}

body.ekm-bento-active,
body.ekm-bento-active #content-wrapper,
body.ekm-bento-active .content-wrapper,
body.ekm-bento-active .index-content-wrapper {
    background: var(--ekm-bento-bg) !important;
}

/* The new shared upper composition. */
body.ekm-bento-active .ekm-home-bento-v1 {
    width: 100%;
    max-width: 1180px;
    margin: 22px auto 48px;
    padding: 0;
    box-sizing: border-box;
    display: grid;
    gap: var(--ekm-bento-gap);
    font-family: inherit;
}

body.ekm-bento-active .ekm-bento-top {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(310px, 1fr);
    gap: var(--ekm-bento-gap);
    min-height: 396px;
    align-items: stretch;
}

/* =========================================================
   HERO TILE
   ========================================================= */
body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero {
    width: 100% !important;
    max-width: none !important;
    min-height: 396px !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: var(--ekm-bento-radius) !important;
    box-shadow: 0 11px 30px rgba(27, 57, 40, .085) !important;
}
/* Silnejsi svetly podklad pod textem hero */
body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero::before {
    background: linear-gradient(
        90deg,
        rgba(255,251,245,.97) 0%,
        rgba(255,251,245,.94) 27%,
        rgba(255,251,245,.72) 43%,
        rgba(255,251,245,.22) 58%,
        rgba(255,251,245,0) 69%
    ) !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero__content {
    width: 58% !important;
    max-width: 560px !important;
    padding: 35px 35px 32px !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero__eyebrow {
    margin-bottom: 10px !important;
    padding: 6px 11px !important;
    font-size: 10.5px !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero__title {
    margin: 0 0 16px !important;
    max-width: 330px !important;
    font-size: clamp(38px, 3.5vw, 48px) !important;
    line-height: .98 !important;
    letter-spacing: -.04em !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero__shipping {
    margin-bottom: 15px !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero__shipping strong {
    font-size: 20px !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero__lead {
    display: none !important;
}


body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero__btn {
    min-height: 43px !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero__note {
    display: none !important;
}

/* =========================================================
   VIDEO / BRAND TILE
   ========================================================= */
body.ekm-bento-active .ekm-bento-video-card {
    position: relative;
    min-width: 0;
    min-height: 396px;
    overflow: hidden;
    border: 1px solid rgba(8, 57, 38, .12);
    border-radius: var(--ekm-bento-radius);
    background: #153b2a center / cover no-repeat;
    box-shadow: 0 11px 30px rgba(27, 57, 40, .11);
    isolation: isolate;
}

body.ekm-bento-active .ekm-bento-video-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(7, 35, 24, .02) 22%, rgba(6, 36, 23, .22) 56%, rgba(4, 28, 18, .88) 100%);
    pointer-events: none;
}

body.ekm-bento-active .ekm-bento-video-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at 60% 25%, rgba(255,255,255,.13), transparent 38%);
    pointer-events: none;
}

body.ekm-bento-active .ekm-bento-video-play {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: 66px;
    height: 66px;
    margin: -48px 0 0 -33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 50%;
    background: rgba(7, 60, 39, .72);
    color: #fff;
    box-shadow: 0 8px 26px rgba(0,0,0,.23);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

body.ekm-bento-active .ekm-bento-video-play::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 5px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #fff;
}

body.ekm-bento-active .ekm-bento-video-play:hover,
body.ekm-bento-active .ekm-bento-video-play:focus-visible {
    transform: scale(1.06);
    background: rgba(15, 90, 60, .94);
    box-shadow: 0 11px 30px rgba(0,0,0,.29);
}

body.ekm-bento-active .ekm-bento-video-copy {
    position: absolute;
    z-index: 3;
    left: 26px;
    right: 24px;
    bottom: 23px;
    color: #fff;
}

body.ekm-bento-active .ekm-bento-video-kicker {
    display: inline-flex;
    margin-bottom: 9px;
    padding: 5px 9px;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.88);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body.ekm-bento-active .ekm-bento-video-copy strong {
    display: block;
    margin: 0 0 6px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 2.2vw, 34px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em;
}
body.ekm-bento-active .ekm-bento-video-copy strong span {
    color: #d9ebcf !important;
}

body.ekm-bento-active .ekm-bento-video-copy a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.94) !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none !important;
}

body.ekm-bento-active .ekm-bento-video-copy a:hover {
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* =========================================================
   THREE CAMPAIGN TILES
   ========================================================= */
body.ekm-bento-active .ekm-home-bento-v1 #ekm-xmas-tips-2026 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--ekm-bento-gap) !important;
}

body.ekm-bento-active .ekm-home-bento-v1 #ekm-xmas-tips-2026 > a {
    position: relative;
    display: block !important;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(70, 88, 73, .10);
    border-radius: 17px !important;
    background: var(--ekm-bento-card);
    box-shadow: 0 7px 19px rgba(30,55,42,.065) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

body.ekm-bento-active .ekm-home-bento-v1 #ekm-xmas-tips-2026 > a:hover {
    transform: translateY(-2px) !important;
    border-color: #cedcc9;
    box-shadow: 0 11px 25px rgba(30,55,42,.11) !important;
}

body.ekm-bento-active .ekm-home-bento-v1 #ekm-xmas-tips-2026 img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1200 / 518;
    object-fit: cover;
}

/* Hide original source sections/hosts only while Bento preview is active. */
body.ekm-bento-active .ekm-philosophy-section,
body.ekm-bento-active .ekm-bento-source-host,
body.ekm-bento-active .ekm-bento-empty-tail,
body.ekm-bento-active .content-wrapper.homepage-box.before-carousel,
body.ekm-bento-active .content-wrapper.banners-top-block.js-banners-top-block {
    display: none !important;
}

/* Reset unwanted empty spacing around the original area. */
body.ekm-bento-active .homepage-box-after-carousel,
body.ekm-bento-active .content-wrapper.homepage-box-after-carousel {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* =========================================================
   VIDEO MODAL
   ========================================================= */
body.ekm-bento-modal-open {
    overflow: hidden !important;
}

.ekm-bento-modal[hidden] {
    display: none !important;
}

.ekm-bento-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 22, 15, .82);
    backdrop-filter: blur(5px);
}

.ekm-bento-modal__dialog {
    position: relative;
    width: min(1080px, 94vw);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    background: #071d14;
    box-shadow: 0 25px 70px rgba(0,0,0,.43);
}

.ekm-bento-modal__video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #071d14;
}

.ekm-bento-modal__close {
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 50%;
    background: rgba(4, 28, 18, .78);
    color: #fff;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.ekm-bento-modal__close:hover,
.ekm-bento-modal__close:focus-visible {
    background: var(--ekm-bento-green);
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 991px) {
    body.ekm-bento-active .ekm-home-bento-v1 {
        margin: 16px auto 42px;
        gap: 12px;
    }

    body.ekm-bento-active .ekm-bento-top {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 12px;
    }

    body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero {
        min-height: 420px !important;
    }

    body.ekm-bento-active .ekm-bento-video-card {
        min-height: 0;
        aspect-ratio: 16 / 9;
        background-position: center 46%;
    }

    body.ekm-bento-active .ekm-bento-video-play {
        margin-top: -33px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {
    body.ekm-bento-active .ekm-home-bento-v1 {
        width: auto;
        margin: 12px 10px 34px;
        gap: 10px;
    }

    body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero {
        min-height: 650px !important;
        border-radius: 16px !important;
    }

    body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero__content {
        width: 100% !important;
        max-width: none !important;
        padding: 26px 21px 310px !important;
    }

    body.ekm-bento-active .ekm-bento-video-card {
        border-radius: 16px;
    }

    body.ekm-bento-active .ekm-bento-video-copy {
        left: 20px;
        right: 20px;
        bottom: 18px;
    }

    body.ekm-bento-active .ekm-bento-video-copy strong {
        font-size: 26px;
    }

    body.ekm-bento-active .ekm-bento-video-play {
        width: 58px;
        height: 58px;
        margin: -29px 0 0 -29px;
    }

    body.ekm-bento-active .ekm-home-bento-v1 #ekm-xmas-tips-2026 {
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-flow: column;
        grid-auto-columns: min(84vw, 340px);
        gap: 10px !important;
        overflow-x: auto;
        padding: 0 0 5px !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    body.ekm-bento-active .ekm-home-bento-v1 #ekm-xmas-tips-2026 > a {
        scroll-snap-align: start;
        border-radius: 15px !important;
    }

    .ekm-bento-modal {
        padding: 10px;
    }

    .ekm-bento-modal__dialog {
        width: 100%;
        border-radius: 13px;
    }

    .ekm-bento-modal__close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        font-size: 21px;
    }
}

@media (max-width: 390px) {
    body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero {
        min-height: 620px !important;
    }

    body.ekm-bento-active .ekm-home-bento-v1 .ekm-xmas-hero__content {
        padding-right: 18px !important;
        padding-left: 18px !important;
        padding-bottom: 295px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ekm-bento-active .ekm-bento-video-play,
    body.ekm-bento-active .ekm-home-bento-v1 #ekm-xmas-tips-2026 > a {
        transition: none !important;
    }
}

/* =========================================
   BENTO - MOBILE HERO BEZ PRODUKTOVE FOTKY
   ========================================= */

@media (max-width: 767px) {

    body.ekm-bento-active
    .ekm-home-bento-v1
    .ekm-xmas-hero {
        min-height: 0 !important;
        height: auto !important;

        background-image: none !important;
        background-color: #fffaf1 !important;
    }

    body.ekm-bento-active
    .ekm-home-bento-v1
    .ekm-xmas-hero::before {
        display: none !important;
    }

    body.ekm-bento-active
    .ekm-home-bento-v1
    .ekm-xmas-hero__content {
        width: 100% !important;
        max-width: none !important;

        padding:
            28px
            22px
            30px !important;
    }
}


/* =========================================================
   CANONICAL V3 - BENEFITY PODLE SCHVALENEHO NAVRHU
   Jedina definice: 4 samostatne bile karty.
   ========================================================= */

body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner.position--benefitHomepage {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__item {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 13px 15px !important;
    background: rgba(255,254,250,.98) !important;
    border: 1px solid #ebe6dc !important;
    border-radius: 14px !important;
    box-shadow: 0 7px 18px rgba(37,53,42,.065) !important;
    transform: none !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__item::before,
body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__item::after {
    display: none !important;
    content: none !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__picture {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__picture img,
body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__img {
    display: none !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__picture::before {
    content: "" !important;
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    background: #2b7b32 !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__content {
    min-width: 0 !important;
    padding: 0 !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__title {
    display: block !important;
    min-height: 0 !important;
    margin: 0 0 3px !important;
    color: #173f2c !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.22 !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
    text-align: left !important;
}

body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__data {
    display: block !important;
    margin: 0 !important;
    color: #55635b !important;
    font-size: 10.8px !important;
    line-height: 1.32 !important;
    text-align: left !important;
}

/* Benefit icons: leaf / drop / grid / calendar */
body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__item:nth-child(1) .benefitBanner__picture::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4C13 4 7 7 5 12c-1.2 3 .3 6 3.2 6.8 3.1.9 6.1-1 7.8-3.5C18.5 11.7 19.7 7.7 20 4Z'/%3E%3Cpath d='M4 21c3-5.6 7-9 13-12'/%3E%3C/g%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4C13 4 7 7 5 12c-1.2 3 .3 6 3.2 6.8 3.1.9 6.1-1 7.8-3.5C18.5 11.7 19.7 7.7 20 4Z'/%3E%3Cpath d='M4 21c3-5.6 7-9 13-12'/%3E%3C/g%3E%3C/svg%3E") !important;
}
body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__item:nth-child(2) .benefitBanner__picture::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C8.4 7.5 6.5 10 6.5 13.2A5.5 5.5 0 0 0 17.5 13.2C17.5 10 15.6 7.5 12 3Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C8.4 7.5 6.5 10 6.5 13.2A5.5 5.5 0 0 0 17.5 13.2C17.5 10 15.6 7.5 12 3Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__item:nth-child(3) .benefitBanner__picture::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.2'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.2'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.2'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.2'/%3E%3C/g%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.2'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.2'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.2'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.2'/%3E%3C/g%3E%3C/svg%3E") !important;
}
body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__item:nth-child(4) .benefitBanner__picture::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='15' rx='2'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M3.5 10h17'/%3E%3C/g%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='15' rx='2'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M3.5 10h17'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* =========================================================
   CANONICAL V3 - VYBERTE DLE POTREBY PODLE SCHVALENEHO NAVRHU
   Jedna svetle zelena plocha + 5 bilych karet v jednom radu.
   ========================================================= */

body.ekm-bento-active .ekm-needs--bento {
    position: relative !important;
    width: 100% !important;
    max-width: 1180px !important;
    margin: 26px auto 52px !important;
    padding: 14px 16px 18px !important;
    overflow: hidden !important;
    background: linear-gradient(100deg, #e7f0da 0%, #f1f5e7 52%, #e4edd5 100%) !important;
    border: 1px solid #e0e8d5 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(39,68,40,.055) !important;
}

/* Dekorativni vetvicka vlevo - bez dalsiho obrazku. */
body.ekm-bento-active .ekm-needs--bento::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: -5px !important;
    left: -2px !important;
    width: 165px !important;
    height: 104px !important;
    opacity: .92 !important;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 112'%3E%3Cg fill='none' stroke='%23648534' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M4 106C42 76 69 47 112 15'/%3E%3C/g%3E%3Cg fill='%2377a74b'%3E%3Cellipse cx='27' cy='85' rx='9' ry='25' transform='rotate(44 27 85)'/%3E%3Cellipse cx='49' cy='66' rx='9' ry='24' transform='rotate(-30 49 66)'/%3E%3Cellipse cx='69' cy='53' rx='8' ry='22' transform='rotate(52 69 53)'/%3E%3Cellipse cx='88' cy='35' rx='8' ry='22' transform='rotate(-28 88 35)'/%3E%3Cellipse cx='111' cy='20' rx='8' ry='20' transform='rotate(56 111 20)'/%3E%3C/g%3E%3C/svg%3E") !important;
    pointer-events: none !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-needs-inner {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-needs-head {
    min-height: 0 !important;
    margin: 0 0 13px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-needs-head::after {
    display: none !important;
    content: none !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-needs-kicker {
    display: block !important;
    width: auto !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #2d5d34 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-needs-head h2 {
    margin: 0 0 3px !important;
    color: #153e29 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(27px, 2.3vw, 35px) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-needs-head p {
    max-width: none !important;
    margin: 0 !important;
    color: #45564a !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-needs-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    gap: 12px !important;
    margin: 0 !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-need,
body.ekm-bento-active .ekm-needs--bento .ekm-need:nth-child(n) {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 92px !important;
    margin: 0 !important;
    padding: 13px 14px 11px !important;
    background: rgba(255,254,250,.96) !important;
    border: 1px solid rgba(56,83,56,.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 16px rgba(40,68,42,.055) !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-need:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 21px rgba(40,68,42,.09) !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-need-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-need-icon::before {
    content: "" !important;
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    background: #2f7f35 !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-need > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-need h3 {
    margin: 0 !important;
    color: #163f2a !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-need p {
    display: none !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-need-more {
    width: 18px !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

body.ekm-bento-active .ekm-needs--bento .ekm-need-more::after {
    content: "→" !important;
    color: #2b6f3a !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* Needs icons: shield / digestion / regeneration / lotus / shield-plus */
body.ekm-bento-active .ekm-needs--bento .ekm-need:nth-child(1) .ekm-need-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 19 6v5c0 5-3 8-7 10-4-2-7-5-7-10V6l7-3Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m9.2 11.8 1.8 1.8 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 19 6v5c0 5-3 8-7 10-4-2-7-5-7-10V6l7-3Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m9.2 11.8 1.8 1.8 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
body.ekm-bento-active .ekm-needs--bento .ekm-need:nth-child(2) .ekm-need-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5c0-1.5 1-2.5 2.5-2.5H16a2 2 0 1 1 0 4h-6a1.5 1.5 0 0 0 0 3h5a2 2 0 1 1 0 4h-5a1.5 1.5 0 0 0 0 3h6.5A2.5 2.5 0 0 1 19 19v2M7 5v14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5c0-1.5 1-2.5 2.5-2.5H16a2 2 0 1 1 0 4h-6a1.5 1.5 0 0 0 0 3h5a2 2 0 1 1 0 4h-5a1.5 1.5 0 0 0 0 3h6.5A2.5 2.5 0 0 1 19 19v2M7 5v14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
body.ekm-bento-active .ekm-needs--bento .ekm-need:nth-child(3) .ekm-need-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7v5h-5'/%3E%3Cpath d='M4 17v-5h5'/%3E%3Cpath d='M6.1 8A7 7 0 0 1 18 6l2 1M18 16a7 7 0 0 1-11.9 2L4 17'/%3E%3C/g%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7v5h-5'/%3E%3Cpath d='M4 17v-5h5'/%3E%3Cpath d='M6.1 8A7 7 0 0 1 18 6l2 1M18 16a7 7 0 0 1-11.9 2L4 17'/%3E%3C/g%3E%3C/svg%3E") !important;
}
body.ekm-bento-active .ekm-needs--bento .ekm-need:nth-child(4) .ekm-need-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20c0-6 0-10 4-14 1 5 0 9-4 14Z'/%3E%3Cpath d='M12 20c0-6 0-10-4-14-1 5 0 9 4 14Z'/%3E%3Cpath d='M12 20c-4-1-7-3-9-7 5 0 8 2 9 7Z'/%3E%3Cpath d='M12 20c4-1 7-3 9-7-5 0-8 2-9 7Z'/%3E%3C/g%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20c0-6 0-10 4-14 1 5 0 9-4 14Z'/%3E%3Cpath d='M12 20c0-6 0-10-4-14-1 5 0 9 4 14Z'/%3E%3Cpath d='M12 20c-4-1-7-3-9-7 5 0 8 2 9 7Z'/%3E%3Cpath d='M12 20c4-1 7-3 9-7-5 0-8 2-9 7Z'/%3E%3C/g%3E%3C/svg%3E") !important;
}
body.ekm-bento-active .ekm-needs--bento .ekm-need:nth-child(5) .ekm-need-icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5c0 5-3 8-7 10-4-2-7-5-7-10V6l7-3Z'/%3E%3Cpath d='M12 8v7M8.5 11.5h7'/%3E%3C/g%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5c0 5-3 8-7 10-4-2-7-5-7-10V6l7-3Z'/%3E%3Cpath d='M12 8v7M8.5 11.5h7'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* =========================================================
   RESPONSIVE - CANONICAL BENEFITS + NEEDS
   ========================================================= */

@media (max-width: 991px) {
    body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner.position--benefitHomepage {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
    body.ekm-bento-active .ekm-needs--bento {
        width: auto !important;
        margin: 22px 18px 44px !important;
    }
    body.ekm-bento-active .ekm-needs--bento .ekm-needs-grid {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }
}

@media (max-width: 600px) {
    body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner.position--benefitHomepage {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    body.ekm-bento-active .ekm-home-bento-v1 .benefitBanner__item {
        min-height: 68px !important;
        padding: 11px 13px !important;
    }
    body.ekm-bento-active .ekm-needs--bento {
        margin: 18px 10px 36px !important;
        padding: 18px 10px 12px !important;
        border-radius: 16px !important;
    }
    body.ekm-bento-active .ekm-needs--bento::before {
        width: 112px !important;
        height: 74px !important;
        opacity: .72 !important;
    }
    body.ekm-bento-active .ekm-needs--bento .ekm-needs-head {
        padding: 4px 14px 0 !important;
        margin-bottom: 14px !important;
    }
    body.ekm-bento-active .ekm-needs--bento .ekm-needs-head h2 {
        font-size: 27px !important;
    }
    body.ekm-bento-active .ekm-needs--bento .ekm-needs-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 8px !important;
    }
    body.ekm-bento-active .ekm-needs--bento .ekm-need,
    body.ekm-bento-active .ekm-needs--bento .ekm-need:nth-child(n) {
        min-height: 88px !important;
        padding: 11px 10px 9px !important;
    }
    body.ekm-bento-active .ekm-needs--bento .ekm-need:last-child {
        grid-column: 1 / -1 !important;
    }
}