/* shop plugin styles */

/* ===== 商城主题 token 桥接 =====
   商城各页（index/detail/cart/checkout/orders 等）沿用 --text-color/--text-muted/
   --border-color/--bg-color 这套变量名，但 subsite 壳只在 common.css 定义了
   --text/--text-light/--border/--bg。此前变量未定义，暗色模式下全部回退到浅色硬编码
   （深字 #1e293b 落在深卡 #1a2238 上 → “很多字看不见”）。
   这里统一映射到全站 token；:root 与 body.dark 各声明一份（原因见下方注释）。 */
:root {
    --text-color: var(--text);
    --text-muted: var(--text-light);
    --border-color: var(--border);
    --bg-color: var(--bg);
}
/* 注意：自定义属性的 var() 替换在“声明它的元素”上完成后再继承，
   所以 :root 的桥接会固定成浅色值；暗色必须在 body.dark 上重新声明，
   替换才发生在暗色 token 生效的 body 上下文。 */
body.dark {
    --text-color: var(--text);
    --text-muted: var(--text-light);
    --border-color: var(--border);
    --bg-color: var(--bg);
}

/* ===== 暗色模式：商城通用组件补全（首页 index.php 内联暗色块之外的页面靠这里）===== */
body.dark .text-muted { color: var(--text-light) !important; }
body.dark .breadcrumb-item.active { color: var(--text-light); }
body.dark .breadcrumb-item::before { color: var(--text-light); }
body.dark .breadcrumb a { color: #a5b4fc; }

/* 按钮态（Bootstrap 默认深色在深底上对比不足） */
body.dark .btn-outline-primary {
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.55);
}
body.dark .btn-outline-primary:hover,
body.dark .btn-outline-primary.active {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}
body.dark .btn-outline-secondary {
    color: #cbd5e1;
    border-color: #475569;
}
body.dark .btn-outline-secondary:hover {
    background: #475569;
    color: #fff;
}
body.dark .btn-outline-success {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.55);
}
body.dark .btn-outline-success:hover {
    background: #10b981;
    border-color: #10b981;
    color: #06281f;
}
body.dark .text-success { color: #34d399 !important; }

/* 价格（与首页暗色价签一致的粉调高亮） */
body.dark .shop-price-current { color: #f472b6; }
body.dark .shop-price-original { color: #6b7280; }

/* ===== 商品详情页 detail.php ===== */
/* 价格区：浅紫渐变块在暗色下映射为深靛玻璃面，块内说明文字同步提亮 */
body.dark .shop-detail-price-box {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(139, 92, 246, 0.12));
    border-color: rgba(99, 102, 241, 0.35);
}
body.dark .shop-price-label { color: var(--text-light); }

/* 商品信息网格：浅灰块 → 深色微提亮 + 描边（--bg-color 已随 token 变深，补边界层次） */
body.dark .shop-detail-info {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
}

/* 卡片/侧栏卡/相关商品卡：背景已随 --card-bg 变深，这里补暗色描边与悬浮态 */
body.dark .shop-detail-card,
body.dark .shop-sidebar-card,
body.dark .shop-product-card {
    background: var(--card-bg);
    border-color: rgba(99, 102, 241, 0.18);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
body.dark .shop-product-card:hover {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.5);
}
/* 分隔线类（购买须知/支付方式列表、操作区分隔线） */
body.dark .shop-notice-item,
body.dark .shop-payment-item { border-bottom-color: rgba(99, 102, 241, 0.12); }
body.dark .shop-detail-actions { border-top-color: var(--border); }

/* 特性小标签 / 热销排名块（硬编码 #f1f5f9 浅底） */
body.dark .shop-feature-tag {
    background: rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
}
body.dark .shop-hot-rank:not(.hot) {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

/* 客服渐变卡保持紫蓝渐变，白字不受影响；btn-light 在渐变面上可读，无需处理 */
/* m2m-mobile-flatten-v1 */
@media (max-width:767.98px){
  .shop-detail-card,.shop-card,.product-card{
    border:0!important;box-shadow:none!important;border-radius:0!important;
  }
  .shop-detail-price-box{border-radius:0!important;}
}