:root {
    --primary-color: #1c44b3;
    --secondary-color: #f8f9fa;
    --accent-color: #007bff;
    --link-color: #0077ff;
    --link-hover: #0056b3;
    --box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --border-radius: 20px;
    --highlight-yellow: #ff8c00;
}

/* Re-using styles from products.css for consistency where applicable */
.category-nav {
    background: white;
    border-bottom: 2px solid #e9ecef;
    /* The demo has this as sticky, but we let base.html handle stickiness */
}

/* Product Detail Specific Styles */

.product-detail-section {
    padding: 3rem 0;
}

/* Product Header from demo */
.product-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 0 2rem;
}

.product-header .product-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1rem;
}

.product-subtitle {
    color: #666;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.product-model {
    color: var(--highlight-yellow);
    font-size: 1.4rem;
    font-weight: bold;
}

/* Technical Drawing Section from demo */
.technical-drawing {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin: 2rem 0;
    padding: 2rem;
    border: 1px solid #e9ecef;
}

.drawing-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.image-item {
    position: relative;
    background: #ffffff;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem 1rem;
    color: #6c757d;
    font-size: 1rem;
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 1rem;
}

.image-item img {
    /* This setup ensures the image is never larger than its container,
       and if smaller, it displays at its original size, centered by the parent flexbox.
       This prevents any form of up-scaling distortion. */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* We remove absolute positioning and fixed width/height to let the image render naturally. */
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
}

.image-caption {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin-top: 1rem;
    text-align: center;
}

/* Product Info Section from demo */
.product-info-section {
    margin: 3rem 0;
}

.info-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 2.5rem;
    border: 1px solid #e9ecef;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.info-section {
    border-left: 3px solid var(--highlight-yellow);
    padding-left: 1.5rem;
}

.info-section-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1.5rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    color: #666;
    font-size: 1rem;
    font-weight: 500;
}

.info-value {
    color: var(--highlight-yellow);
    font-weight: bold;
    font-size: 1.1rem;
    text-align: right;
}

.wechat-qr .qr-placeholder {
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #28a745;
    font-size: 1rem;
    margin-left: auto;
}

.wechat-qr .qr-text {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: #666;
}


/* Specs Section from demo */
.specs-section {
    margin: 3rem 0;
}

.section-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--highlight-yellow);
    border-radius: 2px;
}

.specs-table {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.specs-table .table {
    margin: 0;
    font-size: 1.05rem;
}

.specs-table .table thead th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: none;
    padding: 1.5rem;
    font-weight: bold;
    color: #333;
    border-bottom: 2px solid var(--highlight-yellow);
}

.specs-table .table tbody td {
    padding: 1.2rem 1.5rem;
    border-color: #f0f0f0;
}

.specs-table .table tbody tr:hover {
    background-color: rgba(28, 68, 179, 0.05);
}

.specs-table .table tbody td:last-child {
    color: var(--highlight-yellow);
    font-weight: bold;
}


/* Related Products Section from demo */
.related-products {
    margin: 4rem 0;
}

.related-products h3 {
    color: #333; 
    font-size: 1.5rem; 
    margin-bottom: 1.5rem; 
    padding-bottom: 0.5rem; 
    border-bottom: 2px solid var(--highlight-yellow);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.related-item {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 1.5rem;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    text-decoration: none;
    color: inherit;
    display: block;
}

.related-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.related-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.5rem;
}

.related-model {
    color: var(--highlight-yellow);
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.related-series {
    color: #666;
    font-size: 0.9rem;
}

/* Responsive adjustments from demo */
@media (max-width: 768px) {
    .drawing-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .product-title {
        font-size: 2rem;
    }
}