/*
 * شاپور — لایهٔ product.css
 * صفحهٔ محصول (چیدمان حرفه‌ای)
 * منبع: فاز ۲ مهاجرت از style.css مرجع (خطوط 3250-5595)
 * ترتیب بارگذاری لایه‌ها = ترتیب کسکید اصلی؛ هرگز ترتیب را تغییر ندهید.
 */

/* ============================================
   v1.8.0 — NEW SECTIONS
   ============================================ */

/* ============================================
   HOMEPAGE TRUST SECTION
   ============================================ */
.trust-section {
    padding: 90px 0;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

.trust-section::before {
    content: '';
    position: absolute;
    top: -120px; left: -120px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.08), transparent 70%);
    pointer-events: none;
}
.trust-section::after {
    content: '';
    position: absolute;
    bottom: -120px; right: -120px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(29, 78, 216, 0.08), transparent 70%);
    pointer-events: none;
}

.trust-section .section-header { position: relative; z-index: 1; margin-bottom: 50px; }

/* Stats row */
.trust-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.trust-stat {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.05) 0%, var(--bg-card) 50%);
    border: 1px solid rgba(30, 58, 95, 0.1);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.trust-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-green), transparent);
}

.trust-stat:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(23, 43, 77, 0.12);
    border-color: rgba(37, 99, 235, 0.2);
}/* Trust feature cards */
.trust-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.trust-feature {
    background: var(--bg-card);
    border: 1px solid rgba(30, 58, 95, 0.1);
    border-radius: 18px;
    padding: 28px 24px;
    text-align: right;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.trust-feature:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(23, 43, 77, 0.12);
    border-color: rgba(37, 99, 235, 0.2);
}/* Testimonials */
.trust-testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
    z-index: 1;
}

.trust-testimonial {
    background: var(--bg-card);
    border: 1px solid rgba(30, 58, 95, 0.1);
    border-radius: 20px;
    padding: 28px 26px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
}

.trust-testimonial::before {
    content: '"';
    position: absolute;
    top: 12px; left: 22px;
    font-size: 5rem;
    color: rgba(37, 99, 235, 0.1);
    font-family: serif;
    line-height: 1;
    pointer-events: none;
}

.trust-testimonial:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(23, 43, 77, 0.12);
    border-color: rgba(37, 99, 235, 0.2);
}/* ============================================
   PRODUCT DETAIL PAGE — new trust strip + card
   ============================================ */

/* ============================================
   PRODUCT DESCRIPTION SUMMARY TOGGLE
   ============================================ */

/* ============================================
   SHOP PAGE — trust strip + new card buttons
   ============================================ */
.shop-trust-strip {
    padding: 50px 0;
    background: var(--bg-primary);
    border-top: 1px solid rgba(30, 58, 95, 0.08);
    border-bottom: 1px solid rgba(30, 58, 95, 0.08);
}

.shop-trust-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.shop-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid rgba(30, 58, 95, 0.09);
    border-radius: 16px;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.shop-trust-item:hover {
    border-color: rgba(37, 99, 235, 0.25);
    transform: translateY(-3px);
}

