/* =====================================================================
   ePrilux · Ficha: compra en el móvil y envío gratis (módulo ficha-compra, 26/10/2026, F7)
   ===================================================================== */

/* ---------- Envío gratis, debajo del botón ---------- */
.epx-fc-envio { margin: 14px 0 4px; font-family: 'Montserrat', system-ui, sans-serif; }
.epx-fc-envio__texto { margin: 0 0 8px !important; font-size: 13px; font-weight: 300; line-height: 1.5; color: #06163d; }
.epx-fc-envio__texto strong { font-weight: 600; }
.epx-fc-envio__via { display: flex; height: 4px; background: #e4e6e9; border-radius: 2px; overflow: hidden; }
.epx-fc-envio__ya { display: block; height: 100%; background: #06163d; transition: width .3s ease; }
.epx-fc-envio__este { display: block; height: 100%; background: #FDCF63; transition: width .3s ease; }
.epx-fc-envio.es-gratis .epx-fc-envio__texto strong { color: #1f7a4d; }

/* ---------- Barra fija de compra: solo en el móvil ---------- */
.epx-fc-barra { display: none; }
@media (max-width: 767px) {
  .epx-fc-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #e4e6e9;
    box-shadow: 0 -10px 24px -18px rgba(6, 22, 61, .45);
    font-family: 'Montserrat', system-ui, sans-serif;
    animation: epxFcSube .25s ease-out;
  }
  .epx-fc-barra[hidden] { display: none; }
  .epx-fc-barra__precio { display: flex; flex-direction: column; min-width: 0; color: #06163d; }
  .epx-fc-barra__precio b { font-size: 19px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
  .epx-fc-barra__precio small { font-size: 10.5px; font-weight: 400; color: #697183; }
  .epx-fc-barra__boton {
    flex: 1 1 auto;
    min-height: 46px;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid #06163d !important;
    border-radius: 0 !important;
    background: #06163d !important;
    box-shadow: inset 4px 0 0 #FDCF63 !important;
    color: #fff !important;
    font: 600 12px/1 'Montserrat', system-ui, sans-serif !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    cursor: pointer;
  }
  .epx-fc-barra__boton:focus-visible { outline: 2px solid #23a7d6; outline-offset: 2px; }
  /* El botón flotante de WhatsApp y el del carrito suben para no quedar tapados. */
  body.epx-fc-barra-visible .joinchat__button,
  body.epx-fc-barra-visible .moderncart-floating-cart-button { bottom: 86px !important; }
  /* El de accesibilidad (Ally) va dentro de un shadow DOM y no se le puede cambiar el bottom: se sube la caja que lo
     contiene, y sus piezas fijas se colocan respecto a ella (Karen, 3/11/2026: tapaba el precio de la barra). */
  body.epx-fc-barra-visible #ea11y-root { position: fixed; inset: 0 0 64px 0; transform: translateZ(0); pointer-events: none; z-index: 9998; }
  body.epx-fc-barra-visible #ea11y-root > * { pointer-events: auto; }
  /* La barra de antes (7639) ya no se usa: el botón de la ficha no se despega. */
  body.epx-cta-fija .elementor-295 a.cta-cart { position: static !important; animation: none !important; }

  /* ---------- Primera pantalla más compacta: precio y botón más arriba ---------- */
  /* Más específico que la regla del título de 5750, que se carga después. */
  body .elementor-295 h1.h1[data-id="ddc5417"] { font-size: 22px !important; line-height: 1.25 !important; }
  /* 2/11/2026 (revisión de Karen, n.º 2): antes 280 px de alto a todo el ancho, y las fotos (cuadradas) dejaban
     franjas blancas a los lados. Ahora cuadrada a todo el ancho: la foto llena el recuadro. */
  body .elementor-295 :is(img[data-id="aab3b54"], [data-id="aab3b54"] img) {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}
@keyframes epxFcSube { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .epx-fc-barra { animation: none; } }

/* Pestañas de confianza: «24-48 h» va siempre junto (lo une el JS con un espacio que no parte). */

/* ---------- Temperatura de color de la ficha con el circulito de color de las tarjetas (Karen, 26/10) ----------
   Mismos colores que los círculos de las tarjetas (9206) y la chuleta de «Tu caja»: cálida, neutra y fría, más marcados (Karen, 28/10: casi no se notaba la diferencia). La elegida sigue en navy. */
.epv-group[data-attribute="color-de-luz"] .epv-option,
.epv-group[data-attribute="cct"] .epv-option { display: inline-flex !important; align-items: center; gap: 8px; }
.epv-group[data-attribute="color-de-luz"] .epv-option::before,
.epv-group[data-attribute="cct"] .epv-option::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #c9ccd2;
  background: var(--epx-tono, #fff);
}
.epv-option[data-value^="Cálida" i], .epv-option[data-value^="Calida" i] { --epx-tono: #FDCF63; }
.epv-option[data-value^="Neutra" i] { --epx-tono: #fbeccb; }
.epv-option[data-value^="Fría" i], .epv-option[data-value^="Fria" i] { --epx-tono: #9cc3e8; }
.epv-option[data-value="RGB" i], .epv-option[data-value^="Multicolor" i], .epv-option[data-value*="RGB" i] { --epx-tono: conic-gradient(#e53935, #fdd835, #43a047, #00acc1, #1e58d6, #d81b60, #e53935); }
/* luces de colores (Navidad): mismos colores que el panel de opciones 9206 */
.epv-option[data-value="Roja" i], .epv-option[data-value="Rojo" i] { --epx-tono: #d93a34; }
.epv-option[data-value="Verde" i] { --epx-tono: #2e9e4f; }
.epv-option[data-value="Azul" i] { --epx-tono: #2f6fd6; }
.epv-option[data-value="Amarilla" i], .epv-option[data-value="Amarillo" i] { --epx-tono: #f6d743; }
.epv-option[data-value="Rosa" i] { --epx-tono: #f08bb4; }
.epv-option[data-value^="Púrpura" i], .epv-option[data-value^="Purpura" i] { --epx-tono: #8e44ad; }
.epv-option[data-value="Dorada" i], .epv-option[data-value="Dorado" i] { --epx-tono: #d8b45a; }
.epv-group[data-attribute="color-de-luz"] .epv-option[aria-pressed="true"]::before,
.epv-group[data-attribute="cct"] .epv-option[aria-pressed="true"]::before { border-color: #fff; }