/*
 * Page: Secondary Full-Width Native Slider C
 * Version: 1.3.20260712
 * Target: .slider-dak-step-c
 *
 * Features:
 * - No card appearance styles
 * - Desktop shows about 3.5 items by default
 * - Native horizontal scrolling
 * - Glass arrows
 * - Edge fade masks
 * - Hides arrows and centers items when scrolling is unnecessary
 */

.dak-step-c-slider-shell {
    --dak-step-c-gap: 18px;
    --dak-step-c-bg: #f5f5f8;
    --dak-step-c-side-padding: 5vw;

    position: relative;

    width: 100vw;
    max-width: none;

    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);

    overflow: hidden;

    background: var(--dak-step-c-bg);

    isolation: isolate;
}

/* Neutralize the original Flatsome row layout. */
.dak-step-c-slider-shell .slider-dak-step-c {
    position: relative;

    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding:
        24px
        var(--dak-step-c-side-padding)
        30px !important;

    gap: var(--dak-step-c-gap);

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

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--dak-step-c-side-padding);

    overscroll-behavior-x: contain;

    scrollbar-width: none;

    cursor: grab;

    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;

    box-sizing: border-box;
}

.dak-step-c-slider-shell
.slider-dak-step-c:active,
.dak-step-c-slider-shell
.slider-dak-step-c.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}

.dak-step-c-slider-shell
.slider-dak-step-c::-webkit-scrollbar {
    display: none;

    width: 0;
    height: 0;
}

.dak-step-c-slider-shell
.slider-dak-step-c::before,
.dak-step-c-slider-shell
.slider-dak-step-c::after {
    display: none !important;

    content: none !important;
}

/*
 * Desktop:
 * 90vw usable width with one gap.
 * This produces 2 visible items.
 */
.dak-step-c-slider-shell
.slider-dak-step-c
> .item {
    position: relative !important;
    left: auto !important;

    display: block !important;
    float: none !important;

    flex:
        0
        0
        calc((90vw - 45px) / 3.5) !important;

    width:
        calc((90vw - 45px) / 3.5) !important;

    min-width: 0 !important;
    max-width: none !important;

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

    opacity: 1 !important;

    transform: none !important;

    scroll-snap-align: center;
    scroll-snap-stop: always;

    box-sizing: border-box;
}

/*
 * No card styles are added here.
 * Existing .col-inner, images and text keep their original appearance.
 */


/* Preserve the exact image ratio configured in Flatsome UX Builder. */
.dak-step-c-slider-shell
.slider-dak-step-c
.img {
    width: 100% !important;
    max-width: 100% !important;
}

.dak-step-c-slider-shell
.slider-dak-step-c
.img-inner.dak-step-c-ux-ratio {
    position: relative !important;

    width: 100% !important;
    height: 0 !important;

    padding-top:
        var(--dak-step-c-ux-ratio) !important;

    overflow: hidden;
}

.dak-step-c-slider-shell
.slider-dak-step-c
.img-inner.dak-step-c-ux-ratio
> img {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    object-fit:
        var(--dak-step-c-object-fit, cover) !important;

    object-position:
        var(
            --dak-step-c-object-position,
            center center
        ) !important;

    transform: none !important;
}

/* Images without a UX height setting keep their natural ratio. */
.dak-step-c-slider-shell
.slider-dak-step-c
.img-inner.dak-step-c-natural-ratio {
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    padding-top: 0 !important;
}

.dak-step-c-slider-shell
.slider-dak-step-c
.img-inner.dak-step-c-natural-ratio
> img {
    position: static !important;
    inset: auto !important;

    display: block;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    object-fit: contain !important;

    transform: none !important;
}

/* Edge fade masks. */
.dak-step-c-slider-shell::before,
.dak-step-c-slider-shell::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;

    width: clamp(48px, 6vw, 120px);

    pointer-events: none !important;
}

.dak-step-c-slider-shell::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            var(--dak-step-c-bg) 0%,
            rgba(245, 245, 248, 0.94) 25%,
            rgba(245, 245, 248, 0.56) 60%,
            rgba(245, 245, 248, 0) 100%
        );
}

.dak-step-c-slider-shell::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            var(--dak-step-c-bg) 0%,
            rgba(245, 245, 248, 0.94) 25%,
            rgba(245, 245, 248, 0.56) 60%,
            rgba(245, 245, 248, 0) 100%
        );
}