.shop-trust-item svg {
    color: var(--accent-green);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

.shop-trust-item strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.shop-trust-item span {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

/* ============================================
   RESPONSIVE — v1.8 new sections
   ============================================ */

@media (max-width: 1024px) {
    .trust-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .trust-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .trust-testimonials { grid-template-columns: 1fr; gap: 16px; }
    .shop-trust-items { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 768px) {
    /* Trust section */
    .trust-section { padding: 60px 0; }
    .trust-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 40px; }
    .trust-stat { padding: 22px 14px; }    .trust-features { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; }
    .trust-feature { padding: 22px 20px; }    .trust-testimonials { gap: 12px; }
    .trust-testimonial { padding: 22px 20px; }    /* Description toggle */
    .product-description-wrapper,
    .product-description-wrapper.collapsible { max-height: 220px; }    /* Shop trust strip */
    .shop-trust-strip { padding: 36px 0; }
    .shop-trust-items { grid-template-columns: 1fr; gap: 12px; }
    .shop-trust-item { padding: 16px 18px; }
    .shop-trust-item strong { font-size: 0.92rem; }
    .shop-trust-item span { font-size: 0.78rem; }

    /* Single product add-to-cart on mobile */
    .single-product-page .product-detail-cart {
        flex-direction: row;
        gap: 10px;
    }
    .single-product-page .quantity-selector { border-radius: 14px; }
    .single-product-page .qty-btn { width: 50px; height: 56px; }
    .single-product-page .qty-input { width: 58px; height: 56px; font-size: 1.15rem; }
    .single-product-page .product-add-btn {
        height: 56px;
        min-width: 0;
        padding: 0 18px;
        font-size: 0.95rem;
    }
    .single-product-page .product-buy-now-btn {
        padding: 14px 18px;
        font-size: 0.92rem;
    }
    .single-product-page .product-detail-contact { gap: 8px; }
    .single-product-page .btn-contact {
        min-width: 0;
        height: 46px;
        font-size: 0.85rem;
        padding: 0 12px;
    }

    /* Brand cards on mobile */
    .brand-card { padding: 28px 22px 22px; }
    .brand-cta { font-size: 0.8rem; padding: 9px 18px; }

    /* Shop card buttons on mobile */
    .shop-card-btn-primary { font-size: 0.84rem; padding: 10px 14px; }
    .shop-card-btn-wa { flex: 0 0 42px; }

    /* Unified product card buttons on mobile (home swiper + related) */
    .product-card-btn-primary { font-size: 0.82rem; padding: 10px 12px; }
    .product-card-btn-wa { flex: 0 0 42px; }
    .product-info { padding: 16px 16px 18px; gap: 8px; }
    .product-name { font-size: 0.95rem; min-height: 42px; }
    .product-price { font-size: 1.1rem; }
    .product-card-media .product-image { padding: 16px; }
    /* On mobile, always show the "view" overlay button (no hover on touch) */
    .product-card-quick { opacity: 1; transform: translateY(0); }
    /* Star rating — slightly smaller on mobile */
    .product-rating .stars { font-size: 0.78rem; }
    .product-rating .rating-count { font-size: 0.72rem; }
}

@media (max-width: 480px) {
    .trust-stats { grid-template-columns: 1fr; }
    .single-product-page .product-add-btn { font-size: 0.88rem; padding: 0 14px; }
    .single-product-page .product-add-btn-text { font-size: 0.88rem; }
    .single-product-page .qty-btn { width: 46px; }
    .single-product-page .qty-input { width: 52px; }
    /* Unified product card on very small screens — slimmer padding */
    .product-info { padding: 14px 14px 16px; }
    .product-name { font-size: 0.92rem; min-height: 40px; }
    .product-price { font-size: 1.05rem; }
    .product-card-btn-primary { font-size: 0.78rem; padding: 9px 10px; }
    .product-card-btn-wa { flex: 0 0 38px; }
    /* Single product title smaller on tiny phones */
    .single-product-page .product-detail-title { font-size: 1.4rem; padding-right: 10px; }
}

/* Fix: prevent mobile menu drawer from being affected by single-product body padding */
@media (max-width: 768px) {
    body.single-product { padding-bottom: 80px; }
}

/* ============================================
   SINGLE PRODUCT — v2.0 PREMIUM ADD-ONS
   Gallery ring animation, key-features panel,
   inline badges, USP strip, quality seal.
   ============================================ */

@keyframes ringSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE — v2.0 single-product add-ons
   ============================================ */
@media (max-width: 768px) {    .key-feature { padding: 9px 10px; }    .product-detail-badges { gap: 6px; }
    .prod-badge { font-size: 0.72rem; padding: 5px 10px; }}

@media (max-width: 480px) {
    .product-detail-badges { flex-direction: column; align-items: stretch; }
    .prod-badge { justify-content: center; }
}/* ============================================
   SINGLE PRODUCT — v2.2 PREMIUM REDESIGN
   Major visual polish: hero card, image frame
   with gradient halo, sticky info card, glassy
   CTA buttons, animated specs rows, etc.
   This builds on top of the existing v2.0 styles
   and improves the visual hierarchy.
   ============================================ */

/* Page background — subtle radial gradient to make product card pop */
.single-product-page {
    background:
        radial-gradient(ellipse at top right, rgba(37, 99, 235, 0.05), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(29, 78, 216, 0.03), transparent 50%),
        var(--bg-primary);
    position: relative;
}
.single-product-page::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 280px;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.06) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
.single-product-page > * { position: relative; z-index: 1; }

/* Hero breadcrumb — chip-style on dark */
.single-product-page .breadcrumb {
    background: linear-gradient(90deg, rgba(30, 58, 95, 0.07), transparent);
    border-right: 3px solid var(--accent-green);
    padding: 14px 18px;
    border-radius: 0 12px 12px 0;
    margin-top: 8px;
}

/* Detail section — bigger breathing room */
.single-product-page .product-detail-section {
    padding: 8px 0 60px;
}

/* Gallery column — wider on desktop for emphasis */
@media (min-width: 1024px) {
    .single-product-page .product-detail-grid {
        grid-template-columns: 1.05fr 1fr;
        gap: 56px;
        align-items: start;
    }
}

/* Main image — premium frame with multi-layer glow */
.single-product-page .product-main-image {
    aspect-ratio: 1;
    border-radius: 28px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(30, 58, 95, 0.08),
        inset 0 1px 0 rgba(30, 58, 95, 0.08);
    background:
        radial-gradient(circle at 30% 20%, rgba(37, 99, 235, 0.1), transparent 60%),
        radial-gradient(circle at 75% 80%, rgba(29, 78, 216, 0.08), transparent 55%),
        linear-gradient(180deg, var(--bg-secondary), var(--bg-card));
}
.single-product-page .product-main-image img {
    padding: 36px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.single-product-page .product-main-image:hover img {
    transform: scale(1.08) rotate(-1deg);
}

/* Inner corner accents on image */
.single-product-page .product-main-image::after {
    content: '';
    position: absolute;
    top: 14px; left: 14px;
    width: 28px; height: 28px;
    border-top: 2px solid rgba(37, 99, 235, 0.45);
    border-left: 2px solid rgba(37, 99, 235, 0.45);
    border-radius: 6px 0 0 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.7;
}

/* Thumbnails — premium pill row */
.single-product-page .product-thumbnails {
    gap: 14px;
    padding: 8px;
    background: rgba(30, 58, 95, 0.06);
    border-radius: 16px;
    border: 1px solid rgba(30, 58, 95, 0.08);
}
.single-product-page .thumb-item {
    width: 88px;
    height: 88px;
    border-radius: 14px;
    border: 2px solid transparent;
    background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
    box-shadow: 0 4px 12px rgba(23, 43, 77, 0.09);
}
.single-product-page .thumb-item:hover {
    border-color: rgba(37, 99, 235, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);
}
.single-product-page .thumb-item.active {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 8px 20px rgba(37, 99, 235, 0.2);
}

/* Info card — glassmorphism with stronger presence */
.single-product-page .product-detail-info {
    border-radius: 28px;
    padding: 36px 32px;
    border: 1px solid rgba(30, 58, 95, 0.12);
    background:
        linear-gradient(180deg, rgba(37, 99, 235, 0.05) 0%, transparent 30%),
        linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(30, 58, 95, 0.07),
        inset 0 1px 0 rgba(30, 58, 95, 0.08);
    gap: 24px;
}

/* Top accent ribbon — multi-color gradient */
.single-product-page .product-detail-info::before {
    height: 5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent-green) 20%,
        var(--accent-emerald) 50%,
        #1d4ed8 80%,
        transparent 100%);
    opacity: 1;
    border-radius: 0 0 5px 5px;
}

/* Brand chip — larger, more clickable */
.single-product-page .product-detail-brand {
    padding: 8px 20px;
    font-size: 0.92rem;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.1));
    border: 1px solid rgba(37, 99, 235, 0.3);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.single-product-page .product-detail-brand:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

