/* ==========================================================================
   CSS MAESTRO DE MAQUILLAJE & TIENDA — VELLAPERFUMERIA.COM
   VARIACIONES Y TONOS DE:
   1) PINTALABIOS Y LABIALES (MATE, SATINADOS, LÍQUIDOS Y BRILLOS)
   2) MÁSCARAS DE PESTAÑAS (NEGRO INTENSO, WATERPROOF, EXTRA VOLUMEN, BROWN)
   3) PINTAUÑAS Y ESMALTES (EFECTO GEL, LACADOS, BRILLO, TOP COAT, METÁLICOS)
   4) LÁPICES DE OJOS Y DELINEADORES (KOHL NEGRO, MARRÓN, GRIS, AZUL, JADE)
   5) BASES DE MAQUILLAJE Y CORRECTORES
   
   REGLAS DE CONTRASTE:
   - SECCIÓN FONDO NEGRO (#000000): NOMBRES Y PRECIOS ACTUALIZADOS EN BLANCO (#FFFFFF)
   - SECCIÓN FONDO BLANCO (#FFFFFF): NOMBRES Y PRECIOS POR ATRIBUTO EN NEGRO (#000000)
   ========================================================================== */


/* ==========================================================================
   BLOQUE 1: FONDO NEGRO (#000000) — NOMBRES Y PRECIOS EN BLANCO PURO (#FFFFFF)
   ========================================================================== */