/* Glass navigation arrows. */
.dak-step-c-nav {
    position: absolute !important;
    top: 50% !important;
    z-index: 30 !important;

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

    width: 54px !important;
    height: 54px !important;

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

    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.70) !important;
    color: #151515 !important;

    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.15) !important;

    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
    touch-action: manipulation;

    cursor: pointer !important;

    transform: translateY(-50%) !important;

    transition:
        background-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.dak-step-c-nav--prev {
    left: clamp(10px, 2vw, 32px) !important;
}

.dak-step-c-nav--next {
    right: clamp(10px, 2vw, 32px) !important;
}

.dak-step-c-nav:hover,
.dak-step-c-nav:focus-visible {
    background: rgba(255, 255, 255, 0.96) !important;

    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.21) !important;

    transform:
        translateY(-50%)
        scale(1.04) !important;
}

.dak-step-c-nav:active {
    transform:
        translateY(-50%)
        scale(0.96) !important;
}

.dak-step-c-nav svg {
    display: block;

    width: 22px;
    height: 22px;

    pointer-events: none;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Remove possible Flickity remnants. */
.dak-step-c-slider-shell .flickity-viewport,
.dak-step-c-slider-shell .flickity-slider {
    position: static !important;

    width: auto !important;
    height: auto !important;

    overflow: visible !important;

    transform: none !important;
}

.dak-step-c-slider-shell .flickity-button,
.dak-step-c-slider-shell .flickity-page-dots {
    display: none !important;
}

/* No overflow: center everything and hide controls. */
.dak-step-c-slider-shell.is-static
.slider-dak-step-c {
    justify-content: center;

    overflow-x: hidden !important;

    scroll-snap-type: none;
    scroll-padding-inline: 0;

    cursor: default;
}

.dak-step-c-slider-shell.is-static
.slider-dak-step-c:active,
.dak-step-c-slider-shell.is-static
.slider-dak-step-c.is-dragging {
    cursor: default;
    user-select: auto;
}

.dak-step-c-slider-shell.is-static
.dak-step-c-nav {
    display: none !important;
}

.dak-step-c-slider-shell.is-static::before,
.dak-step-c-slider-shell.is-static::after {
    display: none !important;
}

/* Tablet: about 2.5 items. */
@media (max-width: 849px) {
    .dak-step-c-slider-shell {
        --dak-step-c-gap: 16px;
        --dak-step-c-side-padding: 5vw;
    }

    .dak-step-c-slider-shell
    .slider-dak-step-c
    > .item {
        flex:
            0
            0
            calc((90vw - 24px) / 2.5) !important;

        width:
            calc((90vw - 24px) / 2.5) !important;
    }

    .dak-step-c-slider-shell::before,
    .dak-step-c-slider-shell::after {
        width: clamp(38px, 6vw, 76px);
    }

    .dak-step-c-nav {
        width: 48px !important;
        height: 48px !important;
    }

    .dak-step-c-nav svg {
        width: 20px;
        height: 20px;
    }
}

/* Mobile: about 1.5 items. */
@media (max-width: 549px) {
    .dak-step-c-slider-shell {
        --dak-step-c-gap: 12px;
        --dak-step-c-side-padding: 18px;
    }

    .dak-step-c-slider-shell
    .slider-dak-step-c {
        padding-top: 18px !important;
        padding-bottom: 24px !important;
    }

    .dak-step-c-slider-shell
    .slider-dak-step-c
    > .item {
        flex:
            0
            0
            calc((100vw - 42px) / 1.5) !important;

        width:
            calc((100vw - 42px) / 1.5) !important;
    }

    .dak-step-c-slider-shell::before,
    .dak-step-c-slider-shell::after {
        width: 26px;
    }

    .dak-step-c-nav {
        width: 42px !important;
        height: 42px !important;
    }

    .dak-step-c-nav--prev {
        left: 6px !important;
    }

    .dak-step-c-nav--next {
        right: 6px !important;
    }

    .dak-step-c-nav svg {
        width: 19px;
        height: 19px;
    }
}


/* Desktop drag protection: prevent native image/link dragging. */
.dak-step-c-slider-shell
.slider-dak-step-c
img,
.dak-step-c-slider-shell
.slider-dak-step-c
a {
    -webkit-user-drag: none;
}

.dak-step-c-slider-shell
.slider-dak-step-c
img {
    pointer-events: none;
}

.dak-step-c-slider-shell
.slider-dak-step-c.is-dragging,
.dak-step-c-slider-shell
.slider-dak-step-c.is-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}


/*
 * Desktop mouse dragging.
 * Disable snap only while the mouse is being dragged,
 * then restore snap after release.
 */