/* Title — bigger and more elegant */
.single-product-page .product-detail-title {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.3;
    padding-right: 18px;
    border-right: 5px solid var(--accent-green);
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.06), transparent 70%);
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 0 8px 8px 0;
}

/* Excerpt — softer card-like styling */
.single-product-page .product-detail-excerpt {
    font-size: 1.02rem;
    line-height: 2;
    color: #51637a;
    padding: 16px 20px;
    background: rgba(30, 58, 95, 0.06);
    border-radius: 12px;
    border-right: 3px solid rgba(30, 58, 95, 0.12);
    border-bottom: none;
}

/* Price row — bigger and more prominent */
.single-product-page .product-detail-price-row {
    padding: 22px 26px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.04)),
        var(--bg-card);
    border: 1px solid rgba(37, 99, 235, 0.22);
    box-shadow: inset 0 1px 0 rgba(30, 58, 95, 0.08);
}
.single-product-page .product-detail-price-row .product-detail-price {
    font-size: 2.1rem;
    font-weight: 900;
    text-shadow: 0 2px 20px rgba(37, 99, 235, 0.3);
}
.single-product-page .product-detail-price del {
    font-size: 1.25rem;
    text-decoration: line-through;
    text-decoration-color: rgba(248, 113, 113, 0.6);
    text-decoration-thickness: 2px;
}

/* Add-to-cart button — bigger, glossier */
.single-product-page .product-add-btn {
    height: 62px;
    font-size: 1.05rem;
    border-radius: 16px;
    box-shadow:
        0 12px 28px rgba(37, 99, 235, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #60a5fa 0%, var(--accent-green) 50%, #1d4ed8 100%);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}
.single-product-page .product-add-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 18px 36px rgba(37, 99, 235, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

/* WhatsApp buy-now — bigger, more confident */
.single-product-page .product-buy-now-btn {
    height: 56px;
    font-size: 1.02rem;
    border-radius: 16px;
    box-shadow:
        0 12px 28px rgba(37, 211, 102, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Quantity selector — match button height */
.single-product-page .quantity-selector {
    border-radius: 16px;
    background: rgba(30, 58, 95, 0.09);
    border: 1px solid rgba(30, 58, 95, 0.16);
}
.single-product-page .qty-btn,
.single-product-page .qty-input {
    height: 62px;
}
.single-product-page .qty-btn { width: 54px; }
.single-product-page .qty-input { width: 64px; font-size: 1.25rem; }

/* Key features — bigger tiles */
.single-product-page .product-key-features {
    padding: 18px;
    border-radius: 18px;
    gap: 12px;
}
.single-product-page .key-feature {
    padding: 12px 14px;
    border-radius: 14px;
}
.single-product-page .key-feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}
.single-product-page .key-feature-label { font-size: 0.74rem; }
.single-product-page .key-feature-value { font-size: 0.92rem; }

/* Trust strip — premium glassmorphism row */
.single-product-page .product-trust-strip {
    padding: 14px 18px;
    background:
        linear-gradient(135deg, rgba(30, 58, 95, 0.07), rgba(255, 255, 255, 0.01));
    border-radius: 14px;
    border: 1px solid rgba(30, 58, 95, 0.1);
    box-shadow: inset 0 1px 0 rgba(30, 58, 95, 0.07);
}
.single-product-page .trust-strip-item {
    color: var(--text-secondary);
    font-size: 0.86rem;
}
.single-product-page .trust-strip-item svg {
    color: var(--accent-green);
    flex-shrink: 0;
}

/* Trust card — premium dark card */
.single-product-page .product-trust-card {
    padding: 20px 22px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.05), transparent 60%),
        var(--bg-card);
    border: 1px solid rgba(37, 99, 235, 0.15);
    box-shadow: 0 10px 30px rgba(23, 43, 77, 0.09);
}
.single-product-page .product-trust-card-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(37, 99, 235, 0.2);
}
.single-product-page .product-trust-card-head strong {
    font-size: 1.02rem;
    color: var(--text-primary);
}
.single-product-page .product-trust-card-head svg {
    color: var(--accent-green);
}
.single-product-page .product-trust-card-list li {
    padding: 6px 0;
    font-size: 0.9rem;
}

/* Tabs — premium pill-style buttons */
.single-product-page .product-tab-btns {
    gap: 6px;
    border-bottom: 1px solid rgba(30, 58, 95, 0.1);
    margin-bottom: 24px;
    padding: 6px;
    background: rgba(30, 58, 95, 0.07);
    border-radius: 16px 16px 0 0;
    border: 1px solid rgba(30, 58, 95, 0.08);
    border-bottom: 1px solid rgba(30, 58, 95, 0.1);
}
.single-product-page .product-tab-btn {
    padding: 14px 28px;
    border-radius: 12px;
    transition: background 0.2s ease, color 0.2s ease;
}
.single-product-page .product-tab-btn.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0.06));
    color: var(--accent-green);
}
.single-product-page .product-tab-btn::after { display: none; }

/* Tab content — premium glass card */
.single-product-page .product-tab-content {
    border-radius: 0 16px 16px 16px;
    padding: 32px 32px;
    background:
        linear-gradient(180deg, rgba(37, 99, 235, 0.02), transparent 40%),
        var(--bg-card);
    border: 1px solid rgba(30, 58, 95, 0.09);
    box-shadow: 0 12px 32px rgba(23, 43, 77, 0.09);
}
.single-product-page .product-tab-content h2 {
    font-size: 1.5rem;
    margin-top: 0;
    padding-right: 16px;
    border-right: 5px solid var(--accent-green);
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.06), transparent);
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 0 8px 8px 0;
}

/* Specs table — premium zebra with hover */
.single-product-page .specs-table {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(30, 58, 95, 0.1);
}
.single-product-page .specs-table th {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.04));
    color: var(--accent-green);
    font-weight: 700;
    width: 240px;
    border-left: 3px solid rgba(37, 99, 235, 0.3);
}
.single-product-page .specs-table td {
    font-size: 0.96rem;
    color: #d8d8d8;
}
.single-product-page .specs-table tr:nth-child(even) td {
    background: rgba(30, 58, 95, 0.06);
}
.single-product-page .specs-table tr:hover td {
    background: rgba(37, 99, 235, 0.06);
    color: var(--text-primary);
}

