/* ============================================================
   ANNY — PRODUCT
   ============================================================
   Producto individual WooCommerce.

   RESPONSABILIDADES:
   - Contenedor del producto
   - Galería
   - Imagen principal
   - Thumbnails
   - Información
   - Título
   - Precio
   - Descripción
   - Variaciones
   - Cantidad
   - Acciones

   NO INCLUIR AQUÍ:
   - Responsive       → anny-responsive.css
   - Botones globales → anny-buttons.css
   - Carrito          → anny-carrito.css / anny-cart.css
   ============================================================ */


/* ============================================================
   01 — CONTENEDOR PRINCIPAL
   ============================================================ */

.single-product {

    color: var(--anny-text);

    font-family:
        var(--anny-font-body),
        sans-serif;

}


.single-product
.product {

    width: 100%;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


/* ============================================================
   02 — COLUMNAS DEL PRODUCTO
   ============================================================ */

.single-product
.product > .woocommerce-product-gallery {

    min-width: 0;

}


.single-product
.product > .summary {

    min-width: 0;

}


/* ============================================================
   03 — GALERÍA
   ============================================================ */

.single-product
.woocommerce-product-gallery {

    position: relative;

    width: 100%;

    margin: 0;

    padding: 1.25rem;

    background-color: var(--anny-white);

    border: 1px solid var(--anny-border);

    border-radius: var(--anny-radius-lg);

    overflow: hidden;

    box-sizing: border-box;

    transition:
        box-shadow var(--anny-transition),
        border-color var(--anny-transition);

}


.single-product
.woocommerce-product-gallery:hover {

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

    box-shadow:
        var(--anny-shadow-soft);

}


/* ============================================================
   04 — WRAPPER DE IMAGEN
   ============================================================ */

.single-product
.woocommerce-product-gallery__wrapper {

    width: 100%;

    margin: 0;

}


/* ============================================================
   05 — IMAGEN PRINCIPAL
   ============================================================ */

.single-product
.woocommerce-product-gallery__image {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    margin: 0;

    overflow: hidden;

    background-color: var(--anny-white);

}


.single-product
.woocommerce-product-gallery__image a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

}


.single-product
.woocommerce-product-gallery__image img {

    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

    max-height: 720px;

    margin: 0 auto;

    object-fit: contain;

    object-position: center;

    border-radius: var(--anny-radius);

    transition:
        transform var(--anny-transition-slow);

}


/* ============================================================
   06 — HOVER IMAGEN
   ============================================================ */

.single-product
.woocommerce-product-gallery__image a:hover img {

    transform: scale(1.015);

}


/* ============================================================
   07 — THUMBNAILS
   ============================================================ */

.single-product
.flex-control-thumbs {

    display: flex;

    align-items: center;

    gap: .7rem;

    width: 100%;

    margin: 1rem 0 0;

    padding: 0;

    overflow-x: auto;

    overflow-y: hidden;

    list-style: none;

    scrollbar-width: thin;

    scrollbar-color:
        var(--anny-border)
        transparent;

}


.single-product
.flex-control-thumbs li {

    flex: 0 0 76px;

    width: 76px;

    margin: 0;

    padding: 0;

    list-style: none;

}


.single-product
.flex-control-thumbs img {

    display: block;

    width: 76px;

    height: 76px;

    margin: 0;

    object-fit: cover;

    border: 1px solid var(--anny-border);

    border-radius: var(--anny-radius-sm);

    opacity: .65;

    cursor: pointer;

    transition:
        opacity var(--anny-transition-fast),
        border-color var(--anny-transition-fast),
        transform var(--anny-transition-fast);

}


.single-product
.flex-control-thumbs img:hover {

    opacity: 1;

    border-color: var(--anny-secondary);

    transform: translateY(-2px);

}


/* ============================================================
   08 — THUMBNAIL ACTIVO
   ============================================================ */

.single-product
.flex-control-thumbs
.flex-active {

    opacity: 1;

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

}


/* ============================================================
   09 — SUMMARY
   ============================================================ */

.single-product
.summary {

    width: 100%;

    margin: 0;

    padding: 0;

    color: var(--anny-text);

}


/* ============================================================
   10 — CATEGORÍA / META
   ============================================================ */

.single-product
.product_meta {

    display: flex;

    flex-direction: column;

    gap: .35rem;

    margin-top: 1.5rem;

    padding-top: 1.25rem;

    border-top: 1px solid var(--anny-border);

    color: var(--anny-text);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .72rem;

    line-height: 1.5;

}


