/* ==========================================================================
   HELKEM – FŐOLDALI TERMÉK CAROUSEL
   ========================================================================== */

body .helkem-product-carousel,
body .helkem-product-carousel * {
    box-sizing: border-box !important;
    font-family: 'Inter', sans-serif !important;
}

body .helkem-product-carousel {
    width: 100% !important;
    margin: 0 auto !important;
}


/* ==========================================================================
   FEJLÉC
   ========================================================================== */

body .helkem-carousel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
}

body .helkem-carousel-title {
    margin: 0 !important;
    color: #10262C !important;
    font-size: clamp(26px, 2.6vw, 40px) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}


/* ==========================================================================
   CAROUSEL
   ========================================================================== */

body .helkem-carousel-viewport {
    width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;

    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;

    scrollbar-width: none !important;

    padding: 2px 0 10px !important;
}

body .helkem-carousel-viewport::-webkit-scrollbar {
    display: none !important;
}

body .helkem-carousel-track {
    display: flex !important;
    align-items: stretch !important;

    gap: 24px !important;

    width: 100% !important;
    min-width: 100% !important;
}

body .helkem-carousel-slide {
    flex: 0 0 calc((100% - 72px) / 4) !important;
    width: calc((100% - 72px) / 4) !important;

    min-width: 0 !important;

    display: flex !important;

    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
}

body .helkem-carousel-slide > .helkem-card {
    width: 100% !important;
    height: 100% !important;
}


/* ==========================================================================
   KÁRTYA FINOMHANGOLÁS CAROUSELBEN
   ========================================================================== */

body .helkem-product-carousel .helkem-card-content {
    padding: 24px !important;
}

body .helkem-product-carousel .helkem-card-title {
    font-size: 16px !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1024px) {

    body .helkem-carousel-track {
        gap: 20px !important;
    }

    body .helkem-carousel-slide {
        flex-basis: calc((100% - 40px) / 3) !important;
        width: calc((100% - 40px) / 3) !important;
    }

    body .helkem-product-carousel .helkem-card-content {
        padding: 20px 18px !important;
    }
}


/* ==========================================================================
   MOBIL
   ========================================================================== */

@media (max-width: 768px) {

    body .helkem-carousel-header {
        gap: 14px !important;
        margin-bottom: 20px !important;
    }

    body .helkem-carousel-title {
        font-size: 25px !important;
    }

    body .helkem-carousel-controls {
        gap: 7px !important;
    }

    body .helkem-carousel-arrow {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;

        border-radius: 10px !important;

        font-size: 19px !important;
    }

    body .helkem-carousel-track {
        gap: 14px !important;
    }

    body .helkem-carousel-slide {
        flex-basis: calc((100% - 14px) / 2) !important;
        width: calc((100% - 14px) / 2) !important;
    }

    body .helkem-product-carousel .helkem-card-content {
        padding: 16px 14px 18px !important;
    }

    body .helkem-product-carousel .helkem-card-title {
        font-size: 13px !important;
    }
}


/* ==========================================================================
   CAROUSEL – BADGE JAVÍTÁS
   A shop PHP-ben ezek inline stílusként vannak, ezért a főoldali carouselhez
   itt külön is megadjuk őket.
   ========================================================================== */

body .helkem-product-carousel .helkem-card-image-wrap {
    position: relative !important;
}

body .helkem-product-carousel .helkem-card-badges {
    position: absolute !important;
    top: 13px !important;
    left: 13px !important;
    z-index: 30 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    pointer-events: none !important;
}

body .helkem-product-carousel .helkem-card-badges .helkem-sale-badge,
body .helkem-product-carousel .helkem-card-badges .helkem-new-badge {
    position: static !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;

    margin: 0 !important;
    padding: 7px 13px !important;

    border: 0 !important;
    border-radius: 999px !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .14) !important;
}

body .helkem-product-carousel .helkem-card-badges .helkem-sale-badge {
    background: #c3d92e !important;
    color: #10262C !important;
}

body .helkem-product-carousel .helkem-card-badges .helkem-new-badge {
    background: rgb(251, 174, 31) !important;
    color: #10262C !important;
}