/* Related section — premium header */
.single-product-page .related-products-section {
    padding: 60px 0 80px;
    border-top: 1px solid rgba(30, 58, 95, 0.1);
    background:
        radial-gradient(ellipse at top, rgba(37, 99, 235, 0.04), transparent 50%);
}
.single-product-page .section-header {
    text-align: center;
    margin-bottom: 40px;
}
.single-product-page .section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.single-product-page .section-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
}

/* Mobile single product — keep premium feel */
@media (max-width: 768px) {
    .single-product-page .product-detail-info {
        padding: 24px 20px;
        border-radius: 22px;
    }
    .single-product-page .product-detail-title {
        font-size: 1.55rem;
        padding-right: 12px;
    }
    .single-product-page .product-detail-price-row .product-detail-price {
        font-size: 1.7rem;
    }
    .single-product-page .product-add-btn,
    .single-product-page .qty-btn,
    .single-product-page .qty-input {
        height: 56px;
    }
    .single-product-page .product-add-btn {
        font-size: 0.98rem;
        min-width: 100%;
    }
    .single-product-page .product-detail-cart {
        flex-direction: column;
    }
    .single-product-page .product-tab-content {
        padding: 20px 18px;
    }
    .single-product-page .specs-table th {
        width: 130px;
        padding: 12px 14px;
        font-size: 0.84rem;
    }
    .single-product-page .specs-table td {
        padding: 12px 14px;
        font-size: 0.86rem;
    }
    .single-product-page .section-title {
        font-size: 1.5rem;
    }
}

/* Sticky mobile add-to-cart bar — premium */
.single-product-page .sticky-add-to-cart {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(37, 99, 235, 0.25);
    box-shadow: 0 -10px 30px rgba(23, 43, 77, 0.12);
}

/* ============================================================
   SINGLE PRODUCT V2 — Clean Modern Layout
   Sp-v2 hero + features + trust + modal
   ============================================================ */

/* ---- v2 wrapper reset (override old padding) ---- */
.single-product-page.sp-v2 {
    padding-bottom: 80px;
}
.single-product-page.sp-v2 .breadcrumb {
    padding: 20px 0 18px;
}

/* ============================================
   HERO SECTION
   ============================================ */
.sp-hero {
    padding: 8px 0 40px;
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(37, 99, 235, 0.08), transparent 60%),
        radial-gradient(700px 400px at 10% 110%, rgba(249, 115, 22, 0.06), transparent 60%);
    border-bottom: 1px solid rgba(37, 99, 235, 0.08);
    margin-bottom: 60px;
}

.sp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

/* ---- Gallery ---- */
.sp-gallery {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: calc(var(--header-height, 80px) + 16px);
}

.sp-gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 30% 25%, rgba(37, 99, 235, 0.10), transparent 60%),
        linear-gradient(145deg, rgba(20, 24, 18, 0.95), rgba(8, 10, 8, 0.98));
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 24px;
    box-shadow:
        0 30px 60px -25px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(30, 58, 95, 0.06) inset;
    overflow: hidden;
}

.sp-gallery-main::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 180deg at 50% 50%,
        transparent 0deg,
        rgba(37, 99, 235, 0.18) 80deg,
        transparent 160deg,
        rgba(249, 115, 22, 0.15) 260deg,
        transparent 360deg);
    opacity: 0.6;
    z-index: 0;
    animation: spRingSpin 18s linear infinite;
}

@keyframes spRingSpin {
    to { transform: rotate(360deg); }
}

.sp-main-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 40px;
    transition: transform 0.6s cubic-bezier(.2, .8, .3, 1);
}

.sp-gallery-main:hover .sp-main-img {
    transform: scale(1.05) rotate(-1deg);
}

/* Discount badge */
.sp-discount-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    border-radius: 14px;
    box-shadow:
        0 10px 24px -6px rgba(239, 68, 68, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    transform: rotate(-4deg);
    animation: spSalePulse 2.4s ease-in-out infinite;
}

.sp-discount-num {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.5px;
}

.sp-discount-label {
    font-size: 0.7rem;
    margin-top: 3px;
    opacity: 0.95;
}

@keyframes spSalePulse {
    0%, 100% { transform: rotate(-4deg) scale(1); }
    50% { transform: rotate(-4deg) scale(1.06); }
}

