/* NeoWeb Design Studio — frontend inheritance */

.nek-section-header.nek-design-studio {
    gap: var(--nek-studio-header-gap, 24px) !important;
    margin-bottom:
        var(
            --nek-studio-header-margin-bottom,
            28px
        ) !important;
    padding-bottom:
        var(
            --nek-studio-header-border-width,
            0px
        ) !important;
    border-bottom:
        var(
            --nek-studio-header-border-width,
            0px
        )
        solid
        var(
            --nek-studio-header-border-color,
            #e7e7e7
        ) !important;
}

.nek-section-header.nek-design-studio
.nek-section-header__title {
    color:
        var(
            --nek-studio-header-title-color,
            #111
        ) !important;
    font-size:
        var(
            --nek-studio-header-title-size-desktop,
            42px
        ) !important;
    font-weight:
        var(
            --nek-studio-header-title-weight,
            500
        ) !important;
}

.nek-section-header.nek-design-studio
.nek-section-header__description {
    color:
        var(
            --nek-studio-header-description-color,
            #666
        ) !important;
}

.nek-section-header.nek-design-studio
.nek-section-header__link {
    color:
        var(
            --nek-studio-header-link-color,
            #111
        ) !important;
}

.nek-section-header.nek-design-studio
.nek-section-header__link:hover {
    color:
        var(
            --nek-studio-header-link-hover,
            #555
        ) !important;
}

.nek-section-header__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex: 0 0 auto;
}

.nek-section-header__extra {
    display: inline-flex;
    align-items: center;
}

.nek-product-grid-section.nek-design-studio
.nek-product-grid {
    --nek-grid-columns:
        var(
            --nek-studio-grid-columns-desktop,
            4
        ) !important;
    --nek-grid-column-gap:
        var(
            --nek-studio-grid-column-gap-desktop,
            24px
        ) !important;
    --nek-grid-row-gap:
        var(
            --nek-studio-grid-row-gap-desktop,
            40px
        ) !important;
}

.nek-product-carousel-section.nek-design-studio
.nek-product-carousel {
    --nek-carousel-items:
        var(
            --nek-studio-carousel-items-desktop,
            4.5
        ) !important;
    --nek-carousel-gap:
        var(
            --nek-studio-carousel-gap-desktop,
            24px
        ) !important;
    --nek-carousel-edge:
        var(
            --nek-studio-carousel-edge-desktop,
            0px
        ) !important;
    --nek-carousel-arrow-size:
        var(
            --nek-studio-carousel-arrow-size,
            40px
        ) !important;
    --nek-carousel-arrow-icon:
        var(
            --nek-studio-carousel-arrow-icon,
            16px
        ) !important;
    --nek-carousel-arrow-color:
        var(
            --nek-studio-carousel-arrow-color,
            #111
        ) !important;
    --nek-carousel-arrow-bg:
        var(
            --nek-studio-carousel-arrow-bg,
            transparent
        ) !important;
    --nek-carousel-arrow-hover-color:
        var(
            --nek-studio-carousel-arrow-hover-color,
            #111
        ) !important;
    --nek-carousel-arrow-hover-bg:
        var(
            --nek-studio-carousel-arrow-hover-bg,
            transparent
        ) !important;
}

.nek-section-header__extra
.nek-product-carousel__navigation {
    min-height: 0;
    margin: 0 !important;
}

.nek-section-header__extra
.nek-product-carousel__arrows {
    gap: 6px;
}

.nek-section-header__extra
.nek-product-carousel__arrow {
    flex: 0 0 auto;
}

@media (max-width: 1024px) {
    .nek-section-header.nek-design-studio
    .nek-section-header__title {
        font-size:
            var(
                --nek-studio-header-title-size-tablet,
                36px
            ) !important;
    }

    .nek-product-grid-section.nek-design-studio
    .nek-product-grid {
        --nek-grid-columns:
            var(
                --nek-studio-grid-columns-tablet,
                3
            ) !important;
        --nek-grid-column-gap:
            var(
                --nek-studio-grid-column-gap-tablet,
                20px
            ) !important;
        --nek-grid-row-gap:
            var(
                --nek-studio-grid-row-gap-tablet,
                32px
            ) !important;
    }

    .nek-product-carousel-section.nek-design-studio
    .nek-product-carousel {
        --nek-carousel-items:
            var(
                --nek-studio-carousel-items-tablet,
                2.5
            ) !important;
        --nek-carousel-gap:
            var(
                --nek-studio-carousel-gap-tablet,
                20px
            ) !important;
        --nek-carousel-edge:
            var(
                --nek-studio-carousel-edge-tablet,
                0px
            ) !important;
    }
}

