/* =========================================================
   兰泽双会员店 · 品牌定制样式
   建筑加固行业风:深蓝主色 + 墨绿辅助 + 橙色点缀
   基于 Tailwind v2(本地静态),此处定义品牌组件类
   ========================================================= */

:root {
  --c-primary:   #0f2c43;   /* 深蓝 */
  --c-primary-2: #1a4060;   /* 深蓝-亮 */
  --c-primary-3: #e8eef4;   /* 深蓝-极浅 */
  --c-secondary: #17644f;   /* 墨绿 */
  --c-secondary-2: #1f7a61;
  --c-accent:    #f59e0b;   /* 橙 */
  --c-accent-2:  #b45309;
  --c-bg:        #f4f6f8;
  --c-line:      #e5e7eb;
  --c-text:      #1f2937;
  --c-muted:     #6b7280;
}

html { scroll-behavior: smooth; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
  padding-bottom: 60px; /* 给移动端底部导航留位 */
}
@media (min-width: 768px) {
  body { padding-bottom: 0; }
}

/* ---------- 通用品牌色 ---------- */
.text-brand { color: var(--c-primary); }
.text-brand-secondary { color: var(--c-secondary); }
.text-accent { color: var(--c-accent); }
.bg-brand { background-color: var(--c-primary); }
.bg-brand-2 { background-color: var(--c-primary-2); }
.bg-brand-3 { background-color: var(--c-primary-3); }
.bg-secondary { background-color: var(--c-secondary); }
.bg-accent { background-color: var(--c-accent); }

/* ---------- 按钮 ---------- */
.btn-brand {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: #fff;
  padding: .6rem 1.4rem; border-radius: .5rem;
  font-weight: 600; transition: all .2s;
}
.btn-brand:hover { background: var(--c-primary-2); color: #fff; }
.btn-accent {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-accent); color: #fff;
  padding: .6rem 1.4rem; border-radius: .5rem;
  font-weight: 600; transition: all .2s;
}
.btn-accent:hover { background: var(--c-accent-2); color: #fff; }
.btn-outline-brand {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--c-primary); color: var(--c-primary);
  padding: .55rem 1.3rem; border-radius: .5rem;
  font-weight: 600; transition: all .2s; background: #fff;
}
.btn-outline-brand:hover { background: var(--c-primary); color: #fff; }

/* ---------- 顶部公告栏 ---------- */
.announce-bar { background: var(--c-secondary); color: #eafaf3; font-size: .85rem; }
.announce-bar a { color: #ffe9bd; text-decoration: none; }

/* ---------- 主头部 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15, 44, 67, .97);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(15,44,67,.18);
}
.site-header .logo-title { color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.site-header .logo-sub { color: #9fb8cc; font-size: .7rem; letter-spacing: .2em; }
.site-header .search-box input {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #fff; border-radius: .5rem 0 0 .5rem; padding: .5rem .9rem; width: 100%; font-size: .9rem;
}
.site-header .search-box input::placeholder { color: #8fa6ba; }
.site-header .search-box input:focus { outline: none; border-color: var(--c-accent); }
.site-header .search-box button {
  background: var(--c-accent); color: #fff; border-radius: 0 .5rem .5rem 0;
  padding: 0 1rem; font-weight: 600;
}
.site-header .nav-link { color: #c9d6e2; font-size: .95rem; padding: .4rem .75rem; border-radius: .4rem; transition: all .2s; }
.site-header .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.site-header .nav-link.active { color: #fff; background: var(--c-accent); font-weight: 600; }
.cart-badge {
  position: absolute; top: -5px; right: -8px;
  background: var(--c-accent); color: #fff; font-size: .65rem;
  min-width: 17px; height: 17px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.header-icon-btn { position: relative; color: #fff; transition: color .2s; }
.header-icon-btn:hover { color: var(--c-accent); }

/* 移动端下拉菜单 */
.mobile-menu { background: var(--c-primary); }
.mobile-menu a { color: #dbe4ee; display: block; padding: .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .95rem; }
.mobile-menu a:hover { color: var(--c-accent); }

/* ---------- 区块标题 ---------- */
.section-title { position: relative; padding-left: .9rem; }
.section-title::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 1.25rem; border-radius: 3px; background: var(--c-accent);
}
.section-title .en { color: var(--c-muted); font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; }

/* ---------- Hero 轮播 ---------- */
.hero-carousel { position: relative; overflow: hidden; height: 240px; }
@media (min-width: 640px) { .hero-carousel { height: 320px; } }
@media (min-width: 1024px) { .hero-carousel { height: 430px; } }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; background-size: cover; background-position: center; pointer-events: none; }
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,44,67,.82) 0%, rgba(15,44,67,.35) 60%, rgba(15,44,67,.05) 100%); }
.hero-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.45); transition: all .3s; }
.hero-dot.active { background: var(--c-accent); width: 22px; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 30;
  width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); color: #fff; transition: all .2s; border: 1px solid rgba(255,255,255,.25);
}
.hero-arrow:hover { background: var(--c-accent); }