.bg-black,
.bg-stone-950,
.bg-stone-900,
.fondo-negro,
.vella-dark-section,
.dark,
[data-theme="dark"],
.woocommerce-dark,
.woocommerce.dark,
footer.bg-black {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Nombres y títulos de toda la tienda en fondo negro */
.bg-black .woocommerce-loop-product__title,
.bg-black .woocommerce ul.products li.product .woocommerce-loop-product__title,
.bg-black .woocommerce ul.products li.product h2,
.bg-black .woocommerce ul.products li.product h3,
.bg-black .product-title,
.bg-black .product-title a,
.bg-black .vella-product-card-title,
.bg-black .vella-product-card-title a,
.bg-black h1,
.bg-black h2,
.bg-black h3,
.bg-black h4,
.bg-black .product_title,
.fondo-negro .woocommerce-loop-product__title,
.fondo-negro .product-title,
.fondo-negro .product_title,
.fondo-negro h1,
.fondo-negro h2,
.fondo-negro h3,
.dark .product_title,
.dark .woocommerce-loop-product__title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Precios actualizados en fondo negro: blanco puro y visible */
.bg-black .price,
.bg-black .price *,
.bg-black .amount,
.bg-black .woocommerce-Price-amount,
.bg-black .woocommerce-Price-amount *,
.bg-black .woocommerce-Price-currencySymbol,
.bg-black .vella-product-price,
.bg-black .vella-product-price *,
.bg-black .vella-price,
.bg-black .vella-price *,
.bg-black .woocommerce-variation-price,
.bg-black .woocommerce-variation-price *,
.fondo-negro .price,
.fondo-negro .price *,
.fondo-negro .amount,
.fondo-negro .woocommerce-Price-amount,
.fondo-negro .woocommerce-Price-amount *,
.dark .price,
.dark .price *,
.dark .amount {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Precio regular tachado en fondo negro (gris claro legible) */
.bg-black del,
.bg-black del *,
.bg-black del .amount,
.fondo-negro del,
.fondo-negro del *,
.dark del,
.dark del * {
  color: #d1d5db !important;
  opacity: 0.8 !important;
  text-decoration: line-through !important;
}

/* Precio en oferta / rebajado en fondo negro */
.bg-black ins,
.bg-black ins *,
.bg-black ins .amount,
.fondo-negro ins,
.dark ins {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 900 !important;
}

/* Descripciones de maquillaje en fondo negro */
.bg-black p,
.bg-black .description,
.bg-black .woocommerce-product-details__short-description,
.fondo-negro p,
.fondo-negro .description,
.dark p {
  color: #f3f4f6 !important;
  line-height: 1.6 !important;
}


/* ==========================================================================
   BLOQUE 2: FONDO BLANCO (#FFFFFF) — NOMBRES Y PRECIOS POR ATRIBUTO EN NEGRO (#000000)
   ========================================================================== */

.bg-white,
.fondo-blanco,
.vella-light-section,
.single-product.fondo-blanco,
.light,
[data-theme="light"] {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Nombres y títulos en fondo blanco */
.bg-white .woocommerce-loop-product__title,
.bg-white .product-title,
.bg-white .product-title a,
.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white .product_title,
.fondo-blanco .woocommerce-loop-product__title,
.fondo-blanco .product-title,
.fondo-blanco .product_title,
.fondo-blanco h1,
.fondo-blanco h2,
.fondo-blanco h3 {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* PRECIOS DE PÁGINA POR ATRIBUTO DE MAQUILLAJE EN FONDO BLANCO (VARIABLE PRODUCT PRICING) */
.bg-white .price,
.bg-white .price *,
.bg-white .amount,
.bg-white .woocommerce-Price-amount,
.bg-white .woocommerce-Price-amount *,
.fondo-blanco .price,
.fondo-blanco .price *,
.fondo-blanco .amount,
.fondo-blanco .woocommerce-Price-amount,
.woocommerce-variation-price,
.woocommerce-variation-price *,
.woocommerce-variation-price .price,
.woocommerce-variation-price .price *,
.woocommerce-variation-price .amount,
.woocommerce-variation-price .amount *,
.single_variation .price,
.single_variation .price *,
.single_variation .amount,
.single_variation .amount *,
.vella-attribute-price,
.vella-attribute-price *,
.attribute-price,
.attribute-price * {
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
}

/* Precio regular tachado en fondo blanco */
.bg-white del,
.bg-white del *,
.bg-white del .amount,
.fondo-blanco del,
.fondo-blanco del *,
.woocommerce-variation-price del,
.woocommerce-variation-price del * {
  color: #9ca3af !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}

/* Formularios de variación de tono y atributos */
.variations,
.variations_form,
.shop_attributes,
.woocommerce-product-attributes {
  background-color: #ffffff !important;
}

.variations label,
.variations td.label,
.variations th.label,
.shop_attributes th,
.attribute-label {
  color: #000000 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
}

.variations select,
select#pa_tono,
select#pa_color,
select#pa_acabado,
.attribute-select {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-weight: 700 !important;
}

.variations select:focus,
.variations select:hover {
  border-color: #000000 !important;
}


/* ==========================================================================
   BLOQUE 3: TODAS LAS VARIANTES DE TONOS DEL MAQUILLAJE
   ========================================================================== */

.swatches,
.makeup-tone-grid,
.swatch-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 12px 0 !important;
}

.swatch-item,
.makeup-tone-pill {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

/* Swatch en fondo blanco */
.bg-white .swatch-item,
.fondo-blanco .swatch-item {
  background-color: #f9fafb !important;
  border: 1.5px solid #e5e7eb !important;
  color: #000000 !important;
}

.bg-white .swatch-item.active,
.bg-white .swatch-item.selected,
.fondo-blanco .swatch-item.active,
.fondo-blanco .swatch-item.selected {
  background-color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: 0 0 0 2px #000000 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* Swatch en fondo negro */
.bg-black .swatch-item,
.fondo-negro .swatch-item {
  background-color: #18181b !important;
  border: 1.5px solid #3f3f46 !important;
  color: #ffffff !important;
}

.bg-black .swatch-item.active,
.bg-black .swatch-item.selected,
.fondo-negro .swatch-item.active,
.fondo-negro .swatch-item.selected {
  background-color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px #ffffff !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Muestra circular de color */
.swatch-circle,
.swatch-color {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  flex-shrink: 0 !important;
}

/* Precio por atributo dentro del selector */
.swatch-price {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  margin-left: auto !important;
  padding-left: 6px !important;
}

.bg-white .swatch-price,
.fondo-blanco .swatch-price {
  color: #000000 !important;
}

.bg-black .swatch-price,
.fondo-negro .swatch-price {
  color: #ffffff !important;
}


/* ==========================================================================
   1. PINTALABIOS Y LABIALES (LIPSTICKS & GLOSSES)
   ========================================================================== */

/* Barras de Labios Iconic Matte SPF 15 Giordani Gold (11,99 €) */
.swatch-lip-42662, .swatch-lip-unexpected-rose { background-color: #c96b7e !important; }
.swatch-lip-42663, .swatch-lip-blushing-pink   { background-color: #d67a91 !important; }
.swatch-lip-42324, .swatch-lip-iconic-rose     { background-color: #b75269 !important; }
.swatch-lip-42325, .swatch-lip-classic-red     { background-color: #a91b2e !important; }
.swatch-lip-42326, .swatch-lip-royal-nude      { background-color: #b57c6b !important; }
.swatch-lip-42327, .swatch-lip-plum-glamour    { background-color: #6c2b3d !important; }

/* Barras de Labios Iconic Satin SPF 15 Giordani Gold (8,99 € - 11,99 €) */
.swatch-lip-46959, .swatch-lip-berry-red       { background-color: #8b1d3b !important; }
.swatch-lip-42659, .swatch-lip-satin-red       { background-color: #ba1e2b !important; }
.swatch-lip-42660, .swatch-lip-royal-garnet    { background-color: #721c28 !important; }

/* Barras de Labios Eternal Glow SPF 25 Giordani Gold (8,99 €) */
.swatch-lip-45556, .swatch-lip-noble-nude      { background-color: #c48b78 !important; }
.swatch-lip-45561, .swatch-lip-classy-mauve    { background-color: #9e5b6e !important; }
.swatch-lip-45562, .swatch-lip-rusty-crimson   { background-color: #9a322c !important; }

/* Barras de Labios Mate OnColour (2,99 €) */
.swatch-lip-47413, .swatch-lip-nude-beige      { background-color: #be846e !important; }
.swatch-lip-38948, .swatch-lip-beauty-red      { background-color: #b51c27 !important; }
.swatch-lip-38949, .swatch-lip-blush-pink      { background-color: #d8708c !important; }
.swatch-lip-38956, .swatch-lip-warm-nude       { background-color: #af725e !important; }
.swatch-lip-38957, .swatch-lip-soft-berry      { background-color: #7b293d !important; }

/* Labiales Ultra Fix THE ONE Colour Unlimited (11,99 €) */
.swatch-lip-41796, .swatch-lip-ultra-red       { background-color: #b91c1c !important; }
.swatch-lip-41797, .swatch-lip-ultra-pink      { background-color: #ec4899 !important; }
.swatch-lip-41798, .swatch-lip-ultra-nude      { background-color: #d97706 !important; }
.swatch-lip-41799, .swatch-lip-ultra-coral     { background-color: #f97316 !important; }

/* Brillos de Labios OnColour Sweet Gloss (4,25 €) */
.swatch-lip-46587, .swatch-lip-crystal-coco    { background-color: #f5eae2 !important; }
.swatch-lip-46588, .swatch-lip-pink-lemonade   { background-color: #f492a5 !important; }
.swatch-lip-46589, .swatch-lip-mango           { background-color: #e8864a !important; }
.swatch-lip-46590, .swatch-lip-raspberry-cream { background-color: #c4325e !important; }
.swatch-lip-46591, .swatch-lip-vanilla         { background-color: #faede1 !important; }
.swatch-lip-46592, .swatch-lip-peach-candy     { background-color: #e67858 !important; }
.swatch-lip-46593, .swatch-lip-blackcurrant    { background-color: #882d49 !important; }
.swatch-lip-46594, .swatch-lip-dulce-leche     { background-color: #b87b5a !important; }

/* Labial Líquido Irresistible Touch THE ONE (6,49 €) */
.swatch-lip-38869, .swatch-lip-magnetic-red    { background-color: #981220 !important; }


/* ==========================================================================
   2. MÁSCARAS DE PESTAÑAS (MASCARAS)
   ========================================================================== */

.swatch-mascara-black,
.swatch-mascara-negro-intenso  { background-color: #000000 !important; }
.swatch-mascara-waterproof     { background-color: #0f172a !important; border: 2px solid #38bdf8 !important; }
.swatch-mascara-xxl-volumen    { background-color: #171717 !important; border: 2px solid #f59e0b !important; }
.swatch-mascara-golden         { background-color: #1c1917 !important; border: 2px solid #d4af37 !important; }
.swatch-mascara-false-lashes   { background-color: #09090b !important; border: 2px solid #ec4899 !important; }
.swatch-mascara-brown          { background-color: #3e2723 !important; }


/* ==========================================================================
   3. PINTAUÑAS Y ESMALTES (NAIL POLISH & GEL)
   ========================================================================== */

/* Esmaltes THE ONE Ultimate Gel Paso 1 (5,49 € - 6,99 €) */
.swatch-nail-41187, .swatch-nail-silk-rose       { background-color: #e2a9b3 !important; }
.swatch-nail-41188, .swatch-nail-cashmere-rose   { background-color: #d99b9b !important; }
.swatch-nail-41191, .swatch-nail-scarlet-red     { background-color: #b81d24 !important; }
.swatch-nail-41192, .swatch-nail-deep-maroon     { background-color: #5e1927 !important; }
.swatch-nail-41195, .swatch-nail-fiery-red       { background-color: #c91823 !important; }
.swatch-nail-41196, .swatch-nail-lilac-silk      { background-color: #c8b4d6 !important; }
.swatch-nail-cloud-burst                         { background-color: #8a9ea7 !important; }

/* Top Coat Gel Paso 2 (6,99 €) */
.swatch-nail-43185, .swatch-nail-top-coat-gel    { background-color: #ffffff !important; border: 2px solid #38bdf8 !important; }

/* Esmaltes OnColour Nail Polish (2,79 € - 4,49 €) */
.swatch-nail-38976, .swatch-nail-tasty-nude      { background-color: #e5d3c5 !important; }
.swatch-nail-38986, .swatch-nail-cherry-burgund  { background-color: #631226 !important; }
.swatch-nail-38987, .swatch-nail-spicy-red       { background-color: #c2182b !important; }
.swatch-nail-38974, .swatch-nail-ice-cream-beige { background-color: #ebdcd1 !important; }
.swatch-nail-38976-lavender, .swatch-nail-candy-lavender { background-color: #bba1c9 !important; }
.swatch-nail-38987-pink, .swatch-nail-luscious-pink     { background-color: #e75480 !important; }
.swatch-nail-38991, .swatch-nail-deep-plum       { background-color: #4a1228 !important; }

/* Esmaltes de Uñas Gloss N'Wear THE ONE (5,49 €) */
.swatch-nail-41877, .swatch-nail-mystic-aqua     { background-color: #2dd4bf !important; }

/* Esmaltes Giordani Gold Iconic Metallic (9,99 €) */
.swatch-nail-41738, .swatch-nail-royal-gold      { background-color: #d4af37 !important; }
.swatch-nail-metallic-bronze                     { background-color: #a0522d !important; }
.swatch-nail-platinum-diamond                    { background-color: #e5e4e2 !important; }


/* ==========================================================================
   4. LÁPICES DE OJOS, DELINEADORES Y SOMBRAS (EYELINER & EYES)
   ========================================================================== */

.swatch-eye-kohl-black,
.swatch-eye-negro-carbon      { background-color: #000000 !important; }
.swatch-eye-kohl-brown,
.swatch-eye-marron-cafe       { background-color: #3f2817 !important; }
.swatch-eye-kohl-grey,
.swatch-eye-gris-humo         { background-color: #475569 !important; }
.swatch-eye-midnight-blue,
.swatch-eye-azul-noche        { background-color: #1e3a8a !important; }
.swatch-eye-46556,
.swatch-eye-green-jade        { background-color: #047857 !important; }
.swatch-eye-47507,
.swatch-eye-blushing-prism    { background-color: #c084fc !important; }
.swatch-eye-46570,
.swatch-eye-matte-bronze      { background-color: #92400e !important; }


/* ==========================================================================
   5. BASES Y CORRECTORES DE MAQUILLAJE (FOUNDATION & CONCEALER)
   ========================================================================== */

.swatch-base-35778 { background-color: #f3e1d4 !important; }
.swatch-base-35779 { background-color: #f1d5c1 !important; }
.swatch-base-35780 { background-color: #efccb5 !important; }
.swatch-base-35782 { background-color: #e8c1a7 !important; }
.swatch-base-35783 { background-color: #e5b89c !important; }
.swatch-base-35784 { background-color: #e2ba9b !important; }
.swatch-base-35785 { background-color: #deb08c !important; }
.swatch-base-35786 { background-color: #d9a983 !important; }
.swatch-base-35787 { background-color: #d4a382 !important; }
.swatch-base-35788 { background-color: #c8916d !important; }