/* ============================================================================
   Bistrot at Wild Honey — Fixes
   Mu-plugin CSS correctivo. No toca Elementor, no toca el theme.
   Cada bloque está marcado con el ID de bug (G1, G3, G4, etc.) y referencia
   al audit/audit-2026-06-08.md.
   ============================================================================ */

/* === G15 — Swiper overflow causa scroll horizontal masivo ===================
   El bug: el .swiper-wrapper de Elementor/Elementor Pro tiene width_css > viewport
   y el contenedor padre no tiene overflow:hidden. El fix es defensivo, scoped a
   los swipers reales (no a cualquier .swiper suelto que otro plugin pueda usar).
   ============================================================================ */
.swiper,
.swiper-container,
.swiper-coverflow,
.mySwiper,
.mySwiperCoverflow {
	overflow: hidden !important;
	max-width: 100% !important;
}

.swiper-wrapper {
	max-width: 100% !important;
}

/* === G4 — Header "invisible" en Tablet V y Móvil V ==========================
   El bug: 2 headers WH__site-header position:fixed están en el DOM, uno z-index
   99 y otro z-index 999 (probable duplicación de template). El contenido del
   header (logo + Reservations) está visible, pero el <main> lo tapa porque no
   tiene padding-top. Subimos z-index y empujamos el contenido principal.
   ============================================================================ */
.elementor-location-header > header.WH__site-header {
	z-index: 9999 !important;
}

@media (max-width: 1024px) {
	/* El padding-top del main causa una franja vacía excesiva. Lo
	   desactivamos: el header mobile es position:fixed y su altura se
	   controla por el header stesso. El contenido del main no se
	   ocultará porque el header es transparente y los elementos del
	   contenido (como el hero) tienen su propio padding/margin.
	   En las páginas donde el contenido del primer widget se solapa con
	   el header (ej: hero de /contact/), se usa un wrapper con
	   margin-top positivo en lugar de padding-top en main.
	   ============================================================================ */
}

/* === G10 — 6 logos + 6 buttons en el DOM ==================================
   El bug: cada logo y cada botón Reservations existe en el DOM una vez por
   breakpoint (desktop / tablet / mobile). Las clases elementor-hidden-* controlan
   la visibilidad. NO tocamos display:none — eso es correcto. Solo nos aseguramos
   de que cuando un logo está visible, su tamaño sea el correcto y no el del
   breakpoint equivocado (que es el bug "Reservations diminuto" G6).
   ============================================================================ */

/* === G6 — Botón Reservations pequeño =======================================
   El bug: el SVG button_reservation_Bistrot_restaurant_london.svg se ve a
   100x50 px en desktop (debería ser ~140x60). El CSS de Elementor le da un
   width muy chico al <a> wrapper. Forzamos tamaño mínimo razonable en desktop.
   En mobile el botón sigue siendo clicable y proporcionado.
   ============================================================================ */
@media (min-width: 1025px) {
	header.WH__site-header img[src*="button_reservation"] {
		width: clamp(140px, 12vw, 180px) !important;
		height: auto !important;
	}
	header.WH__site-header img[src*="Bistrot-Red-Logo"] {
		width: clamp(160px, 14vw, 220px) !important;
		height: auto !important;
	}
}

/* === G5 — FAQs descentradas ================================================
   El bug: hay widgets nested-accordion con width fijo (230px) heredado del
   editor, posicionados a la derecha del viewport. Causa: en Elementor el widget
   FAQ se guardó con custom width en lugar de full-width.
   El fix: forzamos al widget a tomar el ancho del contenedor padre y lo
   centramos con margin auto. NO usamos flexbox en el padre porque no podemos
   asumir la estructura del contenedor en todos los viewports.
   ============================================================================ */
