/*
Theme Name: CleanStore
Theme URI: https://clean.watchora.cn
Author: CleanStore Team
Author URI: https://clean.watchora.cn
Description: CleanStore V5.1.0 —— 现代化品牌腕表目录主题：沉浸式居中 Hero、首页只显示最新上架表款（发布即上首页）、上传图片自动改名（cs+时间+当秒序号，一次连传多张编号递增，永不重名）、品牌→系列两级分类（双表单后台、添加即上导航、品牌导航智能收纳（按宽度自动直显/收进「更多.」，中英意任何语言不换行））、全部表款列表分页（电脑完整页码/手机精简分页）、品牌与系列多语言名称（后台选填英/意名，前台切换自动显示、留空回落中文）、商品多语言内容（标题与介绍三语，卡片/详情页/搜索/订单邮件联动）、多语言搜索（英文/意语的商品标题、介绍、品牌、系列名均可搜到，中文照常可搜，多词语义与原生一致）、页脚品牌名随语言切换（修复外文下页脚仍显示中文的问题）、商品卡片质检工序同款观感（图片 cover 填满 1/1 + 底部渐变浮层只显系列与名称，尺寸/表盘/Ref 撤下卡片，价格填写才显示）、服务承诺卡片图标真正居中、商品详情页现代化重设计、三语前台（中 / EN / IT，可扩展新语言）。Built for clean.watchora.cn.
Version: 5.1.0
Requires at least: 5.4
Tested up to: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cleanstore
Tags: e-commerce, catalog, two-columns, custom-colors, custom-logo, custom-menu, translation-ready
*/

/* =========================================================
   1. Design Tokens
   ========================================================= */
:root {
  --cs-green: #075e40;
  --cs-green-deep: #054733;
  --cs-green-soft: #e7f1ec;
  --cs-gold: #b08d3e;
  --cs-gold-soft: #f6efdd;
  --cs-ink: #16191c;
  --cs-ink-soft: #4c5450;
  --cs-muted: #7a827e;
  --cs-line: #e6e7e3;
  --cs-line-soft: #eef0ec;
  --cs-bg: #fafaf8;
  --cs-card: #ffffff;
  --cs-img-bg: #f5f6f3;
  --cs-danger: #b3372f;
  --cs-shadow: 0 10px 30px rgba(15, 34, 26, .08);
  --cs-shadow-soft: 0 4px 14px rgba(15, 34, 26, .06);
  --cs-radius: 14px;
  /* 质检/承诺列表勾选图标（内联 SVG，避免外部请求） */
  --cs-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075e40' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
  --cs-serif: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  --cs-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* =========================================================
   2. Base & Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--cs-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--cs-ink);
  background: var(--cs-bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cs-green); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--cs-green-deep); }
h1, h2, h3, h4, h5 { font-family: var(--cs-serif); color: var(--cs-ink); line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1em; }
::selection { background: var(--cs-green); color: #fff; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.cs-container { width: min(1240px, 92vw); margin: 0 auto; }

/* =========================================================
   3. Buttons & Form Elements
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 8px; border: 1px solid transparent;
  font-family: var(--cs-sans); font-size: 14px; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; transition: all .2s ease; text-decoration: none; line-height: 1.2;
}
.btn-primary { background: var(--cs-green); color: #fff; }
.btn-primary:hover { background: var(--cs-green-deep); color: #fff; transform: translateY(-1px); box-shadow: var(--cs-shadow); }
.btn-gold { background: var(--cs-gold); color: #fff; }
.btn-gold:hover { background: #9c7c33; color: #fff; transform: translateY(-1px); box-shadow: var(--cs-shadow); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }
.btn-outline { background: transparent; border-color: var(--cs-green); color: var(--cs-green); }
.btn-outline:hover { background: var(--cs-green); color: #fff; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-block { width: 100%; }

.cs-input, input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="tel"], select, textarea {
  width: 100%; padding: 11px 14px; border: 1px solid #d7d9d4; border-radius: 8px;
  font-family: var(--cs-sans); font-size: 14px; color: var(--cs-ink);
  background: #fff; transition: border-color .18s ease, box-shadow .18s ease;
}
.cs-input:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cs-green); box-shadow: 0 0 0 3px rgba(7,94,64,.14);
}
textarea { min-height: 96px; resize: vertical; }
label { font-size: 13px; font-weight: 600; color: var(--cs-ink-soft); display: block; margin-bottom: 6px; }

/* =========================================================
   4. Announcement Bar
   ========================================================= */
.cs-announce { background: var(--cs-green-deep); color: #eaf3ee; font-size: 13px; text-align: center; padding: 8px 16px; letter-spacing: .02em; line-height: 1.6; }
.cs-announce a { color: var(--cs-gold); }
.cs-announce strong { color: #fff; font-weight: 600; }

/* =========================================================
   5. Header
   ========================================================= */
.cs-header { background: #fff; border-bottom: 1px solid var(--cs-line); position: relative; z-index: 60; }
.cs-header.is-stuck { position: sticky; top: 0; box-shadow: var(--cs-shadow-soft); animation: csSlideDown .3s ease; }
@keyframes csSlideDown { from { transform: translateY(-8px); opacity: .6; } to { transform: none; opacity: 1; } }
.cs-header-top { display: flex; align-items: center; gap: 28px; padding: 16px 0; }
.cs-logo img { height: 52px; width: auto; }
.cs-logo a { display: inline-flex; }
.cs-header-search { margin-left: auto; flex: 0 1 380px; position: relative; }
.cs-header-search .cs-input { padding-left: 42px; border-radius: 999px; background: var(--cs-bg); }
.cs-header-search .cs-search-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--cs-muted); pointer-events: none; }
.cs-burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--cs-line); background: #fff; border-radius: 8px; cursor: pointer; position: relative; }
.cs-burger span, .cs-burger span::before, .cs-burger span::after { content: ""; position: absolute; left: 11px; width: 22px; height: 2px; background: var(--cs-ink); transition: all .2s; }
.cs-burger span { top: 21px; }
.cs-burger span::before { left: 0; top: -7px; }
.cs-burger span::after { left: 0; top: 7px; }

/* Nav row */
.cs-nav-row { border-top: 1px solid var(--cs-line-soft); }
.cs-nav { display: flex; align-items: stretch; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.cs-nav > li { position: relative; }
.cs-nav > li > a {
  display: flex; align-items: center; gap: 6px; padding: 13px 16px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cs-ink); border-bottom: 2px solid transparent; transition: all .18s ease;
}
.cs-nav > li > a:hover, .cs-nav > li.current-menu-item > a { color: var(--cs-green); border-bottom-color: var(--cs-gold); }
.cs-nav .cs-caret { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }

/* 品牌下拉（悬浮显示该品牌系列，后台自动生成） */
.cs-subnav { position: absolute; top: 100%; left: 0; min-width: 230px; max-width: 300px; background: #fff; border: 1px solid var(--cs-line); border-top: 2px solid var(--cs-gold); border-radius: 0 0 12px 12px; box-shadow: var(--cs-shadow); padding: 10px 10px 8px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .22s ease; z-index: 70; }
li:hover > .cs-subnav { opacity: 1; visibility: visible; transform: none; }
.cs-subnav ul { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; }
.cs-subnav a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; font-size: 13.5px; color: var(--cs-ink-soft); }
.cs-subnav a:hover { background: var(--cs-green-soft); color: var(--cs-green); }
.cs-subnav a .cs-count { font-size: 12px; color: var(--cs-muted); }
.cs-subnav-all { padding: 6px 0 2px; border-top: 1px solid var(--cs-line-soft); margin-top: 6px; }
.cs-subnav-all a { font-weight: 700; color: var(--cs-green) !important; }

/* v5.0.5 导航「更多.」：前 10 品牌直显，其余收进点击展开的多列面板 */
.cs-nav-more-btn { display: flex; align-items: center; gap: 6px; padding: 13px 16px; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-ink); transition: all .18s ease; }
.cs-nav-more-btn:hover, .cs-nav-more.is-open .cs-nav-more-btn { color: var(--cs-green); border-bottom-color: var(--cs-gold); }
.cs-nav-more.is-open .cs-caret { transform: rotate(225deg) translateY(-2px); }
.cs-nav-more-panel { position: absolute; top: 100%; right: 0; width: min(600px, 92vw); background: #fff; border: 1px solid var(--cs-line); border-top: 2px solid var(--cs-gold); border-radius: 0 0 12px 12px; box-shadow: var(--cs-shadow); padding: 14px 14px 10px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .22s ease; z-index: 75; }
.cs-nav-more.is-open .cs-nav-more-panel { opacity: 1; visibility: visible; transform: none; }
.cs-nav-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 20px; max-height: 62vh; overflow-y: auto; padding: 2px; }
.cs-nav-more-cell .cs-nav-more-brand { display: block; padding: 7px 10px; border-radius: 6px; font-size: 13.5px; font-weight: 700; color: var(--cs-ink); }
.cs-nav-more-cell .cs-nav-more-brand:hover { background: var(--cs-green-soft); color: var(--cs-green); }
.cs-nav-more-cell ul { list-style: none; margin: 0; padding: 0 0 8px 8px; }
.cs-nav-more-cell ul a { display: block; padding: 5px 10px; border-radius: 6px; font-size: 12.5px; color: var(--cs-muted); }
.cs-nav-more-cell ul a:hover { background: var(--cs-green-soft); color: var(--cs-green); }

/* v5.0.7 智能导航收纳：PHP 输出全部品牌，JS 按实际宽度决定直显几个（杜绝换行）；
 * --extra / --inline 仅为无 JS 回退态（前 10 直显 + 其余进面板），JS 接管后由 cs-js-hide 统一管理 */
.cs-nav > li.cs-nav-item--extra { display: none; }
.cs-nav-more-cell--inline { display: none; }
.cs-js-hide { display: none !important; }
/* 测量态：JS 短暂挂载，全部 li 脱离文档流取自然宽度（不可见、不重排、先于首帧） */
.cs-nav.cs-nav-measuring { position: relative; flex-wrap: nowrap; }
.cs-nav.cs-nav-measuring > li { position: absolute; visibility: hidden; pointer-events: none; }

/* =========================================================
   6. Mobile Drawer
   ========================================================= */
.cs-drawer-mask { position: fixed; inset: 0; background: rgba(10, 25, 18, .5); opacity: 0; visibility: hidden; transition: all .25s; z-index: 98; }
.cs-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 88vw); background: #fff; transform: translateX(-102%); transition: transform .28s ease; z-index: 99; overflow-y: auto; padding: 18px 20px calc(40px + env(safe-area-inset-bottom)); }
body.cs-drawer-open .cs-drawer-mask, body.cs-drawer-open .cs-drawer { opacity: 1; visibility: visible; transform: none; }
.cs-drawer .cs-drawer-logo img { height: 40px; margin: 6px 0 16px; }
.cs-drawer-close { float: right; width: 38px; height: 38px; border: 1px solid var(--cs-line); background: #fff; border-radius: 8px; font-size: 18px; cursor: pointer; color: var(--cs-ink); }
.cs-drawer form { margin: 14px 0 18px; }
.cs-drawer-nav { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cs-line-soft); }
.cs-drawer-nav > li { border-bottom: 1px solid var(--cs-line-soft); }
.cs-drawer-nav > li > button, .cs-drawer-nav > li > a {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 14px 2px; background: none; border: 0; font-size: 15px; font-weight: 600; color: var(--cs-ink); cursor: pointer; text-transform: uppercase; letter-spacing: .04em; font-family: var(--cs-sans);
}
.cs-drawer-sub { list-style: none; margin: 0 0 8px; padding: 0 0 0 10px; display: none; }
.cs-drawer-sub.is-open { display: block; }
.cs-drawer-sub a { display: flex; justify-content: space-between; padding: 8px 4px; font-size: 13.5px; color: var(--cs-ink-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }
/* v5.0.5 抽屉「更多品牌」折叠区：绿色主题色按钮，内层子品牌手风琴稍小 */
.cs-drawer-more-wrap .cs-drawer-more { color: var(--cs-green); }
.cs-drawer-acc--sub { padding: 11px 2px; font-size: 14px; }
.cs-drawer-acc--sub + .cs-drawer-sub { margin: 0 0 6px; }

/* =========================================================
   7. Hero（v5 居中沉浸式：径向遮罩 + 玻璃拟态搜索 + 底部渐隐）
   ========================================================= */
.cs-hero { position: relative; color: #fff; overflow: hidden; background: #0a2e21; }
.cs-hero-bg { position: absolute; inset: 0; }
.cs-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.cs-hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 95% at 50% 14%, rgba(4,26,18,.32) 0%, rgba(4,26,18,.54) 55%, rgba(3,18,12,.84) 100%); }
.cs-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 130px; background: linear-gradient(180deg, rgba(250,250,248,0), var(--cs-bg)); z-index: 3; pointer-events: none; }
.cs-hero-inner { position: relative; z-index: 2; text-align: center; max-width: 780px; margin: 0 auto; padding: clamp(88px, 13vh, 148px) 0 clamp(124px, 15vh, 172px); }
.cs-kicker { display: inline-block; font-family: var(--cs-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cs-gold); background: rgba(176,141,62,.10); border: 1px solid rgba(176,141,62,.32); padding: 5px 15px; border-radius: 999px; margin: 0 0 18px; }
.cs-hero .cs-kicker { color: #e2c37a; background: rgba(176,141,62,.16); border-color: rgba(226,195,122,.42); }
.cs-hero h1 { font-size: clamp(34px, 5.2vw, 58px); color: #fff; margin-bottom: 16px; letter-spacing: -.01em; }
.cs-hero-sub { font-size: clamp(15px, 1.5vw, 17.5px); color: rgba(255,255,255,.88); max-width: 560px; margin: 0 auto 30px; }
.cs-hero p { font-size: 16px; color: rgba(255,255,255,.85); max-width: 460px; margin-bottom: 26px; }
.cs-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; justify-content: center; }
.cs-hero-search { max-width: 520px; margin: 0 auto; position: relative; }
.cs-hero-search .cs-input { padding: 14px 128px 14px 46px; border-radius: 999px; border: 0; background: rgba(255,255,255,.96); box-shadow: 0 10px 34px rgba(2,14,9,.28); }
.cs-hero-search .cs-search-ico { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--cs-muted); }
.cs-hero-search .btn { position: absolute; right: 6px; top: 5px; bottom: 5px; padding: 0 24px; border-radius: 999px; }
.cs-hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 38px; list-style: none; margin: 38px 0 0; padding: 0; }
.cs-hero-stats li { display: flex; align-items: baseline; gap: 9px; }
.cs-hero-stats b { font-family: var(--cs-serif); font-size: 23px; font-weight: 700; color: #e2c37a; line-height: 1; }
.cs-hero-stats span { font-size: 13px; color: rgba(255,255,255,.78); letter-spacing: .06em; }

/* =========================================================
   8. Trust Bar（v5.0.1 商品页底部：全幅白底 + 区块标题 + 四张卡片）
   ========================================================= */
.cs-trust { background: #fff; border-top: 1px solid var(--cs-line); padding: 54px 0 60px; }
.cs-trust-head { margin-bottom: 28px; }
.cs-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* v5.0.2：图标居中卡片 —— 纵向堆叠（图标在上居中、标题副标题居中）；v5.0.3：justify-content center 内容整体垂直居中 */
/* v5.0.4：修复真根因 —— 原 .cs-trust-item span（优先级 0,1,1）覆盖 .cs-trust-ico 的 display:flex（0,1,0），
   致 SVG 图标贴圆顶部 14px 不居中；副标题改用专用类 .cs-trust-desc 避免冲突；
   并给副标题 min-height 2 行，四卡内容等高 → 图标 Y 位置跨卡对齐（不再一上一下） */
.cs-trust-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; background: var(--cs-bg); border: 1px solid var(--cs-line); border-radius: 16px; padding: 24px 22px; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.cs-trust-item:hover { border-color: #bfd4c8; transform: translateY(-3px); box-shadow: var(--cs-shadow-soft); }
.cs-trust-ico { flex: 0 0 auto; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--cs-green-soft); border: 1px solid #cfe0d7; border-radius: 50%; color: var(--cs-green); box-shadow: 0 6px 16px rgba(20,83,58,.10); }
.cs-trust-ico svg { width: 26px; height: 26px; }
.cs-trust-item b { display: block; font-size: 15px; color: var(--cs-ink); margin-bottom: 4px; }
.cs-trust-desc { display: block; font-size: 12.5px; color: var(--cs-muted); line-height: 1.6; min-height: 40px; } /* 副标题固定 2 行高：跨卡等高，图标/标题/副标题首行全部水平对齐 */

/* =========================================================
   9. Section Shells
   ========================================================= */
.cs-section { padding: 64px 0; }
.cs-section--grey { background: #f3f4f0; }
.cs-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.cs-section-head h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 0; }
.cs-section-head .cs-kicker { margin-bottom: 10px; }
.cs-viewall { font-size: 13px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; padding: 8px 18px; border: 1px solid var(--cs-line); border-radius: 999px; transition: all .2s ease; }
.cs-viewall:hover { border-color: var(--cs-green); background: var(--cs-green-soft); color: var(--cs-green-deep); }

/* =========================================================
   10. Product Grid & Card
   ========================================================= */
.cs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.cs-empty-note { text-align: center; color: var(--cs-muted); font-size: 15px; padding: 34px 0 26px; }

/* v5.0.8 商品卡片：「质检工序」同款观感——图片 cover 填满 1/1（竖图不再白边信箱），
 * 底部深色渐变浮层只显 系列+名称（价格填写了才显示）；尺寸/表盘/Ref 撒下卡片（详情页仍完整）。
 * v5.0.1–v5.0.4 的 contain 完整显示 + 白底衬方案撤销（2026-09-29 用户要求改质检同款） */
.cs-card { position: relative; background: var(--cs-card); border: 0; border-radius: 16px; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; box-shadow: 0 1px 2px rgba(15,34,26,.05); }
.cs-card:hover { box-shadow: 0 22px 48px rgba(15,34,26,.16); transform: translateY(-6px); }
.cs-card-img { position: relative; display: block; background: #fff; aspect-ratio: 1/1; overflow: hidden; } /* 白底兜底透明 PNG */
.cs-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } /* 质检同款 cover 填满方形区 */
.cs-card:hover .cs-card-img img { transform: scale(1.06); }
.cs-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--cs-gold); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; box-shadow: 0 4px 14px rgba(150,120,50,.35); }
.cs-badge--oos { background: #6b706c; }
.cs-card-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; background: linear-gradient(transparent, rgba(6,26,18,.88)); padding: 46px 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.cs-card-cap-cat { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a9dcc0; }
.cs-card-cap b { font-family: var(--cs-serif); font-size: 15px; font-weight: 700; color: #fff; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.cs-card-cap .cs-card-price { margin: 0; padding: 2px 0 0; }
.cs-card-cap .cs-price-now { font-size: 16px; color: #fff; }
.cs-card-cap .cs-price-old { font-size: 12px; color: rgba(255,255,255,.55); }
.cs-card-img > .cs-card-price { position: absolute; left: 14px; bottom: 12px; z-index: 2; } /* 无系列无名称但填了价的兜底 */
.cs-price-now { font-family: var(--cs-serif); font-size: 21px; font-weight: 700; color: var(--cs-green); }
.cs-price-old { font-size: 13.5px; color: var(--cs-muted); text-decoration: line-through; }

/* =========================================================
   11. QC Section
   ========================================================= */
.cs-qc { display: grid; grid-template-columns: 1fr 1.05fr 1.05fr; gap: 22px; align-items: stretch; }
.cs-qc-text h2 { font-size: clamp(22px, 2.6vw, 30px); }
.cs-qc-list { list-style: none; margin: 16px 0 22px; padding: 0; }
.cs-qc-list li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 14.5px; color: var(--cs-ink-soft); }
.cs-qc-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 17px; height: 17px; border-radius: 50%; background: var(--cs-green-soft) var(--cs-check) center/11px no-repeat; border: 1px solid #cfe0d7; }
.cs-qc-card { position: relative; border-radius: 16px; overflow: hidden; background: #fff; border: 0; box-shadow: 0 1px 2px rgba(15,34,26,.05); transition: transform .25s ease, box-shadow .25s ease; }
.cs-qc-card:hover { transform: translateY(-5px); box-shadow: var(--cs-shadow); }
.cs-qc-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; }
.cs-qc-cap { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(6,26,18,.88)); color: #fff; padding: 40px 18px 16px; }
.cs-qc-cap b { font-family: var(--cs-serif); font-size: 16px; display: block; margin-bottom: 3px; }
.cs-qc-cap span { font-size: 12.5px; color: rgba(255,255,255,.8); }

/* =========================================================
   12. Brand / Series Cards（封面 = 后台上传）
   ========================================================= */
.cs-colls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cs-coll { position: relative; border-radius: var(--cs-radius); overflow: hidden; aspect-ratio: 1/1; background: var(--cs-img-bg); border: 1px solid var(--cs-line); }
.cs-coll img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cs-coll:hover img { transform: scale(1.07); }
.cs-coll-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #e7f1ec 0%, #d3e4da 100%); color: var(--cs-green); font-family: var(--cs-serif); }
.cs-coll-fallback b { font-size: clamp(28px, 4vw, 44px); font-weight: 700; opacity: .55; }
.cs-coll-name { position: absolute; inset: auto 0 0 0; background: linear-gradient(transparent, rgba(6,26,18,.85)); color: #fff; padding: 34px 12px 11px; text-align: center; font-family: var(--cs-serif); font-size: 14.5px; font-weight: 700; letter-spacing: .04em; }
.cs-coll-count { display: block; font-family: var(--cs-sans); font-size: 11px; font-weight: 400; color: rgba(255,255,255,.75); letter-spacing: .1em; text-transform: uppercase; }

/* =========================================================
   14. FAQ Accordion
   ========================================================= */
.cs-faq { max-width: 860px; margin: 0 auto; }
.cs-faq-item { background: #fff; border: 1px solid var(--cs-line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.cs-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 20px; background: none; border: 0; cursor: pointer; font-family: var(--cs-serif); font-size: 16.5px; font-weight: 700; color: var(--cs-ink); text-align: left; }
.cs-faq-q .cs-plus { flex: 0 0 22px; width: 22px; height: 22px; position: relative; }
.cs-faq-q .cs-plus::before, .cs-faq-q .cs-plus::after { content: ""; position: absolute; background: var(--cs-gold); left: 50%; top: 50%; transform: translate(-50%,-50%); transition: all .25s; }
.cs-faq-q .cs-plus::before { width: 14px; height: 2px; }
.cs-faq-q .cs-plus::after { width: 2px; height: 14px; }
.cs-faq-item.is-open .cs-plus::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.cs-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.cs-faq-a > div { padding: 0 20px 18px; color: var(--cs-ink-soft); font-size: 14.5px; }
.cs-faq-item.is-open .cs-faq-a > div { border-top: 1px dashed var(--cs-line); padding-top: 14px; }

/* =========================================================
   15. Blog Cards
   ========================================================= */
.cs-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cs-post { background: #fff; border: 1px solid var(--cs-line); border-radius: var(--cs-radius); overflow: hidden; transition: box-shadow .22s ease, transform .22s ease; }
.cs-post:hover { box-shadow: var(--cs-shadow); transform: translateY(-4px); }
.cs-post-img { aspect-ratio: 16/10; overflow: hidden; background: var(--cs-img-bg); }
.cs-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cs-post:hover .cs-post-img img { transform: scale(1.05); }
.cs-post-body { padding: 18px 20px 22px; }
.cs-post-meta { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted); margin-bottom: 8px; }
.cs-post-meta .cs-dot::before { content: " · "; }
.cs-post h3 { font-size: 19px; margin: 0 0 8px; }
.cs-post h3 a { color: inherit; }
.cs-post p { font-size: 13.5px; color: var(--cs-ink-soft); margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cs-readmore { font-size: 13px; font-weight: 700; }
.cs-readmore::after { content: " →"; }

/* =========================================================
   16. Shop Archive & Filters
   ========================================================= */
.cs-shop-head { padding: 34px 0 26px; border-bottom: 1px solid var(--cs-line); background: #fff; }
.cs-breadcrumb { font-size: 12.5px; color: var(--cs-muted); margin-bottom: 10px; }
.cs-breadcrumb a { color: var(--cs-muted); }
.cs-breadcrumb a:hover { color: var(--cs-green); }
.cs-breadcrumb .cs-sep::before { content: " › "; padding: 0 4px; color: #c1c5c1; }
.cs-shop-title { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 8px; }
.cs-shop-sub { color: var(--cs-ink-soft); max-width: 720px; margin: 0 0 18px; font-size: 14.5px; }
.cs-shop-body { display: grid; grid-template-columns: 260px 1fr; gap: 34px; padding: 34px 0 60px; align-items: start; }

/* 品牌/系列页封面横幅（封面图 = 后台上传，未上传显示素色） */
.cs-term-hero { position: relative; color: #fff; background: linear-gradient(120deg, #07513a 0%, #054733 55%, #062f22 100%); overflow: hidden; }
.cs-term-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-term-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,28,20,.88) 0%, rgba(4,28,20,.55) 55%, rgba(4,28,20,.12) 100%); }
.cs-term-hero--plain::after { background: none; }
.cs-term-hero-inner { position: relative; z-index: 2; padding: 46px 0 44px; max-width: 640px; }
.cs-term-hero-parent { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; }
.cs-term-hero-parent:hover { color: #fff; border-color: #fff; }
.cs-term-hero h1 { color: #fff; font-size: clamp(28px, 4vw, 42px); margin-bottom: 8px; }
.cs-term-hero p { color: rgba(255,255,255,.85); font-size: 15px; margin-bottom: 10px; max-width: 520px; }
.cs-term-hero-count { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-gold); }

/* 系列快捷切换胶囊（系列页内同品牌其他系列） */
.cs-series-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; font-size: 13px; color: var(--cs-muted); }
.cs-chip { display: inline-block; background: #fff; border: 1px solid var(--cs-line); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--cs-ink-soft); }
.cs-chip:hover { border-color: var(--cs-green); color: var(--cs-green); }
.cs-chip.is-active { background: var(--cs-green); border-color: var(--cs-green); color: #fff; }

/* Sidebar filters */
.cs-filters { background: #fff; border: 1px solid var(--cs-line); border-radius: 12px; padding: 20px; position: sticky; top: 84px; }
.cs-filters h3 { font-family: var(--cs-sans); font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cs-ink); margin: 22px 0 10px; }
.cs-filters h3:first-child { margin-top: 4px; }
.cs-filter-search { position: relative; }
.cs-filter-search .cs-input { padding-left: 38px; }
.cs-filter-search svg { position: absolute; left: 11px; top: 11px; width: 17px; height: 17px; color: var(--cs-muted); }
.cs-coll-list { list-style: none; margin: 0; padding: 0; }
.cs-coll-list a { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 6px; font-size: 13.5px; color: var(--cs-ink-soft); }
.cs-coll-list a:hover, .cs-coll-list a.is-active { background: var(--cs-green-soft); color: var(--cs-green); font-weight: 600; }
.cs-coll-list .cs-count { font-size: 12px; color: var(--cs-muted); }
/* 品牌 → 系列层级树（系列缩进） */
.cs-coll-tree > li { margin-bottom: 4px; }
.cs-coll-children { list-style: none; margin: 2px 0 4px; padding-left: 12px; border-left: 2px solid var(--cs-line); }
.cs-coll-children a { font-size: 13px; padding: 4px 8px; }
.cs-filters .btn { margin-top: 20px; }
.cs-filter-clear { display: block; text-align: center; font-size: 12.5px; color: var(--cs-muted); margin-top: 10px; }
.cs-filter-clear:hover { color: var(--cs-danger); }
.cs-filters-toggle { display: none; width: 100%; margin-bottom: 16px; padding: 12px; border: 1px solid var(--cs-line); border-radius: 8px; background: #fff; font-weight: 600; cursor: pointer; font-size: 14px; }

.cs-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.cs-result-count { font-size: 13px; color: var(--cs-muted); }
.cs-sortbar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--cs-ink-soft); }
.cs-sortbar select { width: auto; padding: 8px 34px 8px 12px; }

/* =========================================================
   17. Product Detail
   ========================================================= */
.cs-pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; padding: 34px 0 26px; align-items: start; }
.cs-gallery, .cs-pdp-info { min-width: 0; } /* 关键：横排缩略条 overflow 场景下防止网格子项被内容撑宽（移动端变形根因） */
.cs-gallery-main { position: relative; background: #fff; border: 1px solid var(--cs-line); border-radius: 18px; overflow: hidden; cursor: zoom-in; aspect-ratio: 1/1; box-shadow: var(--cs-shadow-soft); }
.cs-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 3%; transition: opacity .2s, transform .45s ease; } /* v5.0.1：主图完整显示不裁切 */
.cs-gallery-main:hover img { transform: scale(1.025); }
.cs-gallery-zoomtip { position: absolute; right: 12px; bottom: 12px; background: rgba(22,25,28,.72); color: #fff; font-size: 11.5px; padding: 5px 11px; border-radius: 999px; letter-spacing: .05em; pointer-events: none; }
.cs-gallery-thumbs { display: flex; flex-wrap: nowrap; gap: 9px; margin-top: 12px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; scrollbar-color: #c7cdc8 transparent; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.cs-gallery-thumbs::-webkit-scrollbar { height: 5px; }
.cs-gallery-thumbs::-webkit-scrollbar-thumb { background: #c7cdc8; border-radius: 99px; }
.cs-thumb { flex: 0 0 74px; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #fff; padding: 0; scroll-snap-align: start; box-shadow: inset 0 0 0 1px var(--cs-line); }
.cs-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; } /* v5.0.1：缩略图同样完整显示 */
.cs-thumb.is-active, .cs-thumb:hover { border-color: var(--cs-gold); box-shadow: inset 0 0 0 1px rgba(176,141,62,.3); }
/* v4.0.2 横排小图条：左右箭头（仅当可滚动时显示） */
.cs-thumbs-wrap { position: relative; margin-top: 12px; }
.cs-thumbs-wrap .cs-gallery-thumbs { margin-top: 0; }
.cs-thumbs-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--cs-line); background: rgba(255,255,255,.96); color: var(--cs-ink); font-size: 20px; font-family: Georgia, serif; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(20,30,25,.16); z-index: 2; }
.cs-thumbs-wrap.is-scrollable .cs-thumbs-nav { display: flex; }
.cs-thumbs-nav--prev { left: -12px; }
.cs-thumbs-nav--next { right: -12px; }
.cs-thumbs-nav:hover { border-color: var(--cs-gold); color: var(--cs-green); }
.cs-thumbs-nav[disabled] { opacity: .35; cursor: default; box-shadow: none; }

.cs-lightbox { position: fixed; inset: 0; background: rgba(8,16,12,.93); z-index: 200; display: none; align-items: center; justify-content: center; padding: 4vh 4vw; cursor: zoom-out; }
.cs-lightbox.is-open { display: flex; }
.cs-lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 8px; }
.cs-lightbox-close { position: absolute; top: 18px; right: 22px; background: none; border: 0; color: #fff; font-size: 34px; cursor: pointer; line-height: 1; }

.cs-pdp-cats { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-gold); margin: 0 0 12px; }
.cs-pdp-cats a { color: inherit; }
.cs-pdp-cats a:hover { color: var(--cs-green); }
.cs-pdp-cats .cs-sep::before { content: " · "; color: #cfc39c; }
.cs-pdp-info h1 { font-size: clamp(25px, 3.1vw, 34px); margin-bottom: 10px; letter-spacing: -.005em; }
.cs-pdp-ref { font-size: 13px; color: var(--cs-muted); letter-spacing: .05em; margin-bottom: 0; padding-bottom: 16px; border-bottom: 1px solid var(--cs-line-soft); }
.cs-pdp-chips { margin: 16px 0 4px; }
.cs-pdp-chip { display: inline-block; background: var(--cs-green-soft); color: var(--cs-green); border: 1px solid #cfe0d7; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin: 0 6px 10px 0; }
.cs-pdp-chip--oos { background: #f3ecec; border-color: #e0c8c5; color: #8a3d36; }
/* 价格卡（v5.0.1：独立卡片，售价大字 + 划线价 + 优惠角标） */
.cs-pdp-pricebox { background: #fff; border: 1px solid var(--cs-line); border-radius: 16px; padding: 20px 24px; margin: 14px 0 24px; box-shadow: var(--cs-shadow-soft); }
.cs-pdp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 0; }
.cs-pdp-price .cs-price-now { font-size: 36px; }
.cs-pdp-save { background: var(--cs-gold); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; letter-spacing: .05em; }
.cs-pdp-priceold { font-size: 15.5px; color: var(--cs-muted); text-decoration: line-through; }

/* Order form（仅短代码 [cs_inquiry_form] 使用，商品页不再展示） */
.cs-order { background: #fff; border: 1px solid var(--cs-line); border-top: 3px solid var(--cs-green); border-radius: 0 0 12px 12px; padding: 22px 24px; margin: 22px 0; }
.cs-order h3 { margin-bottom: 4px; }
.cs-order > p { font-size: 13px; color: var(--cs-muted); margin-bottom: 14px; }
.cs-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.cs-order-grid .cs-field-full { grid-column: 1 / -1; }
.cs-order-notice { background: var(--cs-green-soft); border: 1px solid #cfe0d7; color: var(--cs-green-deep); border-radius: 8px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.cs-order-notice b { font-weight: 700; }

/* 无图素色占位（V4：不再回退主题内置图） */
.cs-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 100%; background: linear-gradient(135deg, #f5f6f3 0%, #e9ece7 100%); color: #b9c2bc; }
.cs-noimg svg { width: 38%; height: 38%; max-width: 150px; }
.cs-noimg--main svg { width: 30%; height: 30%; }

/* 规格参数卡（v5.0.1：卡片化 + 浅底表头 + hairline 行分隔；移动端键值堆叠带内边距，文字不再贴边） */
.cs-specs-card { background: #fff; border: 1px solid var(--cs-line); border-radius: 16px; margin-top: 24px; box-shadow: var(--cs-shadow-soft); overflow: hidden; }
.cs-specs-card h2 { font-size: 18px; margin: 0; padding: 16px 22px 13px; border-bottom: 1px solid var(--cs-line); background: linear-gradient(180deg, #fcfcfa 0%, #f7f8f4 100%); }
.cs-specs-table { width: 100%; border-collapse: collapse; }
.cs-specs-table tr { display: table; width: 100%; table-layout: fixed; }
.cs-specs-table th, .cs-specs-table td { padding: 11px 22px 11px 0; font-size: 13.5px; border-bottom: 1px solid var(--cs-line-soft); text-align: left; vertical-align: top; }
.cs-specs-table tr:last-child th, .cs-specs-table tr:last-child td { border-bottom: 0; }
.cs-specs-table th { width: 36%; padding-left: 22px; font-family: var(--cs-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cs-muted); }
.cs-specs-table td { color: var(--cs-ink); font-weight: 500; }

/* 商品介绍 / 相关推荐（v5.0.1） */
.cs-pdp-about { padding: 44px 0 10px; }
.cs-pdp-about h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 18px; }
.cs-pdp-prose { margin: 0; }
.cs-pdp-related { padding: 36px 0 76px; }

/* =========================================================
   18. Pagination & Notices
   ========================================================= */
.cs-pagination { display: flex; justify-content: center; gap: 8px; margin: 44px 0 10px; flex-wrap: wrap; }
.cs-pagination .page-numbers { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; background: #fff; border: 1px solid var(--cs-line); border-radius: 8px; color: var(--cs-ink-soft); font-size: 14px; font-weight: 600; }
.cs-pagination .page-numbers:hover { border-color: var(--cs-green); color: var(--cs-green); }
.cs-pagination .page-numbers.current { background: var(--cs-green); border-color: var(--cs-green); color: #fff; }
/* v5.0.5 分页：上一页/下一页带文字，省略号去按钮底；「第 X / Y 页」手机端显示 */
.cs-pagination .page-numbers.prev, .cs-pagination .page-numbers.next { padding: 0 15px; }
.cs-pagination .page-numbers.dots { min-width: auto; height: auto; border: 0; background: none; box-shadow: none; color: var(--cs-muted); cursor: default; }
.cs-pagination .cs-page-info { display: none; }
.cs-alert { border-radius: 10px; padding: 14px 18px; margin: 20px 0; font-size: 14.5px; }
.cs-alert--ok { background: var(--cs-green-soft); border: 1px solid #cfe0d7; color: var(--cs-green-deep); }
.cs-alert--err { background: #fbeeed; border: 1px solid #ecc7c3; color: var(--cs-danger); }
.cs-none { text-align: center; padding: 70px 20px; color: var(--cs-muted); background: #fff; border: 1px dashed var(--cs-line); border-radius: 12px; }
.cs-none b { display: block; font-family: var(--cs-serif); font-size: 20px; color: var(--cs-ink-soft); margin-bottom: 6px; }

/* =========================================================
   19. Footer
   ========================================================= */
.cs-footer { background: #06281c; color: #c8d4cd; margin-top: auto; }
.cs-footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; padding: 56px 0 40px; }
.cs-footer-logo img { height: 44px; margin-bottom: 16px; }
.cs-footer-about { font-size: 13.5px; color: #9db3a8; margin-bottom: 18px; max-width: 300px; }
.cs-footer h4 { color: var(--cs-gold); font-family: var(--cs-sans); font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 16px; }
.cs-footer ul { list-style: none; margin: 0; padding: 0; }
.cs-footer ul li { margin-bottom: 10px; }
.cs-footer ul a { color: #c8d4cd; font-size: 13.5px; }
.cs-footer ul a:hover { color: #fff; }
.cs-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: #7e948a; }

/* ============ 语言切换器（中文 / EN / IT） ============ */
.cs-lang { display: inline-flex; align-items: center; gap: 2px; background: var(--cs-bg); border: 1px solid var(--cs-line); border-radius: 999px; padding: 2px; }
.cs-lang-item { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--cs-muted); text-decoration: none; transition: background .18s ease, color .18s ease; }
.cs-lang-item:hover { color: var(--cs-green); background: #fff; }
.cs-lang-item.is-active { background: var(--cs-green); color: #fff; }

/* 移动抽屉内语言切换 */
.cs-drawer .cs-lang { margin: 14px 0 4px; }

/* ============ 订购表单：支付方式 / 配送提示 ============ */
.cs-order-paynote { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: rgba(7, 94, 64, .06); border-left: 3px solid var(--cs-green); color: var(--cs-ink-soft); font-size: 13px; line-height: 1.6; }
.cs-pay-choice { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; font-size: 13.5px; line-height: 1.5; color: var(--cs-ink); font-weight: 500; cursor: pointer; }
.cs-pay-choice input { margin-top: 3px; accent-color: var(--cs-green); }

/* =========================================================
   20. Content Pages (blog/page/search/404)
   ========================================================= */
.cs-page { padding: 40px 0 70px; }
.cs-prose { max-width: 780px; margin: 0 auto; font-size: 15.5px; }
.cs-prose h2 { font-size: 26px; margin: 1.6em 0 .6em; }
.cs-prose h3 { font-size: 20px; margin: 1.4em 0 .5em; }
.cs-prose img { border-radius: 10px; margin: 1em 0; }
.cs-prose blockquote { border-left: 3px solid var(--cs-gold); margin: 1.2em 0; padding: 6px 20px; color: var(--cs-ink-soft); font-style: italic; background: #fff; border-radius: 0 8px 8px 0; }
.cs-prose ul, .cs-prose ol { padding-left: 22px; margin: 0 0 1em; }
.cs-prose li { margin-bottom: 6px; }
.cs-page-head { padding: 36px 0 0; }
.cs-page-head h1 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 10px; }
.cs-404 { text-align: center; padding: 90px 20px; }
.cs-404 b { display: block; font-family: var(--cs-serif); font-size: 88px; color: var(--cs-green); line-height: 1; margin-bottom: 10px; }
.cs-404 .btn { margin-top: 18px; }
.cs-searchform-inline { max-width: 420px; margin: 0 auto; position: relative; }
.cs-searchform-inline .cs-input { padding-left: 42px; }
.cs-searchform-inline svg { position: absolute; left: 12px; top: 11px; width: 18px; height: 18px; color: var(--cs-muted); }

/* =========================================================
   21. Utilities & Responsive
   ========================================================= */
.cs-check-svg { display: none; }
.cs-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.cs-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .cs-grid { grid-template-columns: repeat(3, 1fr); }
  .cs-colls { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .cs-subnav { max-width: 280px; }
  .cs-qc { grid-template-columns: 1fr 1fr; }
  .cs-qc-text { grid-column: 1 / -1; }
  .cs-pdp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cs-shop-body { grid-template-columns: 1fr; }
  .cs-filters { position: static; }
  .cs-filters.is-hidden-mobile { display: none; }
  .cs-filters-toggle { display: block; }
  .cs-footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .cs-nav-row, .cs-header-search { display: none; }
  .cs-burger { display: block; }
  /* 页头布局：Logo 左，语言切换 + 汉堡靠右（修复 order 错位导致的元素乱序） */
  .cs-header-top { gap: 10px; }
  .cs-header-top .cs-lang { order: 0; margin-left: auto; }
  .cs-burger { margin-left: 0; }
  .cs-posts { grid-template-columns: 1fr 1fr; }
  .cs-trust { padding: 46px 0 50px; }
  .cs-trust-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .cs-trust-item { padding: 22px 20px; }
  .cs-trust-ico { width: 52px; height: 52px; }
  .cs-trust-ico svg { width: 24px; height: 24px; }
  .cs-hero-inner { padding: 56px 0 72px; }
  .cs-hero-stats { gap: 10px 26px; margin-top: 30px; }
  .cs-hero-stats b { font-size: 20px; }
  .cs-order-grid { grid-template-columns: 1fr; }
  /* 封面横幅：渐变改纵向，文字始终落在深色底上 */
  .cs-term-hero::after { background: linear-gradient(180deg, rgba(4,28,20,.2) 0%, rgba(4,28,20,.6) 50%, rgba(4,28,20,.9) 100%); }
  .cs-term-hero-inner { padding: 36px 0 34px; }
}
@media (max-width: 640px) {
  .cs-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cs-colls { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .cs-posts { grid-template-columns: 1fr; }
  .cs-qc { grid-template-columns: 1fr; }
  /* v5.0.5 分页手机端：隐藏中间页码与省略号，只留 上一页/当前页/下一页 + 第 X / Y 页 */
  .cs-pagination { gap: 6px; margin: 34px 0 6px; }
  .cs-pagination .page-numbers:not(.prev):not(.next):not(.current) { display: none; }
  .cs-pagination .page-numbers.prev, .cs-pagination .page-numbers.next { padding: 0 12px; font-size: 13.5px; }
  .cs-pagination .cs-page-info { display: inline-flex; align-items: center; height: 40px; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--cs-muted); }
  .cs-thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 7px; }
  .cs-thumbs-nav { width: 26px; height: 26px; font-size: 17px; }
  .cs-thumbs-nav--prev { left: -8px; }
  .cs-thumbs-nav--next { right: -8px; }
  .cs-footer-main { grid-template-columns: 1fr; gap: 28px; }
  .cs-card-cap { padding: 34px 12px 11px; }
  .cs-card-cap b { font-size: 13.5px; }
  .cs-card-cap-cat { font-size: 10px; }
  .cs-card-cap .cs-price-now { font-size: 14.5px; }
  .cs-section { padding: 40px 0; }
  .cs-filters .cs-input, .cs-filters select { font-size: 13px; }
  /* 系列胶囊换行友好 */
  .cs-series-chips { gap: 6px; }
  .cs-chip { padding: 5px 11px; font-size: 12.5px; }
  /* 信任条改单列（v5.0.2 居中卡片，保持纵向居中） */
  .cs-trust { padding: 36px 0 42px; }
  .cs-trust-grid { grid-template-columns: 1fr; gap: 12px; }
  .cs-trust-item { padding: 20px 18px; gap: 10px; }
  .cs-trust-ico { width: 48px; height: 48px; }
  .cs-trust-ico svg { width: 22px; height: 22px; }
  /* Hero 遮罩改纵向：文字始终落在深色底上 */
  .cs-hero-bg::after { background: linear-gradient(180deg, rgba(5,32,22,.30) 0%, rgba(5,32,22,.58) 46%, rgba(4,22,15,.92) 100%); }
  .cs-hero-inner { padding: 62px 0 76px; }
  .cs-hero::after { height: 88px; }
  .cs-hero-stats { gap: 8px 22px; margin-top: 26px; }
  .cs-hero-stats b { font-size: 18px; }
  .cs-hero-stats span { font-size: 12px; }
  /* 规格表改键值堆叠（v5.0.1：行带水平内边距，文字不再贴容器边缘） */
  .cs-specs-table, .cs-specs-table tbody { display: block; width: 100%; }
  .cs-specs-table tr { display: block; width: 100%; table-layout: auto; border-bottom: 1px solid var(--cs-line-soft); padding: 11px 18px 12px; }
  .cs-specs-table tr:last-child { border-bottom: 0; padding-bottom: 8px; }
  .cs-specs-table th, .cs-specs-table td { display: block; width: 100% !important; padding: 0; border-bottom: 0; text-align: left; }
  .cs-specs-table th { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-green); margin-bottom: 3px; }
  .cs-specs-table td { font-size: 14.5px; color: var(--cs-ink); }
  .cs-specs-card h2 { padding: 14px 18px 12px; font-size: 16.5px; }
  .cs-pdp-pricebox { padding: 15px 18px; margin: 12px 0 20px; }
  .cs-pdp-price .cs-price-now { font-size: 30px; }
  .cs-pdp-about { padding: 30px 0 6px; }
  .cs-pdp-related { padding: 26px 0 54px; }
  .cs-gallery-main { border-radius: 14px; }
  /* 订购表单留白收紧，输入框达到移动端触控高度并阻止 iOS 聚焦放大 */
  .cs-order { padding: 18px 16px; }
  .cs-input, input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="tel"], select, textarea { font-size: 16px; padding: 12px 14px; min-height: 46px; }
  textarea { min-height: 110px; }
}

@media (max-width: 480px) {
  /* 小屏 logo 缩小，防止页头挤压 */
  .cs-logo img { height: 40px; }
  .cs-header-top .cs-lang-item { min-width: 30px; padding: 0 6px; font-size: 11.5px; }
  /* 商城工具栏允许换行，防止挤压溢出 */
  .cs-toolbar { flex-wrap: wrap; gap: 10px 14px; }
  .cs-sortbar select { max-width: 62vw; }
  /* Hero 搜索框按钮内距收紧，留出更多输入空间 */
  .cs-hero-search .cs-input { padding-right: 104px; }
  .cs-hero-search .btn { padding: 0 18px; }
  .cs-hero-cta .btn { flex: 1 1 auto; }
  .cs-faq-q { font-size: 15.5px; }
  .cs-404 b { font-size: 64px; }
}