/* ============================================================
   ANNY — SELECTOR DE COLORES PREMIUM
   ============================================================

   PARTE 1/2

   RESPONSABILIDADES:
   - Contenedor principal
   - Header principal
   - Acordeón principal
   - Selector cantidad colores

   VARIABLES:
   - anny-base.css

   ============================================================ */


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

.single-product .cesteria-colores{

    width:100%;

    margin:36px 0 32px;

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

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

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            var(--anny-white),
            var(--anny-cream-light)
        );

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

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

}


.single-product .cesteria-colores:hover{

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

}


/* ============================================================
   HEADER PRINCIPAL
   ============================================================ */

.single-product .cesteria-colores-toggle{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:20px 22px;

    margin:0;

    border:0;

    background:

        linear-gradient(
            135deg,
            var(--anny-cream-light),
            var(--anny-white)
        );

    color:var(--anny-secondary);

    cursor:pointer;

    text-align:left;

    transition:

        background var(--anny-transition),

        transform var(--anny-transition);


}


.single-product .cesteria-colores-toggle:hover{

    background:
        var(--anny-cream);

}



/* ============================================================
   CONTENIDO HEADER
   ============================================================ */


.single-product .cesteria-colores-toggle-contenido{

    display:flex;

    align-items:center;

    gap:16px;

    min-width:0;

}



/* ============================================================
   ICONO
   ============================================================ */


.single-product .cesteria-colores-icono{

    width:42px;

    height:42px;

    flex:0 0 42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

        var(--anny-white);


    border:

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


    box-shadow:

        0 4px 12px rgba(26,21,18,.05);


}



.single-product .cesteria-colores-icono img{

    width:20px !important;

    height:20px !important;

    margin:0 !important;

}



/* ============================================================
   TITULOS HEADER
   ============================================================ */


.single-product .cesteria-colores-heading{

    display:flex;

    flex-direction:column;

    gap:4px;

}



.single-product .cesteria-colores-titulo{

    font-family:

        var(--anny-font-ui);


    font-size:16px;

    line-height:1.3;

    font-weight:

        var(--anny-weight-ui);


    color:

        var(--anny-secondary);


}



.single-product .cesteria-colores-subtitulo{

    font-family:

        var(--anny-font-body);


    font-size:13px;

    line-height:1.4;

    color:

        var(--anny-text);


    opacity:.65;

}



/* ============================================================
   FLECHA PRINCIPAL
   ============================================================ */


.single-product .cesteria-desplegable-icono{

    width:32px;

    height:32px;

    flex:0 0 32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

        rgba(160,82,45,.06);


}



.single-product .cesteria-desplegable-icono span{

    width:9px;

    height:9px;

    display:block;


    border-right:

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


    border-bottom:

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


    transform:

        rotate(45deg);


    margin-top:-5px;


    transition:

        transform var(--anny-transition);


}



/* abierto */

.single-product 
.cesteria-colores-toggle[aria-expanded="true"]
.cesteria-desplegable-icono span{


    transform:

        rotate(225deg);


    margin-top:5px;


}



/* ============================================================
   CONTENIDO PRINCIPAL
   ============================================================ */


.single-product .cesteria-colores-contenido{


    padding:

        0 22px 26px;


}



.single-product .cesteria-colores-contenido[hidden]{


    display:none;


}



/* ============================================================
   SELECTOR CANTIDAD COLORES
   ============================================================ */


.single-product .cesteria-combinar-colores{


    margin-top:20px;


    padding-bottom:22px;


    border-bottom:

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


}



/* ============================================================
   SUB HEADER
   ============================================================ */


.single-product .cesteria-subtoggle{


    width:100%;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:15px;


    padding:15px 16px;


    border:

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


    border-radius:

        var(--anny-radius);


    background:

        var(--anny-white);


    cursor:pointer;


    text-align:left;


    transition:

        background var(--anny-transition),

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



}



.single-product .cesteria-subtoggle:hover{


    border-color:

        var(--anny-accent);


    background:

        var(--anny-cream-light);


}



/* ============================================================
   TEXTO SUB HEADER
   ============================================================ */


.single-product .cesteria-subtoggle-texto{


    display:flex;


    flex-direction:column;


    gap:4px;


}



.single-product .cesteria-subtoggle-titulo{


    font-size:14px;


    font-weight:

        var(--anny-weight-ui);


    color:

        var(--anny-secondary);


}



.single-product .cesteria-subtoggle-seleccion{


    font-size:12px;


    color:

        var(--anny-text);


    opacity:.65;


}



