/* ============================================
   商品详情页 v3 · 深紫黑金（对齐礼品页设计）
   ============================================ */

/* 页面容器 */
.shop-detail { max-width: 1240px; margin: 0 auto; padding: 24px 20px 60px; }
.shop-detail-main { max-width: 100% !important; }

.shop-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: #64748b; margin-bottom: 16px;
    padding: 6px 12px; border-radius: 8px;
    text-decoration: none; transition: all .15s;
}
.shop-back:hover { color: #6366f1; background: #f5f3ff; }

/* 主栅格 · 左大图卡 + 右信息 */
.shop-detail-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 32px !important;
    background: transparent !important;
    border: 0 !important; padding: 0 !important; border-radius: 0 !important;
    align-items: start;
}

/* ============ 左侧 · 大图卡（抄礼品页）============ */
.sd-gallery {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 16px !important;
    box-shadow: 0 4px 20px -8px rgba(10,10,31,.15) !important;
    position: sticky; top: 90px;
}
.sd-main-img {
    aspect-ratio: 1 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #f5f3ff, #eef2ff) !important;
    position: relative;
    margin-bottom: 12px !important;
    border: 0 !important;
}
.sd-main-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.sd-thumbs { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 8px !important; margin-top: 0 !important; }
.sd-thumb {
    aspect-ratio: 1 !important; border-radius: 10px !important; overflow: hidden !important;
    cursor: pointer !important; border: 2px solid transparent !important;
    transition: all .2s !important; background: #f5f3ff !important;
}
.sd-thumb.active { border-color: #8b5cf6 !important; }
.sd-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* ============ 右侧 · 信息区（无卡片包裹）============ */
.shop-detail-info {
    display: flex !important; flex-direction: column !important; gap: 16px !important;
    background: transparent !important;
    border: 0 !important; padding: 0 !important;
}

/* 分类标签 · 金色 pill */
.shop-detail-cat {
    display: inline-flex !important;
    padding: 6px 14px !important;
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
    color: #1c1917 !important;
    border-radius: 16px !important;
    font-size: 12.5px !important; font-weight: 900 !important;
    letter-spacing: .3px;
    align-self: flex-start !important;
    margin-bottom: 0 !important;
}

/* 标题 */
.shop-detail-title {
    font-size: 26px !important; font-weight: 900 !important;
    color: #0a0a1f !important; line-height: 1.3 !important;
    margin: 0 !important; letter-spacing: -.3px;
}

.shop-detail-sub {
    font-size: 13.5px !important; color: #64748b !important;
    margin: 6px 0 0 !important; line-height: 1.6;
    padding-bottom: 0 !important; border-bottom: 0 !important;
}

/* ============ 价格区 · 深色渐变卡（核心！）============ */
.sd-price-box {
    background: linear-gradient(135deg, #0a0a1f 0%, #1e1b4b 50%, #141432 100%) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    color: #fff !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px -10px rgba(10,10,31,.5);
}
.sd-price-box::before {
    content: '' !important;
    position: absolute !important;
    top: -30% !important; right: -10% !important;
    width: 60% !important; height: 160% !important;
    background: radial-gradient(circle, rgba(251,191,36,.22), transparent 70%) !important;
    pointer-events: none;
}
.sd-price-lbl {
    font-size: 11.5px !important; color: #fbbf24 !important;
    letter-spacing: 1.5px !important; font-weight: 800 !important;
    text-transform: uppercase !important;
    position: relative !important; z-index: 1 !important;
    margin-bottom: 6px;
}
.sd-price-val {
    font-size: 38px !important; font-weight: 900 !important;
    color: #fff !important; line-height: 1 !important;
    position: relative !important; z-index: 1 !important;
    display: flex !important; align-items: baseline !important; gap: 12px !important;
    flex-wrap: wrap;
}
.sd-price-val #sdPrice { color: #fff; }
.sd-price-val .sd-old-price,
.sd-price-val s {
    font-size: 18px !important; color: #94a3b8 !important;
    text-decoration: line-through !important;
    font-weight: 600 !important;
}

.sd-price-meta {
    margin-top: 16px !important; padding-top: 16px !important;
    border-top: 1px solid rgba(255,255,255,.15) !important;
    position: relative; z-index: 1;
}
.sd-price-meta .sd-meta-row {
    display: flex !important; justify-content: space-between !important;
    font-size: 13px !important; padding: 6px 0 !important;
}
.sd-price-meta .sd-meta-row span { color: #94a3b8 !important; }
.sd-price-meta .sd-meta-row b { color: #fff !important; font-family: Menlo, monospace; font-weight: 800 !important; }

/* ============ 促销标签 · 统一卡片列表 ============ */
.sd-promo-stack {
    display: flex !important; flex-direction: column !important;
    gap: 8px !important; margin: 4px 0 !important;
}
.sd-promo-item {
    display: flex !important; align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important; font-weight: 700 !important;
    color: #1c1917 !important;
    text-decoration: none !important;
    transition: transform .15s, box-shadow .15s;
    margin-bottom: 0 !important;
}
.sd-promo-item:hover { transform: translateX(2px); box-shadow: 0 4px 12px -4px rgba(0,0,0,.15); }
.sd-promo-tag {
    display: inline-flex !important; align-items: center !important;
    padding: 3px 10px !important; border-radius: 8px !important;
    background: rgba(255,255,255,.65) !important;
    font-size: 11.5px !important; font-weight: 900 !important;
    color: #1c1917 !important; flex-shrink: 0;
    letter-spacing: .3px;
}
.sd-promo-txt {
    flex: 1 !important; color: #1c1917 !important;
    font-weight: 700 !important; font-size: 13px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sd-promo-arrow { color: #1c1917 !important; font-weight: 900 !important; opacity: .7; }
.sd-promo-cd { color: #1c1917 !important; font-weight: 700 !important; font-size: 12px !important; }

/* 各标签配色 */
.sd-promo-amber  { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.sd-promo-red    { background: linear-gradient(135deg, #fee2e2, #fecaca); }
.sd-promo-pink   { background: linear-gradient(135deg, #ffe4e6, #fecdd3); }
.sd-promo-teal   { background: linear-gradient(135deg, #ccfbf1, #99f6e4); }
.sd-promo-blue   { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
.sd-promo-purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.sd-promo-green  { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.sd-promo-gold   { background: linear-gradient(135deg, #fef3c7, #fcd34d); }

/* ============ 规格选择器 ============ */
.sd-attrs { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.sd-attr-row { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.sd-attr-label {
    font-size: 12.5px !important; font-weight: 800 !important;
    color: #475569 !important; letter-spacing: .5px !important;
    text-transform: uppercase;
}
.sd-attr-values { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.sd-attr-btn {
    padding: 9px 18px !important; border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    font-size: 13.5px !important; font-weight: 700 !important;
    color: #334155 !important; cursor: pointer !important;
    transition: all .15s !important;
}
.sd-attr-btn:hover { border-color: #c7d2fe !important; color: #6366f1 !important; }
.sd-attr-btn.active {
    border-color: #6366f1 !important;
    background: #eef0ff !important; color: #4f46e5 !important;
    box-shadow: 0 2px 8px -2px rgba(99,102,241,.35) !important;
}

/* ============ 元数据（原产国/重量/库存）· 已挪到价格卡 ============ */
.shop-detail-meta { display: none !important; }

/* ============ 数量 + 加购按钮 ============ */
.shop-detail-actions {
    display: flex !important; gap: 12px !important;
    margin-top: 8px !important; align-items: center !important;
    flex-wrap: wrap;
}
.shop-qty {
    display: inline-flex !important; align-items: center !important;
    border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important;
    overflow: hidden !important; background: #fff !important;
    height: 54px !important;
}
.shop-qty button {
    width: 48px !important; height: 100% !important;
    border: 0 !important; background: transparent !important;
    font-size: 20px !important; cursor: pointer !important;
    color: #64748b !important; transition: background .15s !important;
}
.shop-qty button:hover { background: #f1f5f9 !important; color: #6366f1 !important; }
.shop-qty input {
    width: 60px !important; height: 100% !important;
    border: 0 !important; text-align: center !important;
    font-size: 16px !important; font-weight: 800 !important;
    color: #0f172a !important; background: transparent !important;
    outline: none !important;
}

.shop-btn {
    flex: 1 !important; min-width: 160px !important;
    height: 54px !important; border-radius: 12px !important;
    border: 0 !important;
    font-size: 15px !important; font-weight: 900 !important;
    cursor: pointer !important; letter-spacing: .3px !important;
    transition: all .2s !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    gap: 8px !important;
}
.shop-btn-cart {
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
    color: #1c1917 !important;
    box-shadow: 0 10px 26px rgba(251,191,36,.4) !important;
}
.shop-btn-cart:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px rgba(251,191,36,.5) !important;
}
.shop-btn-buy {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(99,102,241,.35) !important;
}
.shop-btn-buy:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px rgba(99,102,241,.45) !important;
}
.shop-btn[disabled] { opacity: .45 !important; pointer-events: none !important; }

/* ============ 详情/评价区 ============ */
.shop-detail-desc,
.sd-media,
.sd-qa,
.sd-reviews {
    margin-top: 28px !important;
    background: #fff !important;
    border-radius: 16px !important;
    padding: 28px !important;
    box-shadow: 0 4px 20px -8px rgba(10,10,31,.1) !important;
    border: 0 !important;
}
.shop-detail-desc h3,
.sd-media h3,
.sd-qa h3,
.sd-reviews h3 {
    font-size: 16px !important; font-weight: 900 !important;
    color: #0a0a1f !important;
    margin: 0 0 16px !important;
}
.sd-desc-content {
    font-size: 14px !important; color: #334155 !important;
    line-height: 1.8 !important; word-break: break-word;
}

/* ============ 信任背书 ============ */
.sd-trust-bar {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important; margin-top: 8px !important;
    padding: 18px !important;
    background: #f8fafc !important;
    border-radius: 14px !important;
    border: 1px solid #eef1f7 !important;
}
.sd-trust-item {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: 6px !important;
    text-align: center !important;
}
.sd-trust-item .ico { font-size: 22px !important; line-height: 1 !important; }
.sd-trust-item .txt {
    font-size: 11.5px !important; font-weight: 800 !important;
    color: #64748b !important; letter-spacing: .3px;
}

/* ============ 响应式 ============ */
@media (max-width: 900px) {
    .shop-detail-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .sd-gallery { position: static !important; }
    .shop-detail-title { font-size: 22px !important; }
    .sd-price-val { font-size: 32px !important; }
    .sd-trust-bar { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .shop-detail { padding: 12px 12px 40px; }
    .shop-detail-title { font-size: 19px !important; }
    .sd-price-val { font-size: 28px !important; }
    .sd-price-val .sd-old-price,
    .sd-price-val s { font-size: 15px !important; }
    .shop-btn { min-width: 45% !important; height: 48px !important; font-size: 14px !important; }
    .shop-detail-desc, .sd-media, .sd-qa, .sd-reviews { padding: 20px !important; }
}

/* ========== 规格标签 · 红色渐变 v3.1 ========== */
.sd-attr-label,
.shop-detail-info .sd-attr-label,
.sd-attr-row .sd-attr-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 60%, #b91c1c 100%) !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: .5px !important;
    text-transform: none !important;
    box-shadow: 0 4px 12px -2px rgba(220, 38, 38, .4) !important;
    margin-bottom: 4px !important;
    width: fit-content !important;
    position: relative !important;
    overflow: hidden !important;
}
.sd-attr-label::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: -100% !important;
    width: 100% !important; height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent) !important;
    animation: sd-attr-shine 3s infinite !important;
}
@keyframes sd-attr-shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* ========== 规格标签 · 紧凑版 v3.2 ========== */
.sd-attr-label,
.shop-detail-info .sd-attr-label,
.sd-attr-row .sd-attr-label {
    padding: 3px 10px !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    min-height: 0 !important;
    height: auto !important;
    box-shadow: 0 2px 8px -2px rgba(220, 38, 38, .35) !important;
    margin-bottom: 6px !important;
    letter-spacing: .2px !important;
    font-weight: 700 !important;
}

/* ========== 规格标签 · 固定尺寸 v3.3 ========== */
.sd-attr-label,
.shop-detail-info .sd-attr-label,
.sd-attr-row .sd-attr-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100px !important;
    height: 60px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 60%, #b91c1c 100%) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .5px !important;
    text-transform: none !important;
    box-shadow: 0 4px 12px -2px rgba(220, 38, 38, .4) !important;
    margin: 0 0 8px 0 !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

/* ========== 规格标签 · 尺寸修正 v3.4 ========== */
.sd-attr-label,
.shop-detail-info .sd-attr-label,
.sd-attr-row .sd-attr-label {
    width: 100px !important;
    height: 40px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
}

/* ========== 规格标签 · 尺寸 v3.5 ========== */
.sd-attr-label,
.shop-detail-info .sd-attr-label,
.sd-attr-row .sd-attr-label {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    line-height: 20px !important;
    border-radius: 6px !important;
}

/* ========== 规格标签 · 细长药丸型 v3.6 ========== */
.sd-attr-label,
.shop-detail-info .sd-attr-label,
.sd-attr-row .sd-attr-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 80px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .3px !important;
    box-shadow: 0 2px 8px -2px rgba(220, 38, 38, .4) !important;
    margin: 0 0 8px 0 !important;
    box-sizing: border-box !important;
}

/* ========== 规格标签 · 矮宽药丸 v3.7 ========== */
.sd-attr-label,
.shop-detail-info .sd-attr-label,
.sd-attr-row .sd-attr-label {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    min-width: 130px !important;
    width: auto !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    line-height: 22px !important;
    margin: 0 0 8px 0 !important;
}

/* ========== 规格标签 · 高度 26px v3.8 ========== */
.sd-attr-label,
.shop-detail-info .sd-attr-label,
.sd-attr-row .sd-attr-label {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    min-width: 130px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 26px !important;
    margin: 0 0 8px 0 !important;
}

/* ========== 规格标签 · 高度 32px v3.9 ========== */
.sd-attr-label,
.shop-detail-info .sd-attr-label,
.sd-attr-row .sd-attr-label {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    min-width: 130px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    line-height: 32px !important;
    margin: 0 0 8px 0 !important;
}