.dak-step-c-slider-shell
.slider-dak-step-c.is-mouse-dragging {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;

    cursor: grabbing !important;
    user-select: none !important;
}

.dak-step-c-slider-shell
.slider-dak-step-c.is-mouse-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

.dak-step-c-slider-shell
.slider-dak-step-c
img,
.dak-step-c-slider-shell
.slider-dak-step-c
a {
    -webkit-user-drag: none;
}

.dak-step-c-slider-shell
.slider-dak-step-c
img {
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .dak-step-c-slider-shell
    .slider-dak-step-c {
        scroll-behavior: auto;
    }

    .dak-step-c-nav {
        transition: none !important;
    }
}

/*
 * Page: Secondary Full-Width Native Slider
 * Version: 1.0
 * Target: .slider-dak-step-b
 *
 * Features:
 * - No card appearance styles
 * - Desktop shows 6 items by default
 * - Native horizontal scrolling
 * - Glass arrows
 * - Edge fade masks
 * - Hides arrows and centers items when scrolling is unnecessary
 */

.dak-step-b-slider-shell {
    --dak-step-b-gap: 18px;
    --dak-step-b-bg: #f5f5f8;
    --dak-step-b-side-padding: 5vw;

    position: relative;

    width: 100vw;
    max-width: none;

    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);

    overflow: hidden;

    background: var(--dak-step-b-bg);

    isolation: isolate;
}

/* Neutralize the original Flatsome row layout. */
.dak-step-b-slider-shell .slider-dak-step-b {
    position: relative;

    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding:
        24px
        var(--dak-step-b-side-padding)
        30px !important;

    gap: var(--dak-step-b-gap);

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

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--dak-step-b-side-padding);

    overscroll-behavior-x: contain;

    scrollbar-width: none;

    cursor: grab;

    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;

    box-sizing: border-box;
}

.dak-step-b-slider-shell
.slider-dak-step-b:active,
.dak-step-b-slider-shell
.slider-dak-step-b.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}

.dak-step-b-slider-shell
.slider-dak-step-b::-webkit-scrollbar {
    display: none;

    width: 0;
    height: 0;
}

.dak-step-b-slider-shell
.slider-dak-step-b::before,
.dak-step-b-slider-shell
.slider-dak-step-b::after {
    display: none !important;

    content: none !important;
}

/*
 * Desktop:
 * 90vw usable width, 5 gaps at 18px.
 * This produces 6 visible items.
 */
.dak-step-b-slider-shell
.slider-dak-step-b
> .item {
    position: relative !important;
    left: auto !important;

    display: block !important;
    float: none !important;

    flex:
        0
        0
        calc((90vw - 90px) / 6) !important;

    width:
        calc((90vw - 90px) / 6) !important;

    min-width: 0 !important;
    max-width: none !important;

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

    opacity: 1 !important;

    transform: none !important;

    scroll-snap-align: center;
    scroll-snap-stop: always;

    box-sizing: border-box;
}

/*
 * No card styles are added here.
 * Existing .col-inner, images and text keep their original appearance.
 */

/* Edge fade masks. */
.dak-step-b-slider-shell::before,
.dak-step-b-slider-shell::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;

    width: clamp(48px, 6vw, 120px);

    pointer-events: none !important;
}

.dak-step-b-slider-shell::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            var(--dak-step-b-bg) 0%,
            rgba(245, 245, 248, 0.94) 25%,
            rgba(245, 245, 248, 0.56) 60%,
            rgba(245, 245, 248, 0) 100%
        );
}

.dak-step-b-slider-shell::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            var(--dak-step-b-bg) 0%,
            rgba(245, 245, 248, 0.94) 25%,
            rgba(245, 245, 248, 0.56) 60%,
            rgba(245, 245, 248, 0) 100%
        );
}

/* Glass navigation arrows. */
.dak-step-b-nav {
    position: absolute !important;
    top: 50% !important;
    z-index: 30 !important;

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

    width: 54px !important;
    height: 54px !important;

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

    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.70) !important;
    color: #151515 !important;

    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.15) !important;

    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
    touch-action: manipulation;

    cursor: pointer !important;

    transform: translateY(-50%) !important;

    transition:
        background-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.dak-step-b-nav--prev {
    left: clamp(10px, 2vw, 32px) !important;
}

.dak-step-b-nav--next {
    right: clamp(10px, 2vw, 32px) !important;
}