/* ============================================================
   ICONO SUB HEADER
   ============================================================ */


.single-product .cesteria-subtoggle-icono{


    width:28px;


    height:28px;


    display:flex;


    align-items:center;


    justify-content:center;


}



.single-product .cesteria-subtoggle-icono span{


    width:8px;


    height:8px;


    border-right:

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


    border-bottom:

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


    transform:

        rotate(45deg);


    transition:

        transform var(--anny-transition);


}



.single-product 
.cesteria-subtoggle[aria-expanded="true"]
.cesteria-subtoggle-icono span{


    transform:

        rotate(225deg);


}



/* ============================================================
   OPCIONES DE CANTIDAD
   ============================================================ */


.single-product .cesteria-combinar-opciones{


    display:grid;


    grid-template-columns:1fr;


    gap:12px;


    margin-top:14px;


}



.single-product .cesteria-combinar-opciones[hidden]{


    display:none;


}



/* ============================================================
   TARJETA OPCION
   ============================================================ */


.single-product .cesteria-combinar-opcion{


    position:relative;


    display:flex;


    align-items:center;


    gap:14px;


    padding:16px;


    border:

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


    border-radius:

        var(--anny-radius);


    background:

        var(--anny-white);


    cursor:pointer;


    transition:


        border-color var(--anny-transition),


        background var(--anny-transition),


        transform var(--anny-transition);



}



.single-product .cesteria-combinar-opcion:hover{


    transform:

        translateY(-2px);


    border-color:

        var(--anny-accent);


}



/* radio oculto */


.single-product .cesteria-combinar-opcion input{


    position:absolute;


    opacity:0;


    pointer-events:none;


}
/* ============================================================
   ANNY — SELECTOR DE COLORES PREMIUM
   ============================================================

   PARTE 2/2

   - Estados seleccionados
   - Grupos de color
   - Opciones de colores
   - Responsive

   ============================================================ */


/* ============================================================
   CONTENIDO OPCIÓN CANTIDAD
   ============================================================ */


.single-product .cesteria-combinar-opcion-contenido{

    display:flex;

    flex-direction:column;

    gap:4px;

}


.single-product .cesteria-combinar-opcion-titulo{

    font-size:14px;

    line-height:1.3;

    font-weight:

        var(--anny-weight-ui);

    color:

        var(--anny-secondary);

}



.single-product .cesteria-combinar-opcion-descripcion{

    font-size:12px;

    color:

        var(--anny-text);

    opacity:.65;

}



/* ============================================================
   CHECK CANTIDAD
   ============================================================ */


.single-product .cesteria-combinar-check{

    width:18px;

    height:18px;

    margin-left:auto;

    flex:0 0 18px;

    border:

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

    border-radius:50%;

    position:relative;

    transition:

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


}



/* seleccionado */


.single-product .cesteria-combinar-opcion:has(input:checked){


    border-color:

        var(--anny-primary);


    background:

        rgba(160,82,45,.04);


}



.single-product .cesteria-combinar-opcion:has(input:checked)
.cesteria-combinar-check{


    border-color:

        var(--anny-primary);


}



.single-product .cesteria-combinar-opcion:has(input:checked)
.cesteria-combinar-check::after{


    content:"";


    position:absolute;


    width:8px;


    height:8px;


    top:4px;


    left:4px;


    border-radius:50%;


    background:

        var(--anny-primary);


}



/* ============================================================
   GRUPOS DE COLOR
   ============================================================ */


.single-product .grupo-color{


    margin-top:16px;


    border:

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


    border-radius:

        var(--anny-radius-lg);


    overflow:hidden;


    background:

        var(--anny-white);


    transition:

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



}



.single-product .grupo-color:hover{


    box-shadow:

        var(--anny-shadow-soft);


}



/* oculto */


.single-product .grupo-color.grupo-color-oculto{


    display:none;


}



/* ============================================================
   HEADER GRUPO COLOR
   ============================================================ */


.single-product .grupo-color-toggle{


    width:100%;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:15px;


    padding:16px;


    border:0;


    background:


        var(--anny-white);


    cursor:pointer;


    text-align:left;


}



.single-product .grupo-color-toggle:hover{


    background:

        var(--anny-cream-light);


}



/* contenido */


.single-product .grupo-color-toggle-contenido{


    display:flex;


    align-items:center;


    gap:13px;


}



/* número */


