/* ==========================================================================
   第三轮视觉精修 (ui3.css) — 由 Hermes 生成 2026-10-03
   加载顺序在 tghao.css 之后，只做「增补」，不改模板结构，删除本文件即完全回滚
   ========================================================================== */

/* 1) 首页已经有 hero 大搜索框 → 去掉 header 下面那条重复的搜索行
      （详情页/列表页没有 hero，保留搜索行，不影响检索） */
body:has(.hero-search) .nav-search-row { display: none !important; }

/* 2) 热门搜索 chip：统一高度与基线，避免高低不齐、错位换行 */
.hero-hot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hero-hot .hh-label { display: inline-flex; align-items: center; height: 30px; margin-right: 2px; }
.hh-chip {
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; padding: 0 14px; font-size: 12.5px; line-height: 1;
    white-space: nowrap;
}

/* 3) 移动端：header 收紧 + hero 更聚焦，首屏能多露出一屏商品 */
@media (max-width: 991.98px) {
    .site-nav .container { padding-top: 9px; }
    .nav-links .nav-link { padding: 7px 11px !important; }
    .nav-search-row { padding: 0 14px 10px; }
}

@media (max-width: 767.98px) {
    .hero { padding: 22px 18px 20px; }
    .hero-title { font-size: 23px; line-height: 1.32; letter-spacing: .2px; }
    .hero-sub { font-size: 13px; line-height: 1.72; margin-top: 9px; }
    .hero-search { margin-top: 15px; }
    .crumb { font-size: 12px; padding-bottom: 10px; }
    .list-toolbar .lt-count { font-size: 12.5px; }
}

/* 4) 商品详情：移动端主图不要过高，把价格/购买区提上来 */
@media (max-width: 767.98px) {
    .item-hero .item-pic, .item-hero .detail-pic { max-height: 240px; }
    .item-pic img, .detail-pic img { max-height: 240px; object-fit: contain; }
    .item-detail .panel-body { padding: 15px !important; }
}

/* 5) 卡片与列表：统一圆角与阴影节奏，避免深浅不一 */
.panel, a.goods-card, .item-related .rel-card {
    border-radius: var(--radius-sm);
}
.panel { box-shadow: var(--sh-1); }

/* 6) 可读性：次要说明文字提高一档对比度 */
.seo-block p, .notice, .hero-sub { color: var(--muted); }