.single-product
.product_meta a {

    color: var(--anny-primary);

}


.single-product
.product_meta a:hover {

    color: var(--anny-secondary);

}


/* ============================================================
   11 — TÍTULO
   ============================================================ */

.single-product
.product_title {

    margin:
        0 0 .75rem;

    color: var(--anny-secondary);

    font-family:
        var(--anny-font-heading),
        sans-serif;

    font-size: clamp(2rem, 3vw, 3.1rem);

    font-weight:
        var(--anny-weight-heading);

    line-height: 1.08;

    letter-spacing: -.015em;

}


/* ============================================================
   12 — PRECIO
   ============================================================ */

.single-product
.summary
.price {

    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

    gap: .5rem;

    margin:
        0 0 1.5rem;

    color: var(--anny-secondary);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: 1.25rem;

    font-weight: 600;

    line-height: 1.3;

}


.single-product
.summary
.price del {

    color: var(--anny-text);

    font-size: .9rem;

    font-weight: 400;

    opacity: .55;

}


.single-product
.summary
.price ins {

    color: var(--anny-primary);

    text-decoration: none;

}


/* ============================================================
   13 — DESCRIPCIÓN CORTA
   ============================================================ */

.single-product
.woocommerce-product-details__short-description {

    margin:
        0 0 1.5rem;

    color: var(--anny-text);

    font-family:
        var(--anny-font-body),
        sans-serif;

    font-size: .95rem;

    line-height: 1.75;

}


.single-product
.woocommerce-product-details__short-description p:last-child {

    margin-bottom: 0;

}


/* ============================================================
   14 — FORMULARIO DE VARIACIONES
   ============================================================ */

.single-product
.variations_form {

    width: 100%;

    margin: 1.5rem 0 0;

}


.single-product
.variations {

    width: 100%;

    margin: 0;

    border: 0;

    border-collapse: collapse;

}


.single-product
.variations tr {

    display: flex;

    flex-direction: column;

    gap: .55rem;

    margin-bottom: 1.25rem;

}


.single-product
.variations th.label {

    display: block;

    width: 100%;

    padding: 0;

    text-align: left;

}


.single-product
.variations th.label label {

    color: var(--anny-secondary);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .7rem;

    font-weight:
        var(--anny-weight-ui);

    letter-spacing: .07em;

    line-height: 1.3;

    text-transform: uppercase;

}


.single-product
.variations td.value {

    display: block;

    width: 100%;

    padding: 0;

}


/* ============================================================
   15 — SELECT DE VARIACIÓN
   ============================================================ */

.single-product
.variations select {

    width: 100%;

    min-height: 46px;

    padding:
        .65rem 2.5rem .65rem .85rem;

    border: 1px solid var(--anny-border);

    border-radius: var(--anny-radius-sm);

    background-color: var(--anny-white);

    color: var(--anny-secondary);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .82rem;

    cursor: pointer;

}


.single-product
.variations select:hover {

    border-color: var(--anny-secondary);

}


.single-product
.variations select:focus {

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

    outline: none;

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--anny-primary) 15%,
            transparent
        );

}


/* ============================================================
   16 — RESET VARIACIONES
   ============================================================ */

.single-product
.reset_variations {

    display: inline-block;

    margin-top: .5rem;

    color: var(--anny-primary);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .68rem;

    text-decoration: underline;

}


.single-product
.reset_variations:hover {

    color: var(--anny-secondary);

}

/* ============================================================
   ANNY — SELECTOR DE CANTIDAD PRODUCTO
   ============================================================ */


/* ============================================================
   CONTENEDOR
   ============================================================ */

.single-product .quantity{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:0;

    width:max-content;

    margin:24px 0;

    border:

        1px solid var(--anny-border);

    border-radius:

        var(--anny-radius-lg);

    overflow:hidden;

    background:

        var(--anny-white);

    box-shadow:

        var(--anny-shadow-soft);

}



/* ============================================================
   BOTONES + -
   ============================================================ */


.single-product .qty-minus,
.single-product .qty-plus{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:0;

    background:

        var(--anny-cream-light);

    color:

        var(--anny-secondary);

    font-size:22px;

    line-height:1;

    font-weight:400;

    cursor:pointer;

    transition:

        background var(--anny-transition),

        color var(--anny-transition),

        transform var(--anny-transition);

}



