/* Estilos para la página de detalle de producto */
.product-container {
    display: flex;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 0;
    flex-wrap: wrap;
}

/* Galería: tira de miniaturas a la izquierda + imagen principal a la
   derecha, con una altura máxima fija para que fotos de productos chicos
   (con mucho espacio blanco alrededor) no inflen la imagen a un tamaño
   descomunal. */
.product-gallery {
    flex: 0 0 55%;
    max-width: 55%;
    display: flex;
    gap: 14px;
}

.image-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 76px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 2px;
}

.thumb {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border: 1px solid #eee;
    cursor: pointer;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    transition: border-color 0.3s;
}

.thumb.active, .thumb:hover {
    border-color: var(--primary-color);
}

.image-main {
    position: relative;
    border: 1px solid #eee;
    background: #fff;
    overflow: hidden;
    cursor: zoom-in;
    border-radius: 4px;
    flex: 1;
    height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.image-main:hover img {
    transform: scale(1.15);
}

.zoom-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
}

/* Detalles */
.product-details {
    flex: 1;
    min-width: 350px;
}

.product-details h1 {
    font-size: 28px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #333;
}

.product-details .price {
    font-size: 24px;
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 20px;
}

.price-block {
    margin-bottom: 20px;
}

.price-tag-oferta {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 3px;
    margin-bottom: 6px;
}

.price-current {
    font-size: 28px;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1.2;
}

.price-current.price-consultar {
    font-size: 20px;
    color: #666;
}

.price-before {
    margin-top: 4px;
    font-size: 14px;
    color: #999;
}

.price-before span {
    text-decoration: line-through;
}

.product-details .description-short {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

.specs {
    width: 100%;
    margin-bottom: 30px;
    border-collapse: collapse;
}

.specs td {
    padding: 8px 0;
    font-size: 14px;
}

.specs td:first-child {
    font-weight: bold;
    color: #333;
    width: 140px;
}

/* Selector cantidad */
.quantity-selector {
    display: flex;
    align-items: center;
    gap: 0;
    width: fit-content;
    border: 1.5px solid #e2e2e2;
    border-radius: 10px;
    overflow: hidden;
    height: 44px;
    margin-bottom: 12px;
}

.quantity-selector button {
    width: 40px;
    height: 100%;
    border: none;
    background: #f7f7f8;
    color: #444;
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    transition: background 0.15s;
}

.quantity-selector button:hover {
    background: #ececec;
}

.quantity-selector input {
    width: 46px;
    height: 100%;
    border: none;
    border-left: 1.5px solid #e2e2e2;
    border-right: 1.5px solid #e2e2e2;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

/* Botones Acción — grid de 2x2 (4 botones proporcionados, no gigantes).
   max-width evita que los botones se estiren a lo ancho de toda la columna
   de detalles en pantallas panorámicas, donde quedaban desproporcionados. */
.actions-group {
    margin-bottom: 8px;
    max-width: 440px;
}

.actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.btn-span2 {
    grid-column: span 2;
}

.btn-add-cart,
.btn-buy-now,
.btn-whatsapp,
.btn-pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .2px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    text-align: center;
    transition: background .18s ease, transform .12s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}

.btn-add-cart {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(220, 31, 39, .22);
}

.btn-add-cart:hover {
    background: #b51920;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(220, 31, 39, .28);
}

.btn-add-cart.btn-disabled {
    background: #c6c6c6;
    color: #fff;
    box-shadow: none;
    cursor: not-allowed;
}
.btn-add-cart.btn-disabled:hover {
    background: #c6c6c6;
    transform: none;
}

.btn-buy-now {
    background: #222;
    color: #fff;
}

.btn-buy-now:hover {
    background: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(220, 31, 39, .22);
}

.btn-whatsapp {
    background: #25D366;
    color: #fff;
}

.btn-whatsapp:hover {
    background: #1ebc59;
    transform: translateY(-1px);
}

/* Generar PDF: acción secundaria, estilo outline para no competir
   visualmente con "Añadir al carrito" / "Comprar ahora". */
.btn-pdf {
    background: #fff;
    color: var(--primary-color);
    border: 1.5px solid var(--primary-color);
}

.btn-pdf:hover {
    background: rgba(220, 31, 39, .06);
    transform: translateY(-1px);
}

/* Corazón de favoritos: ahora vive sobre la imagen principal, junto a la
   lupa de zoom, en vez de ocupar espacio entre los botones de acción. */
.btn-wishlist-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
    color: #777;
    font-size: 16px;
    transition: color .2s ease, transform .15s ease;
}

.btn-wishlist-overlay:hover {
    color: var(--primary-color);
    transform: scale(1.08);
}

.btn-wishlist-overlay.active {
    color: var(--primary-color);
}

@media (max-width: 480px) {
    .actions-grid { grid-template-columns: 1fr; }
    .btn-span2 { grid-column: span 1; }
}

/* Descripción completa — tarjeta blanca con bordes redondeados en vez de
   una línea separadora (el fondo de la página es gris claro, así que la
   tarjeta ya se distingue sola, sin necesitar la barra). */
.product-full-description {
    margin: 40px 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    padding: 30px 32px;
}

.product-full-description h2 {
    color: var(--primary-color);
    font-size: 1.15rem;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f0f0f0;
    text-transform: uppercase;
    font-weight: 800;
}

.description-content {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

/* Reseñas de clientes */
.review-form__stars {
    font-size: 1.6rem;
    color: #ffc107;
}

.review-form__stars i {
    cursor: pointer;
    margin-right: 4px;
    transition: transform .1s ease;
}

.review-form__stars i:hover {
    transform: scale(1.15);
}

.review-form__images label {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 8px;
}

.review-form__images input[type="file"] {
    max-width: 150px;
    font-size: .78rem;
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.review-item {
    padding-top: 18px;
    border-top: 1px solid #f0f0f0;
}

.review-item:first-child {
    padding-top: 0;
    border-top: none;
}

/* Relacionados */
.product-related {
    margin-top: 0;
    margin-bottom: 60px;
}

.product-related h2 {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid #eee;
    text-transform: uppercase;
}

.related-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}

/* Modal Zoom */
.modal-zoom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.modal-zoom:active {
    cursor: grabbing;
}

.modal-zoom img {
    max-width: none;
    transition: transform 0.1s;
}

.modal-zoom .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 35px;
    background: none;
    border: none;
    cursor: pointer;
}

.zoom-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
}

.zoom-controls button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 992px) {
    .product-gallery, .product-details {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* En pantallas angostas la tira vertical de miniaturas al costado no
       cabe bien; vuelve a ser una fila horizontal debajo de la imagen. */
    .product-gallery {
        flex-direction: column;
    }

    .image-thumbnails {
        flex-direction: row;
        flex: 0 0 auto;
        max-height: none;
        overflow-x: auto;
        overflow-y: visible;
        order: 2;
    }

    .image-main {
        order: 1;
        height: 320px;
    }
}