/* ============================================================
   VIP 商铺首页皮肤 vip.css   (2026-09-22)
   仅 homepage-vip 模板加载；不影响其它商铺皮肤

   设计约定：所有区块（About / 产品 / 分类行 / 侧栏）统一用
   平台原生 .main_head + .main_body 结构，本文件只负责把这一套
   结构样式化成同一张卡片 —— 因此任何后续新增区块自动同款。
   ============================================================ */

/* 防宽图撑破（兜底：会员传的超宽公司图曾把整页撑到 1607px） */
#main .main_body img { max-width: 100%; height: auto; }

/* ---------- 统一区块外框：所有模块同款卡片 ---------- */
#main > .main_head { margin: 0 0 0; }
#main > .main_head + .main_body { margin: 0 0 18px; }
.main_head { border: 1px solid #E8EBF0; border-bottom: none; border-radius: 10px 10px 0 0;
             background: linear-gradient(180deg, #FAFBFD, #F1F6FC);
             padding: 0 16px; height: 44px; line-height: 44px; }
.main_head strong { font-size: 16px; color: #1B2A41; letter-spacing: .2px; }
.main_head img { vertical-align: middle; }
.main_body { border: 1px solid #E8EBF0; border-radius: 0 0 10px 10px;
             background: #fff; overflow: hidden; padding: 14px 16px; }
.main_body .main_body, .main_body .vsec { border: none; padding: 0; }

/* ---------- 分类行（每类一行：标题 → 该类产品） ---------- */
.vcatrow { margin: 0; }
.vcatrow .main_head { background: linear-gradient(180deg, #F4F8FE, #EAF2FC); }
.vcatrow .main_head b { font-size: 12px; font-weight: 500; color: #6B7C93;
                        margin-left: 8px; letter-spacing: 0; }
.vcatrow .main_head em { font-style: normal; font-size: 12px; color: #2F6FD0; }

/* ---------- 产品网格卡片 ---------- */
.vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vcard { display: block; background: #fff; border: 1px solid #E8EBF0; border-radius: 10px;
         overflow: hidden; text-decoration: none; color: inherit; transition: .2s; }
.vcard:hover { transform: translateY(-3px); border-color: #CFE0F5;
               box-shadow: 0 10px 24px rgba(23,43,77,.12); }
.vimg { position: relative; padding-bottom: 100%; background: #F5F7FA; overflow: hidden; }
.vimg img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
            object-fit: cover; display: block; transition: transform .35s; }
.vcard:hover .vimg img { transform: scale(1.05); }
.vcard h3 { font-size: 13px; line-height: 18px; font-weight: 500; margin: 10px 12px 6px;
            height: 36px; overflow: hidden; color: #243B53;
            word-break: normal; overflow-wrap: break-word;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vmeta { display: flex; align-items: center; justify-content: space-between;
         padding: 0 12px 12px; font-size: 12px; }
.vmeta .price { color: #E4393C; font-size: 14px; font-weight: 700; }
.vmeta em { font-style: normal; color: #8493A8; }
.vmore { text-align: right; margin: 12px 0 0; }
.vmore a { font-size: 13px; color: #2F6FD0; text-decoration: none; }
.vempty { color: #98A6B8; font-size: 13px; padding: 6px 0; }

/* ---------- About 关键字段（简介为空时的兜底） ---------- */
.vfacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
          gap: 10px 18px; margin: 10px 0 4px; }
.vfacts div { font-size: 13px; color: #425466; }
.vfacts b { color: #8493A8; font-weight: 500; }


/* ---------- About 卡片体（与产品/分类行同款卡片，仅内容形态不同） ---------- */
.vabout { overflow: hidden; }
.vabout-media { float: right; width: 300px; max-width: 34%; margin: 0 0 10px 18px; }
.vabout-media img { width: 100%; height: auto; border: 1px solid #E8EBF0; border-radius: 8px; padding: 4px; background: #fff; }
.vabout-media iframe, .vabout-media video { max-width: 100%; }
.vabout-text { font-size: 13px; line-height: 22px; color: #425466; }
.vabout-text .t { color: #2F6FD0; }
.vfacts { margin: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1120px) { .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }