/* =============================================================================
   帝弘科技 www.szdhuv.com —— 核心样式（v12 零构建资产管线）
   分层：00 tokens → 10 base → 20 layout → 30 components → 40 utilities
   纪律：组件样式只允许取 var(--xxx)，禁止写死颜色/圆角/间距/字体。

   Stage 15 追加的「主题体系」分层（与上表并列，不改动既有层）：
     L0 本文件          —— 组件层，8 套主题共用（≤45KB）
     L1 theme.css       —— 主题变量层，自动生成（每套 ≤4KB，见 config/themes.php）
     L2 theme-variants.css —— 布局变体层，8 套共用（≤6KB）
     L3 resources/views/themes/{key}/overrides/ —— 视图覆盖层，默认 0 个
   因此「换主题」= 换一份 L1 变量表，组件与结构一个字都不动。
   ============================================================================= */

/* ---------- 00 tokens ---------- */
:root{
  /* 颜色 · 文字 */
  --c-ink:#1a1a1a; --c-ink-2:#4a4a4a; --c-ink-3:#7a7a7a;
  /* 颜色 · 表面（--c-surface 是输入框/二维码/图标按钮的「白底」，
     暗色主题必须覆盖它，否则会出现白底黑字的孤岛） */
  --c-bg:#ffffff; --c-bg-2:#f6f7f9; --c-line:#e3e6ea; --c-surface:#ffffff;
  /* 颜色 · 品牌（--c-on-accent 是主色底上的文字色） */
  --c-accent:#0b5cad; --c-accent-2:#0a4a8c; --c-accent-soft:#eef4fb; --c-on-accent:#ffffff;
  /* 颜色 · 语义三件套（前景 / 底色 / 描边） */
  --c-ok:#0f7b3f; --c-ok-bg:#eaf7ef; --c-ok-line:#c6e6d3;
  --c-warn:#8a5a00; --c-warn-bg:#fff7e6; --c-warn-line:#f0dcb0;
  --c-danger:#a4232b; --c-danger-bg:#fdecec; --c-danger-line:#f3c9cb;
  /* 图片占位渐变（无图时替 1:1 容器，避免 CLS） */
  --ph-1:#eef1f4; --ph-2:#e2e6ea;
  /* 圆角 / 间距 / 字号 / 字体 */
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:22px; --fs-xl:30px; --fs-2xl:40px;
  --lh:1.7; --ff:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06); --shadow-md:0 4px 16px rgba(16,24,40,.08);
  --container:1160px;
  /* 主题维度（L1 覆盖项）：密度倍率 / 栅格列数 / 最小触控目标 */
  --density:1; --grid-cols:4; --tap-min:40px;
}

/* ---------- 10 base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--ff);font-size:var(--fs-base);line-height:var(--lh);color:var(--c-ink);background:var(--c-bg);}
h1,h2,h3{margin:0 0 var(--sp-3);line-height:1.3;color:var(--c-ink);}
h1{font-size:var(--fs-xl);} h2{font-size:var(--fs-lg);} h3{font-size:var(--fs-md);}
p{margin:0 0 var(--sp-3);}
a{color:var(--c-accent);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;}

/* ---------- 20 layout ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--sp-4);}
.site-main{padding:var(--sp-5) 0 var(--sp-7);}

.site-header{border-bottom:1px solid var(--c-line);background:var(--c-bg);position:sticky;top:0;z-index:10;}
.site-header__inner{display:flex;align-items:center;gap:var(--sp-5);min-height:64px;flex-wrap:wrap;}
.site-header__brand{font-size:var(--fs-md);font-weight:700;color:var(--c-ink);}
.site-header__nav{display:flex;gap:var(--sp-4);}
.site-header__locales{margin-left:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap;}
.site-header__locales a{font-size:var(--fs-sm);color:var(--c-ink-2);padding:2px var(--sp-2);border-radius:var(--r-sm);}
.site-header__locales a.is-current{color:var(--c-accent);background:var(--c-accent-soft);font-weight:600;}

/* 顶部搜索 */
.site-header__search{display:flex;gap:0;flex:1 1 260px;max-width:420px;}
.site-header__search-input{flex:1 1 auto;min-width:0;border:1px solid var(--c-line);border-right:none;
  border-radius:var(--r-sm) 0 0 var(--r-sm);padding:7px var(--sp-3);font-size:var(--fs-sm);font-family:var(--ff);}
