/*
Theme Name: Jolie Child
Theme URI: https://jolie.vamtam.com
Template: jolie
Author: VamTam
Author URI: https://vamtam.com
Description: Jolie is a clean, modern eCommerce WordPress theme with all the necessary features for all beauty websites, perfume stores and handmade cosmetics shops.
Tags: one-column,two-columns,three-columns,four-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,custom-menu,featured-image-header,featured-images,full-width-template,post-formats,theme-options,threaded-comments,translation-ready
Version: 32.1762455697
Updated: 2025-11-06 14:01:37

*/

/* ===================================================
   ESTILOS PERSONALIZADOS - VARIACIONES CON SWATCHES
   =================================================== */

.variations .swatch-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}

/* Swatch individual */
.variations .swatch-item,
.variations .variation-swatch {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Hover */
.variations .swatch-item:hover,
.variations .variation-swatch:hover {
    border-color: #999;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    transform: scale(1.08);
}

/* Estado seleccionado */
.variations .swatch-item.selected,
.variations .variation-swatch.selected,
.variations .swatch-item:checked,
.variations .variation-swatch:checked {
    border-color: #c7511f;
    border-width: 4px;
    box-shadow: 0 0 10px rgba(199, 81, 31, 0.3);
    transform: scale(1.12);
}

/* Check visible en el swatch seleccionado */
.variations .swatch-item.selected::after,
.variations .variation-swatch.selected::after {
    content: '✓';
    position: absolute;
    bottom: -8px;
    right: -8px;
    background: #c7511f;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

/* Responsividad */
@media (max-width: 768px) {
    .variations .swatch-item,
    .variations .variation-swatch {
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 480px) {
    .variations .swatch-item,
    .variations .variation-swatch {
        width: 40px;
        height: 40px;
    }
}



/* ===================================================
   FIN DE ESTILOS PERSONALIZADOS
   =================================================== */

.variation-discount-label {
  display: block;
  margin-top: 2px;
  font-size: 0.85em;
  font-weight: 600;
  color: #c92a2a;
}