/* 7) 对比度补强：分类项文字、hero 徽章、分类图标统一观感 */
.cat-chip, .cat-card { color: #1f2a44 !important; }
.cat-chip .cat-name, .cat-card .cat-name { color: #1f2a44 !important; font-weight: 700; }
.hero-badge, .hero-pill { color: #4c1d95 !important; font-weight: 700; }
.cat-chip .cat-ico, .cat-card .cat-ico {
    background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(236,72,153,.14));
    border-radius: 12px;
}

/* 8) 触控友好：移动端所有可点 chip / 按钮最小 32px 高 */
@media (max-width: 767.98px) {
    .hero-hot .hh-chip, .hero-hot .hh-label { height: 32px; }
    .cat-chip, .cat-card { min-height: 32px; }
}

/* ==========================================================================
   ui3.css 追加：第四轮修正 (2026-10-03)
   1) 商品卡图标统一用「分类图标」(原先被 cover PNG 图盖住)
   2) 详情页大图占满容器 (容器原是 4:3，方图受 max-height 卡住 → 改 1:1)
   全部可回滚：删掉本段即恢复
   ========================================================================== */

/* --- 1) 商品卡：只用分类图标，隐藏 cover 那套 PNG --------------------------------- */
/* 结构是  <div class="card-img"><span class="card-img__fallback" bg=分类SVG></span><img src=cover></div>
   原样式给 img 加了 z-index:1 → 盖住了下面的分类图标。这里直接把 img 拿掉。 */
a.goods-card .card-img > img { display: none !important; }

/* fallback 是 absolute inset:0，img 隐藏后自然露出来；把图标缩到 ~78% 居中，避免顶格 */
a.goods-card .card-img__fallback {
    background-size: 78% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* 万一某商品没有分类图标（inline style 为空），退回中性底色，不要露出破图 */
a.goods-card .card-img--empty { background: var(--brand-soft); border-color: var(--brand-line); }

/* --- 2) 详情页大图：容器改正方形 + 图片放大到 88%，视觉上占满 ---------------------- */
/* 原 .item-cover-wrap{aspect-ratio:4/3; max-width:440px} + .item-cover{max-width:86%;max-height:86%}
   316x237 的容器里放 640x640 方图 → 受高度限制只有 202px，左右空一大片。
   改成 1:1 容器后，方图能长到 88% → 四周均匀留白，看起来是"占满"的。 */
.item-hero .item-cover-wrap,
.item-cover-wrap {
    aspect-ratio: 1 / 1 !important;
}
.item-hero .item-cover,
.item-cover {
    max-width: 88% !important;
    max-height: 88% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* 移动端：容器满宽但别超过一屏高度的一半，避免首屏全是图 */
@media (max-width: 767.98px) {
    .item-hero .item-cover-wrap,
    .item-cover-wrap {
        max-width: min(100%, 340px) !important;
    }
}
/* --- 3) 详情页大图：统一改用「分类图标」（与商品卡一致）------------------------- */
/* 原逻辑：$item.cover 存在就显示 cover 图（多为 apple.png/mail.png 这类浅色占位图），
   否则才显示分类图标。浅色占位图放大后依然显得空 → 统一成分类图标，视觉饱满且与列表一致。 */
.item-hero .item-cover { display: none !important; }
.item-hero .item-cover-empty { display: flex !important; }
.item-hero .item-cover-caticon {
    width: 72% !important;
    height: 72% !important;
    object-fit: contain !important;
}

/* --- 4) 商品标题：避免中文词被拆断（"账号"被拆成"账"+"号"）--------------------- */
.item-hero .item-title,
.item-title {
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.45;
}

/* --- 5) 详情大图：去掉比图标还大的虚线环 + 图标填满容器 ------------------------- */
/* SVG 是 viewBox="0 0 24 24" 标准网格，实际图形只占中间约 60%，四周是 SVG 自身留白；
   而 ::after 画了个 92% 的虚线圆，比图标更大 → 视觉更空。
   隐藏虚线环 + 图标放大到 100%（SVG 透明背景，底下 74% 的柔光能透出来）*/
.item-hero .item-cover-empty::after { display: none !important; }
.item-hero .item-cover-empty::before { width: 88% !important; }
.item-hero .item-cover-caticon {
    width: 100% !important;
    height: 100% !important;
}

/* ===== 商品详情：客服 + 支付方式区域重排（2026-10-03） ===== */
/* 原：购物车图标 + 客服按钮 + 「选择支付方式」挤在一个 flex <label> 里，图标语义不符、配色杂乱。
   现：标题行（左=支付标题，右=客服）+ 支付列表独立成行。 */
.cash-pay { padding: 14px !important; }
.cash-pay .cash-pay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}
.cash-pay .cash-pay-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 15px;
    color: #1f2937 !important;
    line-height: 1.3;
}
.cash-pay .cash-pay-title i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    box-shadow: 0 4px 10px rgba(99, 102, 241, .28);
    flex-shrink: 0;
}
/* 客服按钮：取消原 margin，右对齐，尺寸收敛 */
.cash-pay .item-service {
    margin: 0 !important;
    flex-shrink: 0;
    font-size: 12.5px !important;
    padding: 5px 12px !important;
}
/* 支付列表：与标题行拉开距离，去掉原来的虚线分隔（改为留白） */
.cash-pay .pay-list {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    gap: 10px !important;
}
.cash-pay .pay-list .pay {
    padding: .5rem .9rem !important;
    border-radius: 12px !important;
}
@media (max-width: 575.98px) {
    .cash-pay .cash-pay-head { margin-bottom: 10px; }
    .cash-pay .cash-pay-title { font-size: 14px; }
}
/* ===== 支付方式列表：竖直卡片式（2026-10-03） ===== */
/* 原为 flex-wrap 横排小药丸，三个挤在一行；改为从上到下的整行卡片，更易点、更清晰。 */
.cash-pay .pay-list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

.cash-pay .pay-list .pay {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    border: 1px solid #e8ecf3 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04) !important;
    transition: border-color .18s, background .18s, transform .18s, box-shadow .18s !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* 图标 */
.cash-pay .pay-list .pay img {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
}

/* 名称 */
.cash-pay .pay-list .pay span {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    line-height: 1.2 !important;
}

/* 右侧箭头 */
.cash-pay .pay-list .pay::after {
    content: '\203A';
    margin-left: auto;
    font-size: 20px;
    line-height: 1;
    color: #cbd5e1;
    transition: color .18s, transform .18s;
}

/* 悬停 */
@media (hover: hover) and (pointer: fine) {
    .cash-pay .pay-list .pay:hover {
        border-color: #b9c3f5 !important;
        background: #fafbff !important;
        transform: translateX(2px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, .1) !important;
    }
    .cash-pay .pay-list .pay:hover::after { color: #6366f1; }
}

/* 选中 / 激活态：保留 JS 可能添加的 active / selected / is-primary */
.cash-pay .pay-list .pay.active,
.cash-pay .pay-list .pay.selected,
.cash-pay .pay-list .pay.is-primary {
    border-color: #6366f1 !important;
    background: linear-gradient(90deg, #eef2ff, #f5f3ff) !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, .16) !important;
}
.cash-pay .pay-list .pay.active span,
.cash-pay .pay-list .pay.selected span,
.cash-pay .pay-list .pay.is-primary span { color: #4338ca !important; }
.cash-pay .pay-list .pay.active::after,
.cash-pay .pay-list .pay.selected::after,
.cash-pay .pay-list .pay.is-primary::after { color: #6366f1; }

/* 移动端：略收紧内边距 */
@media (max-width: 575.98px) {
    .cash-pay .pay-list .pay { padding: 12px 14px !important; }
    .cash-pay .pay-list .pay span { font-size: 14.5px !important; }
}
/* ===== 首页商品分类 chip 重做（2026-10-03） ===== */
/* index.css 原为 23% 半透明药丸 + 重阴影，在浅背景上几乎看不见；改为白底圆角卡片。 */
.chip-list {
    gap: 10px !important;
    padding: 4px 0 10px !important;
    row-gap: 10px !important;
}

.chip {
    padding: 9px 16px !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid #e8ecf3 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    transition: border-color .18s, background .18s, transform .18s, box-shadow .18s !important;
}

.chip .chip-icon {
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;      /* 圆角方形：方形图标不再被圆形裁切变形 */
    margin-right: 8px !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

/* 悬停（仅精确指针设备） */
@media (hover: hover) and (pointer: fine) {
    .chip:hover {
        border-color: #c7d2fe !important;
        background: #fafbff !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(99, 102, 241, .1) !important;
    }
}

/* 选中态：紫色渐变，白色文字 */
.chip.is-primary {
    background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, .3) !important;
}
.chip.is-primary .chip-icon {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35) !important;
}

/* 移动端收紧 */
@media (max-width: 575.98px) {
    .chip-list { gap: 8px !important; }
    .chip {
        padding: 8px 13px !important;
        font-size: 13.5px !important;
        border-radius: 11px !important;
    }
    .chip .chip-icon { width: 18px !important; height: 18px !important; margin-right: 6px !important; }
}