.site-header__search-input:focus{outline:none;border-color:var(--c-accent);}
.site-header__search-btn{border:1px solid var(--c-accent);background:var(--c-accent);color:#fff;
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:7px var(--sp-4);font-size:var(--fs-sm);cursor:pointer;font-family:var(--ff);}
.site-header__search-btn:hover{background:var(--c-accent-2);}

/* 搜索页 */
.search-bar{display:flex;gap:0;max-width:560px;margin-bottom:var(--sp-5);}
.search-bar__input{flex:1 1 auto;border:1px solid var(--c-line);border-right:none;
  border-radius:var(--r-sm) 0 0 var(--r-sm);padding:10px var(--sp-4);font-size:var(--fs-base);font-family:var(--ff);}
.search-bar__input:focus{outline:none;border-color:var(--c-accent);}
.search-bar__btn{border:1px solid var(--c-accent);background:var(--c-accent);color:#fff;
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:10px var(--sp-5);font-size:var(--fs-base);cursor:pointer;font-family:var(--ff);}
.search-bar__btn:hover{background:var(--c-accent-2);}
.search-count{color:var(--c-ink-3);font-size:var(--fs-sm);margin-bottom:var(--sp-4);}

.site-footer{margin-top:var(--sp-7);border-top:1px solid var(--c-line);background:var(--c-bg-2);padding:var(--sp-6) 0 var(--sp-5);font-size:var(--fs-sm);color:var(--c-ink-2);}
.site-footer__links{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-4);}
.site-footer__links a{color:var(--c-ink-2);}
.site-footer__copy{margin:0 0 var(--sp-3);color:var(--c-ink-3);}
/* 主体信息与联系方式（后台「系统设置 → 站点信息」可改；全空则不渲染本块） */
.site-footer__meta{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-3);color:var(--c-ink-3);}
.site-footer__meta a{color:var(--c-ink-2);}
.site-footer__legal{text-align:center;padding-top:var(--sp-3);border-top:1px dashed var(--c-line);}
.site-footer__legal a{color:var(--c-ink-2);}
.site-footer__legal .sep{margin:0 var(--sp-2);color:var(--c-ink-3);}

/* ---------- 30 components ---------- */
.hero{padding:var(--sp-6) 0 var(--sp-5);border-bottom:1px solid var(--c-line);margin-bottom:var(--sp-6);}
.hero__title{font-size:var(--fs-2xl);color:var(--c-accent);margin-bottom:var(--sp-3);}
.hero__tagline{font-size:var(--fs-lg);color:var(--c-ink-2);margin-bottom:var(--sp-4);}
.hero__desc{max-width:60ch;color:var(--c-ink-2);}

.section{margin-bottom:var(--sp-7);}
.section__title{font-size:var(--fs-lg);padding-left:10px;border-left:4px solid var(--c-accent);}

.notice{background:var(--c-accent-soft);border:1px solid var(--c-line);border-left:4px solid var(--c-accent);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);}
.notice h2{font-size:var(--fs-md);} .notice p{margin:0;color:var(--c-ink-2);}

/* 分类卡片 */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--sp-3);}
.cat-grid--sub{margin-bottom:var(--sp-5);}
.cat-card{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);background:var(--c-bg-2);border:1px solid var(--c-line);
  border-radius:var(--r-md);color:var(--c-ink);}
.cat-card:hover{border-color:var(--c-accent);background:var(--c-accent-soft);text-decoration:none;}
.cat-card__name{font-weight:600;}
.cat-card__count{color:var(--c-ink-3);font-size:var(--fs-xs);}

/* 商品卡片 */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--sp-4);}
.prod-card{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .15s;}
.prod-card:hover{box-shadow:var(--shadow-md);}
.prod-card__media{display:block;aspect-ratio:1/1;background:var(--c-bg-2);overflow:hidden;}
.prod-card__media img{width:100%;height:100%;object-fit:cover;}
.prod-card__noimg{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--ph-1),var(--ph-2));}
.prod-card__title{font-size:var(--fs-base);margin:var(--sp-3) var(--sp-3) var(--sp-2);font-weight:600;}
.prod-card__title a{color:var(--c-ink);}
.prod-card__meta{margin:0 var(--sp-3) var(--sp-2);display:flex;align-items:baseline;gap:var(--sp-2);}
.prod-card__price{color:var(--c-accent);font-weight:700;font-size:var(--fs-md);}
.prod-card__moq{font-size:var(--fs-xs);color:var(--c-ink-3);}
.prod-card__shop{margin:0 var(--sp-3) var(--sp-3);font-size:var(--fs-xs);color:var(--c-ink-3);}