.dak-step-b-nav:hover,
.dak-step-b-nav:focus-visible {
    background: rgba(255, 255, 255, 0.96) !important;

    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.21) !important;

    transform:
        translateY(-50%)
        scale(1.04) !important;
}

.dak-step-b-nav:active {
    transform:
        translateY(-50%)
        scale(0.96) !important;
}

.dak-step-b-nav svg {
    display: block;

    width: 22px;
    height: 22px;

    pointer-events: none;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Remove possible Flickity remnants. */
.dak-step-b-slider-shell .flickity-viewport,
.dak-step-b-slider-shell .flickity-slider {
    position: static !important;

    width: auto !important;
    height: auto !important;

    overflow: visible !important;

    transform: none !important;
}

.dak-step-b-slider-shell .flickity-button,
.dak-step-b-slider-shell .flickity-page-dots {
    display: none !important;
}

/* No overflow: center everything and hide controls. */
.dak-step-b-slider-shell.is-static
.slider-dak-step-b {
    justify-content: center;

    overflow-x: hidden !important;

    scroll-snap-type: none;
    scroll-padding-inline: 0;

    cursor: default;
}

.dak-step-b-slider-shell.is-static
.slider-dak-step-b:active,
.dak-step-b-slider-shell.is-static
.slider-dak-step-b.is-dragging {
    cursor: default;
    user-select: auto;
}

.dak-step-b-slider-shell.is-static
.dak-step-b-nav {
    display: none !important;
}

.dak-step-b-slider-shell.is-static::before,
.dak-step-b-slider-shell.is-static::after {
    display: none !important;
}

/* Tablet: about 3.5 items. */
@media (max-width: 849px) {
    .dak-step-b-slider-shell {
        --dak-step-b-gap: 16px;
        --dak-step-b-side-padding: 5vw;
    }

    .dak-step-b-slider-shell
    .slider-dak-step-b
    > .item {
        flex:
            0
            0
            calc((90vw - 40px) / 3.5) !important;

        width:
            calc((90vw - 40px) / 3.5) !important;
    }

    .dak-step-b-slider-shell::before,
    .dak-step-b-slider-shell::after {
        width: clamp(38px, 6vw, 76px);
    }

    .dak-step-b-nav {
        width: 48px !important;
        height: 48px !important;
    }

    .dak-step-b-nav svg {
        width: 20px;
        height: 20px;
    }
}

/* Mobile: about 2.5 items. */
@media (max-width: 549px) {
    .dak-step-b-slider-shell {
        --dak-step-b-gap: 12px;
        --dak-step-b-side-padding: 18px;
    }

    .dak-step-b-slider-shell
    .slider-dak-step-b {
        padding-top: 18px !important;
        padding-bottom: 24px !important;
    }

    .dak-step-b-slider-shell
    .slider-dak-step-b
    > .item {
        flex:
            0
            0
            calc((100vw - 60px) / 2.5) !important;

        width:
            calc((100vw - 60px) / 2.5) !important;
    }

    .dak-step-b-slider-shell::before,
    .dak-step-b-slider-shell::after {
        width: 26px;
    }

    .dak-step-b-nav {
        width: 42px !important;
        height: 42px !important;
    }

    .dak-step-b-nav--prev {
        left: 6px !important;
    }

    .dak-step-b-nav--next {
        right: 6px !important;
    }

    .dak-step-b-nav svg {
        width: 19px;
        height: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dak-step-b-slider-shell
    .slider-dak-step-b {
        scroll-behavior: auto;
    }

    .dak-step-b-nav {
        transition: none !important;
    }
}

/*
 * Hover Image Swap Cards
 * Page: Product Cards
 * Default: first image
 * Desktop hover: second image
 * Mobile: first image only
 */

.hover-img-op {
    --hover-card-radius: 20px;
}

/* 整张卡片 */
.hover-img-op > .col > .col-inner {
    position: relative;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;

    overflow: hidden !important;

    border-radius: var(--hover-card-radius) !important;

    /*
     * 强制按照整张卡片圆角裁剪，
     * 避免 transform、图片链接层突破 overflow。
     */
    clip-path: inset(
        0 round var(--hover-card-radius)
    );

    isolation: isolate;
}

/* 标题固定在第一行 */
.hover-img-op > .col > .col-inner > .text {
    position: relative;
    z-index: 5;

    grid-column: 1;
    grid-row: 1;
}

/* 所有图片放在同一个 Grid 区域 */
.hover-img-op > .col > .col-inner > .img {
    position: relative !important;

    grid-column: 1 !important;
    grid-row: 2 !important;

    align-self: stretch;

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

    /*
     * 删除底部 margin，让图片贴住卡片底部，
     * 由整张卡片统一裁剪圆角。
     */
    margin: 20px 0 0 !important;

    opacity: 1;
    visibility: visible;

    transform: translate3d(0, 0, 0) scale(1);

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: opacity, transform;
}

/* 默认第一张图位于底层 */
.hover-img-op > .col > .col-inner > .img {
    z-index: 1;
}

/*
 * 第二张及后面的图片：
 * 使用兄弟选择器，不再依赖 .text 的具体结构。
 */
.hover-img-op > .col > .col-inner > .img ~ .img {
    z-index: 2;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    transform: translate3d(0, 0, 0) scale(1.025);
}

/* 图片内部容器 */
.hover-img-op > .col > .col-inner > .img .img-inner {
    width: 100%;
    height: 100%;

    margin: 0 !important;

    overflow: hidden !important;

    border-radius:
        0
        0
        var(--hover-card-radius)
        var(--hover-card-radius) !important;
}

/* 图片链接也要参与裁剪 */
.hover-img-op > .col > .col-inner > .img .img-inner > a {
    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius:
        0
        0
        var(--hover-card-radius)
        var(--hover-card-radius) !important;
}

/* 实际图片 */
.hover-img-op > .col > .col-inner > .img img {
    display: block;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    margin: 0 !important;

    object-fit: cover;
    object-position: center;

    border-radius:
        0
        0
        var(--hover-card-radius)
        var(--hover-card-radius) !important;

    transition:
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 电脑端 Hover 显示第二张图 */
@media (hover: hover) and (pointer: fine) {
    .hover-img-op
    > .col
    > .col-inner:hover
    > .img
    ~ .img {
        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;

        transform: translate3d(0, 0, 0) scale(1);
    }

    .hover-img-op
    > .col
    > .col-inner:hover
    > .img
    ~ .img
    img {
        transform: scale(1.015);
    }
}

/* 手机和平板：只显示第一张图 */
@media (hover: none), (pointer: coarse) {
    .hover-img-op > .col > .col-inner > .img {
        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;
    }

    .hover-img-op
    > .col
    > .col-inner
    > .img
    ~ .img {
        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        transform: none !important;
    }
}

/* 手机端仍保持整张卡片 20px 圆角 */
@media (max-width: 549px) {
    .hover-img-op {
        --hover-card-radius: 20px;
    }

    .hover-img-op > .col > .col-inner {
        overflow: hidden !important;

        border-radius: var(--hover-card-radius) !important;

        clip-path: inset(
            0 round var(--hover-card-radius)
        );
    }

    .hover-img-op > .col > .col-inner > .img {
        margin-bottom: 0 !important;
    }

    .hover-img-op > .col > .col-inner > .img .img-inner,
    .hover-img-op > .col > .col-inner > .img .img-inner > a,
    .hover-img-op > .col > .col-inner > .img img {
        overflow: hidden !important;

        border-radius:
            0
            0
            var(--hover-card-radius)
            var(--hover-card-radius) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hover-img-op > .col > .col-inner > .img,
    .hover-img-op > .col > .col-inner > .img img {
        transition: none !important;
    }
}

/*
 * Foldable Products Accordion
 * Version: 7.0
 * Encoding-safe build with ASCII comments only.
 */

.foldable-products {
    --dak-foldable-primary: #0d0b52;
    --dak-foldable-light: #f9f9f9;
    --dak-foldable-border: rgba(13, 11, 82, 0.10);
    --dak-foldable-shadow: 0 18px 48px rgba(13, 11, 82, 0.07);

    overflow-anchor: none;
}

.foldable-products .section-content,
.foldable-products .section-content > .row,
.foldable-products .dak-foldable-card {
    overflow-anchor: none;
}

.foldable-products .section-content > .row {
    margin-bottom: 16px;
}

.foldable-products .section-content > .row:last-child {
    margin-bottom: 0;
}

.foldable-products .section-content > .row > .col > .col-inner,
.foldable-products .dak-foldable-card {
    position: relative;
    overflow: hidden;

    border: 1px solid var(--dak-foldable-border);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: none;

    transition:
        border-color 0.28s ease,
        box-shadow 0.32s ease;
}

.foldable-products .dak-foldable-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    grid-template-rows: auto auto;
    column-gap: 24px;
    align-items: stretch;
    cursor: pointer;
}

.foldable-products .dak-foldable-item.is-open > .col > .dak-foldable-card {
    border-color: rgba(13, 11, 82, 0.15);
    box-shadow: var(--dak-foldable-shadow);
}

.foldable-products .dak-foldable-item:not(.is-open) > .col > .dak-foldable-card:hover {
    border-color: rgba(13, 11, 82, 0.22);
}

.foldable-products .dak-foldable-header {
    grid-column: 1;
    grid-row: 1;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 26px;
    align-items: center;

    min-width: 0;
}

.foldable-products .dak-foldable-item.is-open .dak-foldable-header {
    grid-template-columns: minmax(0, 1fr);
}

.foldable-products .dak-foldable-title {
    min-width: 0;
    margin: 0 !important;
}

.foldable-products .dak-foldable-title h2 {
    margin: 0;
    color: var(--dak-foldable-primary);
    font-size: clamp(20px, 1.65vw, 27px);
    line-height: 1.25;
}

.foldable-products .dak-foldable-thumb {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 100%;
    min-width: 0;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.24s ease,
        visibility 0.24s ease;
}

.foldable-products .dak-foldable-thumb img {
    display: block;

    width: 100%;
    max-width: 320px;
    height: auto !important;

    border-radius: 13px;

    object-fit: contain !important;
    object-position: center;
}

.foldable-products .dak-foldable-item.is-open .dak-foldable-thumb {
    display: none;
}

.foldable-products .dak-foldable-body {
    grid-column: 1;
    grid-row: 2;

    display: none;
    overflow: hidden;

    padding-top: 18px;
}

.foldable-products .dak-foldable-content-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
    gap: 36px;
    align-items: center;

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

.foldable-products .dak-foldable-content-row > .dak-foldable-text-column,
.foldable-products .dak-foldable-content-row > .dak-foldable-image-column {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
    float: none !important;
    padding-top: 0;
    padding-bottom: 0;
}

.foldable-products .dak-foldable-text-column > .col-inner,
.foldable-products .dak-foldable-image-column > .col-inner {
    padding: 0 !important;
}

.foldable-products .dak-foldable-text-column .text:first-child {
    margin-top: 0;
}

.foldable-products .dak-foldable-text-column .text:last-child,
.foldable-products .dak-foldable-text-column .text:last-child > :last-child {
    margin-bottom: 0;
}

.foldable-products .dak-foldable-image-column .img {
    width: 100% !important;
    margin: 0;
}

.foldable-products .dak-foldable-image-column .img-inner {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    overflow: visible;

    border-radius: 18px;
    background: transparent;
}

.foldable-products .dak-foldable-image-column img {
    position: static !important;
    inset: auto !important;

    display: block;

    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;

    border-radius: 18px !important;

    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
}

.foldable-products .dak-foldable-toggle {
    position: static !important;

    grid-column: 2;
    grid-row: 1 / 3;

    align-self: center;
    justify-self: center;

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

    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;

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

    border: 1px solid rgba(13, 11, 82, 0.08);
    border-radius: 50% !important;

    background: var(--dak-foldable-light);
    color: var(--dak-foldable-primary);
    box-shadow: none;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
    transform: rotate(0deg);

    transition:
        background-color 0.28s ease,
        border-color 0.28s ease,
        color 0.28s ease,
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.foldable-products .dak-foldable-toggle i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    color: inherit;
    font-size: inherit;
    line-height: 1;
    font-style: normal;
}

.foldable-products .dak-foldable-item:not(.is-open) .dak-foldable-toggle {
    border-color: rgba(13, 11, 82, 0.08);
    background: #f9f9f9;
    color: #0d0b52;
    transform: rotate(0deg);
}

.foldable-products .dak-foldable-item.is-open .dak-foldable-toggle {
    border-color: #0d0b52;
    background: #0d0b52;
    color: #ffffff;
    transform: rotate(180deg);
}

.foldable-products .dak-foldable-toggle:hover {
    border-color: #0d0b52;
    background: #0d0b52;
    color: #ffffff;
}

.foldable-products .dak-foldable-toggle:focus-visible,
.foldable-products .dak-foldable-card:focus-visible {
    outline: 2px solid #0d0b52;
    outline-offset: 3px;
}

.foldable-products:not(.dak-foldable-ready)
.section-content > .row:not(:first-child)
.text-img-box {
    display: none !important;
}

@media (max-width: 849px) {
    .foldable-products .dak-foldable-card {
        grid-template-columns: minmax(0, 1fr) 42px;
        column-gap: 18px;
    }

    .foldable-products .dak-foldable-header {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
        gap: 18px;
    }

    .foldable-products .dak-foldable-item.is-open .dak-foldable-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .foldable-products .dak-foldable-thumb img {
        max-width: 230px;
    }

    .foldable-products .dak-foldable-content-row {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 0.9fr);
        gap: 26px;
    }

    .foldable-products .dak-foldable-toggle {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        font-size: 20px;
    }
}

@media (max-width: 549px) {
    .foldable-products .section-content > .row {
        margin-bottom: 12px;
    }

    .foldable-products .section-content > .row > .col > .col-inner,
    .foldable-products .dak-foldable-card {
        border-radius: 16px;
    }

    
    .foldable-products .dak-foldable-card {
        grid-template-columns: minmax(0, 1fr) 36px;
        grid-template-rows: auto auto auto;
        column-gap: 10px;
        row-gap: 0;
    }

    
    .foldable-products .dak-foldable-header,
    .foldable-products .dak-foldable-item.is-open .dak-foldable-header {
        display: contents;
    }

    
    .foldable-products .dak-foldable-title {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        min-width: 0;
        padding-right: 4px;
    }

    .foldable-products .dak-foldable-title h2 {
        font-size: 16px;
        line-height: 1.32;
    }

    
    .foldable-products .dak-foldable-toggle,
    .foldable-products .dak-foldable-item.is-open .dak-foldable-toggle,
    .foldable-products .dak-foldable-item:not(.is-open) .dak-foldable-toggle {
        grid-column: 2;
        grid-row: 1;

        align-self: center;
        justify-self: end;

        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;

        font-size: 18px;
    }

    
    .foldable-products .dak-foldable-thumb {
        grid-column: 1 / -1;
        grid-row: 2;

        justify-content: flex-start;
        width: 100%;
        margin-top: 12px;
    }

    .foldable-products .dak-foldable-thumb img {
        width: 100%;
        max-width: none;
        height: auto !important;

        border-radius: 11px;

        object-fit: contain !important;
    }

    
    .foldable-products .dak-foldable-body {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        padding-top: 16px;
    }

    .foldable-products .dak-foldable-content-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        width: 100%;
    }

    .foldable-products .dak-foldable-text-column,
    .foldable-products .dak-foldable-image-column {
        width: 100% !important;
        max-width: 100% !important;
    }

    .foldable-products .dak-foldable-image-column .img-inner,
    .foldable-products .dak-foldable-image-column img {
        border-radius: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .foldable-products *,
    .foldable-products *::before,
    .foldable-products *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}


/* ================= logo无缝滚动================ */
.slider-logo-l,
.slider-logo-r {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
}

.slider-logo-l .swiper-wrapper,
.slider-logo-r .swiper-wrapper {
  transition-timing-function: linear !important;
}

.slider-logo-l .swiper-slide,
.slider-logo-r .swiper-slide {
  width: 200px !important;
  margin: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
}

.slider-logo-l img,
.slider-logo-r img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.slider-logo-l .ux-logo {
    text-align: center !important;
}
.slider-logo-r .ux-logo {
    text-align: center !important;
}
/* ================= 方向差异 ================= */
.slider-logo-l {
  direction: ltr; /* 向左滚（正常方向） */
}

.slider-logo-r {
  direction: rtl; /* 向右滚 */
}

.slider-logo-r .swiper-slide {
  direction: ltr; /* 修正内容方向 */
}


/* ================= Logo 无缝滚动（独立命名空间） ================ */

.auto-logo-slider-outer {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  position: relative;
}

.auto-logo-slider-container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.auto-logo-slider-wrapper {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

.auto-logo-slider-item {
  width: 300px !important;
  margin: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
}

@media only screen and (max-width: 48em) {
    .auto-logo-slider-item {
          width: 120px !important;
          margin: 0 7px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          text-align: center;
    }

}
.auto-logo-slider-item img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.auto-logo-slider-item .ux-logo {
  text-align: center !important;
  width: 100%;
}

/* ================= 方向差异 ================= */

.slider-img-l .auto-logo-slider-wrapper {
  flex-direction: row;
}

.slider-img-r .auto-logo-slider-wrapper {
  flex-direction: row;
}

/* ================= Hover 效果 ================= */

.auto-logo-slider-outer:hover {
  cursor: pointer;
}



/*证书*/

/* ==================== list-3 轮播样式 ==================== */

.list-3 {
    position: relative;
    max-width: 100%; /* 限制最大宽度 */
    margin: 0 auto; /* 居中容器 */
    overflow: hidden; /* 隐藏超出部分 */
}

.list-3 .swiper-wrapper {
    display: flex;
    align-items: center;
    width: 100%; /* 确保wrapper宽度 */
}

.list-3 .swiper-slide {
    flex-shrink: 0; /* 防止幻灯片收缩 */
    width: calc(100% / 5); /* 每个幻灯片占1/5宽度 */
    scale: 1;
    transition: scale 250ms ease-in-out;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden; /* 防止模糊 */
    transform: translateZ(0); /* 启用硬件加速 */
    will-change: transform; /* 优化性能 */
}

.list-3 .swiper-slide.swiper-slide-active {
    scale: 1.25; /* 轻微减少缩放，从1.5改为1.25 */
    z-index: 10;
}

.list-3 .swiper-slide.swiper-slide-prev,
.list-3 .swiper-slide.swiper-slide-next {
    scale: 1.15; /* 轻微减少缩放，从1.3改为1.15 */
    z-index: 5;
    transition-duration: 150ms;
}

.list-3 .swiper-slide.swiper-slide-next + .list-3 .swiper-slide {
    z-index: 2;
}

/* 独立的渐变遮罩类 */
.list-3-gradient-white {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
    z-index: 5;
    pointer-events: none;
}

.list-3-gradient-black {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    z-index: 5;
    pointer-events: none;
}

/* 独立的玻璃遮罩类 */
.list-3-glass-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255), rgba(255, 255, 255, 0));
    z-index: 5;
    pointer-events: none;
}

