/**
 * Product Detail Page Redesign CSS
 * Modern styling for individual product pages
 * AGGRESSIVE overrides for existing site structure
 *
 * To revert: Remove the <link> to this file in Category_products.php show_product()
 */

/* ============================================ */
/* PRODUCT PAGE SPECIFIC STYLES                */
/* ============================================ */

/* Product Details Container */
.body_rspstruct .proDetails {
    margin-top: 15px !important;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Breadcrumb */
.body_rspstruct .rspstruct .breadcrumb {
    padding: 16px 0 !important;
    font-size: 13px !important;
    color: #71717a !important;
    border-bottom: 1px solid #f4f4f5 !important;
    margin-bottom: 24px !important;
    background: none !important;
}

.body_rspstruct .rspstruct .breadcrumb ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.body_rspstruct .rspstruct .breadcrumb ul li {
    display: inline-flex !important;
    align-items: center !important;
}

.body_rspstruct .rspstruct .breadcrumb ul li:not(:last-child)::after {
    content: '/' !important;
    margin-left: 8px !important;
    color: #d4d4d8 !important;
}

.body_rspstruct .rspstruct .breadcrumb a {
    color: #3b82f6 !important;
    text-decoration: none !important;
}

/* Product Gallery Enhancement */
.body_rspstruct .proDetails .col-6:first-of-type,
.body_rspstruct .proDetails .col-4 {
    background: #fff !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    overflow: hidden !important;
}

/* Main Image Styling */
.body_rspstruct .proDetails .lSSlideOuter {
    border-radius: 8px !important;
    overflow: hidden !important;
}

.body_rspstruct .proDetails .lSSlideOuter .lSPager.lSGallery img {
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.body_rspstruct .proDetails .lSSlideOuter .lSPager.lSGallery li:hover img,
.body_rspstruct .proDetails .lSSlideOuter .lSPager.lSGallery li.active img {
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}

/* Product Info Section */
.body_rspstruct .proDescription {
    padding: 0 30px !important;
    animation: fadeInUp 0.6s ease forwards !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.body_rspstruct .proDescription h1 {
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #18181b !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

/* Product Meta Row (rating + SKU) */
.body_rspstruct .product-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #f4f4f5 !important;
}

.body_rspstruct .product-sku {
    font-size: 13px !important;
    color: #a1a1aa !important;
}

/* Star Rating with Animation */
.body_rspstruct .product-rating-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.body_rspstruct .product-rating-row .stars {
    color: #fbbf24 !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
    display: inline-flex !important;
}

.body_rspstruct .product-rating-row .stars .star {
    display: inline-block !important;
    opacity: 0 !important;
    transform: scale(0) rotate(-180deg) !important;
    animation: starPop 0.4s ease forwards !important;
}

.body_rspstruct .product-rating-row .stars .star:nth-child(1) { animation-delay: 0.1s !important; }
.body_rspstruct .product-rating-row .stars .star:nth-child(2) { animation-delay: 0.2s !important; }
.body_rspstruct .product-rating-row .stars .star:nth-child(3) { animation-delay: 0.3s !important; }
.body_rspstruct .product-rating-row .stars .star:nth-child(4) { animation-delay: 0.4s !important; }
.body_rspstruct .product-rating-row .stars .star:nth-child(5) { animation-delay: 0.5s !important; }

@keyframes starPop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    50% {
        transform: scale(1.3) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.body_rspstruct .product-rating-row .review-count {
    font-size: 14px !important;
    color: #52525b !important;
}

.body_rspstruct .product-rating-row .review-count a {
    color: #3b82f6 !important;
    text-decoration: none !important;
}

/* ============================================ */
/* PRICE BLOCK - Anchor Pricing                */
/* ============================================ */

.body_rspstruct .price-block-new {
    background: #fafafa !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
}

.body_rspstruct .price-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 6px !important;
}

.body_rspstruct .price-current {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #18181b !important;
}

.body_rspstruct .price-original {
    font-size: 18px !important;
    color: #a1a1aa !important;
    text-decoration: line-through !important;
}

.body_rspstruct .price-save {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    animation: savePop 0.5s ease 0.3s forwards, savePulse 2s ease-in-out 1s infinite !important;
    opacity: 0 !important;
    transform: scale(0) !important;
}

@keyframes savePop {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    70% {
        transform: scale(1.15);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes savePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }
}

.body_rspstruct .price-note {
    font-size: 13px !important;
    color: #71717a !important;
    margin: 0 !important;
}

/* Legacy price styles (for existing markup) */
.body_rspstruct .proDescription h4 {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #18181b !important;
}

/* Original Price Strikethrough */
.body_rspstruct .store-msrp-price {
    font-size: 18px !important;
    color: #a1a1aa !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

.body_rspstruct .store-msrp-price-discount {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
}

/* ============================================ */
/* CTA BUTTONS                                 */
/* ============================================ */

/* CTA Group */
.body_rspstruct .cta-group {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

/* Design Now Button Enhancement */
.body_rspstruct .designNow,
.body_rspstruct a.designNow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    flex: 1 !important;
}

.body_rspstruct .designNow::before,
.body_rspstruct a.designNow::before {
    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,0.2), transparent) !important;
    animation: btnShine 3s ease-in-out infinite !important;
}

@keyframes btnShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.body_rspstruct .designNow:hover,
.body_rspstruct a.designNow:hover {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45) !important;
    transform: translateY(-2px) !important;
}

/* ADD TO CART Button */
.body_rspstruct #ADD_TO_CART {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

.body_rspstruct #ADD_TO_CART:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45) !important;
}

