.product-image-columns-section {
    --section-mobile-padding: 20px;
    --card-group-padding: 20px;
    --card-group-gap: 10px;
    background-color: rgb(var(--color-background));
}

.product-image-columns-section .page-width {
    overflow: hidden;
}

.product-image-columns--full-width {
    width: 100%;
}

.product-image-columns__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.product-image-columns__heading-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    word-break: normal;
    white-space: nowrap;
    -webkit-box-orient: vertical;
}

.product-image-columns__heading-link {
    display: flex;
    column-gap: 8px;
    align-items: center;
    justify-content: center;
    font-size: var(--font-body-2xl);
    color: rgb(var(--color-text));
}

.product-image-columns__heading-link-text {
    display: inline-flex;
}

@media (max-width: 959px) {
    .product-image-columns__heading-link-text {
        display: none;
    }
}

.product-image-columns__heading-link-icon {
    width: 16px;
    height: 16px;
}

html[dir="rtl"] .product-image-columns__heading-link-icon svg {
    transform: rotate(180deg);
}

@media (min-width: 960px) {
    .product-image-columns__card-group-wrapper {
        inset-inline-start: auto;
        width: auto;
    }

    .product-image-columns__card-group-scroll {
        inset-inline-start: auto;
        width: auto;
        margin: 0 auto;
    }
}

.product-image-columns__card-group {
    display: grid;
    grid-auto-columns: calc(100vw - (var(--section-mobile-padding) * 2 + var(--card-group-gap) + 24px));
    grid-auto-flow: column;
    gap: var(--card-group-gap);
}

@media (max-width: 959px) {
    .product-image-columns__card-group {
        width: max-content;
        margin: 0 var(--card-group-padding);
    }
}

@media (min-width: 960px) {
    .product-image-columns__card-group {
        grid-template-columns: repeat(var(--desktop-columns), 1fr);
        grid-auto-columns: auto;
        grid-auto-flow: row dense;
        gap: 20px;
        padding: 0;
        transform: none;
    }
}

.product-image-columns__card {
    display: block;
    max-width: 700px;
}

.product-image-columns__card-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-columns__card-image img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--card-group-image-aspect-ratio);
    object-fit: cover;
    border-radius: var(--card-group-image-border-radius);
}

.product-image-columns__card-image .empty-image-class {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--color-image-background));
}

/* ============ wrapper 容器 ============ */
.product-image-columns__card-group-wrapper {
    position: relative;
}

/* ============ 移动端样式 ============ */
@media (max-width: 959px) {
    .product-image-columns__card-group-wrapper {
        position: relative;
        inset-inline-start: -10px;
        width: calc(100% + var(--card-group-padding) * 2);
    }

    .product-image-columns__card-group-scroll {
        position: relative;
        inset-inline-start: 0;
        width: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--card-group-padding);
        scrollbar-width: none;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .product-image-columns__card-group>* {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .product-image-columns__arrows {
        display: none !important;
    }

    .product-image-columns__card-group-wrapper[data-show-mobile-arrows="true"][data-mobile-mode="slide"] .product-image-columns__arrows {
        display: flex !important;
        justify-content: space-between;
        position: absolute;
        top: 50%;
        left: var(--card-group-padding);
        right: var(--card-group-padding);
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 10;
    }

    .product-image-columns__card-group-wrapper[data-show-mobile-arrows="true"] .product-image-columns__mobile-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        cursor: pointer;
        pointer-events: auto;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }

    .product-image-columns__card-group-wrapper[data-show-mobile-arrows="true"] .product-image-columns__mobile-arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .product-image-columns__arrow-svg {
        display: inline-flex;
    }

    .product-image-columns__arrow-icon {
        display: none;
    }

    .product-image-columns__card-group-wrapper[data-show-mobile-arrows="true"] .product-image-columns__arrow svg {
        width: 10px;
        height: 10px;
    }

    .product-image-columns__card-group-wrapper[data-show-mobile-arrows="true"] .product-image-columns__arrow--prev svg {
        transform: rotate(180deg);
    }

    .product-image-columns__card-group-wrapper[data-mobile-columns="2"][data-mobile-mode="slide"] .product-image-columns__card-group {
        grid-auto-columns: calc((100vw - var(--section-mobile-padding) * 2 - var(--card-group-padding) * 2 - var(--card-group-gap)) / 2);
    }

    .product-image-columns__card-group-wrapper[data-mobile-mode="stack"] {
        inset-inline-start: 0;
        width: 100%;
    }

    .product-image-columns__card-group-wrapper[data-mobile-mode="stack"] .product-image-columns__card-group-scroll {
        overflow: visible;
    }

    .product-image-columns__card-group-wrapper[data-mobile-mode="stack"] .product-image-columns__card-group {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        margin: 0;
    }

    .product-image-columns__card-group-wrapper[data-mobile-mode="stack"] .product-image-columns__card-group>*,
    .product-image-columns__card-group-wrapper[data-mobile-mode="stack"] .product-image-columns__card {
        width: 100%;
        max-width: none;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }
}

/* ============ PC端滑动模式 ============ */
.product-image-columns__arrows {
    display: none;
}

@media (min-width: 960px) {
    .product-image-columns__arrow-svg {
        display: inline-flex;
    }

    .product-image-columns__arrow-icon {
        display: none;
    }

    .product-image-columns__card-group-wrapper[data-pc-slider="true"] .product-image-columns__card-group-scroll {
        overflow: hidden;
    }

    .product-image-columns__card-group-wrapper[data-pc-slider="true"] .product-image-columns__card-group {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 20px;
        transition: transform 0.3s ease;
    }

    .product-image-columns__card-group-wrapper[data-desktop-columns="1"][data-pc-slider="true"] .product-image-columns__card-group>* {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .product-image-columns__card-group-wrapper[data-desktop-columns="2"][data-pc-slider="true"] .product-image-columns__card-group>* {
        flex: 0 0 calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }

    .product-image-columns__card-group-wrapper[data-desktop-columns="3"][data-pc-slider="true"] .product-image-columns__card-group>* {
        flex: 0 0 calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }

    .product-image-columns__card-group-wrapper[data-desktop-columns="4"][data-pc-slider="true"] .product-image-columns__card-group>* {
        flex: 0 0 calc((100% - 60px) / 4);
        max-width: calc((100% - 60px) / 4);
    }

    .product-image-columns__card-group-wrapper[data-desktop-columns="5"][data-pc-slider="true"] .product-image-columns__card-group>* {
        flex: 0 0 calc((100% - 80px) / 5);
        max-width: calc((100% - 80px) / 5);
    }

    .product-image-columns__card-group-wrapper[data-desktop-columns="6"][data-pc-slider="true"] .product-image-columns__card-group>* {
        flex: 0 0 calc((100% - 100px) / 6);
        max-width: calc((100% - 100px) / 6);
    }

    .product-image-columns__card-group-wrapper[data-pc-slider="true"] .product-image-columns__card {
        max-width: none;
    }

    .product-image-columns__card-group-wrapper[data-pc-slider="true"] .product-image-columns__arrows {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 50%;
        left: 10px;
        right: 10px;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 10;
    }

    .product-image-columns__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        cursor: pointer;
        pointer-events: auto;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .product-image-columns__arrow:hover {
        background: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .product-image-columns__arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .product-image-columns__arrow svg {
        width: 12px;
        height: 12px;
    }

    .product-image-columns__arrow--prev svg {
        transform: rotate(180deg);
    }
}