/* 面包屑 */
.breadcrumb{font-size:var(--fs-sm);color:var(--c-ink-3);margin-bottom:var(--sp-4);}
.breadcrumb a{color:var(--c-ink-2);}
.breadcrumb__sep{margin:0 var(--sp-2);color:var(--c-ink-3);}

.page-title{font-size:var(--fs-xl);margin-bottom:var(--sp-5);}

/* 商品详情 */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6);margin-bottom:var(--sp-6);}
.pdp__main{width:100%;border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-bg-2);}
.pdp__noimg{aspect-ratio:1/1;border:1px solid var(--c-line);border-radius:var(--r-md);background:linear-gradient(135deg,var(--ph-1),var(--ph-2));}
.pdp__thumbs{display:flex;gap:var(--sp-2);margin-top:var(--sp-2);flex-wrap:wrap;}
.pdp__thumbs img{width:64px;height:64px;object-fit:cover;border:1px solid var(--c-line);border-radius:var(--r-sm);}
.pdp__title{font-size:var(--fs-xl);}
.pdp__shop{color:var(--c-ink-2);font-size:var(--fs-sm);}
.pdp__price{display:flex;align-items:baseline;gap:var(--sp-3);margin:var(--sp-4) 0;}
.pdp__price-value{font-size:var(--fs-2xl);font-weight:700;color:var(--c-accent);}
.pdp__moq{color:var(--c-ink-3);font-size:var(--fs-sm);}
.pdp__stock{margin-top:var(--sp-4);}
.pdp__note{margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--c-bg-2);
  border:1px dashed var(--c-line);border-radius:var(--r-md);color:var(--c-ink-2);font-size:var(--fs-sm);}
.pdp__desc{color:var(--c-ink-2);max-width:80ch;}

.tier{border-collapse:collapse;width:100%;max-width:360px;font-size:var(--fs-sm);margin:var(--sp-4) 0;}
.tier th,.tier td{border:1px solid var(--c-line);padding:var(--sp-2) var(--sp-3);text-align:left;}
.tier th{background:var(--c-bg-2);font-weight:600;}

.badge{display:inline-block;padding:1px var(--sp-2);border-radius:var(--r-sm);font-size:var(--fs-xs);}
.badge--ok{background:var(--c-ok-bg);color:var(--c-ok);}
.badge--out{background:var(--c-danger-bg);color:var(--c-danger);}

.pager{margin-top:var(--sp-5);}

/* 法务页 */
.legal{max-width:80ch;}
.legal__updated{color:var(--c-ink-3);font-size:var(--fs-sm);}
.legal__contact{color:var(--c-ink-2);font-size:var(--fs-sm);}

/* ---------- 40 utilities ---------- */
.text-center{text-align:center;}
.mt-4{margin-top:var(--sp-4);}

/* ---------- 断点 ---------- */
@media (max-width:900px){
  .pdp{grid-template-columns:1fr;}
}
@media (max-width:767px){
  :root{--fs-2xl:30px;--fs-xl:24px;--fs-lg:19px;}
  .site-header__locales{width:100%;margin-left:0;}
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
}

/* ---------- Stage 12：公告条 / 轮播 / 帮助中心 ---------- */

/* 首页顶部公告条 */
.notice-bar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  margin:var(--sp-4) 0;padding:10px var(--sp-4);border-radius:var(--r-md);
  background:var(--c-accent-soft);border:1px solid var(--c-line);font-size:var(--fs-sm);}
.notice-bar__tag{flex:0 0 auto;padding:2px 8px;border-radius:999px;
  background:var(--c-accent);color:var(--c-on-accent);font-size:var(--fs-xs);}
.notice-bar__list{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin:0;padding:0;
  list-style:none;flex:1 1 auto;min-width:0;}
.notice-bar__list a{color:var(--c-ink);}
.notice-bar__more{flex:0 0 auto;color:var(--c-accent);white-space:nowrap;}

/* 首页轮播 */
.hero-slider{display:grid;gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-6);}
.hero-slide{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--c-bg-2);}
.hero-slide img{display:block;width:100%;height:auto;}
.hero-slide__caption{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-4);
  background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;
  display:flex;flex-direction:column;gap:2px;}
.hero-slide__caption strong{font-size:var(--fs-lg);}
.hero-slide__caption span{font-size:var(--fs-sm);opacity:.9;}