.elementor-widget-nested-accordion,
[data-widget_type="nested-accordion.default"],
.elementor-widget-accordion,
[data-widget_type="accordion.default"] {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

/* === G1 — Scroll horizontal residual 1px en páginas internas ===============
   El bug: MENU, NEWSLETTER y CONTACT tienen scrollW=clientW+1 en Desktop.
   Causa típica: subpixel rounding o un widget con width:100% + padding:0 1px.
   El fix es global y defensivo. NO afecta el comportamiento en pages limpias.

   IMPORTANTE: NO ponemos overflow-x en <html> porque rompe el position:sticky
   del header de Elementor Pro en Firefox (el header se volvía transparente
   al hacer scroll). Solo lo ponemos en <body> para que el sticky siga
   funcionando en el ancestro correcto.
   ============================================================================ */
body {
	/* !important es necesario: Elementor Pro y el theme Hello-Elementor
	   aplican overflow-x:visible en hojas posteriores con mayor especificidad. */
	overflow-x: clip !important;
	overflow-x: hidden !important; /* fallback para Safari < 16 */
}

/* === G3 — Menú hamburguesa: workaround =====================================
   El bug: este header de Bistrot NO tiene menú hamburguesa implementado, solo
   logo + botón Reservations. El cliente reportó "no se ven las rayas" porque
   espera verlas. La solución real es agregar el toggle en el editor de Elementor
   (no es bug CSS). Mientras tanto, este CSS no agrega nada pero documenta el
   punto: cualquier .elementor-menu-toggle que se implemente después se mostrará
   limpio.
   ============================================================================ */
@media (max-width: 1024px) {
	.elementor-menu-toggle:not([style*="display: none"]) {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}
}

/* === NEWSLETTER — "Templates" descentrado en mobile portrait =================
   Bug del cliente: en /newsletter/ la palabra "Templates" (h2, fuente script
   Italianno 65px) sale del viewport por la derecha en mobile portrait.

   Causa raíz: el widget abuelo (.elementor-element-9e5e6e0) tiene
   position:absolute con width:81px anclado a left:219px en mobile. El texto
   de 181px se desborda a right:400px (viewport 375). El contenedor flex
   padre es 375px con padding 11.25px, pero el absolute no respeta el flujo.

   Fix CSS defensivo: en mobile portrait, forzar el widget absoluto a relativo
   para que respete el padding del padre y el texto se centre. NO usamos
   !important en position para no romper el layout desktop.
   ============================================================================ */
@media (max-width: 767px) {
	.elementor-element-9e5e6e0,
	.elementor-9e5e6e0 {
		position: relative !important;
		left: 0 !important;
		width: 100% !important;
		max-width: calc(100% - 22.5px) !important;
	}
	.elementor-element-9e5e6e0 .elementor-widget-container,
	.elementor-9e5e6e0 .elementor-widget-container {
		width: 100% !important;
		margin-right: 0 !important;
	}
	.elementor-element-9e5e6e0 h2,
	.elementor-9e5e6e0 h2 {
		text-align: center !important;
		font-size: clamp(36px, 12vw, 65px) !important;
	}
}

/* === NEWSLETTER — "Join Our Newsletter" descentrado en mobile =================
   Bug del cliente: en /newsletter/ el card blanco "JOIN OUR NEWSLETTER" se ve
   pegado a la izquierda dentro del fondo granate.

   Causa raíz: el contenedor flex .elementor-element-59b2ecac tiene
   padding-left:100px y padding-right:100px hardcodeados en el editor.
   En desktop funciona, pero en mobile (375px) esos 200px de padding
   consumen casi todo el viewport y dejan al botón con espacio muy desigual
   visualmente.

   Fix CSS defensivo: en mobile, eliminar el padding lateral del contenedor
   flex y dejar que el botón respire. NO tocamos desktop.
   ============================================================================ */
@media (max-width: 767px) {
	.elementor-element-59b2ecac,
	.elementor-59b2ecac {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* === Header gap arriba del logo y Reservations en mobile =================
   Bug del cliente: en /contact/ (y resto de páginas) hay una franja
   vacía arriba del header en mobile portrait, entre el borde superior
   del viewport y el logo / icono hamburguesa.

   Causa raíz: el editor configuró padding-top:75px en el wrapper del
   icono hamburguesa (.elementor-element-3282716) y padding-top:65px
   en el wrapper del botón Reservations (.elementor-element-376ee3d).
   Esos paddings fueron pensados para desktop donde el header mide
   115px. En mobile, donde el header mide 90-115px, esos paddings
   empujan el contenido real 75px hacia abajo, creando un gap visible.

   Fix CSS defensivo: en mobile, eliminar esos paddings-top para que
   el icono y el botón queden pegados al borde superior.
   ============================================================================ */
@media (max-width: 767px) {
	header.WH__site-header .elementor-element-3282716,
	header.WH__site-header .elementor-3282716,
	header.WH__site-header .elementor-element-376ee3d,
	header.WH__site-header .elementor-376ee3d {
		padding-top: 0 !important;
	}
}

/* === Header desalineado verticalmente en mobile ===========================
   Bug del cliente: en mobile portrait, los tres elementos del header
   (icono hamburguesa, logo "BISTROT", botón Reservations) tienen
   posiciones verticales distintas: icono y botón pegados al top,
   logo con offset hardcodeado de -12px que lo deja a top:30.

   Causa raíz: el editor configuró cada hijo del header con
   align-self, top, padding-top y flex-direction distintos en
   lugar de usar un row flexbox simple con align-items:center.
   En desktop el layout funciona porque los SVGs y el botón tienen
   alturas concretas; en mobile se desincronizan.

   Fix CSS defensivo: en mobile, forzar al contenedor flex del header
   a alinear sus hijos verticalmente al centro, neutralizar los
   offsets hardcodeados (top, margin-top) y resetear los align-self
   conflictivos.
   ============================================================================ */
@media (max-width: 767px) {
	header.WH__site-header > .e-con,
	header.WH__site-header > .elementor-motion-effects-container > .e-con {
		align-items: center !important;
	}
	header.WH__site-header .elementor-element-3282716,
	header.WH__site-header .elementor-element-376ee3d,
	header.WH__site-header .elementor-element-d07c31a {
		top: auto !important;
		margin-top: 0 !important;
		align-self: center !important;
	}
	/* El icono de hamburguesa (50px) y el botón Reservations (~40px) son
	   más pequeños que el logo (~31px + texto). Forzamos su altura
	   mínima para que el row flexbox tenga referencia. */
	header.WH__site-header .elementor-element-3282716,
	header.WH__site-header .elementor-element-376ee3d {
		min-height: 40px !important;
	}
}

/* === Header demasiado alto en mobile =====================================
   Bug del cliente: en mobile portrait el header mide 115px cuando
   debería medir ~70px (lo razonable para un header mobile
   compacto con icono + logo + botón pequeño). El cliente reportó
   que la home tiene el header más grande que las otras páginas,
   aunque midiendo son iguales (90px en mi fix previo). Reduzco
   a 70px para que sea realmente compacto.

   Causa raíz: el header mobile tiene min-height o height hardcodeado
   a 115px en el editor (probablemente para alinear con el header
   desktop). El contenido real del row flexbox mide 64px.

   Fix CSS defensivo: en mobile, forzar la altura del header a 70px
   y ajustar el padding-top del main para que coincida. NO afecta
   desktop (selector con clase específica del template mobile).
   ============================================================================ */
@media (max-width: 767px) {
	header.WH__site-header.elementor-element-03cf72a,
	header.WH__site-header.elementor-element-5067ed6 {
		min-height: 70px !important;
		height: 70px !important;
	}
	/* El SVG del logo y los iconos internos tienen height fija de 31-50px.
	   Si el header es 70px, el contenido no se reduce, pero el row
	   flexbox tendrá padding interno cero para aprovechar el espacio. */
	header.WH__site-header .elementor-element-3282716,
	header.WH__site-header .elementor-element-d07c31a,
	header.WH__site-header .elementor-element-376ee3d {
		min-height: 0 !important;
	}
}

/* === Doble línea roja bajo el header en mobile =============================
   Bug del cliente: en mobile portrait aparecen DOS líneas rojas
   horizontales pegadas debajo del header. El cliente descubrió que
   esas líneas SON parte de la imagen del hero de /contact/ (id
   12a0ca08) — la imagen tiene un marco rojo decorativo en las 4
   esquinas, y al renderizarse con background-size: cover en mobile
   se ve completo (en desktop se corta naturalmente porque la imagen
   es más grande que el viewport).

   Solución propuesta por el cliente: hacer zoom al centro de la imagen
   en mobile para que el frame rojo quede recortado fuera del viewport
   y se vea un área más centrada de la foto.

   Fix CSS: en mobile, aumentar background-size y centrar la posición
   para enfocar el área central de la foto (mesa con sofá rojo),
   recortando el marco decorativo rojo.
   ============================================================================ */
@media (max-width: 767px) {
	/* Ocultar divisores decorativos dentro del header */
	header.WH__site-header .elementor-element-78a66722,
	header.WH__site-header .elementor-divider,
	header.WH__site-header .elementor-divider-separator {
		display: none !important;
	}
	/* El hero de /contact/ tiene la imagen pure-brasserie.png con un marco
	   decorativo rojo en las 4 esquinas. Recortamos 15px arriba y 15px
	   abajo usando margin-top negativo + overflow:hidden en el padre.
	   El header fixed (h=70) cubre naturalmente los 15px superiores.
	   Esto preserva el aspect ratio de la imagen SIN deformarla. */
	.elementor-23284 .elementor-element-12a0ca08 {
		margin-top: -15px !important;
		padding-top: 15px !important;
		background-position: 50% calc(50% - 8px) !important;
	}
	/* El contenedor padre del hero debe tener overflow hidden para que
	   el margin-top negativo no cause scroll. El hero widget ya es
	   el contenedor. */
}

/* Regla equivalente para /bistrot-on-the-terrace/ por si tiene el mismo
   hero con el marco rojo. */
@media (max-width: 767px) {
	.elementor-28101 .elementor-element-12a0ca08 {
		margin-top: -15px !important;
		padding-top: 15px !important;
		background-position: 50% calc(50% - 8px) !important;
	}
}

/* === Header tablet (1200-768) ==========================================
   Tres bugs reportados en el rango de tablet (768-1200):

   BUG 1: En 1200-1025 el header desktop está oculto (mal configurado
   por el editor con elementor-hidden-tablet-extra que aplica solo en
   ese rango), y se ve el header mobile con la hamburguesa. El cliente
   quiere ver el header desktop (con el logo Reservations más grande)
   en ese rango. Forzamos mostrar el desktop y ocultar el mobile.

   BUG 2: En 1200-768 el header desktop se ve más alto de lo necesario.
   El cliente quiere el alto aproximadamente igual al de la línea roja
   que marcó (≈80px en este rango). Forzamos min-height: 80px.

   BUG 3: El logo "RESERVATIONS" en el header mobile (que se ve en
   1200-1025) es muy pequeño y desalineado verticalmente vs los otros
   elementos. Forzamos tamaño y alineación.

   BUG 4: Firefox no mostraba la franja rosa del header. Eso era porque
   mi overflow-x: clip estaba en <html>, lo que rompía position:sticky
   en Firefox. Lo moví a <body> arriba en el bloque G1.

   NOTA IMPORTANTE: el header que se ve en 1200-768 es .elementor-element-4cf0620a
   (con clase elementor-hidden-desktop), NO 6a6045bb como en mobile.
   El editor configuró dos versiones del header y la que aplica en tablet
   es 4cf0620a. Por eso mi selector de media query debe apuntar a 4cf0620a
   en este rango, no a 6a6045bb.
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1200px) {
	/* Forzar header tablet (4cf0620a) visible y mobile oculto en este rango.
	   El subagente anterior había agregado reglas que ocultaban TODOS los
	   headers en este rango, dejando el HEADER padre vacío con bg cream.
	   Ahora dejamos que las clases hidden de Elementor decidan: 6a6045bb
	   tiene elementor-hidden-mobile y elementor-hidden-tablet (oculto
	   en ≤1024), 03cf72a tiene elementor-hidden-desktop (oculto en ≥1201),
	   5067ed6 está oculto en todos. El header que se ve en 768-1024
	   es 03cf72a (mobile). 6a6045bb se ve solo en ≥1201 (desktop). */
	/* El header mobile (03cf72a) se ve en 768-1200 según las hidden
	   classes de Elementor. No forzar display. */
	/* Ajustar la altura del HEADER padre para que no quede 150px vacío
	   cuando los headers internos están ocultos. Aplicamos solo al
	   HEADER padre del sitio (26654) y a la versión desktop (6a6045bb). */
	header.elementor-26654 {
		min-height: 0 !important;
		height: auto !important;
	}
	/* Logo Bistrot y botón Reservations en el header mobile (que se ve
	   en 768-1200) más grandes y alineados verticalmente. */
	header.WH__site-header.elementor-element-03cf72a img[src*="Bistrot-Red-Logo"] {
		width: clamp(140px, 14vw, 180px) !important;
		max-width: none !important;
		height: auto !important;
	}
	header.WH__site-header.elementor-element-03cf72a img[src*="button_reservation"] {
		width: clamp(120px, 11vw, 150px) !important;
		max-width: none !important;
		height: auto !important;
	}
	/* Ajustar la altura del header mobile (03cf72a) en este rango
	   para que no quede 115px. Reducimos a 70px. */
	header.WH__site-header.elementor-element-03cf72a {
		min-height: 70px !important;
		height: 70px !important;
	}
	/* Alineación vertical centrada dentro del e-con-inner. */
	header.WH__site-header.elementor-element-03cf72a > .e-con-inner,
	header.WH__site-header.elementor-element-03cf72a > .elementor-motion-effects-container > .e-con-inner {
		align-items: center !important;
	}
	/* Cada hijo del e-con-inner tiene --align-self: flex-start heredado
	   del editor, lo que sobreescribe el align-items del padre.
	   Forzamos align-self: center en cada uno para que los 3 elementos
	   (hamburguesa, BISTROT, Reservations) queden centrados verticalmente
	   al mismo eje. */
	header.WH__site-header.elementor-element-03cf72a .elementor-element-3282716,
	header.WH__site-header.elementor-element-03cf72a .elementor-element-376ee3d,
	header.WH__site-header.elementor-element-03cf72a .elementor-element-d07c31a {
		align-self: center !important;
	}
	/* FIX NUCLEAR DEFINITIVO: posicionamos los 3 hijos con
	   position:absolute + top:50% + transform:translateY(-50%) para
	   que el centro de cada elemento quede matemáticamente en y=35
	   (centro de un header de 70px). NO depende de align-self, del
	   tamaño del widget ni de los SVGs/imágenes internas. El
	   e-con-inner tiene position:static, así que los absolutos se
	   anclan al e-con-inner. */
	header.WH__site-header.elementor-element-03cf72a > .e-con-inner {
		position: relative !important;
	}
	header.WH__site-header.elementor-element-03cf72a > .e-con-inner > .elementor-element-3282716,
	header.WH__site-header.elementor-element-03cf72a > .e-con-inner > .elementor-element-d07c31a,
	header.WH__site-header.elementor-element-03cf72a > .e-con-inner > .elementor-element-376ee3d {
		position: absolute !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		left: auto !important;
		right: auto !important;
		margin: 0 !important;
	}
	/* Posicionamos cada uno en su slot del row:
	   - 3282716 (hamburguesa): izquierda
	   - d07c31a (BISTROT): centro
	   - 376ee3d (Reservations): derecha
	   El e-con-inner tiene w=500 (su max-width interno), centrado
	   con margin:auto. Distribuimos dentro de ese ancho. */
	header.WH__site-header.elementor-element-03cf72a > .e-con-inner > .elementor-element-3282716 {
		left: 0 !important;
	}
	header.WH__site-header.elementor-element-03cf72a > .e-con-inner > .elementor-element-d07c31a {
		left: 45% !important;
		transform: translate(-50%, -50%) !important;
	}
	header.WH__site-header.elementor-element-03cf72a > .e-con-inner > .elementor-element-376ee3d {
		right: 0 !important;
	}
	/* Resetear altura del widget Reservations para que el contenido
	   interno (a con padding 15px + img) no sobresalga. */
	header.WH__site-header.elementor-element-03cf72a .elementor-element-376ee3d {
		height: 60px !important;
	}
	header.WH__site-header.elementor-element-03cf72a .elementor-element-376ee3d > .elementor-widget-container {
		top: 0 !important;
		margin-top: 0 !important;
		padding: 0 !important;
	}
	/* FIX: el theme aplica margin: 80px 0 0 al .elementor-widget-container
	   interno del widget Reservations (db9cd98 > .elementor-widget-container),
	   lo que hace que el widget mida 140px y sobresalga 35px arriba y
	   abajo del padre (que está centrado a y=35). Eso pone la imagen
	   Reservations a bottom=105 en un header de 70px → desorbitada.
	   Reseteamos el margin-top del widget-container hijo real. */
	header.WH__site-header.elementor-element-03cf72a .elementor-element-db9cd98 > .elementor-widget-container {
		margin: 0 !important;
	}
	header.WH__site-header.elementor-element-03cf72a .elementor-element-db9cd98 {
		height: 60px !important;
		min-height: 0 !important;
	}
}

/* === HERO tablet (1200-768) — textos superpuestos =====================
   El cliente ocultó dos widgets de heading desde el editor de Elementor
   pero siguen visibles en el rango 768-1200. Los forzamos display:none
   via CSS para que el hero quede limpio.

   Widget 1: <h2>Inspired French</h2>
   Widget 2: <h1>French-Inspired Bistrot in London</h1>

   Ambos son widgets "heading.default" con motion_fx (fadeIn + scale).
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1200px) {
	.elementor-element-f199075,
	.elementor-element-59b698a {
		display: none !important;
	}
}

/* === Widgets con elementor-hidden-tablet que NO se ocultan en 768-880 ===
   El bug: Elementor define `.elementor .elementor-hidden-tablet { display:none }`
   SOLO en `@media (min-width: 881px) and (max-width: 1024px)`. En el rango
   768-880 (tablets pequeñas / iPad portrait 768) esa regla no matchea y
   los widgets marcados como "ocultos en tablet" se renderizan con
   `display:flex` heredado del editor.

   Decisión del cliente (2026-06-09): NO se ocultan widgets en el mu-plugin.
   El cliente revisará caso por caso desde el editor de Elementor si
   alguno debe permanecer oculto en el rango 768-880. Solo se mantienen
   ocultos los duplicados del hero que ya estaban bloqueados antes
   (f199075 y 59b698a, ver bloque "HERO tablet" arriba).
   ============================================================================ */

/* === Clase utilitaria .ocultar-en-tablet ==================================
   El cliente la aplica manualmente desde el editor de Elementor a cualquier
   widget que quiera ocultar en el rango 768-1200 (tablet) pero que
   Elementor no logra ocultar con sus clases elementor-hidden-tablet
   nativas (que solo cubren 881-1024). El cliente la usará como workaround
   y, si funciona, la replicará en mobile/desktop según necesidad.

   Regla con `!important` y scope dentro de la media query de tablet para
   que la ocultación aplique solo en ese rango de viewport.
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1200px) {
	.ocultar-en-tablet {
		display: none !important;
	}
}

/* === WebKit mobile vertical (≤767px) — motion-fx + lazy-load ==========
   El bug: Elementor Pro aplica motion-fx (fadeIn, flipX, translateX) a
   widgets decorativos (íconos de chef hat, wine bottle, bell cloche,
   magnifying glass, texto "Premium"). En WebKit, el Intersection Observer
   que dispara esas animaciones no se activa correctamente, dejando los
   elementos en opacity:0 / transform:translateX(100%) / visibility:hidden.

   Además, las <img> con `loading="lazy"` que están en estos widgets
   tampoco cargan (naturalW:0, complete:false). El fix CSS fuerza
   visibilidad, y el fix JS (inline en wp_footer) cambia loading a eager.

   Afecta solo mobile vertical porque es donde los widgets entran al
   viewport por scroll (en desktop y tablet ya están visibles al cargar).

   Selectores por data-id (clase .elementor-element-XXX):
   - 69b4a95  "Premium" texto (visibility:hidden en WebKit)
   - a942dc3  POT.png "Make your Reservation" (fadeIn, hidden)
   - abc04d6  POT.png duplicado tablet (fadeIn, hidden)
   - a1526f7  our_menus-300x300.png "Our Menus" (fadeIn+flipX, hidden)
   - 8b88bbd  magnifying_glass-1.png "Premium Location" (fadeIn, hidden)
   - 75738b2  FROMAGE-VIN "Perfect Pour" (duplicado, hidden)
   - 49c4335  FROMAGE-VIN duplicado tablet (hidden)
   - f01bd9e  map_mobile_portrait_transparent.png contenedor (h=0)
   - 64abd790 "Premium" texto visible (overflow, parentW=51, text=89)
   ============================================================================ */
@media (max-width: 767px) {
	/* Forzar visibilidad y resetear transforms en widgets con motion-fx */
	.elementor-element-69b4a95,
	.elementor-element-a942dc3,
	.elementor-element-abc04d6,
	.elementor-element-a1526f7,
	.elementor-element-8b88bbd,
	.elementor-element-75738b2,
	.elementor-element-49c4335 {
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}
	/* Fix "Premium" texto overflow: el contenedor padre es 51px pero
	   el texto mide 89px → se corta. Forzamos ancho mínimo. */
	.elementor-element-64abd790 {
		width: auto !important;
		min-width: 89px !important;
		max-width: none !important;
		overflow: visible !important;
		white-space: nowrap !important;
	}
	/* Fix mapa mobile: el contenedor f01bd9e tiene h=0 porque la imagen
	   lazy no cargó. Forzamos altura mínima para que reserve espacio. */
	.elementor-element-f01bd9e {
		min-height: 200px !important;
	}
	/* Las imágenes lazy en estos widgets: forzar display:block para
	   que WebKit no las considere "in viewport" y las descarte.
	   Combinado con el JS inline que cambia loading a eager. */
	.elementor-element-a942dc3 img,
	.elementor-element-a1526f7 img,
	.elementor-element-8b88bbd img,
	.elementor-element-f01bd9e img,
	.elementor-element-cd1dd45 img {
		loading: eager !important;
	}
}

/* === WebKit mobile landscape (481-812px) — ocultar duplicado ===========
   El bug: en WebKit mobile landscape, varios widgets del section "Our
   Menus" se renderizan DUPLICADOS. En Chrome los widgets se ocultan
   correctamente via las clases elementor-hidden-* nativas, pero en
   WebKit la animación fadeIn + el uso de `display: var(--display)` en
   .e-con (que tiene mayor specificity que .elementor-hidden) hacen
   que los duplicados aparezcan dos veces.

   Widgets afectados (todos parte de la sección "Our Menus"):
   - 8545c37  Texto "In our kitchen..." (motion-fx, sin hidden class)
   - ba79ffb  Section container (elementor-hidden-desktop, elementor-hidden-tablet)
   - 601d3ab  Columna izquierda (elementor-hidden-desktop)
   - 6d6d4d6  Imagen bell cloche (sin hidden class, duplicada)
   - 0ae7b03  Columna derecha con Food Menu (sin hidden class, duplicada)
   - 0d5d258  Heading "Our" (duplicado)
   - 070f354  Heading "Menus" (duplicado)
   ============================================================================ */
@media (min-width: 481px) and (max-width: 812px) {
	.elementor-element-8545c37,
	.elementor-element-ba79ffb,
	.elementor-element-601d3ab,
	.elementor-element-6d6d4d6,
	.elementor-element-0ae7b03,
	.elementor-element-0d5d258,
	.elementor-element-070f354 {
		display: none !important;
	}
	/* Sección "Premium Location" — ocultar el DUPLICADO en WebKit mobile
	   landscape. El editor configuró dos versiones: la correcta (con
	   motion-fx fadeIn, class elementor-hidden-mobile) y la duplicada
	   (con class elementor-hidden-desktop/tablet_extra/tablet). En Chrome
	   a 812px el duplicado se oculta por las hidden classes pero en
	   WebKit el `display: var(--display)` (CSS custom property de
	   Elementor Pro 4.x) tiene mayor specificity que .elementor-hidden,
	   así que aparece. Hay que forzar display:none al conjunto duplicado:
	   50f27312 (section), 64abd790 ("Premium" pegado), 2174ae9d
	   ("Location" pegado), 20babba6 (magnifying glass 300x300), b73d158
	   (párrafo "Perfectly placed..."). */
	.elementor-element-50f27312,
	.elementor-element-64abd790,
	.elementor-element-2174ae9d,
	.elementor-element-20babba6,
	.elementor-element-b73d158 {
		display: none !important;
	}
	/* Mapa mobile portrait duplicado (f01bd9e). El editor usó
	   elementor-hidden-tablet (881-1024) que NO aplica a 812px, así que
	   el contenedor aparece en mobile landscape. Es un hotspot widget
	   con map_mobile_portrait_transparent.png que en WebKit no carga
	   y deja una franja superior con labels del mapa. El correcto es
	   8d611ea (Map-01Edits-01-1-scaled.png, elementor-hidden-mobile). */
	.elementor-element-f01bd9e {
		display: none !important;
	}
}

/* === Tablet portrait (768-880px) — ocultar duplicado Premium Location
   Mismo bug que en WebKit mobile landscape pero aplica a Chrome y WebKit
   en este rango. La clase elementor-hidden-tablet solo cubre 881-1024,
   por lo que en 768-880 el conjunto B (con position:absolute y
   elementor-hidden-desktop) se ve encima del conjunto A correcto.
   El conjunto A (motion-fx fadeIn, elementor-hidden-mobile) es el que
   debe quedar visible.

   También ocultamos f01bd9e (hotspot widget con map_mobile_portrait_-
   transparent.png) por el mismo motivo: su elementor-hidden-tablet no
   aplica a 768-820 y aparece como un mapa duplicado grande ENCIMA del
   mapa correcto (8d611ea con Map-01Edits-01-1-scaled.png). En Safari ya
   lo ocultamos en 481-812. En Chrome también se ve a 820 (iPad Air
   portrait) porque la hidden-tablet solo cubre 881-1024.
   ============================================================================ */
@media (min-width: 768px) and (max-width: 880px) {
	.elementor-element-50f27312,
	.elementor-element-64abd790,
	.elementor-element-2174ae9d,
	.elementor-element-20babba6,
	.elementor-element-b73d158,
	.elementor-element-f01bd9e {
		display: none !important;
	}
}

/* === /contact/ (página 23284) — padding-top fix en mobile landscape
   NOTA: este fix está en el INLINE CSS del mu-plugin (bistrot-fixes.php)
   en lugar de aquí, porque el theme inyecta su regla de padding-top
   en un <style> inline en el HTML, y para ganarla necesitamos estar
   también en un <style> inline posterior (wp_head priority 999).
   Ver bloque inline al final del archivo. El header global NO se toca. */

/* === /bistrot-on-the-terrace/ — slideshow .noseve (data-id 8104e0c)
   El contenedor .noseve es un slideshow background de Elementor con 5
   imágenes (bistrot_terrace_london-{2,5,6,7}.png y alfresco_setting.png).
   Por bug del editor, está envuelto en un <em> con width: 0, así que
   el slideshow se renderiza con width 0 y no se ve nada en NINGUNA
   resolución. Forzamos width 50vw con !important para que ocupe la
   mitad del ancho del viewport en todas las resoluciones. También
   forzamos aspect-ratio 16:9 y min-height para que el swiper y los
   slides tengan altura visible (sin esto quedan en height: 0 y el
   slideshow es invisible aunque tenga background-image). El slideshow
   usa background-image en divs hijos, no <img>, por eso no se ve en
   querySelectorAll('img'). */
body.elementor-page-28101 .noseve {
	width: 50vw !important;
	max-width: none !important;
	flex: 0 0 50vw !important;
	min-width: 50vw !important;
	position: relative !important;
	aspect-ratio: 16 / 9 !important;
	min-height: 400px !important;
}
body.elementor-page-28101 .noseve .elementor-background-slideshow,
body.elementor-page-28101 .noseve .swiper,
body.elementor-page-28101 .noseve .swiper-wrapper,
body.elementor-page-28101 .noseve .swiper-slide {
	width: 100% !important;
	height: 100% !important;
	min-height: 400px !important;
}

/* Mobile portrait (≤767px) y tablet portrait (768-880): el slideshow
   .noseve debe ocupar 100% del ancho del viewport. Por defecto la regla
   global le da 50vw (split con texto a la izquierda en desktop/landscape). */
@media (max-width: 880px) {
	body.elementor-page-28101 .noseve {
		width: 100vw !important;
		max-width: none !important;
		flex: 0 0 100vw !important;
		min-width: 100vw !important;
	}
}

/* Header de /bistrot-on-the-terrace/ (data-id 4cf0620a) en tablet portrait
   (768-880): el editor configuró max-width: min(100%, 500px) que lo limita
   a 500px de ancho. En tablet portrait queremos que ocupe todo el ancho.
   Lo mismo aplica al header inner 3c830ae3 y a cualquier widget con
   max-width heredado. Forzamos 100% en este rango. */
@media (min-width: 768px) and (max-width: 880px) {
	body.elementor-page-28101 header.elementor-element-4cf0620a,
	body.elementor-page-28101 .elementor-element-3c830ae3,
	body.elementor-page-28101 .elementor-element-a570c8a,
	body.elementor-page-28101 .elementor-element-52e5764,
	body.elementor-page-28101 .elementor-element-47aa2d40 {
		max-width: 100% !important;
		width: 100% !important;
		min-width: 0 !important;
	}
	/* Centrar el bloque verde con texto "TABLES ON THE TERRACE" + botón
	   "Reserve Online" en tablet portrait. El cliente reorganizó la
	   estructura: imagen arriba, bloque de texto abajo. El contenedor
	   padre 8657d90 es flex row. Forzamos que sea flex column y que los
	   hijos se centren horizontalmente con align-items: center. */
	body.elementor-page-28101 .elementor-element-8657d90 {
		flex-direction: column !important;
		align-items: center !important;
	}
	/* Forzamos que los hijos tengan width: 100% para que el centrado
	   funcione (sin esto, los hijos con width 0 no se centran). */
	body.elementor-page-28101 .elementor-element-a97dadc,
	body.elementor-page-28101 .elementor-element-5ad469a3,
	body.elementor-page-28101 .elementor-element-5aca324,
	body.elementor-page-28101 .elementor-element-882f77a {
		width: 100% !important;
		min-width: 100% !important;
		flex: 0 0 100% !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}
	/* Centrar el texto dentro de los widgets text-editor. */
	body.elementor-page-28101 .elementor-element-02273ed,
	body.elementor-page-28101 .elementor-element-1a4b802,
	body.elementor-page-28101 .elementor-element-830f401,
	body.elementor-page-28101 .elementor-element-38a819c,
	body.elementor-page-28101 .elementor-element-22d19d52,
	body.elementor-page-28101 .elementor-element-fddf21a,
	body.elementor-page-28101 .elementor-element-30dd06d,
	body.elementor-page-28101 .elementor-element-ee841fb {
		text-align: center !important;
	}
	/* El slideshow .noseve también debe estar centrado horizontalmente. */
	body.elementor-page-28101 .elementor-element-8104e0c {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
/* /bistrot-on-the-terrace/ — agregar espacio entre el botón "Join our
   newsletter" (widget 477f241) y el footer para que no quede pegado. */
body.elementor-page-28101 .elementor-element-477f241 {
	margin-bottom: 25px !important;
}

/* === Home (página 21443) — video del hero en todas las resoluciones.
   El bug: en Chrome el video del hero (data-id aee7ab3, src video-bistrot.mp4)
   no se reproduce ni se ve el primer frame en varias resoluciones.
   El browser aborta la request con net::ERR_ABORTED y readyState queda en
   1. Forzamos dimensiones mínimas al contenedor y al video para que
   Chrome haga el decode inicial. Aplica a TODAS las resoluciones. */
body.elementor-page-21443 .elementor-element-aee7ab3,
body.elementor-page-21443 .elementor-element-aee7ab3 .elementor-background-video-container {
	min-height: 100vh !important;
	min-width: 100vw !important;
}
body.elementor-page-21443 video.elementor-background-video-hosted {
	min-width: 100vw !important;
	min-height: 56.25vw !important; /* 16:9 ratio */
}