/* ============================================================
 * 商城 PC 首页装修 —— 自包含现代化主题层（v2 / tpl2 命名空间）
 * ============================================================
 * 设计原则（消除未来隐患）：
 *   1. 所有视觉类名使用 tpl2- 命名空间，与老 template.css 的视觉类
 *      （.floor-content / .img-groups5 / .index-sale 等）完全解耦，
 *      老 CSS 的增删改不会影响本主题，本主题也不污染老页面。
 *   2. 装修器契约类名（.drop-item / .SZY-TPL-SELECTOR / .operateEdit /
 *      .SZY-FLOOR-NAME / .SZY-SHORT-NAME / .add-cart / .selector）保持原样，
 *      由 blade 继续输出，确保拖拽/编辑/楼层定位/加购零破坏。
 *   3. 颜色统一走 CSS 变量，优先引用后台「整站改色」注入的
 *      --site-main-color / --site-accent-color（见 base.blade.php 的
 *      site_color_vars()），改色即改配置，本文件零改动即联动。
 *   4. 动效只用 transform/opacity，避免触发重排。
 * ============================================================ */

:root {
    --tpl2-brand: var(--site-main-color, #e1251b);
    --tpl2-brand-dark: color-mix(in srgb, var(--tpl2-brand) 82%, #000);
    --tpl2-brand-light: color-mix(in srgb, var(--tpl2-brand) 8%, #fff);
    --tpl2-accent: var(--site-accent-color, #ff6a00);
    --tpl2-price: var(--site-main-color, #e1251b);
    --tpl2-nav: var(--site-nav-color, var(--tpl2-brand-dark));
    --tpl2-gold: #f7b500;   /* 金币黄（HOT 角标 / 高亮） */

    --tpl2-text: #222;
    --tpl2-text-2: #666;
    --tpl2-text-3: #999;
    --tpl2-line: #eee;
    --tpl2-line-2: #f0f0f0;
    --tpl2-bg: #f5f5f5;

    --tpl2-radius: 8px;
    --tpl2-radius-lg: 12px;
    --tpl2-shadow: 0 2px 12px rgba(0,0,0,.06);
    --tpl2-shadow-hover: 0 6px 20px rgba(0,0,0,.12);
    --tpl2-transition: .25s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
 * 通用容器
 * ============================================================ */
.tpl2-wrap { width: 1210px; margin: 0 auto; }
.tpl2-section { margin-top: 20px; }

/* 统一模块标题（对应样品 .sec-head）：bar + 大标题 + 英文副标题 + more */
.tpl2-sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.tpl2-sec-head .t { display: flex; align-items: center; gap: 12px; }
.tpl2-sec-head .bar { width: 4px; height: 22px; background: var(--tpl2-brand); border-radius: 2px; }
.tpl2-sec-head h2 { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.tpl2-sec-head .en { font-size: 12px; color: #ccc; letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }
.tpl2-sec-head .more { font-size: 13px; color: var(--tpl2-text-3); }
.tpl2-sec-head .more:hover { color: var(--tpl2-brand); }

/* ============================================================
 * 秒杀模块（对应样品 .seckill）：左渐变标题 + 倒计时 + 横向商品 + 原价删除线
 * ============================================================ */
.tpl2-seckill {
    background: #fff; border: 1px solid var(--tpl2-line); border-radius: 10px;
    overflow: hidden; display: flex; align-items: stretch;
}
.tpl2-seckill-l {
    width: 230px; background: linear-gradient(160deg, var(--tpl2-brand), color-mix(in srgb, var(--tpl2-brand) 60%, #ff4d3a));
    color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px; flex-shrink: 0;
}
.tpl2-seckill-l .en { font-size: 13px; letter-spacing: 3px; opacity: .85; }
.tpl2-seckill-l h3 { font-size: 30px; font-weight: 900; margin: 6px 0 10px; letter-spacing: 2px; }
.tpl2-seckill-l .clock { font-size: 12px; opacity: .9; margin-bottom: 12px; }
.tpl2-seckill-l .timer { display: flex; gap: 6px; align-items: center; }
.tpl2-seckill-l .timer b {
    width: 26px; height: 26px; background: rgba(0,0,0,.25); border-radius: 4px;
    display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700;
}
.tpl2-seckill-l .timer i { font-style: normal; line-height: 26px; }
.tpl2-seckill-goods { flex: 1; display: flex; padding: 14px 0; }
.tpl2-seckill-goods .g {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 10px;
    border-right: 1px dashed var(--tpl2-line-2); cursor: pointer; transition: transform var(--tpl2-transition);
}
.tpl2-seckill-goods .g:last-child { border-right: 0; }
.tpl2-seckill-goods .g:hover { transform: translateY(-3px); }
.tpl2-seckill-goods .g .img {
    width: 120px; height: 120px; border-radius: 10px; overflow: hidden; background: var(--tpl2-line-2);
    display: flex; align-items: center; justify-content: center;
}
.tpl2-seckill-goods .g .img img { width: 100%; height: 100%; object-fit: cover; }
.tpl2-seckill-goods .g .nm {
    font-size: 13px; color: var(--tpl2-text-2); width: 110px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpl2-seckill-goods .g .p { font-size: 16px; color: var(--tpl2-price); font-weight: 800; }
.tpl2-seckill-goods .g .p small { font-size: 12px; }
.tpl2-seckill-goods .g .old { font-size: 12px; color: #bbb; text-decoration: line-through; }

/* 空数据占位兜底（装修预览消除「丑态外露」） */
.tpl2-empty {
    border-radius: var(--tpl2-radius);
    background: linear-gradient(135deg, #f6f7f9, #eef0f3) !important;
    color: var(--tpl2-text-3) !important;
    border: 1px dashed #d8dce3 !important;
}

/* ============================================================
 * 广告：焦点图轮播（shop_focus / topic_focus）
 * ============================================================ */
.tpl2-banner { position: relative; border-radius: var(--tpl2-radius-lg); overflow: hidden; box-shadow: var(--tpl2-shadow); }
.tpl2-banner .slides { position: relative; width: 100%; height: 100%; }
.tpl2-banner .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.tpl2-banner .slide.active { opacity: 1; }
.tpl2-banner .slide a { display: block; width: 100%; height: 100%; background-size: cover !important; background-position: center center !important; }
.tpl2-banner .dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.tpl2-banner .dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: .3s; }
.tpl2-banner .dots span.active { width: 24px; border-radius: 5px; background: #fff; }
.tpl2-banner .prev, .tpl2-banner .next {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 40px; height: 60px; background: rgba(0,0,0,.15); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer;
    opacity: 0; transition: .3s; border-radius: 6px;
}
.tpl2-banner:hover .prev, .tpl2-banner:hover .next { opacity: 1; }
.tpl2-banner .prev { left: 12px; }
.tpl2-banner .next { right: 12px; }

/* ============================================================
 * 广告组（ad_groups / ad_one_column / ad_five_column / ad_six_column）
 * ============================================================ */
.tpl2-ad-grid { display: grid; gap: 12px; }
.tpl2-ad-grid.tpl2-ad-1 { grid-template-columns: 1fr; }
.tpl2-ad-grid.tpl2-ad-5 { grid-template-columns: repeat(5, 1fr); }
.tpl2-ad-grid.tpl2-ad-6 { grid-template-columns: repeat(6, 1fr); }
.tpl2-ad-grid.tpl2-ad-groups { grid-template-columns: 400px 1fr; }
.tpl2-ad-grid .tpl2-ad { border-radius: var(--tpl2-radius); overflow: hidden; position: relative; }
.tpl2-ad-grid .tpl2-ad img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tpl2-transition); }
.tpl2-ad-grid .tpl2-ad:hover img { transform: scale(1.04); }
.tpl2-ad-groups-right { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tpl2-ad-groups-left { display: flex; flex-direction: column; gap: 12px; }

/* ============================================================
 * 商品卡片（楼层/促销/专题通用）
 * ============================================================ */
.tpl2-goods-card {
    position: relative;
    border-radius: var(--tpl2-radius);
    background: #fff;
    transition: transform var(--tpl2-transition), box-shadow var(--tpl2-transition);
}
.tpl2-goods-card:hover { transform: translateY(-4px); box-shadow: var(--tpl2-shadow-hover); }
.tpl2-goods-card .thumb { overflow: hidden; border-radius: var(--tpl2-radius) var(--tpl2-radius) 0 0; background: #fff; }
.tpl2-goods-card .thumb img { width: 100%; display: block; transition: transform var(--tpl2-transition); }
.tpl2-goods-card:hover .thumb img { transform: scale(1.06); }
.tpl2-goods-card .name {
    font-size: 13px; color: var(--tpl2-text-2); line-height: 1.4;
    height: 36px; overflow: hidden; padding: 8px 10px 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tpl2-goods-card .name a:hover { color: var(--tpl2-brand); }
.tpl2-goods-card .price { padding: 4px 10px 10px; color: var(--tpl2-price); font-weight: 700; font-size: 16px; }
.tpl2-goods-card .price small { font-size: 12px; }
.tpl2-goods-card .add-cart {
    position: absolute; right: 10px; bottom: 12px; width: 26px; height: 26px;
    border-radius: 50%; background: var(--tpl2-brand); background-size: 70% !important;
    background-position: center !important; background-repeat: no-repeat !important;
    opacity: 0; transition: opacity var(--tpl2-transition); cursor: pointer;
}
.tpl2-goods-card:hover .add-cart { opacity: 1; }

/* ============================================================
 * 楼层（goods_floor 系列）
 * ============================================================ */
.tpl2-floor { background: #fff; border-radius: var(--tpl2-radius-lg); box-shadow: var(--tpl2-shadow); overflow: hidden; }
.tpl2-floor-head {
    display: flex; align-items: center; justify-content: space-between;
    height: 54px; padding: 0 20px; border-bottom: 1px solid var(--tpl2-line-2);
}
.tpl2-floor-title { display: flex; align-items: center; gap: 10px; }
.tpl2-floor-title .bar { width: 4px; height: 20px; border-radius: 2px; background: var(--tpl2-brand); }
.tpl2-floor-title h3 { font-size: 20px; font-weight: 800; letter-spacing: 1px; }
.tpl2-floor-tabs { display: flex; gap: 4px; }
.tpl2-floor-tabs span { padding: 5px 14px; border-radius: 16px; font-size: 13px; color: var(--tpl2-text-2); cursor: pointer; transition: all var(--tpl2-transition); }
.tpl2-floor-tabs span.active { background: var(--tpl2-brand); color: #fff; }
.tpl2-floor-body { display: flex; }
.tpl2-floor-left { width: 240px; flex-shrink: 0; position: relative; border-right: 1px solid var(--tpl2-line-2); }
.tpl2-floor-left .banner { height: 340px; overflow: hidden; }
.tpl2-floor-left .banner img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tpl2-transition); }
.tpl2-floor-left .banner:hover img { transform: scale(1.04); }
.tpl2-floor-words { display: grid; grid-template-columns: repeat(3, 1fr); }
.tpl2-floor-words a { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--tpl2-text-2); border-top: 1px solid var(--tpl2-line-2); border-right: 1px solid var(--tpl2-line-2); background: rgba(255,255,255,.9); }
.tpl2-floor-words a:nth-child(3n) { border-right: 0; }
.tpl2-floor-words a:hover { color: var(--tpl2-brand); }
.tpl2-floor-right { flex: 1; min-width: 0; }
.tpl2-floor-right .floor-tabs-panel { width: 100%; }
.tpl2-floor-right .floor-tabs-hide { display: none !important; }
.tpl2-floor-goods { display: grid; grid-template-columns: repeat(4, 1fr); }
.tpl2-floor-goods .tpl2-goods-card { border-radius: 0; box-shadow: none; }
.tpl2-floor-goods .tpl2-goods-card:hover { box-shadow: none; background: var(--tpl2-brand-light); }

/* 楼层分类 tab（floor-tabs-nav 契约：编辑 + 切换，tpl2 视觉） */
.tpl2-floor-head .floor-tabs-nav { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.tpl2-floor-head .floor-tabs-nav li { position: relative; cursor: pointer; }
.tpl2-floor-head .floor-tabs-nav h3 { font-size: 13px; font-weight: 400; padding: 5px 14px; border-radius: 16px; color: var(--tpl2-text-2); margin: 0; border: 1px solid var(--tpl2-line-2); transition: all var(--tpl2-transition); }
.tpl2-floor-head .floor-tabs-nav li.floor-tabs-selected h3 { background: var(--tpl2-brand); color: #fff; border-color: var(--tpl2-brand); }

/* ============================================================
 * 促销（goods_promotion）
 * ============================================================ */
.tpl2-promo { background: #fff; border-radius: var(--tpl2-radius-lg); box-shadow: var(--tpl2-shadow); overflow: hidden; }
.tpl2-promo-head { display: flex; align-items: center; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--tpl2-line-2); }
.tpl2-promo-head h3 { font-size: 20px; font-weight: 800; padding: 14px 0; }
.tpl2-promo-head .tabs { display: flex; gap: 16px; }
.tpl2-promo-head .tabs span { padding: 16px 2px; font-size: 14px; color: var(--tpl2-text-2); cursor: pointer; border-bottom: 2px solid transparent; }
.tpl2-promo-head .tabs span.active { color: var(--tpl2-brand); border-bottom-color: var(--tpl2-brand); font-weight: 700; }
.tpl2-promo-body { padding: 16px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

/* ============================================================
 * 品牌墙（brand_s1）
 * ============================================================ */
.tpl2-brand { background: #fff; border-radius: var(--tpl2-radius-lg); box-shadow: var(--tpl2-shadow); padding: 16px; }
.tpl2-brand-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--tpl2-line-2); border: 1px solid var(--tpl2-line-2); border-radius: var(--tpl2-radius); overflow: hidden; }
.tpl2-brand-grid a { height: 64px; background: #fff; display: flex; align-items: center; justify-content: center; transition: all var(--tpl2-transition); }
.tpl2-brand-grid a img { max-width: 90%; max-height: 40px; filter: grayscale(100%); opacity: .7; transition: all var(--tpl2-transition); }
.tpl2-brand-grid a:hover { box-shadow: inset 0 -3px 0 var(--tpl2-brand); }
.tpl2-brand-grid a:hover img { filter: grayscale(0); opacity: 1; }

/* ============================================================
 * 店铺街（shop_street）
 * ============================================================ */
.tpl2-shop { background: #fff; border-radius: var(--tpl2-radius-lg); box-shadow: var(--tpl2-shadow); padding: 16px; }
.tpl2-shop-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.tpl2-shop-card { border: 1px solid var(--tpl2-line); border-radius: var(--tpl2-radius); padding: 14px; transition: all var(--tpl2-transition); }
.tpl2-shop-card:hover { border-color: var(--tpl2-brand); box-shadow: var(--tpl2-shadow-hover); transform: translateY(-3px); }
.tpl2-shop-card .logo { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.tpl2-shop-card .nm { font-weight: 700; font-size: 14px; margin-top: 10px; }

/* ============================================================
 * 红包（bonus_s1）
 * ============================================================ */
.tpl2-bonus { background: #fff; border-radius: var(--tpl2-radius-lg); box-shadow: var(--tpl2-shadow); padding: 16px; }
.tpl2-bonus-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tpl2-bonus-card {
    display: flex; border-radius: var(--tpl2-radius); overflow: hidden; cursor: pointer;
    box-shadow: var(--tpl2-shadow); transition: transform var(--tpl2-transition), box-shadow var(--tpl2-transition);
}
.tpl2-bonus-card:hover { transform: translateY(-4px); box-shadow: var(--tpl2-shadow-hover); }
.tpl2-bonus-card .left { flex: 1; background: linear-gradient(135deg, #fff0ef, #ffe3df); padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tpl2-bonus-card .left .amount { color: var(--tpl2-price); font-size: 22px; font-weight: 800; }
.tpl2-bonus-card .left .amount small { font-size: 12px; }
.tpl2-bonus-card .left .cond { font-size: 11px; color: var(--tpl2-text-3); margin-top: 4px; }
.tpl2-bonus-card .right { width: 64px; background: var(--tpl2-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; writing-mode: vertical-lr; letter-spacing: 2px; }

/* ============================================================
 * 公告（nav_notice_s1）
 * ============================================================ */
.tpl2-notice { background: #fff; border-radius: var(--tpl2-radius); box-shadow: var(--tpl2-shadow); padding: 14px 16px; }
.tpl2-notice-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tpl2-notice-head .t { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; color: var(--tpl2-brand); }
.tpl2-notice-head a { font-size: 12px; color: var(--tpl2-text-3); }
.tpl2-notice-list { overflow: hidden; }
.tpl2-notice-list li { font-size: 12px; color: var(--tpl2-text-2); line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl2-notice-list li a:hover { color: var(--tpl2-brand); }

/* ============================================================
 * 登录（nav_login）
 * ============================================================ */
.tpl2-login { background: #fff; border-radius: var(--tpl2-radius); box-shadow: var(--tpl2-shadow); padding: 18px; }
.tpl2-login .avatar { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden; }
.tpl2-login .avatar img { width: 100%; height: 100%; object-fit: cover; }
.tpl2-login .hello { text-align: center; font-size: 13px; color: var(--tpl2-text-3); margin-bottom: 14px; }
/* 登录入口可达性：未登录时头像与标题均可点击登录（与「请登录」按钮同一契约） */
.tpl2-login .hello.ajax-login,
.tpl2-login .avatar a.ajax-login { cursor: pointer; }
.tpl2-login .hello.ajax-login:hover { color: var(--tpl2-brand); }
.tpl2-login .btns { display: flex; gap: 10px; }
.tpl2-login .btns a { flex: 1; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 17px; font-size: 13px; }
.tpl2-login .btn-login { background: var(--tpl2-brand); color: #fff; }
.tpl2-login .btn-reg { border: 1px solid var(--tpl2-brand); color: var(--tpl2-brand); }

/* ============================================================
 * 契约类名现代化：前台 index.js 的 tab 切换依赖
 * .tabs-nav > li > h3 + .tabs-panel/.tabs-hide/.tabs-selected 结构，
 * 此处仅重定义视觉，不改结构，确保切换功能零破坏。
 * ============================================================ */
.tabs-nav { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.tabs-nav > li { cursor: pointer; }
.tabs-nav > li > h3 { font-size: 14px; color: var(--tpl2-text-2); padding: 14px 0; margin: 0; border-bottom: 2px solid transparent; font-weight: 400; }
.tabs-nav > li.tabs-selected > h3 { color: var(--tpl2-brand); border-bottom-color: var(--tpl2-brand); font-weight: 700; }
.tabs-panel.tabs-hide { display: none; }

/* ============================================================
 * 资讯频道（news_s1~s3）
 * 说明：保留 news.js 的轮播契约类（.scroll-box/.scroll-pic/.scroll-num/
 *      .scroll-btn），仅用 tpl2 命名空间做视觉现代化，零破坏。
 * ============================================================ */
.tpl2-news { display: flex; gap: 12px; }
.tpl2-news-main { width: 860px; flex-shrink: 0; }
.tpl2-news-side { flex: 1; min-width: 0; }

/* 资讯卡片容器 */
.tpl2-news-card { background: #fff; border-radius: var(--tpl2-radius-lg); box-shadow: var(--tpl2-shadow); padding: 16px; overflow: hidden; }
.tpl2-news-card .tpl2-sec-head { margin-bottom: 12px; }
.tpl2-news-card .tpl2-sec-head h2 { font-size: 18px; }

/* 文章列表（资讯通用） */
.tpl2-news-list { list-style: none; margin: 0; padding: 0; }
.tpl2-news-list li { line-height: 36px; font-size: 13px; color: var(--tpl2-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl2-news-list li a { color: inherit; }
.tpl2-news-list li a::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--tpl2-brand); margin-right: 8px; vertical-align: middle; opacity: .55; }
.tpl2-news-list li a:hover { color: var(--tpl2-brand); }

/* news_s1：左轮播(570) + 右图组(275 竖排) */
.tpl2-news-s1 { display: flex; gap: 15px; }
.tpl2-news-banner { width: 570px; flex-shrink: 0; border-radius: var(--tpl2-radius); overflow: hidden; box-shadow: var(--tpl2-shadow); }
.tpl2-news-banner .scroll-box { float: none; }
.tpl2-news-banner .scroll-num span.on { background: var(--tpl2-brand); }
.tpl2-news-banner .scroll-btn span { border-radius: 4px; }
.tpl2-news-pics { width: 275px; flex-shrink: 0; display: flex; flex-direction: column; gap: 15px; }
.tpl2-news-pics a { border-radius: var(--tpl2-radius); overflow: hidden; box-shadow: var(--tpl2-shadow); display: block; }
.tpl2-news-pics a img { width: 100%; height: 165px; object-fit: cover; display: block; transition: transform var(--tpl2-transition); }
.tpl2-news-pics a:hover img { transform: scale(1.04); }

/* news_s2：大图文章 + 双列文章列表 */
.tpl2-news-story { display: flex; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--tpl2-line-2); }
.tpl2-news-story .pic { width: 200px; height: 120px; flex-shrink: 0; border-radius: var(--tpl2-radius); overflow: hidden; }
.tpl2-news-story .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpl2-news-story .detail { flex: 1; min-width: 0; }
.tpl2-news-story .detail h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.tpl2-news-story .detail h3 a { color: var(--tpl2-text); }
.tpl2-news-story .detail h3 a:hover { color: var(--tpl2-brand); }
.tpl2-news-story .detail .summary { font-size: 13px; color: var(--tpl2-text-3); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl2-news-story .detail .meta { font-size: 12px; color: var(--tpl2-text-3); margin-top: 8px; }
.tpl2-news-story .detail .meta a { color: var(--tpl2-brand); }
.tpl2-news-list2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.tpl2-news-list2 li { line-height: 32px; font-size: 13px; color: var(--tpl2-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl2-news-list2 li a { color: inherit; }
.tpl2-news-list2 li a::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--tpl2-brand); margin-right: 8px; vertical-align: middle; opacity: .55; }
.tpl2-news-list2 li a:hover { color: var(--tpl2-brand); }

/* 带图文章（news_s2 右侧 people） */
.tpl2-news-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--tpl2-line-2); }
.tpl2-news-item:last-child { border-bottom: 0; }
.tpl2-news-item .pic { width: 125px; height: 75px; flex-shrink: 0; border-radius: 6px; overflow: hidden; }
.tpl2-news-item .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpl2-news-item .info { flex: 1; min-width: 0; }
.tpl2-news-item .info h4 { font-size: 14px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl2-news-item .info h4 a:hover { color: var(--tpl2-brand); }
.tpl2-news-item .info .summary { font-size: 12px; color: var(--tpl2-text-3); line-height: 1.5; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* news_s3：热图(3) + 三列文章 */
.tpl2-news-hot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; margin-bottom: 20px; }
.tpl2-news-hot a { border-radius: var(--tpl2-radius); overflow: hidden; display: block; }
.tpl2-news-hot a img { width: 100%; height: 165px; object-fit: cover; display: block; transition: transform var(--tpl2-transition); }
.tpl2-news-hot a:hover img { transform: scale(1.04); }
.tpl2-news-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; }
.tpl2-news-col h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--tpl2-line-2); }
.tpl2-news-col h3 a { color: var(--tpl2-text); }
.tpl2-news-col h3 a:hover { color: var(--tpl2-brand); }
.tpl2-news-col .more { text-align: right; font-size: 12px; margin-top: 8px; }
.tpl2-news-col .more a { color: var(--tpl2-text-3); }
.tpl2-news-col .more a:hover { color: var(--tpl2-brand); }

/* 右侧竖排图（news_s3 右侧 2 图 330*230） */
.tpl2-news-side-pics { display: flex; flex-direction: column; gap: 12px; }
.tpl2-news-side-pics a { border-radius: var(--tpl2-radius); overflow: hidden; display: block; box-shadow: var(--tpl2-shadow); }
.tpl2-news-side-pics a img { width: 100%; height: 230px; object-fit: cover; display: block; transition: transform var(--tpl2-transition); }
.tpl2-news-side-pics a:hover img { transform: scale(1.04); }

/* ============================================================
 * 装修设计模式：编辑按钮（selector）显示与定位兜底
 * ------------------------------------------------------------
 * 背景：组件重绘后，视觉类名从原始类名（.banner/.floor-con2/
 *      .shop3-title/.img-groups 等）改为 tpl2-*。装修器 CSS
 *      （tplsetting.css 第 80~176 行）里针对原始类名的 hover 显示规则
 *      全部失效，导致 .selector/.title-selector 编辑按钮永远
 *      visibility:hidden，无法点击编辑（导航/图片/商品分类均如此）。
 * 兜底：让 tpl2 容器成为定位上下文（position:relative），并在 hover
 *      组件时显示其编辑按钮，恢复全部编辑能力。前台页面无 .selector
 *      元素，故本规则对前台零影响。
 * ============================================================ */
.tpl2-banner,
.tpl2-floor,
.tpl2-floor-head,
.tpl2-floor-title,
.tpl2-floor-body,
.tpl2-floor-left,
.tpl2-floor-words,
.tpl2-floor-goods,
.tpl2-promo,
.tpl2-promo-head,
.tpl2-promo-body,
.tpl2-brand,
.tpl2-brand-grid,
.tpl2-shop,
.tpl2-shop-grid,
.tpl2-bonus,
.tpl2-bonus-grid,
.tpl2-notice,
.tpl2-notice-head,
.tpl2-login,
.tpl2-seckill,
.tpl2-seckill-l,
.tpl2-ad-grid,
.tpl2-sec-head,
.tpl2-news,
.tpl2-news-card,
.tpl2-news-banner,
.tpl2-news-pics,
.tpl2-news-hot,
.tpl2-news-cols,
.tpl2-news-col,
.tpl2-news-side-pics,
.tpl2-news-story,
.tpl2-news-item { position: relative; }

/* 楼层左侧焦点图（原始 .banner 类）作为图片编辑按钮的定位上下文 */
.tpl2-floor-left .banner { position: relative; }

/* 通用兜底：给所有「直接包含编辑按钮」的容器加定位上下文。
   :has() 能覆盖无类名/内联 style 的 div 容器（如 goods_floor_s2 的左右图区），
   一行规则覆盖全部组件，未来新增组件零维护成本。装修后台为现代浏览器，:has 可用。 */
.drop-item :has(> .selector),
.drop-item :has(> .title-selector),
.drop-item :has(> .content-selector) { position: relative; }

/* 防回归护栏：同一容器内若存在多个编辑按钮（无论类型是否相同），自动横向依次排布，
   避免它们都落在父容器 left:0 上而互相覆盖（只有最后一个可点）。
   一条规则覆盖全部现有与未来模板，零维护成本；同时保证「每个可编辑块都有独立按钮」的契约不被破坏。 */
.drop-item :has(> .selector) > .selector ~ .selector { left: 42px; }
.drop-item :has(> .selector) > .selector ~ .selector ~ .selector { left: 84px; }
.drop-item :has(> .selector) > .selector ~ .selector ~ .selector ~ .selector { left: 126px; }

/* hover 组件时显示编辑按钮（!important 确保覆盖装修器默认 hidden） */
.drop-item:hover .selector,
.drop-item:hover .title-selector,
.drop-item:hover .content-selector,
.drop-item:hover .SZY-TPL-SELECTOR,
.drop-item:hover .SZY-TPL-SETTING { visibility: visible !important; }

/* ============================================================
 * 兼容：保留装修器契约类名的基础可用性（不覆盖老视觉，仅兜底）
 * ============================================================ */
.drop-item { position: relative; }

/* ============================================================
 * 设计提示语隔离（消除线上门店「露丑」）
 * 背景：装修器占位块内的提示文案（如「此处添加【270*475】图片」「示例产品」）
 *      只应出现在商家编辑态，绝不外泄到线上门店。
 * 方案：占位块尺寸/灰底保留（布局不塌陷），仅把提示文字设为透明；
 *      装修器内由 design/tplsetting.css 恢复为可见（该文件仅后台加载，且顺序在后）。
 * 收益：零模板改动（48 个组件无需逐个加 @if($is_design)），零维护成本。
 * ============================================================ */
.tpl2-empty, .tpl2-empty * { color: transparent !important; }

/* ============================================================
 * 楼层/模块标题主题色（数据驱动契约，置于文件末尾以确保层叠优先级）
 *
 * 装修器「标题选择器」提供「标题文字颜色 / 楼层底色」两项配置
 * （data-title_open_colorpicker / data-title_open_bgcolor），写入 data['4-{cat}']。
 * 此前重绘后模板未消费该数据，导致配置「存在却无效」。
 *
 * 现约定：模板只需一行 {!! floor_theme_style($data, $cat) !!} 在容器上输出 CSS 变量，
 * 本处统一下沉为视觉，未来新增模板零成本接入、零重复代码——
 *     --tpl2-floor-color : 标题文字颜色
 *     --tpl2-floor-bg    : 楼层主题底色（标题栏背景 + 强调条）
 * 未设置时回退主题默认值，视觉零变化。
 * ============================================================ */
.tpl2-floor-title h3 { color: var(--tpl2-floor-color, inherit); }
.tpl2-sec-head h2 { color: var(--tpl2-floor-color, inherit); }
.tpl2-floor-title .bar { background: var(--tpl2-floor-bg, var(--tpl2-brand)); }
.tpl2-sec-head .bar { background: var(--tpl2-floor-bg, var(--tpl2-brand)); }
.tpl2-floor-head { background: var(--tpl2-floor-bg, transparent); }
.tpl2-sec-head { background: var(--tpl2-floor-bg, transparent); }