/*
Theme Name: Aora Child
Theme URI: https://elementor2.thembay.com/aora/
Author: Thembay
Description: This is a child theme for Aora
Version: 1.0
Author URI: https://thembay.com/
Template: aora
Text Domain: aora-child
*/

/* Tabla personalizada (si se usa en otros contextos) */
.custom-variation-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

.custom-variation-table th,
.custom-variation-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

/* Formulario personalizado */
.custom-variation-form button {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.custom-variation-form input[type="number"] {
    width: 60px;
}

/* Diseņo general de la ficha de producto */
.custom-single-product-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.product-top {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.product-image {
    flex: 1 1 40%;
}

.product-summary {
    flex: 1 1 55%;
}

.product-bottom {
    margin-top: 40px;
}

.product-tabs {
    margin-top: 20px;
}

.product-tabs .desc,
.product-tabs .additional {
    margin-bottom: 20px;
}

.product-tabs h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.woocommerce-product-details__short-description {
    margin-bottom: 20px;
}

/* NUEVO: estilo de tarjetas para selector de variaciones */
.color-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0;
}

.color-card {
    flex: 1 1 calc(20% - 20px); /* 100% / 6 - gap */
    max-width: calc(20% - 20px);
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.2s ease;
    text-align: center;
    position: relative;
}

.color-card:hover {
    transform: translateY(-3px);
}

.color-card input[type="radio"] {
    display: none;
}

.color-card input[type="radio"]:checked + .card-image {
    border: 2px solid #C43F2B;
    border-bottom: none;
}

.color-card input[type="radio"]:checked ~ .card-meta {
    border: 2px solid #C43F2B;
    border-top: none;
}


.color-card input[type="radio"]:checked ~ .card-meta .color-code {
    color: #C43F2B;
    font-weight: 600;
}

/* Tarjeta interior */
.card-image {
    height: 100px;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid transparent; /* Para mantener el tamaņo al cambiar el borde */
}

.card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.card-meta {
    padding: 10px;
    border: 2px solid transparent; /* Igual que card-image */
}

.color-code {
    font-size: 14px;
    font-weight: 500;
    color: #444;
}

.color-name {
    font-size: 13px;
    color: #333;
    margin-top: 4px;
}

@media (max-width: 992px) {
    .color-card {
        flex: 1 1 calc(25% - 20px); /* 4 por fila */
        max-width: calc(25% - 20px);
    }
}

@media (max-width: 768px) {
    .color-card {
        flex: 1 1 calc(33.33% - 20px); /* 3 por fila */
        max-width: calc(33.33% - 20px);
    }
}

@media (max-width: 576px) {
    .color-card {
        flex: 1 1 calc(50% - 20px); /* 2 por fila */
        max-width: calc(50% - 20px);
    }
}