/* Add these styles to your existing assets/website/css/style.css */

/* Product Detail Page Specific Styles */

/* Product Images */
.main-image-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.main-image img {
    width: 100%;
    height: 400px;
    object-fit: contain;
    transition: var(--transition-smooth);
}

.availability-badge-detail {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.discount-badge-detail {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
}

.thumbnail-images .thumbnail-item {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    opacity: 0.7;
    transition: var(--transition-fast);
    border: 2px solid transparent;
}

.thumbnail-images .thumbnail-item:hover,
.thumbnail-images .thumbnail-item.active {
    opacity: 1;
    border-color: var(--primary-red);
    transform: scale(1.05);
}

.thumbnail-images img {
    width: 100%;
    height: 80px;
    object-fit: cover;
}

/* Product Info */
.product-breadcrumb {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.product-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--secondary-gray-dark);
    line-height: 1.2;
}

.product-rating .stars {
    display: inline-block;
}

.product-pricing .price-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.original-price {
    font-size: 1.125rem;
}

.current-price {
    font-size: 2.5rem !important;
    font-weight: 700;
}

.save-amount {
    font-size: 1rem;
    font-weight: 600;
}

.features-list {
    list-style: none;
    padding: 0;
}

.features-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-gray);
}

.features-list li:last-child {
    border-bottom: none;
}

.quantity-selector .input-group {
    max-width: 140px;
}

.purchase-actions .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.product-additional-info .info-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
}

/* Product Tabs */
.product-tabs .nav-tabs {
    border-bottom: 2px solid var(--border-gray);
}

.product-tabs .nav-link {
    border: none;
    color: var(--secondary-gray);
    font-weight: 600;
    padding: 1rem 1.5rem;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    background: transparent;
}

.product-tabs .nav-link:hover {
    border-color: var(--primary-red-light);
    color: var(--primary-red);
}

.product-tabs .nav-link.active {
    color: var(--primary-red);
    border-bottom-color: var(--primary-red);
    background: transparent;
}

.tab-content .card {
    border: none;
    box-shadow: var(--shadow-sm);
    border-radius: 12px;
}

/* Reviews Section */
.reviews-summary .average-rating .rating-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-red);
}

.rating-breakdown .rating-row {
    font-size: 0.875rem;
}

.rating-breakdown .star-label {
    min-width: 60px;
}

.rating-breakdown .star-count {
    min-width: 30px;
    text-align: right;
    font-weight: 600;
}

.review-item {
    background: var(--light-gray);
}

.review-stars {
    font-size: 0.875rem;
}

/* Care Instructions */
.care-instructions h6 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.care-instructions .list-unstyled li {
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 991.98px) {
    .product-title {
        font-size: 1.75rem;
    }
    
    .current-price {
        font-size: 2rem !important;
    }
    
    .main-image img {
        height: 300px;
    }
    
    .thumbnail-images img {
        height: 60px;
    }
}

@media (max-width: 767.98px) {
    .product-title {
        font-size: 1.5rem;
    }
    
    .current-price {
        font-size: 1.75rem !important;
    }
    
    .price-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    .purchase-actions .row {
        flex-direction: column;
    }
    
    .purchase-actions .col-md-6 {
        margin-bottom: 0.75rem;
    }
    
    .product-tabs .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .reviews-summary .row {
        text-align: center;
    }
    
    .reviews-summary .col-md-8 {
        margin-top: 1rem;
    }
}