.single-product .qty-minus:hover,
.single-product .qty-plus:hover{

    background:

        var(--anny-primary);

    color:

        var(--anny-white);

}



.single-product .qty-minus:active,
.single-product .qty-plus:active{

    transform:

        scale(.92);

}



/* ============================================================
   INPUT
   ============================================================ */


.single-product .quantity .qty{

    width:65px;

    height:46px;

    padding:0;

    margin:0;

    border:0;

    border-left:

        1px solid var(--anny-border);

    border-right:

        1px solid var(--anny-border);

    background:

        var(--anny-white);

    color:

        var(--anny-secondary);

    text-align:center;

    font-family:

        var(--anny-font-ui);

    font-size:16px;

    font-weight:

        var(--anny-weight-ui);

    outline:none;

}



/* quitar flechas navegador */


/* Chrome, Safari, Edge */

.single-product .quantity .qty::-webkit-inner-spin-button,
.single-product .quantity .qty::-webkit-outer-spin-button{

    appearance:none;

    margin:0;

}


/* Firefox */

.single-product .quantity .qty{

    -moz-appearance:textfield;

}



/* ============================================================
   FOCUS
   ============================================================ */


.single-product .quantity:focus-within{

    border-color:

        var(--anny-primary);

    box-shadow:

        0 0 0 3px rgba(160,82,45,.10);

}



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


@media(max-width:767px){


    .single-product .qty-minus,
    .single-product .qty-plus{

        width:42px;

        height:42px;

    }



    .single-product .quantity .qty{

        width:58px;

        height:42px;

    }


}


/* ============================================================
   20 — BOTÓN DISABLED
   ============================================================ */

.single-product
.single_add_to_cart_button.disabled,
.single-product
.single_add_to_cart_button:disabled,
.single-product
.single_add_to_cart_button.wc-variation-selection-needed {

    opacity: .5;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}


/* ============================================================
   21 — STOCK
   ============================================================ */

.single-product
.stock {

    margin:
        0 0 1rem;

    color: var(--anny-text);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .75rem;

}


.single-product
.stock.in-stock {

    color: var(--anny-sage);

}


.single-product
.stock.out-of-stock {

    color: var(--anny-primary);

}


/* ============================================================
   22 — TABS
   ============================================================ */

.single-product
.woocommerce-tabs {

    width: 100%;

    margin-top: 4rem;

}


.single-product
.woocommerce-tabs ul.tabs {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: .25rem;

    margin: 0 0 2rem;

    padding: 0;

    border-bottom: 1px solid var(--anny-border);

    list-style: none;

}


.single-product
.woocommerce-tabs ul.tabs li {

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

}


.single-product
.woocommerce-tabs ul.tabs li a {

    display: block;

    padding:
        .75rem 1rem;

    color: var(--anny-text);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .7rem;

    font-weight:
        var(--anny-weight-ui);

    letter-spacing: .06em;

    text-transform: uppercase;

}


.single-product
.woocommerce-tabs ul.tabs li.active a {

    color: var(--anny-secondary);

}


/* ============================================================
   23 — CONTENIDO TABS
   ============================================================ */

.single-product
.woocommerce-Tabs-panel {

    color: var(--anny-text);

    font-family:
        var(--anny-font-body),
        sans-serif;

    font-size: .9rem;

    line-height: 1.75;

}


.single-product
.woocommerce-Tabs-panel h2 {

    margin:
        0 0 1rem;

    color: var(--anny-secondary);

    font-family:
        var(--anny-font-heading),
        sans-serif;

    font-size: 1.7rem;

}


/* ============================================================
   24 — INFORMACIÓN ADICIONAL
   ============================================================ */

.single-product
.shop_attributes {

    width: 100%;

    border-collapse: collapse;

}


.single-product
.shop_attributes th,
.single-product
.shop_attributes td {

    padding: .8rem;

    border-bottom: 1px solid var(--anny-border);

    text-align: left;

}


.single-product
.shop_attributes th {

    color: var(--anny-secondary);

    font-weight: 600;

}


/* ============================================================
   25 — REVIEWS
   ============================================================ */

.single-product
#reviews {

    color: var(--anny-text);

}


.single-product
#reviews
.commentlist {

    margin: 0;

    padding: 0;

    list-style: none;

}


.single-product
#reviews
.commentlist li {

    margin: 0 0 1.5rem;

    padding-bottom: 1.5rem;

    border-bottom: 1px solid var(--anny-border);

}
/* ============================================================
   26 — PRODUCTOS RELACIONADOS
   ============================================================ */