/* 帮助中心 */
.help-group{margin-bottom:var(--sp-6);}
.help-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);}
.help-list li{border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--sp-4);background:var(--c-bg);}
.help-list a{font-weight:600;color:var(--c-ink);}
.help-list p{margin:6px 0 0;color:var(--c-ink-3);font-size:var(--fs-sm);}
.help-article{max-width:80ch;}
.help-article__body{margin-top:var(--sp-4);line-height:1.75;color:var(--c-ink);white-space:pre-wrap;}

/* 公告列表与详情 */
.notice-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);}
.notice-item{border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--sp-4);background:var(--c-bg);}
.notice-item__head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;}
.notice-item__head a{font-weight:600;color:var(--c-ink);}
.notice-item__meta{color:var(--c-ink-3);font-size:var(--fs-sm);}
.notice-item__body{margin:8px 0 0;color:var(--c-ink-2);font-size:var(--fs-sm);}
.notice-detail{max-width:80ch;}
.notice-detail__body{margin-top:var(--sp-4);line-height:1.75;white-space:pre-wrap;}

@media (max-width:767px){
  .notice-bar{flex-direction:column;align-items:flex-start;}
  .notice-bar__list{flex-direction:column;gap:6px;}
}

/* =============================================================================
   40 utilities —— Stage 15：密度（--density）的作用面
   -----------------------------------------------------------------------------
   密度只作用于「主题/模板确实会调」的少数表面：栅格间距、楼层间距、卡片内边距。
   --density 默认 1，此时 calc(var(--sp-N) * 1) 与原值**完全相等**，
   因此默认主题的渲染与改造前逐像素一致；只有主题显式把密度调成 0.7~1.35 时才变化。
   ============================================================================= */
.prod-grid{gap:calc(var(--sp-4) * var(--density));}
.cat-grid{gap:calc(var(--sp-3) * var(--density));}
.section{margin-bottom:calc(var(--sp-7) * var(--density));}
.prod-card__title{margin:calc(var(--sp-3) * var(--density)) calc(var(--sp-3) * var(--density)) calc(var(--sp-2) * var(--density));}
.prod-card__meta{margin:0 calc(var(--sp-3) * var(--density)) calc(var(--sp-2) * var(--density));}
.prod-card__shop{margin:0 calc(var(--sp-3) * var(--density)) calc(var(--sp-3) * var(--density));}

/* =============================================================================
   41 优惠券（Stage 16）
   -----------------------------------------------------------------------------
   券卡是「左侧面额 + 右侧信息 + 末列操作」的三段式：面额是用户最先要看的信息，
   所以固定在左侧、字号最大。栅格用 auto-fill，窄屏自动落成单列。
   .is-dead 只降透明度、不禁用交互 —— 已使用/已过期的券仍要能看清券码，
   用户可能要拿它找客服核对。
   ============================================================================= */
.coupon-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-bottom:var(--sp-6);}
.coupon-card{display:flex;align-items:stretch;gap:var(--sp-4);border:1px solid var(--c-line);
  border-radius:var(--r-md);background:var(--c-bg);padding:var(--sp-4);}
.coupon-card.is-dead{opacity:.6;}
.coupon-card__amount{flex:0 0 auto;min-width:92px;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-lg);font-weight:700;color:var(--c-accent);
  border-right:1px dashed var(--c-line);padding-right:var(--sp-4);}
.coupon-card__body{flex:1 1 auto;min-width:0;}
.coupon-card__name{font-weight:600;color:var(--c-ink);}
.coupon-card__cond,.coupon-card__meta,.coupon-card__code{margin-top:4px;color:var(--c-ink-3);font-size:var(--fs-sm);}
.coupon-card__desc{margin-top:6px;color:var(--c-ink-2);font-size:var(--fs-sm);}
.coupon-card__code code{font-family:var(--ff);letter-spacing:.06em;color:var(--c-ink-2);}
.coupon-card__action{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;
  justify-content:center;gap:var(--sp-2);}
.coupon-group-title{margin:var(--sp-5) 0 var(--sp-3);font-size:var(--fs-md);color:var(--c-ink);}
.btn.is-disabled{pointer-events:none;opacity:.5;}

@media (max-width:767px){
  .coupon-card{flex-direction:column;}
  .coupon-card__amount{border-right:0;border-bottom:1px dashed var(--c-line);
    padding:0 0 var(--sp-3);justify-content:flex-start;}
  .coupon-card__action{flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;}
}