/* Using a more readable gold color for text on white background */
:root { --readable-gold: #B8860B; }

.product-detail-page { padding: 60px 0; }
.page-header { text-align: center; margin-bottom: 40px; }
.page-header a { color: var(--primary-red); text-decoration: none; margin-bottom: 10px; display: inline-block; }
.page-header h1 { color: var(--readable-gold); font-size: 2.8rem; }

.product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: flex-start; }

/* Gallery */
.main-image-container { margin-bottom: 15px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.main-image-display { width: 100%; height: auto; display: block; }
.thumbnail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.thumbnail-item { border: 3px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; transition: all 0.3s ease; }
.thumbnail-item:hover { border-color: var(--primary-gold); }
.thumbnail-item.active { border-color: var(--primary-red); box-shadow: 0 0 15px rgba(192, 0, 0, 0.4); }
.thumbnail-item img { width: 100%; height: auto; display: block; }

/* Description */
.product-description h2 { font-size: 2rem; margin-bottom: 1rem; color: var(--readable-gold); }
.product-description p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; }
.product-description h3 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; color: var(--readable-gold); }
.product-description ul { list-style: none; padding-left: 0; }
.product-description ul li { font-size: 1.1rem; margin-bottom: 0.7rem; padding-left: 25px; position: relative; }
.product-description ul li::before { content: '\2713'; /* Checkmark */ color: var(--readable-gold); position: absolute; left: 0; }
.btn-contact { display: inline-block; margin-top: 2rem; background: linear-gradient(45deg, var(--primary-red), var(--dark-red)); color: #fff; padding: 15px 30px; text-decoration: none; border-radius: 50px; font-size: 1.1rem; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(192, 0, 0, 0.3); }
.btn-contact:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(192, 0, 0, 0.4); }

/* Animation */
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 992px) {
    .product-detail-grid { grid-template-columns: 1fr; }
}