.list-3-glass-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    z-index: 5;
    pointer-events: none;
}

/* 组合玻璃遮罩类 - 一个类同时显示左右遮罩 */
.list-3-glass {
    position: relative;
}

.list-3-glass::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255), rgba(255, 255, 255, 0));
    z-index: 5;
    pointer-events: none;
}

.list-3-glass::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    z-index: 5;
    pointer-events: none;
}

/* 组合黑色遮罩类 - 一个类同时显示左右黑色遮罩 */
.list-3-dark {
    position: relative;
}

.list-3-dark::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 5;
    pointer-events: none;
}

.list-3-dark::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 5;
    pointer-events: none;
}

/* 透明渐变遮罩类 - 适合位图，让边缘更自然 */
.list-3-fade {
    position: relative;
}

.list-3-fade::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 5;
    pointer-events: none;
}

.list-3-fade::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 5;
    pointer-events: none;
}

.list-3 .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 改为 cover，确保填充整个容器 */
    user-select: none;
    image-rendering: -webkit-optimize-contrast; /* 提高清晰度 */
    image-rendering: crisp-edges;
    backface-visibility: hidden; /* 防止模糊 */
    transform: translateZ(0); /* 启用硬件加速 */
    will-change: transform; /* 优化性能 */
}

/* 响应式高度调整 */
@media (max-width: 768px) {
    .list-3 {
        height: 200px; /* 手机端高度 */
    }
    .list-3 .swiper-slide {
        width: calc(100% / 3); /* 手机端每个幻灯片占1/3宽度 */
    }
    .swiper-button{
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .list-3 {
        height: 400px; /* iPad端高度 */
    }
    .list-3 .swiper-slide {
        width: calc(100% / 5); /* 平板端保持1/5宽度 */
    }
}

@media (min-width: 1025px) {
    .list-3 {
        height: 500px; /* 电脑端高度 */
    }
    .list-3 .swiper-slide {
        width: calc(100% / 5); /* 桌面端保持1/5宽度 */
    }
}



.swiper-button-prev,
.swiper-button-next,
.swiper-button {
    --position: 17%;
    background: #000000b5;
    color: #fff !important;
    height: 3rem;
    width: 3rem;
    border-radius:50%;
 
}
.swiper-button-prev,
.swiper-button.swiper-button-prev {
    left: var(--position);
}
.swiper-button-prev::after,
.swiper-button-next::after,
.swiper-button::after{
    color: #FFF !important; 
    font-size: 12px !important;
}
.swiper-button-next,
.swiper-button.swiper-button-next {
    right: var(--position);
}
.swiper-button-prev:hover ,
.swiper-button-next:hover ,
.swiper-button:hover {
    background-color: #000000;
    color: #fff !important;
}
.swiper-button-prev:hover::after,
.swiper-button-next:hover::after,
.swiper-button:hover::after{
    color: #fff !important;
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: #000;
}

.swiper-pagination {
    bottom: 0px !important;
}