/* Brand chip */
.sp-brand-chip {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    background: rgba(10, 10, 10, 0.88);
    color: var(--accent-green, #2563eb);
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid rgba(37, 99, 235, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(23, 43, 77, 0.12);
}

/* Stockout overlay */
.sp-stockout-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    background: rgba(15, 15, 15, 0.92);
    color: #dc2626;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 800;
    border: 1px solid rgba(239, 68, 68, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(23, 43, 77, 0.12);
}

/* Thumbnails */
.sp-thumbnails {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.sp-thumbnails::-webkit-scrollbar { height: 4px; }
.sp-thumbnails::-webkit-scrollbar-thumb { background: rgba(37, 99, 235, 0.3); border-radius: 4px; }

.sp-thumb {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    background: rgba(20, 24, 18, 0.5);
    transition: all 0.3s ease;
}
.sp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sp-thumb:hover {
    border-color: rgba(37, 99, 235, 0.4);
    transform: translateY(-2px);
}
.sp-thumb.active {
    border-color: var(--accent-green, #2563eb);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

/* ============================================
   INFO COLUMN
   ============================================ */
.sp-info {
    padding-top: 4px;
}

.sp-meta-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.sp-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--accent-green, #2563eb);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid rgba(37, 99, 235, 0.25);
    text-decoration: none;
    transition: all 0.3s ease;
}
.sp-brand-link:hover {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.5);
    transform: translateY(-1px);
}
.sp-sku {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted, #8195ac);
    font-size: 0.78rem;
}

.sp-title {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--text-primary, #fff);
    line-height: 1.25;
    margin: 0 0 14px;
    letter-spacing: -0.5px;
}

.sp-excerpt {
    color: var(--text-secondary, #5a7a96);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px dashed rgba(37, 99, 235, 0.15);
}

/* Rating + stock row */
.sp-rating-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.sp-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #f59e0b;
    font-size: 1rem;
}
.sp-stars .star { color: rgba(245, 158, 11, 0.25); }
.sp-stars .star.full { color: #f59e0b; }
.sp-stars .star.half {
    background: linear-gradient(90deg, #f59e0b 50%, rgba(245, 158, 11, 0.25) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sp-rating-count {
    color: var(--text-muted, #8195ac);
    font-size: 0.85rem;
    margin-right: 6px;
}
.sp-stars-empty {
    color: var(--text-muted, #8195ac);
    font-size: 0.85rem;
}

.sp-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 50px;
}
.sp-stock.is-in {
    color: #16a34a;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.25);
}
.sp-stock.is-out {
    color: #dc2626;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.25);
}

/* ============================================
   PRICE CARD
   ============================================ */
.sp-price-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(249, 115, 22, 0.04));
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 18px;
    padding: 22px 26px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.sp-price-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(37, 99, 235, 0.10), transparent 70%);
    pointer-events: none;
}

.sp-price-block {
    position: relative;
    z-index: 1;
}

.sp-price-label {
    display: block;
    color: var(--text-muted, #8195ac);
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.sp-price-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-green, #2563eb);
    line-height: 1;
    letter-spacing: -0.5px;
}
.sp-price-value del {
    color: var(--text-muted, #8195ac);
    font-size: 1.15rem;
    font-weight: 400;
    margin-left: 10px;
    opacity: 0.7;
    text-decoration: line-through;
}
.sp-price-value ins {
    text-decoration: none;
    color: var(--accent-green, #2563eb);
}

.sp-price-save {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fb923c;
    background: rgba(251, 146, 60, 0.12);
    padding: 3px 10px;
    border-radius: 50px;
}

/* Price circle on the right */
.sp-price-circle {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -6px rgba(239, 68, 68, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    transform: rotate(-6deg);
    flex-shrink: 0;
}
.sp-price-circle-num {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
}
.sp-price-circle-label {
    font-size: 0.62rem;
    letter-spacing: 1px;
    margin-top: 2px;
    opacity: 0.95;
}

/* ============================================
   ACTION ROW (Description btn + Buy btn)
   ============================================ */
.sp-actions {
    margin-bottom: 20px;
}

.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(.2, .8, .3, 1);
    position: relative;
    overflow: hidden;
}

/* Description button */
.sp-btn-desc {
    width: 100%;
    padding: 14px 22px;
    background: rgba(20, 24, 18, 0.85);
    color: var(--text-primary, #fff);
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 14px;
    font-size: 0.95rem;
    margin-bottom: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.sp-btn-desc::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(37, 99, 235, 0.15) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}
.sp-btn-desc:hover {
    border-color: var(--accent-green, #2563eb);
    background: rgba(37, 99, 235, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.35);
}
.sp-btn-desc:hover::before { transform: translateX(100%); }

/* Cart row */
.sp-cart-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.sp-qty {
    display: inline-flex;
    align-items: center;
    background: rgba(20, 24, 18, 0.85);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
}
.sp-qty-btn {
    width: 44px;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--text-secondary, #5a7a96);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.sp-qty-btn:hover {
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent-green, #2563eb);
}
.sp-qty-input {
    width: 44px;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary, #fff);
    text-align: center;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    -moz-appearance: textfield;
}
.sp-qty-input::-webkit-outer-spin-button,
.sp-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Buy button (CTA) */
.sp-btn-buy {
    flex: 1;
    padding: 14px 22px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    border-radius: 14px;
    font-size: 1rem;
    box-shadow:
        0 14px 28px -10px rgba(37, 99, 235, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sp-btn-buy::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    transition: left 0.6s ease;
}
.sp-btn-buy:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 36px -10px rgba(37, 99, 235, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.sp-btn-buy:hover::after { left: 100%; }
.sp-btn-buy:active { transform: translateY(0); }

/* WhatsApp button */
.sp-btn-wa {
    padding: 14px 22px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    border-radius: 14px;
    font-size: 0.95rem;
    box-shadow: 0 14px 28px -10px rgba(37, 211, 102, 0.45);
}
.sp-btn-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -10px rgba(37, 211, 102, 0.6);
}

/* Contact row */
.sp-contact-row {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}
.sp-contact-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(20, 24, 18, 0.6);
    color: var(--text-secondary, #5a7a96);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}
.sp-contact-btn:hover {
    border-color: rgba(37, 99, 235, 0.4);
    color: var(--accent-green, #2563eb);
    background: rgba(37, 99, 235, 0.05);
}

/* Trust strip */
.sp-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding-top: 18px;
    border-top: 1px dashed rgba(37, 99, 235, 0.15);
}
.sp-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 12px 6px;
    background: rgba(20, 24, 18, 0.5);
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: 12px;
    color: var(--text-secondary, #5a7a96);
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.sp-trust-item svg {
    color: var(--accent-green, #2563eb);
}
.sp-trust-item:hover {
    border-color: rgba(37, 99, 235, 0.3);
    background: rgba(37, 99, 235, 0.05);
    transform: translateY(-2px);
}

/* ============================================
   VOLUME VARIANTS SECTION
   ============================================ */
.sp-volumes-section {
    padding: 32px 0 0;
    margin-bottom: 0;
}

.sp-volumes-head {
    text-align: center;
    margin-bottom: 24px;
}

.sp-volumes-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-green, #2563eb);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.sp-volumes-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary, #142840);
}

.sp-volumes-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- Volume Card (shared) --- */
.sp-vol-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 24px 16px;
    border-radius: 16px;
    background: var(--bg-secondary, #f9fafb);
    border: 2px solid var(--border-color, #e5e7eb);
    text-decoration: none;
    text-align: center;
    min-width: 160px;
    flex: 0 1 auto;
    transition: all 0.25s ease;
}

/* Clickable variant cards */
a.sp-vol-card:hover {
    border-color: var(--accent-green, #2563eb);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(23, 43, 77, 0.08);
}

a.sp-vol-card.sp-vol-out {
    opacity: 0.55;
    pointer-events: none;
}

a.sp-vol-card.sp-vol-out:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-color, #e5e7eb);
}

a.sp-vol-card.sp-vol-sale {
    border-color: rgba(239, 68, 68, 0.25);
}

/* --- Current volume (non-clickable indicator) --- */
.sp-vol-card.sp-vol-current {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.03));
    border-color: var(--accent-green, #2563eb);
    cursor: default;
}

/* --- Badge (top-right corner) --- */
.sp-vol-badge {
    position: absolute;
    top: -9px;
    right: -6px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.6;
}

.sp-vol-badge-active {
    background: var(--accent-green, #2563eb);
    color: #fff;
}

.sp-vol-badge-sale {
    background: #ef4444;
    color: #fff;
}

.sp-vol-badge-out {
    background: #9ca3af;
    color: #fff;
}

/* --- Icon (current card) --- */
.sp-vol-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.12);
    color: var(--accent-green, #2563eb);
}

/* --- Thumbnail (variant cards) --- */
.sp-vol-thumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color, #e5e7eb);
}

.sp-vol-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-vol-thumb-placeholder {
    color: #d1d5db;
}

/* --- Volume label --- */
.sp-vol-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #142840);
}

/* --- Price --- */
.sp-vol-price {
    font-size: 0.85rem;
    color: var(--text-secondary, #6b7280);
    direction: rtl;
}

.sp-vol-price del {
    opacity: 0.5;
    font-size: 0.78rem;
}

.sp-vol-price ins {
    text-decoration: none;
    color: #ef4444;
    font-weight: 700;
}

/* --- Notice (current card) --- */
.sp-vol-notice {
    font-size: 0.75rem;
    color: var(--accent-green, #2563eb);
    font-weight: 600;
}

/* --- CTA (variant cards) --- */
.sp-vol-cta {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-green, #2563eb);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease;
}

a.sp-vol-card:hover .sp-vol-cta {
    gap: 8px;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .sp-volumes-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-bottom: 8px;
        gap: 10px;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .sp-vol-card {
        min-width: 130px;
        max-width: 150px;
        flex-shrink: 0;
        padding: 14px 16px 12px;
    }
    .sp-vol-thumb {
        width: 48px;
        height: 48px;
    }
    .sp-vol-label {
        font-size: 0.85rem;
    }
    .sp-vol-price {
        font-size: 0.78rem;
    }
    .sp-vol-cta {
        font-size: 0.72rem;
    }
}

/* ============================================
   FEATURES SECTION
   ============================================ */
.sp-features-section {
    padding: 0 0 60px;
    margin-bottom: 0;
}

.sp-section-head {
    text-align: center;
    margin-bottom: 40px;
}
.sp-section-eyebrow {
    display: inline-block;
    color: var(--accent-green, #2563eb);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding: 4px 14px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 50px;
}
.sp-section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary, #fff);
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}
.sp-section-sub {
    color: var(--text-muted, #8195ac);
    font-size: 0.95rem;
    margin: 0;
}

.sp-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

.sp-feature-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(20, 24, 18, 0.85), rgba(10, 12, 10, 0.95));
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 16px;
    padding: 18px 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.sp-feature-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 100%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(37, 99, 235, 0.08), transparent 70%);
    pointer-events: none;
}
.sp-feature-card:hover {
    border-color: rgba(37, 99, 235, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -12px rgba(23, 43, 77, 0.16);
}

.sp-feature-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(37, 99, 235, 0.05));
    color: var(--accent-green, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.sp-feature-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.sp-feature-label {
    color: var(--text-muted, #8195ac);
    font-size: 0.76rem;
    font-weight: 600;
}
.sp-feature-value {
    color: var(--text-primary, #fff);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Inline highlights */
.sp-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.sp-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(20, 24, 18, 0.5);
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 14px;
    padding: 18px 20px;
    transition: all 0.3s ease;
}
.sp-highlight-item:hover {
    border-color: rgba(37, 99, 235, 0.3);
    transform: translateY(-2px);
}
.sp-highlight-item svg {
    color: var(--accent-green, #2563eb);
    flex-shrink: 0;
}
.sp-highlight-item div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sp-highlight-item strong {
    color: var(--text-primary, #fff);
    font-size: 0.95rem;
    font-weight: 700;
}
.sp-highlight-item span {
    color: var(--text-muted, #8195ac);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* ============================================
   TRUST SECTION
   ============================================ */
.sp-trust-section {
    padding: 60px 0;
    background:
        radial-gradient(800px 400px at 90% 50%, rgba(37, 99, 235, 0.06), transparent 60%),
        radial-gradient(600px 300px at 10% 50%, rgba(249, 115, 22, 0.04), transparent 60%);
    border-top: 1px solid rgba(37, 99, 235, 0.08);
    border-bottom: 1px solid rgba(37, 99, 235, 0.08);
    margin-bottom: 0;
}

.sp-trust-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.sp-trust-card-main {
    background: linear-gradient(135deg, rgba(20, 24, 18, 0.85), rgba(10, 12, 10, 0.95));
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 22px;
    padding: 32px;
    position: relative;
    overflow: hidden;
}
.sp-trust-card-main::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 50%;
    height: 100%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.10), transparent 70%);
    pointer-events: none;
}

.sp-trust-card-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
}
.sp-trust-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.08));
    color: var(--accent-green, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 99, 235, 0.3);
    flex-shrink: 0;
}
.sp-trust-card-head h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary, #fff);
    margin: 0 0 4px;
}
.sp-trust-card-head p {
    color: var(--text-muted, #8195ac);
    font-size: 0.88rem;
    margin: 0;
}

.sp-trust-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}
.sp-trust-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.sp-trust-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.15);
    color: var(--accent-green, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    border: 1px solid rgba(37, 99, 235, 0.3);
}
.sp-trust-list li > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sp-trust-list strong {
    color: var(--text-primary, #fff);
    font-size: 0.95rem;
    font-weight: 700;
}
.sp-trust-list span {
    color: var(--text-muted, #8195ac);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Trust side cards */
.sp-trust-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sp-trust-side-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(20, 24, 18, 0.7);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 16px;
    padding: 20px 22px;
    transition: all 0.3s ease;
    position: relative;
}
.sp-trust-side-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-green, #2563eb), transparent);
    border-radius: 0 16px 16px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sp-trust-side-item:hover {
    border-color: rgba(37, 99, 235, 0.35);
    transform: translateX(-3px);
    background: rgba(37, 99, 235, 0.05);
}
.sp-trust-side-item:hover::before { opacity: 1; }

.sp-trust-side-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent-green, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 99, 235, 0.2);
}
.sp-trust-side-item strong {
    color: var(--text-primary, #fff);
    font-size: 1rem;
    font-weight: 700;
}
.sp-trust-side-item span {
    color: var(--text-muted, #8195ac);
    font-size: 0.85rem;
}

/* ============================================
   DESCRIPTION MODAL (POPUP)
   ============================================ */
.sp-modal[hidden] { display: none; }

.sp-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 5, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.sp-modal-open .sp-modal-backdrop { opacity: 1; }

.sp-modal-box {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 60px);
    background: linear-gradient(180deg, #161b14, #0d100c);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 22px;
    box-shadow: 0 30px 80px -20px rgba(23, 43, 77, 0.16);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(.2, .8, .3, 1), opacity 0.25s ease;
}
.sp-modal-in .sp-modal-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.sp-modal-close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 36px;
    height: 36px;
    background: rgba(20, 24, 18, 0.7);
    color: var(--text-secondary, #5a7a96);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.25s ease;
}
.sp-modal-close:hover {
    background: rgba(248, 113, 113, 0.15);
    color: #dc2626;
    border-color: rgba(248, 113, 113, 0.4);
    transform: rotate(90deg);
}

.sp-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(37, 99, 235, 0.15);
    background: rgba(37, 99, 235, 0.04);
}
.sp-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.08));
    color: var(--accent-green, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 99, 235, 0.3);
    flex-shrink: 0;
}
.sp-modal-head h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary, #fff);
    margin: 0;
}

.sp-modal-body {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
}
.sp-modal-body::-webkit-scrollbar { width: 6px; }
.sp-modal-body::-webkit-scrollbar-thumb { background: rgba(37, 99, 235, 0.3); border-radius: 6px; }

.sp-modal-short {
    color: var(--text-secondary, #5a7a96);
    font-size: 0.95rem;
    line-height: 1.7;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px dashed rgba(37, 99, 235, 0.15);
    font-style: italic;
}

.sp-modal-content {
    color: var(--text-secondary, #5a7a96);
    font-size: 0.95rem;
    line-height: 1.85;
}
.sp-modal-content h1,
.sp-modal-content h2,
.sp-modal-content h3,
.sp-modal-content h4 {
    color: var(--text-primary, #fff);
    font-weight: 700;
    margin: 18px 0 10px;
    line-height: 1.3;
}
.sp-modal-content h2 { font-size: 1.3rem; }
.sp-modal-content h3 { font-size: 1.1rem; }
.sp-modal-content p { margin: 0 0 14px; }
.sp-modal-content ul,
.sp-modal-content ol {
    padding-right: 22px;
    margin: 0 0 14px;
}
.sp-modal-content li {
    margin-bottom: 6px;
    line-height: 1.7;
}
.sp-modal-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 14px 0;
}
.sp-modal-content a {
    color: var(--accent-green, #2563eb);
    text-decoration: underline;
}
.sp-modal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
}
.sp-modal-content table th,
.sp-modal-content table td {
    padding: 10px 12px;
    border: 1px solid rgba(37, 99, 235, 0.15);
    text-align: right;
    font-size: 0.88rem;
}

.sp-modal-specs {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed rgba(37, 99, 235, 0.15);
}
.sp-modal-specs h4 {
    color: var(--text-primary, #fff);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 12px;
}
.sp-modal-specs table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(20, 24, 18, 0.5);
    border-radius: 12px;
    overflow: hidden;
}
.sp-modal-specs th,
.sp-modal-specs td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(37, 99, 235, 0.1);
    font-size: 0.88rem;
    text-align: right;
}
.sp-modal-specs th {
    width: 35%;
    color: var(--text-muted, #8195ac);
    font-weight: 600;
    background: rgba(37, 99, 235, 0.04);
}
.sp-modal-specs td {
    color: var(--text-primary, #fff);
    font-weight: 600;
}
.sp-modal-specs tr:last-child th,
.sp-modal-specs tr:last-child td { border-bottom: none; }

.sp-modal-foot {
    display: flex;
    gap: 10px;
    padding: 18px 28px;
    border-top: 1px solid rgba(37, 99, 235, 0.15);
    background: rgba(20, 24, 18, 0.6);
}
.sp-modal-cta {
    flex: 1;
}
.sp-modal-wa {
    flex: 0 0 auto;
    padding: 14px 22px;
}

/* Body lock when modal open */
body.sp-modal-lock {
    overflow: hidden;
}

/* ============================================
   RESPONSIVE — TABLET
   ============================================ */
@media (max-width: 1100px) {
    .sp-hero-grid {
        grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
        gap: 36px;
    }
    .sp-title { font-size: 1.85rem; }
    .sp-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sp-trust-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   RESPONSIVE — MOBILE
   ============================================ */
@media (max-width: 768px) {
    .single-product-page.sp-v2 { padding-bottom: 100px; }

    .sp-hero {
        padding: 4px 0 30px;
        margin-bottom: 40px;
    }
    .sp-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .sp-gallery {
        position: static;
    }
    .sp-gallery-main {
        aspect-ratio: 1 / 1;
        max-width: 360px;
        margin: 0 auto;
    }    .sp-discount-badge {
        top: 12px;
        left: 12px;
        min-width: 54px;
        padding: 6px 10px;
    }
    .sp-discount-num { font-size: 1.1rem; }
    .sp-discount-label { font-size: 0.62rem; }
    .sp-brand-chip {
        top: 12px;
        right: 12px;
        padding: 5px 12px;
        font-size: 0.72rem;
    }

    .sp-info { padding-top: 0; }
    .sp-meta-top { gap: 8px; margin-bottom: 10px; }
    .sp-brand-link { font-size: 0.74rem; padding: 5px 12px; }
    .sp-sku { font-size: 0.72rem; }

    .sp-title {
        font-size: 1.4rem;
        line-height: 1.35;
        margin-bottom: 10px;
    }
    .sp-excerpt {
        font-size: 0.92rem;
        margin-bottom: 14px;
        padding-bottom: 14px;
    }

    .sp-rating-row { gap: 10px; margin-bottom: 16px; }
    .sp-stars { font-size: 0.92rem; }
    .sp-rating-count { font-size: 0.78rem; }
    .sp-stock { font-size: 0.78rem; padding: 4px 10px; }

    .sp-price-card {
        padding: 16px 18px;
        gap: 12px;
        margin-bottom: 18px;
    }
    .sp-price-label { font-size: 0.74rem; margin-bottom: 4px; }
    .sp-price-value { font-size: 1.5rem; }
    .sp-price-value del { font-size: 1rem; }
    .sp-price-save { font-size: 0.72rem; padding: 2px 8px; }
    .sp-price-circle {
        width: 58px;
        height: 58px;
    }
    .sp-price-circle-num { font-size: 1.1rem; }

    .sp-actions { margin-bottom: 16px; }
    .sp-btn-desc {
        padding: 12px 18px;
        font-size: 0.9rem;
        margin-bottom: 10px;
    }
    .sp-cart-row {
        flex-direction: row;
        gap: 8px;
    }
    .sp-qty { border-radius: 12px; }
    .sp-qty-btn { width: 38px; }
    .sp-qty-input { width: 36px; font-size: 0.92rem; }
    .sp-btn-buy {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    .sp-btn-buy span { font-size: 0.88rem; }

    .sp-contact-row { gap: 8px; margin-bottom: 16px; }
    .sp-contact-btn {
        padding: 9px 12px;
        font-size: 0.78rem;
        gap: 5px;
    }

    .sp-trust-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding-top: 14px;
    }
    .sp-trust-item {
        padding: 10px 4px;
        font-size: 0.74rem;
    }
    .sp-trust-item svg { width: 18px; height: 18px; }

    /* Features section */
    .sp-features-section { padding: 0 0 40px; }
    .sp-section-head { margin-bottom: 26px; }
    .sp-section-eyebrow { font-size: 0.74rem; padding: 3px 12px; }
    .sp-section-title { font-size: 1.45rem; }
    .sp-section-sub { font-size: 0.85rem; }
    .sp-features-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }
    .sp-feature-card { padding: 14px 16px; gap: 12px; }
    .sp-feature-icon { width: 42px; height: 42px; }
    .sp-feature-icon svg { width: 22px; height: 22px; }
    .sp-feature-label { font-size: 0.72rem; }
    .sp-feature-value { font-size: 0.9rem; }

    .sp-highlights {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .sp-highlight-item { padding: 14px 16px; gap: 12px; }
    .sp-highlight-item strong { font-size: 0.9rem; }
    .sp-highlight-item span { font-size: 0.78rem; }

    /* Trust section */
    .sp-trust-section { padding: 40px 0; }
    .sp-trust-card-main { padding: 22px 20px; }
    .sp-trust-card-head { gap: 12px; margin-bottom: 18px; }
    .sp-trust-card-icon { width: 48px; height: 48px; }
    .sp-trust-card-head h3 { font-size: 1.15rem; }
    .sp-trust-card-head p { font-size: 0.82rem; }
    .sp-trust-list { gap: 12px; }
    .sp-trust-check { width: 24px; height: 24px; font-size: 0.78rem; }
    .sp-trust-list strong { font-size: 0.88rem; }
    .sp-trust-list span { font-size: 0.76rem; }

    .sp-trust-side { gap: 10px; }
    .sp-trust-side-item { padding: 16px 18px; }
    .sp-trust-side-icon { width: 38px; height: 38px; }
    .sp-trust-side-item strong { font-size: 0.92rem; }
    .sp-trust-side-item span { font-size: 0.78rem; }

    /* Modal */
    .sp-modal { padding: 12px; }
    .sp-modal-box { border-radius: 18px; }
    .sp-modal-head { padding: 18px 20px; gap: 10px; }
    .sp-modal-icon { width: 38px; height: 38px; }
    .sp-modal-icon svg { width: 18px; height: 18px; }
    .sp-modal-head h3 { font-size: 1.1rem; }
    .sp-modal-body { padding: 18px 20px; }
    .sp-modal-short { font-size: 0.88rem; padding-bottom: 14px; margin-bottom: 14px; }
    .sp-modal-content { font-size: 0.88rem; line-height: 1.75; }
    .sp-modal-content h2 { font-size: 1.15rem; }
    .sp-modal-content h3 { font-size: 1rem; }
    .sp-modal-specs { margin-top: 18px; padding-top: 16px; }
    .sp-modal-specs h4 { font-size: 0.95rem; }
    .sp-modal-specs th,
    .sp-modal-specs td { padding: 10px 12px; font-size: 0.82rem; }
    .sp-modal-foot {
        padding: 14px 20px;
        flex-direction: column;
        gap: 8px;
    }
    .sp-modal-wa {
        flex: 1;
        padding: 12px 18px;
    }
}

@media (max-width: 420px) {
    .sp-title { font-size: 1.25rem; }
    .sp-price-value { font-size: 1.35rem; }
    .sp-btn-buy span { font-size: 0.82rem; }
    .sp-btn-desc span { font-size: 0.85rem; }
    .sp-contact-btn span { display: inline; }
    .sp-trust-strip { grid-template-columns: repeat(2, 1fr); }
}