/* ============================================================
   CONTENEDOR
   ============================================================ */

.single-product .related,
.single-product .upsells {

    width:100%;

    margin-top:6rem;

    padding-top:3rem;

    border-top:
        1px solid var(--anny-border);

}



/* ============================================================
   TITULO
   ============================================================ */

.single-product .related h2,
.single-product .upsells h2 {

    margin:
        0 0 3rem;


    color:
        var(--anny-secondary);


    font-family:
        var(--anny-font-heading),
        serif;


    font-size:
        clamp(
            1.8rem,
            3vw,
            2.5rem
        );


    font-weight:
        var(--anny-weight-heading);


    line-height:1.2;


    text-align:center;

}



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

.single-product .related ul.products,
.single-product .upsells ul.products {

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));


    gap:
        2rem;


    margin:0;

    padding:0;

    list-style:none;

}



/* ============================================================
   CARD
   ============================================================ */

.single-product .related ul.products li.product,
.single-product .upsells ul.products li.product {


    width:100%;


    margin:0;


    padding:0;


    background:
        transparent;


    overflow:hidden;


    border-radius:
        var(--anny-radius-lg);


    transition:
        transform var(--anny-transition);


}



.single-product .related ul.products li.product:hover,
.single-product .upsells ul.products li.product:hover {


    transform:
        translateY(-8px);


}



/* ============================================================
   IMAGEN
   ============================================================ */

.single-product .related ul.products li.product img,
.single-product .upsells ul.products li.product img {


    width:100%;


    aspect-ratio:
        1 / 1.15;


    object-fit:cover;


    margin:0;


    border-radius:
        var(--anny-radius-lg);



}



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


.single-product .related ul.products li.product .woocommerce-loop-product__title,
.single-product .upsells ul.products li.product .woocommerce-loop-product__title {


    padding:

        1.2rem 0 .5rem;


    margin:0;


    color:
        var(--anny-secondary);


    font-family:
        var(--anny-font-heading);


    font-size:

        1.15rem;


    font-weight:

        var(--anny-weight-heading);


}



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

.single-product .related ul.products li.product .price,
.single-product .upsells ul.products li.product .price {


    display:block;


    padding:0;


    margin:0;


    color:
        var(--anny-primary);


    font-family:
        var(--anny-font-ui);


    font-weight:600;


}



/* ============================================================
   BOTON
   ============================================================ */

.single-product .related ul.products li.product .button,
.single-product .upsells ul.products li.product .button {


    width:100%;


    margin-top:1rem;


    min-height:42px;


    display:flex;


    align-items:center;

    justify-content:center;


    border:

        1px solid var(--anny-primary);


    border-radius:

        var(--anny-radius);


    background:

        transparent;


    color:

        var(--anny-primary);


    font-size:12px;


    text-transform:uppercase;


    letter-spacing:.08em;


    transition:
        var(--anny-transition);


}



.single-product .related ul.products li.product .button:hover,
.single-product .upsells ul.products li.product .button:hover {


    background:

        var(--anny-primary);


    color:

        var(--anny-white);


}



/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1024px){


    .single-product .related ul.products,
    .single-product .upsells ul.products {


        grid-template-columns:

            repeat(3,1fr);


    }


}



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


@media(max-width:767px){


    .single-product .related,
    .single-product .upsells {


        margin-top:4rem;

        padding-top:2rem;


    }



    .single-product .related ul.products,
    .single-product .upsells ul.products {


        grid-template-columns:

            repeat(2,1fr);


        gap:

            1.2rem;


    }



    .single-product .related h2,
    .single-product .upsells h2 {


        text-align:left;


        margin-bottom:2rem;


    }



    .single-product .related ul.products li.product .woocommerce-loop-product__title,
    .single-product .upsells ul.products li.product .woocommerce-loop-product__title {


        font-size:1rem;


        padding-top:.9rem;


    }



    .single-product .related ul.products li.product .button,
    .single-product .upsells ul.products li.product .button {


        min-height:38px;


        font-size:11px;


    }


}
/* ============================================================
   27 — LIMPIEZA WOOCOMMERCE
   ============================================================ */

.single-product
.product
.woocommerce-product-gallery::before,
.single-product
.product
.woocommerce-product-gallery::after,
.single-product
.product
.summary::before,
.single-product
.product
.summary::after {

    display: none;

}


/* ============================================================
   28 — FOCUS
   ============================================================ */

