/*COMPONENTE: ATRIBUTOS
=================================
VISIBLE: SINGLE-PRODUCT.PHP
ACA ESTA EL ESTILO DE TODO EL COMPONENTE. 
- LABELS (COLOR:, TALLE:, SELECCIONAR TALLE)
- CAJITAS DE TALLES
- CAJITAS DE COLORES (MINIATURAS DE FOTOS Y CAJITAS DE NOMBRES DE COLOR)*/


/* ==========================================
    Resaltar Titulo de Atributos:
     "COLOR:"
     SLECCIONAR "TALLES"
 ==========================================
 */
span.product-attribute__label{
    
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;

}

/* ==========================================
    ESTILO AL VALOR DE LOS ATRIBUTOS

    COLOR: "BLANCO"
    "SELECCIONAR" TALLES
 ==========================================
 */
.product-attribute__value{

    font-size: 15px;
    font-weight: 400;

}

/* EL p completo de "SELECCIONAR TALLES" */
p.product-attribute__title{

    margin: 5px;

}

/* ==========================================
    CAJITAS DE TALLES
 ==========================================
 */
div.product-attribute__options button{
    min-width: 50px;
    height: 40px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-width: 1px;
    border-radius: 6px;
    padding: 9px;
    font-size: 16px;
    font-weight: 400;
    background-color: var(--color-background);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);

}

div.product-attribute__options button:hover{

    background-color: var(--button-bg-hover);
    color: var(--color-background);

}

div.product-attribute__options button:active, div.product-attribute__options button.active{

    background-color: var(--button-bg-hover);
    color: var(--color-background);

}


/* ==========================
   MÁS COLORES
========================== */

/* div que contiene MAS COLORES Y cajitas de mas colores con fotos */
.product-attribute__colors{

    margin-top:24px;

}

/* MAS COLORES TEXTO */
.product-attribute__colors-title{

    margin:0 0 12px;
    font-size:15px;
    font-weight:600;
    text-transform:uppercase;
    color:var(--color-primary);

}

/* div de las fotos de mas colores */
.product-attribute__colors-list{

    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;

}

/* boton que contiene la imagen del color */
.product-attribute__color{

    width:54px;
    height:82px;
    padding:0;
    border:1px solid var(--color-border);
    border-radius:8px;
    overflow:hidden;
    background:var(--color-background);
    cursor:pointer;
    transition:border-color .2s ease;

}

/* hover y active del boton que contiene la imagen del color */
.product-attribute__color:hover,
.product-attribute__color.active{

    border-color:var(--color-primary);

}

/* img de la cajita de mas colores, que se ajuste al tamaño del boton y no se deforme */
.product-attribute__color img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

}

/* ESTILO DE LAS CAJITAS DE COLORES SI NO TIENE FOTO */
.product-attribute__color-text{

    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border:1px solid var(--color-product-title);
    border-radius:6px;
    background:var(--color-background);
    color:var(--color-product-title);
    text-transform:uppercase;
    cursor:pointer;
    font-size:16px;
    
}

.product-attribute__color.is-current,
.product-attribute__color-text.is-current {
    display: none;
}