/* Request Quote Button */
.body_rspstruct .btn-quote {
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: 1px solid #d4d4d8 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    background: #fff !important;
    color: #3f3f46 !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}

.body_rspstruct .btn-quote:hover {
    background: #f4f4f5 !important;
}

/* ============================================ */
/* DESCRIPTION & FEATURES                      */
/* ============================================ */

/* Product Description Text */
.body_rspstruct .descriptionText,
.body_rspstruct .description-text {
    color: #52525b !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 24px !important;
}

/* Features Grid */
.body_rspstruct .features-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
}

.body_rspstruct .feature-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: #3f3f46 !important;
}

.body_rspstruct .feature-check {
    width: 18px !important;
    height: 18px !important;
    background: #dcfce7 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #16a34a !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
    opacity: 0 !important;
    transform: scale(0) !important;
    animation: checkPop 0.3s ease forwards !important;
}

.body_rspstruct .feature-item:nth-child(1) .feature-check { animation-delay: 0.5s !important; }
.body_rspstruct .feature-item:nth-child(2) .feature-check { animation-delay: 0.6s !important; }
.body_rspstruct .feature-item:nth-child(3) .feature-check { animation-delay: 0.7s !important; }
.body_rspstruct .feature-item:nth-child(4) .feature-check { animation-delay: 0.8s !important; }
.body_rspstruct .feature-item:nth-child(5) .feature-check { animation-delay: 0.9s !important; }
.body_rspstruct .feature-item:nth-child(6) .feature-check { animation-delay: 1.0s !important; }

@keyframes checkPop {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    70% {
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Quality/Features Section (existing markup support) */
.body_rspstruct .qualityHead {
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-top: 24px !important;
    border: 1px solid #e4e4e7 !important;
}

.body_rspstruct .qualityHead h5 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #18181b !important;
    margin-bottom: 16px !important;
}

.body_rspstruct .qualityHead ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.body_rspstruct .qualityHead ul li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    font-size: 14px !important;
    color: #52525b !important;
}

.body_rspstruct .qualityHead ul li::before {
    content: '\2713' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background: #dcfce7 !important;
    color: #16a34a !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
}

/* Trust Row */
.body_rspstruct .trust-row {
    display: flex !important;
    gap: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid #f4f4f5 !important;
}

.body_rspstruct .trust-row .trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #52525b !important;
}

.body_rspstruct .trust-row .trust-icon {
    font-size: 18px !important;
}

/* Trust Badges Row (alternative styling) */
.body_rspstruct .trust-row-product {
    display: flex !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    margin: 24px 0 !important;
    padding: 20px 0 !important;
    border-top: 1px solid #e4e4e7 !important;
    border-bottom: 1px solid #e4e4e7 !important;
}

/* ============================================ */
/* PRICING TABLE                               */
/* ============================================ */

.body_rspstruct .table-pricing {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e4e4e7 !important;
    margin: 24px 0 !important;
}

.body_rspstruct .table-pricing thead {
    background: #1a1a2e !important;
}

.body_rspstruct .table-pricing thead th {
    color: #fff !important;
    font-weight: 600 !important;
    padding: 14px 12px !important;
    text-align: center !important;
    font-size: 13px !important;
}

.body_rspstruct .table-pricing tbody td {
    padding: 12px !important;
    text-align: center !important;
    border-bottom: 1px solid #f4f4f5 !important;
}

.body_rspstruct .table-pricing tbody tr:hover {
    background: #f8fafc !important;
}

/* Quantity Pricing Section */
.body_rspstruct .pricing-section {
    background: #fafafa !important;
    padding: 48px 0 !important;
    margin-top: 40px !important;
}

.body_rspstruct .pricing-section h2 {
    font-size: 22px !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-bottom: 6px !important;
}

.body_rspstruct .pricing-section .subtitle {
    font-size: 14px !important;
    color: #71717a !important;
    text-align: center !important;
    margin-bottom: 32px !important;
}

.body_rspstruct .pricing-table-new {
    background: #fff !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.body_rspstruct .pricing-table-new table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.body_rspstruct .pricing-table-new th {
    background: #f4f4f5 !important;
    padding: 14px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #52525b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid #e4e4e7 !important;
}

.body_rspstruct .pricing-table-new td {
    padding: 20px 12px !important;
    text-align: center !important;
    border-right: 1px solid #f4f4f5 !important;
}

