/**
 * Promo 2x1 Outlet.
 *
 * Usa las variables del tema (base.css) con fallback, para que la promo siga
 * el diseno kitsune aunque el plugin se cargue sin el tema.
 */

/* Barra de anuncio ------------------------------------------------------- */

.tvfvc-promo-bar {
  /* La barra vivia en el flujo normal con z-index 60, y el header del tema es
     fijo con z-index 1000: el header la tapaba ENTERA, asi que la promocion no
     la veia nadie. Ahora va fija en lo mas alto y el header baja por debajo. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-cabecera, 200);

  /* Color plano, no degradado: una franja que cruza toda la pantalla con un
     degradado rojo chillon compite con el propio header y con el boton de
     comprar. Anuncia, no grita. */
  background: var(--marca, #c20f2f);
  color: var(--sobre-marca, #fff);
  font-family: var(--fuente, "Inter", sans-serif);
  font-size: var(--t-sm, 0.8125rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: none;
}

.tvfvc-promo-bar[hidden] {
  display: none;
}

.tvfvc-promo-bar__inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0.6rem 2.75rem 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tvfvc-promo-bar__tag {
  font-family: var(--font-accent, "Orbitron", sans-serif);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm, 4px);
  background: rgba(0, 0, 0, 0.28);
}

.tvfvc-promo-bar__text {
  font-weight: 600;
}

.tvfvc-promo-bar__cta {
  /* Zona pulsable comoda: el enlace media 21 px de alto. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0.35rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.tvfvc-promo-bar__cta:hover,
.tvfvc-promo-bar__cta:focus {
  opacity: 0.85;
}

.tvfvc-promo-bar__terms {
  font-size: 0.78rem;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tvfvc-promo-bar__close {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  /* La aspa media 22x22: por debajo del minimo de 24 px que pide WCAG 2.5.8 y
     dificil de acertar con el pulgar. Se le da una zona pulsable de 40 px sin
     tocar el tamano del simbolo. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  border-radius: 999px;
  color: inherit;
  font-size: 1.35rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.75;
}

.tvfvc-promo-bar__close:hover,
.tvfvc-promo-bar__close:focus {
  opacity: 1;
}

@media (max-width: 600px) {
  .tvfvc-promo-bar__inner {
    font-size: 0.82rem;
    /* El mensaje no cabe en una linea en un movil, asi que el enlace baja a la
       segunda. Separacion minima entre filas para que las dos se lean como un
       solo aviso y la barra no se coma media pantalla. */
    gap: 0.1rem 0.5rem;
    padding: 0.45rem 2.4rem 0.45rem 1rem;
  }

  .tvfvc-promo-bar__terms {
    display: none;
  }
}

/* Avisos de ficha y carrito ---------------------------------------------- */

.tvfvc-promo-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.25rem 0;
  padding: 0.9rem 1.1rem;
  /* Sin franja lateral de color: el borde completo mas la etiqueta 2X1 ya
     identifican el aviso, y la franja rompia la forma de la caja. */
  border: 1px solid var(--oro-borde, rgba(242, 184, 75, 0.34));
  border-radius: var(--r-md, 10px);
  background: var(--oro-tenue, rgba(242, 184, 75, 0.13));
  color: var(--texto, #f4f0f0);
  font-family: var(--fuente, "Inter", sans-serif);
  font-size: var(--t-sm, 0.8125rem);
  line-height: var(--alto-normal, 1.55);
}

.tvfvc-promo-note p {
  margin: 0;
}

.tvfvc-promo-note strong {
  color: var(--white, #fff);
}

.tvfvc-promo-note a {
  color: var(--oro, #f2b84b);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tvfvc-promo-note a:hover,
.tvfvc-promo-note a:focus {
  color: var(--white, #fff);
}

.tvfvc-promo-note__tag {
  flex: 0 0 auto;
  font-family: var(--fuente, "Inter", sans-serif);
  font-weight: 700;
  font-size: var(--t-xs, 0.75rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px var(--e-2, 0.5rem);
  border-radius: var(--r-sm, 6px);
  background: var(--oro, #f2b84b);
  color: var(--sobre-oro, #17110f);
}

/* Cuando falta una unidad para la siguiente gratis, el aviso pide accion. */
.tvfvc-promo-note--nudge {
  border-color: var(--marca-borde, rgba(236, 84, 112, 0.38));
  background: var(--marca-tenue, rgba(194, 15, 47, 0.14));
}

/* Badge en tarjetas de producto ------------------------------------------ */

/* Hereda forma y tamano de .badge-tag; solo cambia el color. */
.badge-tag.promo-2x1 {
  background: var(--oro, #f2b84b);
  color: var(--sobre-oro, #17110f);
}

/* Reserva el hueco de la barra en la fila de totales del carrito. */
.tvfvc-promo-note--cart {
  margin-bottom: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .tvfvc-promo-note--nudge {
    box-shadow: none;
  }
}


/* Cuando la barra esta puesta, el header y el contenido bajan lo que ocupa.
   La medida se declara aqui y la consumen el tema y el propio hueco superior. */
body:has(.tvfvc-promo-bar:not([hidden])) {
  --tvfvc-alto-barra: 44px;
  padding-top: var(--tvfvc-alto-barra);
}

body:has(.tvfvc-promo-bar:not([hidden])) .site-header {
  top: var(--tvfvc-alto-barra);
}

/* Alto minimo en numero, NO en --tvfvc-alto-barra: esa variable la escribe el
   script con lo que mide de la franja, y leerla aqui montaba una pescadilla
   (la franja crecia, el script medía mas, la franja volvia a crecer). */
.tvfvc-promo-bar__inner {
  min-height: 44px;
}

@media (max-width: 767px) {
  body:has(.tvfvc-promo-bar:not([hidden])) {
    --tvfvc-alto-barra: 64px;
  }
}

/* Cada promo activa aporta su propio aviso a la misma franja. */
.tvfvc-promo-bar__aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Con dos promos a la vez los avisos se apilan, y la franja necesita el doble
   de alto para que el header no se le suba encima. */
.tvfvc-promo-bar--doble .tvfvc-promo-bar__inner {
  flex-direction: column;
  gap: 0.15rem;
}

body:has(.tvfvc-promo-bar--doble:not([hidden])) {
  --tvfvc-alto-barra: 70px;
}

@media (max-width: 767px) {
  body:has(.tvfvc-promo-bar--doble:not([hidden])) {
    --tvfvc-alto-barra: 116px;
  }
}

@media (max-width: 600px) {
  /* Dos promos a la vez en un movil ya son dos lineas de texto. Si ademas cada
     una arrastra su boton, la franja se come un sexto de la pantalla antes de
     que se vea un solo producto. Con dos avisos el boton se cae: al Outlet se
     llega igual desde el menu. */
  .tvfvc-promo-bar--doble .tvfvc-promo-bar__cta {
    display: none;
  }
}