.single-product .grupo-color-numero{


    width:32px;


    height:32px;


    display:flex;


    align-items:center;


    justify-content:center;


    flex:0 0 32px;


    border-radius:50%;


    background:

        var(--anny-cream);


    color:

        var(--anny-primary);


    font-size:13px;


    font-weight:600;


}



/* títulos */


.single-product .grupo-color-heading{


    display:flex;


    flex-direction:column;


    gap:3px;


}



.single-product .grupo-color-titulo{


    font-size:14px;


    font-weight:

        var(--anny-weight-ui);


    color:

        var(--anny-secondary);


}



.single-product .grupo-color-seleccion{


    font-size:12px;


    color:

        var(--anny-text);


    opacity:.65;


}



/* flecha */


.single-product .grupo-color-icono{


    width:28px;


    height:28px;


    display:flex;


    align-items:center;


    justify-content:center;


}



.single-product .grupo-color-icono span{


    width:8px;


    height:8px;


    border-right:

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


    border-bottom:

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


    transform:

        rotate(45deg);


    transition:

        transform var(--anny-transition);


}



.single-product
.grupo-color-toggle[aria-expanded="true"]
.grupo-color-icono span{


    transform:

        rotate(225deg);


}



/* ============================================================
   CONTENIDO GRUPO
   ============================================================ */


.single-product .grupo-color-contenido{


    padding:

        0 16px 18px;


}



.single-product .grupo-color-contenido[hidden]{


    display:none;


}



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


.single-product .grupo-color-opciones{


    display:grid;


    grid-template-columns:1fr;


    gap:10px;


}



/* ============================================================
   TARJETA COLOR
   ============================================================ */


.single-product .color-opcion{


    position:relative;


    display:flex;


    align-items:center;


    gap:14px;


    min-height:72px;


    padding:10px;


    border:

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


    border-radius:

        var(--anny-radius);


    background:

        var(--anny-white);


    cursor:pointer;


    transition:


        border-color var(--anny-transition),


        background var(--anny-transition),


        transform var(--anny-transition),


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


}



.single-product .color-opcion:hover{


    transform:

        translateY(-2px);


    border-color:

        var(--anny-accent);


    box-shadow:

        var(--anny-shadow-soft);


}



/* radio */


.single-product .color-radio-input{


    position:absolute;


    opacity:0;


    pointer-events:none;


}



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


.single-product .color-imagen{


    width:54px !important;


    height:54px !important;


    min-width:54px;


    object-fit:cover;


    display:block;


    margin:0 !important;


    border-radius:50%;


    border:

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


    transition:


        transform var(--anny-transition);


}



.single-product .color-opcion:hover
.color-imagen{


    transform:

        scale(1.05);


}



/* ============================================================
   NOMBRE COLOR
   ============================================================ */


.single-product .color-nombre{


    padding-right:30px;


    font-size:13px;


    line-height:1.35;


    font-weight:500;


    color:

        var(--anny-text);


}



/* ============================================================
   CHECK COLOR
   ============================================================ */


.single-product .color-opcion-check{


    position:absolute;


    right:14px;


    top:50%;


    width:18px;


    height:18px;


    transform:

        translateY(-50%);


    border:

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


    border-radius:50%;


}



/* seleccionado */


.single-product .color-opcion:has(input:checked){


    border-color:

        var(--anny-primary);


    background:

        rgba(160,82,45,.04);


}



.single-product .color-opcion:has(input:checked)
.color-opcion-check{


    border-color:

        var(--anny-primary);


}



.single-product .color-opcion:has(input:checked)
.color-opcion-check::after{


    content:"";


    position:absolute;


    width:8px;


    height:8px;


    left:4px;


    top:4px;


    border-radius:50%;


    background:

        var(--anny-primary);


}



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


@media (min-width:768px){


    .single-product .grupo-color-opciones{


        grid-template-columns:

            repeat(2,1fr);


    }



}



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


@media (max-width:767px){


    .single-product .cesteria-colores-toggle{


        padding:

            17px;


    }



    .single-product .cesteria-colores-contenido{


        padding:

            0 16px 22px;


    }



    .single-product .cesteria-colores-icono{


        width:36px;


        height:36px;


        flex-basis:36px;


    }



    .single-product .cesteria-colores-titulo{


        font-size:15px;


    }



    .single-product .grupo-color-opciones{


        grid-template-columns:

            1fr;


    }



}
/* ============================================================
   ESTADO INICIAL ACORDEONES
   ============================================================ */


.single-product .cesteria-colores-contenido[hidden],
.single-product .cesteria-combinar-opciones[hidden],
.single-product .grupo-color-contenido[hidden]{

    display:none;

}