/* ============================================================
 * 产品陈列-7 (productDisplay_7) - 参考 ueeshop ly_products_7
 * (data-type="products" data-mode="mode_7", VitaGlow 产品详情页 Feature Products / Recently Viewed)
 * 所有可配置样式用 CSS 变量驱动(模板 productDisplay_7.html 内联 style 按 data-module-id 定义),
 * 编辑器修改后局部刷新即可生效。
 * 无主图默认图回退与产品列表-1 一致(no_img_v1.svg, 发布态由 IMAGE_FILES 无条件复制)。
 * ============================================================ */

/* ---- 模块根: 背景色全屏, 模块宽度 class 加在内部 .container ---- */
.ly_products_7 {
    background-color: var(--pd7-bg-color, #ffffff);
    display: block;
}

.ly_products_7 a {
    text-decoration: none;
}

.ly_products_7 .container {
    width: 100%;
    box-sizing: border-box;
}

/* 模块宽度 */
.ly_products_7 .container.module_width_full {
    width: 100%;
}

.ly_products_7 .container.module_width_1440 {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
}

.ly_products_7 .container.module_width_global {
    width: var(--deco-module-width, 1440px);
    max-width: 100%;
    margin: 0 auto;
}

/* ---- 内容区: 间距(上/下 px, 左/右 %) ---- */
.ly_products_7 .section {
    box-sizing: border-box;
    padding-top: var(--pd7-pc-padding-top, 50px);
    padding-bottom: var(--pd7-pc-padding-bottom, 110px);
    padding-left: var(--pd7-pc-padding-left, 0%);
    padding-right: var(--pd7-pc-padding-right, 0%);
}

/* ---- 标题: 固定居中(参考站样式), 颜色模块内优先否则全局, 字号分端 ---- */
.ly_products_7 .txt_box {
    text-align: center;
}

.ly_products_7 .txt_box .txt_title {
    margin: 0;
    color: var(--pd7-title-color, #222222);
    font-size: var(--pd7-pc-title-font-size, 36px);
    line-height: 1.3;
}

/* ---- 产品网格: 列数由 CSS 变量驱动(1fr 自动均分, gap 由 grid 处理) ---- */
.ly_products_7 .products_box {
    display: grid;
    grid-template-columns: repeat(var(--pd7-pc-columns, 4), 1fr);
    gap: 30px;
    margin-top: 70px;
}

/* 最近浏览容器无浏览记录时靠 hidden 属性隐藏; [hidden] 只是 UA 样式, 会被上面的 display:grid
   覆盖(作者样式优先于 UA), 故必须显式加 !important, 否则空容器会占出 margin-top 的留白 */
.ly_products_7 .products_box[hidden] {
    display: none !important;
}

.ly_products_7 .products_box .themes_prod {
    text-align: center;
}

/* 产品图 */
.ly_products_7 .products_box .themes_prod .pic_box {
    display: block;
    position: relative;
    overflow: hidden;
}

.ly_products_7 .products_box .themes_prod .pic_box a {
    display: block;
    width: 100%;
}

.ly_products_7 .products_box .themes_prod .pic_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s, opacity 0.4s;
}

/* 产品图比例 */
.ly_products_7 .products_box .themes_prod .pic_box.pic_ratio_1_1 a { aspect-ratio: 1 / 1; }
.ly_products_7 .products_box .themes_prod .pic_box.pic_ratio_4_3 a { aspect-ratio: 4 / 3; }
.ly_products_7 .products_box .themes_prod .pic_box.pic_ratio_2_3 a { aspect-ratio: 2 / 3; }
/* 适应图片: 不加比例, 按原始比例显示 */
.ly_products_7 .products_box .themes_prod .pic_box.pic_ratio_adapt a { aspect-ratio: auto; }
.ly_products_7 .products_box .themes_prod .pic_box.pic_ratio_adapt img {
    height: auto;
    object-fit: contain;
}

/* 无主图回退默认图: 用 contain 完整显示图标, 不被 pic_ratio_* 的 cover 裁掉 */
.ly_products_7 .products_box .themes_prod .pic_box img.pic_default {
    object-fit: contain;
    background: #f7f7f7;
}

/* 图片指向设置 */
.ly_products_7 .products_box.pic_hover_hover_scale .themes_prod .pic_box:hover img {
    transform: scale(1.05);
}
/* 切换第二张图: 第二张图绝对定位叠放, hover 时前后切换。
   当前列表上下文只查主图(selectPublishedProductList 只取 media_type=1 首图), 无第二张图时该效果不生效,
   与参考站一致 —— 参考站该效果同样依赖产品配了第二张图。预留规则, 未来列表带 image2 时模板加一行即可。 */
.ly_products_7 .products_box.pic_hover_switch_second .themes_prod .pic_box img.pic_second {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
}
.ly_products_7 .products_box.pic_hover_switch_second .themes_prod .pic_box:hover img.pic_second {
    opacity: 1;
    z-index: 1;
}
.ly_products_7 .products_box.pic_hover_switch_second .themes_prod .pic_box:hover img.pic_first {
    opacity: 0;
}

/* 产品名: 对齐方式跟随 textAlign 配置(默认居中, 覆盖 .themes_prod 的居中继承) */
.ly_products_7 .products_box .themes_prod .name.text_align_left { text-align: left; }
.ly_products_7 .products_box .themes_prod .name.text_align_center { text-align: center; }
.ly_products_7 .products_box .themes_prod .name.text_align_right { text-align: right; }

/* 产品名: 最多两行省略 */
.ly_products_7 .products_box .themes_prod .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 25px;
    color: inherit;
}

