/* ==========================================================================
   Product Single Page — 独立样式
   模板: single-product.php
   ========================================================================== */

/* --- 面包屑 --- */
.ps-breadcrumb{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:12px 0}
.ps-container{max-width:1280px;margin:0 auto;padding:0 24px}
.ps-breadcrumb{font-size:13px;color:#64748b;display:flex;gap:8px;align-items:center}
.ps-breadcrumb a{color:#2563eb;text-decoration:none}
.ps-breadcrumb a:hover{text-decoration:underline}
.ps-breadcrumb .sep{color:#cbd5e1}
.ps-breadcrumb .current{color:#334155}

/* ==========================================================================
   Hero 区
   ========================================================================== */
.ps-hero{padding:40px 0;background:#fff}
.ps-hero-grid{display:grid;grid-template-columns:80px 1fr 380px;gap:32px;align-items:start}

/* 缩略图列 */
.ps-thumbs{display:flex;flex-direction:column;gap:12px}
.ps-thumb-item{width:80px;height:80px;border:2px solid #e2e8f0;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .15s}
.ps-thumb-item:hover{border-color:#93c5fd}
.ps-thumb-item.active{border-color:#2563eb}
.ps-thumb-item img{width:100%;height:100%;object-fit:cover}

/* 主图 */
.ps-main-img{aspect-ratio:4/3;background:#f8fafc;border-radius:12px;overflow:hidden;position:relative}
.ps-slide{position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none}
.ps-slide.active{opacity:1;pointer-events:auto}
.ps-slide img{width:100%;height:100%;object-fit:contain}
.ps-main-img > img{width:100%;height:100%;object-fit:contain}

/* 信息区 */
.ps-info{display:flex;flex-direction:column;gap:16px}
.ps-model{display:inline-flex;width:fit-content;padding:4px 12px;background:#e0e7ff;color:#1d4ed8;border-radius:20px;font-size:12px;font-weight:600}
.ps-model span{font-weight:700}
.ps-title{font-size:28px;font-weight:800;color:#0f172a;margin:0;line-height:1.3}
.ps-head-desc{font-size:14px;color:#475569;line-height:1.7}
.ps-head-desc p{margin:0 0 10px}

/* 按钮 */
.ps-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.ps-btn-primary{background:#2563eb;color:#fff;border:none;padding:12px 26px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s}
.ps-btn-primary:hover{background:#1d4ed8;transform:translateY(-1px)}
.ps-btn-whatsapp{background:#25d366;color:#fff;padding:12px 22px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.ps-btn-whatsapp:hover{background:#22bf5d}
.ps-btn-email{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;padding:12px 22px;border-radius:8px;font-size:14px;font-weight:500;text-decoration:none;transition:all .15s}
.ps-btn-email:hover{background:#e2e8f0}

/* Meta */
.ps-meta{border-top:1px solid #e2e8f0;padding-top:16px;margin-top:4px}
.ps-meta-row{font-size:13px;color:#64748b;margin-bottom:6px}
.ps-meta-row span{font-weight:600;color:#334155;min-width:65px;display:inline-block}

/* ==========================================================================
   头部底部文案
   ========================================================================== */
.ps-head2-wrap{padding:24px 0;background:#f8fafc;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}
.ps-head2-content{font-size:14px;color:#334155;line-height:1.8}
.ps-head2-content p{margin:0 0 10px}

/* ==========================================================================
   Tabs
   ========================================================================== */
.ps-tabs-wrap{max-width:1000px;margin:0 auto;padding:0 0 32px}
.ps-tabs{display:flex;gap:40px;border-bottom:2px solid #f1f5f9;margin-bottom:32px;justify-content:center}
.ps-tab{padding:14px 28px;background:none;border:none;font-size:15px;font-weight:600;color:#94a3b8;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.ps-tab:hover{color:#2563eb}
.ps-tab.active{color:#0f172a;border-bottom-color:#2563eb}
.ps-tab-panel{display:none;max-width:1000px;margin:0 auto;font-size:15px;color:#334155;line-height:1.8}

.ps-tab-panel.active{display:block}
.ps-tab-panel h2{font-size:22px;color:#0f172a;margin:24px 0 14px}
.ps-tab-panel h3{font-size:18px;color:#1e293b;margin:20px 0 10px}
.ps-tab-panel p{margin:0 0 14px}
.ps-tab-panel ul,.ps-tab-panel ol{margin:0 0 14px;padding-left:24px}
.ps-tab-panel li{margin-bottom:6px}
.ps-tab-panel table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.ps-tab-panel th,.ps-tab-panel td{padding:10px 14px;border:1px solid #e2e8f0;text-align:left}
.ps-tab-panel th{background:#f1f5f9;font-weight:600;color:#334155}
.ps-tab-panel tr:nth-child(even){background:#fafbfc}
.ps-empty{color:#94a3b8;font-style:italic;padding:20px 0}

/* Gallery grid */
.ps-gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ps-gallery-item{display:block;border-radius:8px;overflow:hidden;background:#f8fafc;aspect-ratio:1}
.ps-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.ps-gallery-item:hover img{transform:scale(1.06)}

/* ==========================================================================
   上/下产品
   ========================================================================== */
.ps-nav-wrap{padding:0 0 40px}
.ps-nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ps-nav-card{display:block;padding:20px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;text-decoration:none;transition:all .15s}
.ps-nav-card:hover{border-color:#2563eb;background:#f0f7ff}
.ps-nav-card.right{text-align:right}
.ps-nav-card.disabled{opacity:.4;pointer-events:none}
.ps-nav-label{font-size:12px;color:#64748b;margin-bottom:6px;font-weight:500}
.ps-nav-title{font-size:15px;font-weight:600;color:#0f172a;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ==========================================================================
   Related Products
   ========================================================================== */
.ps-related{padding:40px 0;background:#f8fafc;border-top:1px solid #e2e8f0}
.ps-section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}
.ps-section-head h2{font-size:22px;font-weight:700;color:#0f172a;margin:0}
.ps-view-all{font-size:14px;font-weight:500;color:#2563eb;text-decoration:none}
.ps-view-all:hover{text-decoration:underline}
.ps-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ps-related-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;transition:all .2s}
.ps-related-card:hover{border-color:#2563eb;box-shadow:0 6px 20px rgba(37,99,235,.12);transform:translateY(-2px)}
.ps-related-card a{text-decoration:none;color:inherit;display:block}
.ps-related-thumb{aspect-ratio:4/3;overflow:hidden;background:#f1f5f9}
.ps-related-thumb img{width:100%;height:100%;object-fit:cover}
.ps-related-card h3{font-size:14px;font-weight:600;color:#0f172a;margin:0;padding:14px 16px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ==========================================================================
   底部 CTA
   ========================================================================== */
.ps-cta-wrap{padding:48px 0;background:linear-gradient(135deg,#1e40af,#2563eb)}
.ps-cta-inner{text-align:center;color:#fff}
.ps-cta-inner h2{font-size:28px;font-weight:800;margin:0 0 10px}
.ps-cta-inner p{font-size:15px;opacity:.9;margin:0 0 24px}
.ps-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ps-cta-wrap .ps-btn-primary{background:#fff;color:#2563eb}
.ps-cta-wrap .ps-btn-primary:hover{background:#f1f5f9}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1024px) {
    .ps-hero-grid{grid-template-columns:1fr;gap:24px}
    .ps-thumbs{flex-direction:row;flex-wrap:wrap;order:2}
    .ps-main-img{order:1}
    .ps-info{order:3}
    .ps-gallery-grid{grid-template-columns:repeat(3,1fr)}
    .ps-related-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 640px) {
    .ps-hero{padding:24px 0}
    .ps-title{font-size:22px}
    .ps-btn-primary,.ps-btn-whatsapp,.ps-btn-email{padding:10px 18px;font-size:13px}
    .ps-gallery-grid{grid-template-columns:repeat(2,1fr)}
    .ps-related-grid{grid-template-columns:repeat(2,1fr)}
    .ps-nav-grid{grid-template-columns:1fr;gap:12px}
    .ps-tab{padding:10px 14px;font-size:13px}
    .ps-cta-inner h2{font-size:22px}
}
/* ===== Overview 交替排版：左文右图 / 左图右文 ===== */
.sv-alt-row {
    display: flex;
    align-items: center;
    gap: 56px;
    margin-bottom: 72px;
}
.sv-alt-row.sv-alt-text-right {
    flex-direction: row-reverse;
}
.sv-alt-text {
    flex: 1;
    min-width: 0;
}
.sv-alt-text h2 {
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 18px;
    line-height: 1.35;
}
.sv-alt-text p {
    font-size: 15px;
    color: #334155;
    line-height: 1.85;
    margin: 0 0 14px;
}
.sv-alt-img {
    flex: 1;
    min-width: 0;
}
.sv-alt-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.sv-alt-row.sv-alt-full {
    flex-direction: column;
    align-items: stretch;
}
.sv-alt-row.sv-alt-full .sv-alt-text {
    flex: none;
}
@media (max-width: 768px) {
    .sv-alt-row,
    .sv-alt-row.sv-alt-text-right {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 48px;
    }
}