/*ESTE CSS ESTA CONECTADO A LA PAGINA DEL PRODUCTO INDIVIDUAL. CUANDO SE INGRESA A UN PRODUCTO EN ESPECIFICO,
TODO LO QUE LAYOUT SE APLICA A ESE PRODUCTO
1ro. SE CONSTRUYO LA PLANTILLA DE LA PAGINA A MI MANERA EN SINGLE-PRODUCT.PHP Y ESTE CSS LE DA ESTILO */

/* !! hay clases que agregue yo para (en la estructura de single-product.php) que el selector de css sea mas especifico y ganarle a astra sin malas practicas
como div.agregar-al-carrito !!*/



/* QUE ASTRA NO ME HAGA SUS DOS OLUMNAS EN COMPU */
@media (min-width: 922px) {
    div#content .ast-container {
        display: block;
    }
}
/*
==========================================
CONTENEDOR
==========================================
*/


.sp-container{

    max-width:1300px;
    margin:auto;
    padding:40px 20px;

}


/*
==========================================
GRID
==========================================
*/

.sp-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;

}


/*
==========================================
GALERIA
==========================================
*/

.sp-gallery{

    width:100%;

}


/*
==========================================
INFORMACION
==========================================
*/

.sp-summary{

    display:flex;
    flex-direction:column;
    gap:18px;

}


/*
==========================================
SKU
==========================================
*/

.sp-sku{

    font-size:12px;
    color:var(--color-text-long);

}

/*
==========================================
DIV DEL TITULO Y DEL CORAZON DE FAVORITOS
==========================================
*/
.product-title {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;

}

/*
==========================================
NOMBRE DEL PRODUCTO
==========================================
*/

.sp-title{

    text-transform: uppercase;
    font-weight: 600;
    font-size:30px;
    color:var(--color-text);
    line-height:1.2;
    margin:0;
    width: 80%;

}

/* ==========================
   CORAZÓN WISHLIST - PRODUCTO
========================== */

.yith-add-to-wishlist-button-block--single {
    /* position: absolute; */
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    border-radius: 50%;
}

.yith-add-to-wishlist-button-block--single .yith-wcwl-add-to-wishlist-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.yith-add-to-wishlist-button-block--single .yith-wcwl-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%)
            invert(79%)
            sepia(13%)
            saturate(480%)
            hue-rotate(345deg)
            brightness(91%)
            contrast(88%);
}

.yith-add-to-wishlist-button-block--single .yith-wcwl-add-to-wishlist-button__label {
    display: none;
}

/*
==========================================
PRECIO
==========================================
*/

.sp-price{

    font-size:28px;
    color:var(--color-primary);
    font-weight: 600;

}


/*
==========================================
DESCRIPCION
==========================================
*/

.sp-description p{

    font-size:15px;
    line-height:1.6;
    color:var(--color-text-long);
    margin-bottom: 5px;

}


/*
==========================================
ATRIBUTOS
==========================================
*/

div.agregar-al-carrito table.variations{

    display: none;

}

.sp-attributes-row{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;

}


/*
==========================================
BTN AGREGAR AL CARRITO
==========================================
*/

div.agregar-al-carrito button.single_add_to_cart_button.button.alt{

    background-color: var(--button-bg);
    border-color: var(--button-border);
    color: var(--button-text);
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;

}

/* BOTÓN AGREGAR AL CARRITO DESHABILITADO */
div.agregar-al-carrito button.single_add_to_cart_button.button.alt.disabled {

    background-color: #e0e0e0;
    border-color: #e0e0e0;
    color: #888;

}

/*============================================
    Que el input y el botón estén en la misma línea, en el btn del producto sin variacion y con variaciones
    * tienen diferentes clases.
==============================================*/
div.agregar-al-carrito form.cart, div.agregar-al-carrito div.woocommerce-variation-add-to-cart{

    display: flex;
    gap: 6px;

}

/*
==========================================
OCULTO Disponibilidad: X disponibles
==========================================
*/
div.agregar-al-carrito .ast-stock-detail{

    display: none;

}

/*
==========================================
FAQ
==========================================
*/
.sp-faq{

    margin-top:70px;

}

/*===================================
SPINNER DE CARGA AJAX DEL CARRITO 
======================================= */
.single_add_to_cart_button.loading{

    opacity:.6;
    pointer-events:none;
    position:relative;

}

.single_add_to_cart_button.loading::after{

    content:"";
    width:16px;
    height:16px;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    display:inline-block;
    margin-left:10px;
    animation:spin .7s linear infinite;

}

/* etiqueta "Agotado" cuando una variacion de producto esta agotado */
p.stock{

    font-size: 16px;
    font-weight: 600;
    color: var(--rojo);

}

/* descripcion de una variacion */
div.woocommerce-variation-description{

    color: var(--rosa-fucsia);

}

@keyframes spin{

    to{
        transform:rotate(360deg);
    }

}
/*
===============================
PRODUCTOS RELACIONADOS
===============================
*/

/* Contenedor de los productos seleccionados (el de single-product.php) */
.sp-related-products{

    padding: 0 20px;

}

/*Titulo de PRODUCTOS RELACIONADOS (el de single-product.php) */
.sp-related-products > .related > h2 {

    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    text-align: center;

}


/*
==========================================
MOBILE
==========================================
*/

@media(max-width:768px){

    /* caja del producto */
    .sp-container{
        padding: 20px;
    }

    .sp-grid{

        grid-template-columns:1fr;
        gap:35px;

    }

    /* sku del producto */
    .sp-sku{

        font-size:16px;

    }

    /* nombre del producto */
    .sp-title{

        font-size: 24px;

    }

    /* descripcion del producto */
    .sp-description p{

        font-size: 16px;

    }

    /* precio del producto */
    .sp-price{

        font-size: 26px;

    }

    /*input y btn agregar al carrito uno debajo de otro en mobile*/
     div.agregar-al-carrito form.cart,
    div.agregar-al-carrito div.woocommerce-variation-add-to-cart {

        display: block;

    }

    /*estilo al input de cantidad*/
    input.input-text.qty.text{
        
        width: 100%;
        margin-bottom: 10px;
        border-radius: 6px;
        border: 1px solid var(--color-primary);
        
    }

    button.single_add_to_cart_button{

        width: 100%;

    }

}