@media (max-width: 767px) {
    .nek-section-header.nek-design-studio {
        align-items: flex-start;
    }

    .nek-section-header.nek-design-studio
    .nek-section-header__title {
        font-size:
            var(
                --nek-studio-header-title-size-mobile,
                30px
            ) !important;
    }

    .nek-section-header__actions {
        width: 100%;
        justify-content: space-between;
    }

    .nek-product-grid-section.nek-design-studio
    .nek-product-grid {
        --nek-grid-columns:
            var(
                --nek-studio-grid-columns-mobile,
                2
            ) !important;
        --nek-grid-column-gap:
            var(
                --nek-studio-grid-column-gap-mobile,
                14px
            ) !important;
        --nek-grid-row-gap:
            var(
                --nek-studio-grid-row-gap-mobile,
                26px
            ) !important;
    }

    .nek-product-carousel-section.nek-design-studio
    .nek-product-carousel {
        --nek-carousel-items:
            var(
                --nek-studio-carousel-items-mobile,
                1.25
            ) !important;
        --nek-carousel-gap:
            var(
                --nek-studio-carousel-gap-mobile,
                14px
            ) !important;
        --nek-carousel-edge:
            var(
                --nek-studio-carousel-edge-mobile,
                0px
            ) !important;
    }
}


/* 1.1.18.1 — inline carousel navigation hotfix */
.nek-product-carousel-section {
    --nek-carousel-arrow-size: 44px;
    --nek-carousel-arrow-icon: 16px;
    --nek-carousel-arrow-color: #111;
    --nek-carousel-arrow-bg: #fff;
    --nek-carousel-arrow-hover-color: #fff;
    --nek-carousel-arrow-hover-bg: #111;
    --nek-carousel-nav-spacing: 22px;
    --nek-carousel-indicator-color: rgba(17,17,17,.24);
    --nek-carousel-indicator-active: #111;
    --nek-carousel-dot-size: 8px;
}

.nek-section-header__extra
.nek-product-carousel__navigation {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
}

.nek-section-header__extra
.nek-product-carousel__arrows {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
}

.nek-section-header__extra
button.nek-product-carousel__arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 var(--nek-carousel-arrow-size) !important;
    width: var(--nek-carousel-arrow-size) !important;
    height: var(--nek-carousel-arrow-size) !important;
    min-width: var(--nek-carousel-arrow-size) !important;
    min-height: var(--nek-carousel-arrow-size) !important;
    max-width: var(--nek-carousel-arrow-size) !important;
    max-height: var(--nek-carousel-arrow-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    color: var(--nek-carousel-arrow-color) !important;
    background:
        var(--nek-carousel-arrow-bg) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.nek-section-header__extra
button.nek-product-carousel__arrow:hover,
.nek-section-header__extra
button.nek-product-carousel__arrow:focus-visible {
    color:
        var(
            --nek-carousel-arrow-hover-color
        ) !important;
    background:
        var(
            --nek-carousel-arrow-hover-bg
        ) !important;
}

.nek-section-header__extra
.nek-product-carousel__arrow svg,
.nek-section-header__extra
.nek-product-carousel__arrow i {
    display: block !important;
    flex: 0 0 auto !important;
    width: var(--nek-carousel-arrow-icon) !important;
    height: var(--nek-carousel-arrow-icon) !important;
    min-width: var(--nek-carousel-arrow-icon) !important;
    min-height: var(--nek-carousel-arrow-icon) !important;
    font-size: var(--nek-carousel-arrow-icon) !important;
    line-height: 1 !important;
    color: currentColor !important;
    fill: currentColor !important;
}

.nek-section-header__extra
.nek-product-carousel__arrow svg * {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor;
}

.nek-section-header__extra
.nek-product-carousel__arrow::before,
.nek-section-header__extra
.nek-product-carousel__arrow::after {
    content: none !important;
    display: none !important;
}

.nek-product-carousel-section
.nek-section-header,
.nek-product-carousel-section
.nek-section-header__content {
    min-width: 0;
}

.nek-product-carousel-section
.nek-section-header__actions {
    position: relative;
    z-index: 3;
    min-width: max-content;
}