/*
  产品陈列-12 (productDisplay_12) 公共样式: Recommended 5 列轮播。
  版式固定: 标题(左) + 箭头(右) + 5 卡一屏横向滚动 + 底部圆点。
  实例配置(颜色/字号/间距/填充方式等)由模块模板内联 <style> 以 CSS 变量注入, 这里只放版式。
  js 在模块模板内联(编辑态局部刷新随 script 重建自动重挂); 移动端断点 1000px。
*/

.ly_pd_12 {
    position: relative;
    overflow: hidden;
    background-color: var(--pd12-bg-color, #FFFFFF);
}

.ly_pd_12 .pd12_container {
    box-sizing: border-box;
    margin: 0 auto;
    padding-top: var(--pd12-pc-padding-top, 90px);
    padding-bottom: var(--pd12-pc-padding-bottom, 90px);
    padding-left: var(--pd12-pc-padding-left, 0%);
    padding-right: var(--pd12-pc-padding-right, 0%);
    width: 100%;
}
.ly_pd_12 .pd12_container.module_width_1440 { max-width: 1440px; }
.ly_pd_12 .pd12_container.module_width_global { max-width: var(--deco-module-width, 1440px); }
.ly_pd_12 .pd12_container.module_width_full { max-width: none; }

.ly_pd_12 .pd12_section {
    box-sizing: border-box;
}

/* ==================== 标题区 ==================== */

.ly_pd_12 .pd12_head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.ly_pd_12 .pd12_title {
    margin: 0 0 8px;
    color: var(--pd12-title-color, #1C1C1C);
    font-size: var(--pd12-pc-title-size, 36px);
    font-weight: 600;
    line-height: 1.3;
}

.ly_pd_12 .pd12_content {
    max-width: 720px;
    color: var(--pd12-content-color, #777777);
    font-size: var(--pd12-pc-content-size, 14px);
    line-height: 1.7;
}

.ly_pd_12 .pd12_arrows {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.ly_pd_12 .pd12_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--pd12-arrow-color, #1C1C1C);
    background-color: var(--pd12-arrow-bg-color, #F2F2F2);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    transition: background-color .3s ease, opacity .3s ease;
}

.ly_pd_12 .pd12_arrow:hover {
    opacity: .85;
}

/* ==================== 轮播轨道 ==================== */

.ly_pd_12 .pd12_track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 4 * 18px) / 5);
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.ly_pd_12 .pd12_track::-webkit-scrollbar {
    display: none;
}

.ly_pd_12 .pd12_card {
    scroll-snap-align: start;
    display: block;
    text-decoration: none;
}

.ly_pd_12 .pd12_pic {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.ly_pd_12 .pd12_pic img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: var(--pd12-img-fit, cover);
    object-position: var(--pd12-img-position, center center);
    display: block;
    transition: transform .4s ease;
}

/* 图片指向设置 */
.ly_pd_12 .pd12_pic.pic_hover_hover_scale:hover img {
    transform: scale(1.05);
}
.ly_pd_12 .pd12_pic.pic_hover_switch_second img.pic_second {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
    transition: opacity .35s ease;
}
.ly_pd_12 .pd12_pic.pic_hover_switch_second:hover img.pic_second {
    opacity: 1;
    z-index: 2;
}
.ly_pd_12 .pd12_pic.pic_hover_switch_second:hover img.pic_first {
    opacity: 0.8;
}
.ly_pd_12 .pd12_pic.pic_hover_switch_second:has(img.pic_second):hover img.pic_first {
    opacity: 0;
}

.ly_pd_12 .pd12_name {
    margin: 0;
    color: var(--pd12-name-color, #1C1C1C);
    font-size: var(--pd12-pc-name-size, 15px);
    font-weight: 600;
    line-height: 1.4;
    min-height: calc(var(--pd12-pc-name-size, 15px) * 1.4 * 2);   /* 固定2行高度, 短名称也占满, 保证按钮对齐 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.ly_pd_12 .pd12_number {
    margin: 0 0 8px;
    min-height: 18px;   /* 固定1行高度(13px*1.4), sku空也占位, 保证按钮对齐 */
    color: var(--pd12-number-color, #1C1C1C);
    font-size: var(--pd12-pc-number-size, 13px);
    line-height: 1.4;
    opacity: .75;
}

/* ==================== 圆点 ==================== */

.ly_pd_12 .pd12_dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
}

.ly_pd_12 .pd12_dots a {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--pd12-dots-color, #D8D8D8);
    transition: background-color .3s ease, transform .3s ease;
}

.ly_pd_12 .pd12_dots a.active {
    background-color: var(--pd12-dots-active-color, #1B6CEB);
    transform: scale(1.2);
}

/* 翻页样式为线条时的指示器形态 */
.ly_pd_12 .pd12_dots.pager_lines { gap: 8px; }

.ly_pd_12 .pd12_dots.pager_lines a {
    width: 22px;
    height: 4px;
    border-radius: 2px;
    transform: none;
}

.ly_pd_12 .pd12_dots.pager_lines a.active { transform: none; }

/* ==================== 移动端 ==================== */

@media screen and (max-width: 1000px) {
    .ly_pd_12 .pd12_container {
        padding-top: var(--pd12-mobile-padding-top, 40px);
        padding-bottom: var(--pd12-mobile-padding-bottom, 40px);
        padding-left: var(--pd12-mobile-padding-left, 4%);
        padding-right: var(--pd12-mobile-padding-right, 4%);
        max-width: none;
    }

    .ly_pd_12 .pd12_head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 18px;
    }

    .ly_pd_12 .pd12_title {
        margin-bottom: 6px;
        font-size: var(--pd12-mobile-title-size, 22px);
    }

    .ly_pd_12 .pd12_content {
        font-size: var(--pd12-mobile-content-size, 13px);
    }

    .ly_pd_12 .pd12_track {
        grid-auto-columns: calc(100% - 56px);
        gap: 12px;
    }

    .ly_pd_12 .pd12_name {
        font-size: var(--pd12-mobile-name-size, 14px);
    }

    .ly_pd_12 .pd12_dots {
        margin-top: 16px;
    }
}

    .ly_pd_12 .pd12_number {
        font-size: var(--pd12-mobile-number-size, 12px);
    }