/* Fanor · Producto — tokens globales (§0 del brief).
   Variables CSS sobre .fanor-prod, la clase que lleva el root de cada widget.
   Cada CSS de widget consume estos var(--fn-*). */

.fanor-prod {
  /* Colores */
  --fn-texto:          #202124;
  --fn-texto-2:        #5B5C5D;
  --fn-gris-tenue:     #9AA0A6;
  --fn-rojo:           #CC0000;
  --fn-rojo-hover:     #A80000;
  --fn-verde:          #1E7E34;
  --fn-verde-bg:       #E7F6EA;
  --fn-verde-borde:    #34A853;
  --fn-amarillo-bg:    #FFF6E5;
  --fn-amarillo-borde: #F0A500;
  --fn-amarillo-texto: #8A5A00;
  --fn-amarillo-icono: #C07A00;
  --fn-borde:          #E5E7EB;
  --fn-estrella:       #FFB300;
  --fn-estrella-vacia: #DDDDDD;

  /* Tipografías — salen de `fuentes.css` (tokens `--fanor-font-*`), que es el
     único sitio donde se decide la letra del plugin. Estos tres nombres se
     conservan porque los consumen ~20 hojas; lo que cambió es de dónde sacan el
     valor. `--fn-fuente-label` era Roboto (contenido) y `--fn-fuente-cond` la
     condensada (estructura): siguen significando lo mismo. */
  --fn-fuente:       var(--fanor-font-body, 'Manrope', system-ui, sans-serif);
  --fn-fuente-cond:  var(--fanor-font-display, 'Madiffy Sans Bold Condensed', sans-serif);
  --fn-fuente-label: var(--fanor-font-body, 'Manrope', system-ui, sans-serif);

  color: var(--fn-texto);
  font-family: var(--fn-fuente);
  box-sizing: border-box;
}

.fanor-prod *,
.fanor-prod *::before,
.fanor-prod *::after {
  box-sizing: border-box;
}

/* Reset puntual para que los enlaces/botones no hereden estilos raros del tema. */
.fanor-prod a { text-decoration: none; }
.fanor-prod button { font-family: inherit; cursor: pointer; }

/* Iconos (SVG inline del diseño o icono de fuente) heredan el color del contexto. */
.fanor-prod i { color: inherit; }

/* Foco/clic: matar el anillo rojo del tema o Elementor en cualquier widget
   (con !important para ganarle al tema), sin perder accesibilidad. El foco de
   teclado usa un contorno gris NEUTRO, nunca rojo. */
.fanor-prod a:focus,
.fanor-prod button:focus,
.fanor-prod a:active,
.fanor-prod button:active {
  outline: none !important;
  box-shadow: none !important;
}

.fanor-prod a:focus-visible,
.fanor-prod button:focus-visible {
  outline: 2px solid #9AA0A6 !important;
  outline-offset: 2px;
}

/* ════════════════ Utilidad: tarjeta que se calla si no hay nada dentro ═══════
 *
 * EL PROBLEMA: varios widgets de la ficha se callan cuando el producto no tiene
 * ese dato —el acordeón sin descripción ni especificaciones ni vehículos, la
 * ficha técnica sin specs—. Cuando esos widgets van dentro de un container de
 * Elementor con fondo y borde, el container no se entera de que sus hijos no
 * pintaron nada y deja una tarjeta blanca vacía con su marco y su relleno.
 *
 * El widget monolito lo resolvía por dentro (pintaba a un buffer y solo envolvía
 * en tarjeta si el buffer traía algo). Al montar la ficha con piezas sueltas la
 * tarjeta es un container, y eso ya no se puede decidir en PHP.
 *
 * CÓMO SE USA: se le pone la clase `fanor-oculta-si-vacio` al container en
 * Avanzado → Clases CSS. Es opt-in y no global a propósito: una regla que
 * escondiera cualquier container vacío del sitio afectaría también a los que se
 * usan como separador o como caja de altura fija.
 *
 * `:has()` es soportado por todos los navegadores desde 2023; donde no lo sea,
 * la regla se ignora y queda el comportamiento de antes (tarjeta vacía), que es
 * feo pero no roto. */
.fanor-oculta-si-vacio:not(:has(> *:not(style):not(script))) {
  display: none !important;
}