/* ---------- 分类瓷砖 ---------- */
.cat-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  background: #fff; border: 1px solid var(--c-line); border-radius: 1rem;
  padding: 1.25rem .5rem; transition: all .25s;
}
.cat-tile:hover { border-color: var(--c-accent); transform: translateY(-4px); box-shadow: 0 10px 24px rgba(15,44,67,.1); }
.cat-tile .ico {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--c-primary-3); color: var(--c-primary); font-size: 1.5rem;
}
.cat-tile:hover .ico { background: var(--c-accent); color: #fff; }

/* ---------- 商品卡片 ---------- */
.product-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: 1rem; overflow: hidden;
  transition: all .25s;
}
.product-card:hover { box-shadow: 0 14px 32px rgba(15,44,67,.12); transform: translateY(-4px); }
.product-card .img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #eef1f4; }
.product-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.product-card:hover .img-wrap img { transform: scale(1.05); }
.product-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--c-accent); color: #fff; font-size: .7rem; font-weight: 700;
  padding: .15rem .55rem; border-radius: 999px;
}
.product-badge.soldout { background: #6b7280; }

/* 骨架屏 */
.skeleton { position: relative; overflow: hidden; background: #e9edf1; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }

/* 图片懒加载占位 */
.lazy-img { opacity: 0; transition: opacity .4s; }
.lazy-img.loaded { opacity: 1; }

/* ---------- 服务卡片 ---------- */
.service-card { background: #fff; border: 1px solid var(--c-line); border-radius: 1rem; overflow: hidden; transition: all .25s; }
.service-card:hover { box-shadow: 0 14px 32px rgba(15,44,67,.12); transform: translateY(-4px); }
.service-card .num { color: var(--c-primary-3); font-size: 2.6rem; font-weight: 800; line-height: 1; }

/* ---------- 底部 ---------- */
.site-footer { background: var(--c-primary); color: #a8bfd3; }
.site-footer h5 { color: #fff; font-weight: 700; }
.site-footer a { color: #a8bfd3; }
.site-footer a:hover { color: var(--c-accent); }
.footer-phone { color: var(--c-accent); font-size: 1.5rem; font-weight: 800; }

/* ---------- 移动端底部导航 ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: #fff; border-top: 1px solid var(--c-line);
  display: flex; box-shadow: 0 -4px 16px rgba(15,44,67,.08);
}
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .45rem 0 .4rem; color: var(--c-muted); font-size: .68rem; }
.bottom-nav a.active, .bottom-nav a:active { color: var(--c-primary); }
.bottom-nav .ico { position: relative; font-size: 1.25rem; line-height: 1; }
.bottom-nav .cart-badge { top: -4px; right: -10px; }
@media (min-width: 768px) { .bottom-nav { display: none; } }

/* ---------- 表单 ---------- */
.form-input {
  width: 100%; border: 1px solid var(--c-line); border-radius: .55rem;
  padding: .6rem .9rem; font-size: .95rem; background: #fff; transition: border-color .2s;
}
.form-input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(15,44,67,.08); }
.form-label { display: block; font-size: .85rem; font-weight: 600; color: #374151; margin-bottom: .35rem; }

/* ---------- 详情页 ---------- */
.detail-gallery .main-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 1rem; }
.detail-gallery .thumb { width: 64px; height: 64px; object-fit: cover; border-radius: .6rem; border: 2px solid transparent; cursor: pointer; opacity: .7; }
.detail-gallery .thumb.active { border-color: var(--c-accent); opacity: 1; }
.spec-chip { border: 1px solid var(--c-line); border-radius: .5rem; padding: .35rem .8rem; font-size: .85rem; background: #fff; }
.rating-stars { color: #f59e0b; }

/* 分类列表页左侧树 */
.cat-tree a { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; border-radius: .6rem; color: #374151; font-size: .92rem; transition: all .2s; }
.cat-tree a:hover { background: var(--c-primary-3); }
.cat-tree a.active { background: var(--c-primary); color: #fff; font-weight: 600; }
.cat-tree .cnt { font-size: .75rem; opacity: .7; }

/* 排序标签 */
.sort-chip { padding: .35rem .85rem; border-radius: 999px; font-size: .85rem; border: 1px solid var(--c-line); background: #fff; color: #4b5563; }
.sort-chip.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* 分页 */
.pagination a, .pagination span {
  min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: .5rem; border: 1px solid var(--c-line); background: #fff; color: #4b5563; font-size: .9rem;
}
.pagination a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pagination .current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* 面包屑 */
.crumbs { font-size: .82rem; color: var(--c-muted); }
.crumbs a { color: var(--c-muted); }
.crumbs a:hover { color: var(--c-primary); }

/* 富文本详情(迁移的旧详情为纯文本,统一用 .rich-text 承接) */
.rich-text { line-height: 1.9; color: #374151; font-size: .95rem; white-space: pre-line; }
.rich-text img { max-width: 100%; border-radius: .5rem; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%) translateY(20px);
  background: rgba(15,44,67,.95); color: #fff; padding: .6rem 1.2rem; border-radius: .6rem;
  font-size: .9rem; opacity: 0; pointer-events: none; transition: all .3s; z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 兼容补充:本机 tailwind 为旧版,不支持 text-white/xx 斜杠透明度语法 =====
 * 以下为模板中已使用的透明度工具类的等价定义,避免深色背景上的文字回落到黑色 */
.text-white\/50  { color: rgba(255,255,255,.5); }
.text-white\/70  { color: rgba(255,255,255,.7); }
.text-white\/75  { color: rgba(255,255,255,.75); }
.text-white\/80  { color: rgba(255,255,255,.8); }
.text-white\/85  { color: rgba(255,255,255,.85); }
.bg-white\/10    { background-color: rgba(255,255,255,.1); }