.single-product
button:focus-visible,
.single-product
select:focus-visible,
.single-product
input:focus-visible,
.single-product
a:focus-visible {

    outline: 2px solid var(--anny-accent);

    outline-offset: 3px;

}


.single-product
button:focus:not(:focus-visible),
.single-product
select:focus:not(:focus-visible),
.single-product
input:focus:not(:focus-visible),
.single-product
a:focus:not(:focus-visible) {

    outline: none;

}
/* ============================================================
   ANNY — BOTÓN AÑADIR AL CARRITO
   ============================================================ */


/* ============================================================
   BOTÓN PRINCIPAL
   ============================================================ */

.woocommerce .single-product .single_add_to_cart_button{


    width:100%;

    min-height:54px;


    display:flex;

    align-items:center;

    justify-content:center;


    padding:0 32px;


    border:0;


    border-radius:

        var(--anny-radius);


    background:

        var(--anny-primary);


    color:

        var(--anny-white);


    font-family:

        var(--anny-font-ui);


    font-size:15px;


    font-weight:

        var(--anny-weight-accent);


    letter-spacing:.03em;


    text-transform:

        uppercase;


    cursor:pointer;


    position:relative;


    overflow:hidden;


    box-shadow:

        0 10px 25px rgba(160,82,45,.18);


    transition:


        background var(--anny-transition),


        transform var(--anny-transition),


        box-shadow var(--anny-transition);



}



/* ============================================================
   HOVER
   ============================================================ */


.woocommerce .single-product .single_add_to_cart_button:hover{


    background:

        var(--anny-secondary);


    transform:

        translateY(-2px);


    box-shadow:

        var(--anny-shadow-hover);


}



/* ============================================================
   CLICK
   ============================================================ */


.woocommerce .single-product .single_add_to_cart_button:active{


    transform:

        translateY(0)
        scale(.98);


}



/* ============================================================
   EFECTO BRILLO PREMIUM
   ============================================================ */


.woocommerce .single-product .single_add_to_cart_button::before{


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:80%;


    height:100%;


    background:

        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );


    transition:

        left .7s ease;


}



.woocommerce .single-product .single_add_to_cart_button:hover::before{


    left:120%;


}



/* ============================================================
   TEXTO SOBRE EFECTO
   ============================================================ */


.woocommerce .single-product .single_add_to_cart_button{


    isolation:isolate;


}



.woocommerce .single-product .single_add_to_cart_button::after{


    content:"";


    position:absolute;


    inset:0;


    z-index:-1;


}



/* ============================================================
   ESTADO CARGANDO WOOCOMMERCE
   ============================================================ */


.woocommerce .single-product .single_add_to_cart_button.loading{


    opacity:.75;


    cursor:wait;


}



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


@media(max-width:767px){


   .woocommerce .single-product .single_add_to_cart_button{


        min-height:52px;


        font-size:14px;


    }


}
/* ============================================================
   WOOCOMMERCE BUTTON RESET
   ============================================================ */


.single-product button.single_add_to_cart_button{

    all:unset;

    box-sizing:border-box;

    width:100%;

    min-height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;


    background:

        var(--anny-primary);


    color:

        var(--anny-white);


    border-radius:

        var(--anny-radius);


    font-family:

        var(--anny-font-ui);


    font-weight:

        var(--anny-weight-accent);


    transition:

        var(--anny-transition);


}
/* ============================================================
   ANNY — BOTÓN CARRITO WOOCOMMERCE
   Sobrescribe estilos WooCommerce
   ============================================================ */


.single-product.woocommerce 
button.single_add_to_cart_button.button.alt{


    width:100%;

    min-height:54px;


    display:flex;

    align-items:center;

    justify-content:center;


    padding:0 32px;
	margin: 8px 0 8px;

    border:0;


    border-radius:
        var(--anny-radius);


    background-color:
        var(--anny-primary);


    color:
        var(--anny-white);


    font-family:
        var(--anny-font-ui);


    font-size:15px;


    font-weight:
        var(--anny-weight-accent);


    letter-spacing:.03em;


    text-transform:uppercase;


    box-shadow:
        var(--anny-shadow-soft);


    transition:
        var(--anny-transition);


}



/* Hover */

.single-product.woocommerce 
button.single_add_to_cart_button.button.alt:hover{


    background-color:
        var(--anny-secondary);


    color:
        var(--anny-white);


    transform:
        translateY(-2px);


    box-shadow:
        var(--anny-shadow-hover);


}