.ly_products_7 .products_box .themes_prod .name a {
    color: inherit;
    font-size: 16px;
    line-height: 1.4;
}

.ly_products_7 .products_box .themes_prod .name h3 {
    margin: 0;
    font-weight: 500;
}


/* ---- 模块级"更多"按钮(文案非空才渲染) ---- */
.ly_products_7 .more_btn {
    display: block;
    text-align: center;
    margin-top: 50px;
}

.ly_products_7 .more_btn a {
    display: inline-block;
    box-sizing: border-box;
    padding: 17px 36px;
    text-align: center;
    font-family: var(--pd7-btn-font, Oswald-Regular);
    color: var(--pd7-btn-text-color, #FFFFFF);
    background-color: var(--pd7-btn-bg-color, #000000);
    border: 1px solid var(--pd7-btn-border-color, #00000000);
    transition: color 0.3s, background-color 0.3s, border-color 0.3s;
    /* 宽高/字号/圆角由模板按 PC/移动端配置输出(width/height 留空为 auto, 由 padding 决定尺寸) */
    width: auto;
    height: auto;
}

.ly_products_7 .more_btn a:hover {
    color: var(--pd7-btn-text-hover-color, #000000);
    background-color: var(--pd7-btn-bg-hover-color, #ffb615);
    border-color: var(--pd7-btn-border-hover-color, #00000000);
}

/* ---- 移动端 ---- */
@media screen and (max-width: 1000px) {
    .ly_products_7 .section {
        padding-top: var(--pd7-mobile-padding-top, 25px);
        padding-bottom: var(--pd7-mobile-padding-bottom, 50px);
        padding-left: var(--pd7-mobile-padding-left, 3%);
        padding-right: var(--pd7-mobile-padding-right, 3%);
    }

    .ly_products_7 .txt_box .txt_title {
        font-size: var(--pd7-mobile-title-font-size, 24px);
    }

    .ly_products_7 .products_box {
        grid-template-columns: repeat(var(--pd7-mobile-columns, 2), 1fr);
        gap: 15px;
        margin-top: 20px;
    }

    .ly_products_7 .products_box .themes_prod .name {
        margin-top: 15px;
    }

    .ly_products_7 .products_box .themes_prod .name a {
        font-size: 14px;
    }

    .ly_products_7 .more_btn {
        margin-top: 25px;
    }
}