/* ==========================================================================
   CAROUSEL – VENDÉG VARIÁCIÓS BRUTTÓ / NETTÓ VÁLTÓ
   Ugyanaz a kompakt megjelenés, mint a shop termékkártyáin.
   ========================================================================== */

body .helkem-product-carousel .helkem-guest-price-switcher {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    gap: 7px !important;

    width: 100% !important;
    margin: 0 !important;
}

body .helkem-product-carousel .helkem-guest-price-toggle {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;

    padding: 2px !important;
    margin: 0 !important;

    border: 1px solid rgba(13, 192, 218, .28) !important;
    border-radius: 999px !important;

    background: rgba(16, 38, 44, .75) !important;
}

body .helkem-product-carousel .helkem-guest-price-toggle-btn {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 5px 9px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: transparent !important;
    color: #AFC2C7 !important;

    box-shadow: none !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    cursor: pointer !important;

    transition:
        background .18s ease,
        color .18s ease !important;
}

body .helkem-product-carousel .helkem-guest-price-toggle-btn:hover {
    background: transparent !important;
    color: #ffffff !important;
}

body .helkem-product-carousel .helkem-guest-price-toggle-btn.is-active {
    background: #0DC0DA !important;
    color: #ffffff !important;
}

body .helkem-product-carousel .helkem-guest-price-values {
    min-height: 22px !important;
    width: 100% !important;
}

body .helkem-product-carousel .helkem-guest-price-value {
    color: #ffffff !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;

    white-space: normal !important;
}

body .helkem-product-carousel .helkem-guest-price-value[hidden] {
    display: none !important;
}

body .helkem-product-carousel .helkem-price-range-separator {
    display: inline-block !important;
    padding: 0 2px !important;
}


/* ==========================================================================
   MOBIL – BADGE + VÁLTÓ
   ========================================================================== */

@media (max-width: 768px) {

    body .helkem-product-carousel .helkem-card-badges {
        top: 8px !important;
        left: 8px !important;
        gap: 5px !important;
    }

    body .helkem-product-carousel .helkem-card-badges .helkem-sale-badge,
    body .helkem-product-carousel .helkem-card-badges .helkem-new-badge {
        min-height: 23px !important;
        padding: 5px 9px !important;
        font-size: 10px !important;
    }

    body .helkem-product-carousel .helkem-guest-price-toggle-btn {
        padding: 4px 7px !important;
        font-size: 9px !important;
    }

    body .helkem-product-carousel .helkem-guest-price-value {
        font-size: 12px !important;
    }
}


/* ==========================================================================
   CAROUSEL – LAPOZÓ PONTOK
   ========================================================================== */

body .helkem-product-carousel .helkem-carousel-header {
    display: none !important;
}

body .helkem-carousel-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    width: 100% !important;

    margin: 22px 0 0 !important;
    padding: 0 !important;
}

body .helkem-carousel-dots.is-hidden {
    display: none !important;
}

body .helkem-carousel-dot {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: block !important;

    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, .38) !important;

    box-shadow: none !important;
    outline: none !important;

    cursor: pointer !important;

    transition:
        width .2s ease,
        background .2s ease,
        transform .2s ease !important;
}

body .helkem-carousel-dot:hover {
    background: rgba(255, 255, 255, .65) !important;
}

body .helkem-carousel-dot.is-active {
    width: 24px !important;
    background: #c3d92e !important;
}

@media (max-width: 768px) {

    body .helkem-carousel-dots {
        gap: 7px !important;
        margin-top: 16px !important;
    }

    body .helkem-carousel-dot {
        width: 8px !important;
        height: 8px !important;
        min-width: 8px !important;
        min-height: 8px !important;
    }

    body .helkem-carousel-dot.is-active {
        width: 20px !important;
    }
}

/* ==========================================================================
   KEVÉS TERMÉK ESETÉN KÖZÉPRE IGAZÍTÁS
   ========================================================================== */

body .helkem-carousel-track.is-centered {
    justify-content: center !important;
}