/**
 * Product Detail Styles - TemplateMega
 * Estilos para la vista de detalle de producto
 */

/* ============================================
   TABS DE NAVEGACION
   ============================================ */

.product-details-area .nav-tabs .nav-link.active {
    color: #f97316 !important;
    border-bottom-color: #f97316 !important;
}

.product-details-area .nav-tabs .nav-link:hover {
    color: #ea580c !important;
}

/* ============================================
   BOTON AGREGAR AL CARRITO
   ============================================ */

.product-details-area .add-to-cart-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45) !important;
}

/* ============================================
   GALERIA DE THUMBNAILS
   ============================================ */

.product-details-area .thumbnails-container {
    margin-top: 15px !important;
}

.product-details-area .pdetails-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
}

/* Override Slick Slider styles that break thumbnails */
.product-details-area .pdetails-thumbs.slick-slider {
    display: flex !important;
}

.product-details-area .pdetails-thumbs .slick-list {
    width: auto !important;
    overflow: visible !important;
}

.product-details-area .pdetails-thumbs .slick-track {
    width: auto !important;
    display: flex !important;
    gap: 10px !important;
    transform: none !important;
}

.product-details-area .pdetails-thumbs .slick-slide {
    width: auto !important;
    min-width: 70px !important;
}

.product-details-area .pdetails-singlethumb {
    width: 70px !important;
    min-width: 70px !important;
    height: 70px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: block !important;
}

.product-details-area .pdetails-singlethumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.product-details-area .pdetails-singlethumb:hover {
    border-color: #f97316 !important;
    transform: scale(1.05);
}

.product-details-area .pdetails-singlethumb.active {
    border-color: #f97316 !important;
}

/* ============================================
   FIX: Bootstrap/Tailwind collapse conflict
   ============================================ */

.product-details-area .tab-pane.show {
    visibility: visible !important;
}