.body_rspstruct .pricing-table-new td:last-child {
    border-right: none !important;
}

.body_rspstruct .tier-price {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #18181b !important;
    display: block !important;
}

.body_rspstruct .tier-qty {
    font-size: 12px !important;
    color: #71717a !important;
    margin-top: 4px !important;
}

.body_rspstruct .best-value {
    background: #eff6ff !important;
}

.body_rspstruct .best-value .tier-price {
    color: #2563eb !important;
}

.body_rspstruct .best-badge {
    background: #3b82f6 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
}

/* ============================================ */
/* RELATED PRODUCTS SECTION                    */
/* ============================================ */

.body_rspstruct .related-section {
    background: #f8fafc !important;
    padding: 48px 24px !important;
    margin-top: 48px !important;
}

.body_rspstruct .related-section .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.body_rspstruct .related-section h2 {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #18181b !important;
    margin-bottom: 32px !important;
    text-align: center !important;
}

/* Related Products Grid - 4 columns, bigger cards */
.body_rspstruct .related-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.body_rspstruct .related-card {
    background: #fff !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 12px !important;
    overflow: visible !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 0 !important;
    transform: translateY(30px) !important;
    animation: cardSlideUp 0.5s ease forwards !important;
    min-height: 320px !important;
}

.body_rspstruct .related-card:nth-child(1) { animation-delay: 0.1s !important; }
.body_rspstruct .related-card:nth-child(2) { animation-delay: 0.15s !important; }
.body_rspstruct .related-card:nth-child(3) { animation-delay: 0.2s !important; }
.body_rspstruct .related-card:nth-child(4) { animation-delay: 0.25s !important; }
.body_rspstruct .related-card:nth-child(5) { animation-delay: 0.3s !important; }
.body_rspstruct .related-card:nth-child(6) { animation-delay: 0.35s !important; }
.body_rspstruct .related-card:nth-child(7) { animation-delay: 0.4s !important; }
.body_rspstruct .related-card:nth-child(8) { animation-delay: 0.45s !important; }
.body_rspstruct .related-card:nth-child(9) { animation-delay: 0.5s !important; }
.body_rspstruct .related-card:nth-child(10) { animation-delay: 0.55s !important; }

@keyframes cardSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.body_rspstruct .related-card:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    transform: translateY(-6px) !important;
}

.body_rspstruct .related-img {
    aspect-ratio: 1 !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    overflow: hidden !important;
    border-radius: 12px 12px 0 0 !important;
}

.body_rspstruct .related-img img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: transform 0.4s ease !important;
}

.body_rspstruct .related-card:hover .related-img img {
    transform: scale(1.1) !important;
}

.body_rspstruct .related-info {
    padding: 16px !important;
    border-top: 1px solid #f4f4f5 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    background: #fff !important;
    border-radius: 0 0 12px 12px !important;
}

.body_rspstruct .related-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #18181b !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 40px !important;
}

.body_rspstruct .related-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #18181b !important;
    margin-bottom: 12px !important;
}

.body_rspstruct .related-btn {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background: #3b82f6 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
}

.body_rspstruct .related-btn:hover {
    background: #2563eb !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.35) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

/* Schema Container - Hide but keep in DOM */
.body_rspstruct .product-schema-wrapper {
    display: none !important;
}

/* ============================================ */
/* RESPONSIVE STYLES                           */
/* ============================================ */

@media (max-width: 1100px) {
    .body_rspstruct .related-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 850px) {
    .body_rspstruct .related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 992px) {
    .body_rspstruct .proDescription {
        padding: 20px 0 0 0 !important;
    }

    .body_rspstruct .proDescription h1 {
        font-size: 22px !important;
    }

    .body_rspstruct .price-current {
        font-size: 26px !important;
    }

    .body_rspstruct .features-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .body_rspstruct .proDetails .col-6:first-of-type,
    .body_rspstruct .proDetails .col-4 {
        padding: 12px !important;
    }

    .body_rspstruct .product-meta-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .body_rspstruct .cta-group {
        flex-direction: column !important;
    }

    .body_rspstruct .designNow,
    .body_rspstruct a.designNow {
        width: 100% !important;
        padding: 18px 24px !important;
        font-size: 17px !important;
    }

    .body_rspstruct .trust-row {
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: center !important;
    }

    .body_rspstruct .trust-row .trust-item {
        flex: 0 0 45% !important;
        justify-content: center !important;
    }

    .body_rspstruct .trust-row-product {
        gap: 16px !important;
    }

    .body_rspstruct .related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .body_rspstruct .pricing-table-new table {
        font-size: 12px !important;
    }

    .body_rspstruct .pricing-table-new th {
        padding: 10px 6px !important;
        font-size: 10px !important;
    }

    .body_rspstruct .pricing-table-new td {
        padding: 12px 6px !important;
    }

    .body_rspstruct .tier-price {
        font-size: 14px !important;
    }

    .body_rspstruct .tier-qty {
        font-size: 10px !important;
    }
}