/* La búsqueda a toda página del buscador de Dafne (dafnesearch), como la maqueta A aprobada
   (busqueda-a.css), con DAFNESEARCH_MODO=capa. Todo lleva el prefijo ba-.
   Las fichas son la tarjeta del diseño de Joaquín, que pinta el módulo (fichas.tpl), en la rejilla
   de siempre (4 columnas desde 1280 px, 3 por debajo y 2 en el móvil). Las letras de la capa son
   las del diseño de Joaquín (docs/diseno-joaquin/): Inter y Lexend, alojadas en el módulo
   (views/fonts, con su licencia OFL) y no en Google, que es una farmacia y no se manda la visita a
   terceros; solo las piden los bloques de la capa, así que el resto de la tienda no las carga.
   En el ordenador la capa ocupa toda la ventana con su barra (ordenador-fenvi.html): el logo, la caja
   del tema (busqueda.js la lleva a la barra), «Fechar» y la cesta. */
@font-face { font-family: "Dafne Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Dafne Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Dafne Lexend"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/lexend-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Dafne Lexend"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/lexend-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Los colores son los del diseño de Joaquín, en variables de la capa: así cada tienda puede tener
   los suyos (la farmacia, tienda 1, sus verdes, como en la ventanita: .dfs-tema-farma de capa.css).
   busqueda.js le pone ba-farmacia a la capa en la farmacia; la cabecera de la hoja del móvil (el
   formulario del tema, fuera de la capa) las lleva también, con ba-farmacia (busqueda-movil.js). */
.ba-capa, .ba-velo, .ba-hoja-form {
  --ba-fondo: #f5f7f3;            /* el fondo de la capa */
  --ba-boton: #2e6b3a;            /* el verde: botones, la marca de la ficha, casillas */
  --ba-boton-oscuro: #1e3b2a;     /* el verde oscuro: el logo, la cesta y al pasar por un botón */
  --ba-tinta: #14231a; --ba-texto: #14231a; --ba-gris: #4c5a50; --ba-gris-2: #566259; --ba-foco: #14231a;
  --ba-linea: #dde4da;            /* el borde de las tarjetas y de la cabecera */
  --ba-linea-suave: #e6ece3;      /* las rayas entre grupos */
  --ba-borde: #c5d0c2;            /* el de las cajas y los chips */
  --ba-chip-fondo: #eaf1e7;       /* el verde claro de los chips de las categorías del móvil y de lo puesto */
  --ba-insignia: #c2410c; --ba-promo: #8a3a0c; --ba-promo-fondo: #fff0e2;   /* «-15%» y su píldora */
  --ba-halo: rgba(46, 107, 58, .14);   /* el halo de la caja de la barra */
  --ba-ancho: 1360px;                  /* lo de dentro de la barra y de los resultados, con 40 px a los lados */
  --ba-barra-alto: 88px;
  /* Cada familia es un fichero variable por subconjunto (latin y latin-ext): Inter de 400 a 700 y
     Lexend (los precios) de 500 a 700. Con «Dafne» delante no se cruzan con una Inter del tema. */
  --ba-sans: "Dafne Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ba-titulos: "Dafne Lexend", "Dafne Inter", system-ui, sans-serif;
}
.ba-capa.ba-farmacia, .ba-hoja-form.ba-farmacia { --ba-boton: #1b8749; --ba-boton-oscuro: #13773d; --ba-halo: rgba(27, 135, 73, .16); }

html.ba-abierta, html.ba-abierta body { overflow: hidden; }

/* ───────────── La capa ───────────── */
/* Toda la ventana, desde arriba, sobre la cabecera de la tienda: la barra y, debajo, lo que se desplaza.
   Por debajo del aviso de cesta del tema (#layer_cart, 99) y del desplegable de la cesta (100). Con la
   caja vacía (ba-compacta) solo baja lo que mide la franja, sobre el velo, que oscurece lo demás: sobre una
   página blanca, el gris de ordenador-abrir.html (#b9c2bb). */
.ba-velo { position: fixed; z-index: 40; left: 0; right: 0; top: 0; bottom: 0; background: rgba(20, 35, 26, .3); }
.ba-capa { position: fixed; z-index: 44; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; background: var(--ba-fondo); text-align: left; }
.ba-capa[hidden], .ba-velo[hidden], .ba-capa [hidden] { display: none !important; }
.ba-capa.ba-compacta { bottom: auto; max-height: 100vh; background: #fff; box-shadow: 0 28px 48px rgba(20, 35, 26, .16); }
.ba-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* La capa pone ella su desplazamiento al repintar (busqueda.js, desplazarA): sin el anclaje del
   navegador, que lo movería otra vez al llegar las fotos de encima (las del tema no dicen su alto). */
.ba-scroll { overflow-anchor: none; }
.ba-compacta .ba-scroll { flex: 0 1 auto; }
.ba-ancho { box-sizing: border-box; max-width: var(--ba-ancho); margin: 0 auto; padding: 0 40px; }
/* La línea de carga, justo bajo la barra y sin ocupar sitio (encima de lo que se desplaza). */
.ba-carga { position: relative; z-index: 9; flex: 0 0 3px; height: 3px; margin-bottom: -3px; overflow: hidden; background: var(--ba-linea); }
.ba-carga::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: var(--ba-boton); animation: ba-carga 1.1s linear infinite; }
@keyframes ba-carga { to { left: 100%; } }
.ba-capa :focus-visible { outline: 2px solid var(--ba-foco); outline-offset: 2px; }
.ba-solo-lector { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Las letras de la capa (las del diseño), bloque a bloque. */
.ba-barra, .ba-arriba, .ba-vacia, .ba-filtros, .ba-cab, .ba-puestos, .ba-ayuda, .ba-mas, .ba-cero, .ba-ir, .ba-correccion, .ba-banner { color: var(--ba-texto); font: 14px/1.42857 var(--ba-sans); }
/* El tema les pone a h1-h5 su letra con !important («Open Sans»): los títulos de la capa, con las del
   diseño (Inter; el de los resultados, el del sin resultados y «Os mais vendidos», Lexend). */
.ba-capa h1, .ba-capa h2, .ba-capa h3, .ba-capa h4, .ba-capa h5 { font-family: var(--ba-sans) !important; }
.ba-capa .ba-titulo, .ba-capa .ba-cero-tit, .ba-capa .ba-vendidos .ba-bloque-tit { font-family: var(--ba-titulos) !important; }
.ba-capa ul.ba-sugs, .ba-capa ul.ba-chips, .ba-capa ul.ba-recientes { margin: 0; padding: 0; list-style: none; }
.ba-capa ul.ba-sugs > li, .ba-capa ul.ba-chips > li { margin: 0; padding: 0; }

/* ───────────── La barra (ordenador-fenvi.html) ───────────── */
/* Blanca, de 88 px, con su raya debajo: el logo (220 px), en medio la caja (hasta 760 px) con «Fechar» a
   su derecha, y la cesta (220 px, a la derecha). En la hoja del móvil no sale (su cabecera es la caja
   del móvil). */
.ba-barra { position: relative; z-index: 8; flex: 0 0 auto; background: #fff; border-bottom: 1px solid var(--ba-linea); }
html.ba-hoja-abierta .ba-barra { display: none; }
.ba-barra-fila { display: flex; align-items: center; gap: 32px; box-sizing: border-box; max-width: var(--ba-ancho); height: var(--ba-barra-alto); margin: 0 auto; padding: 0 40px; }
.ba-capa .ba-logo { display: flex; flex: 0 0 220px; align-items: center; min-width: 0; height: 100%; text-decoration: none; }
.ba-capa .ba-logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 64px; }
/* El logo de la cabecera de la tienda: su imagen y, a 5 px como en el tema, su nombre, una línea debajo de
   otra, con las medidas, la letra y el color del tema (busqueda.js los copia de #header_logo: el alto de
   la imagen y --ba-logo-letra, con el tamaño que tenga la cabecera en ese ancho). */
.ba-capa .ba-logo-con-nombre { flex-basis: auto; gap: 5px; }
.ba-capa .ba-logo-con-nombre img { max-height: none; }
.ba-capa .ba-logo-nombre { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.ba-capa .ba-logo-nombre > span { font-size: var(--ba-logo-letra, 24px); }
.ba-capa .ba-logo:hover, .ba-capa .ba-logo:focus { text-decoration: none; }
.ba-barra-centro { display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 16px; min-width: 0; }
.ba-barra-caja { flex: 1 1 0; min-width: 0; max-width: 760px; }
.ba-barra-cesta { display: flex; flex: 0 0 220px; justify-content: flex-end; min-width: 0; }
/* El formulario del tema, ya en la barra: sin lo que el tema le pone en la cabecera. La caja: 52 px,
   borde verde de 2 px, radio de 14 y el halo; la lupa dentro, a la izquierda (busca, como Intro: se
   pulsa en sus 44 × 44 px), y «×» a la derecha, solo con texto. La lupa del tema no se ve (sigue ahí
   para Intro y para los lectores). Fuera de la barra, ni la lupa ni «×». */
.ba-caja-lupa, .ba-caja-borrar { display: none; }
.ba-barra-caja form { position: relative; display: block; float: none; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; font-size: 16px; }
.ba-barra .ba-caja { display: block; float: none; box-sizing: border-box; width: 100%; max-width: none; height: 52px; margin: 0; padding: 0 52px 0 48px; border: 2px solid var(--ba-boton); border-radius: 14px; background: #fff; box-shadow: 0 0 0 4px var(--ba-halo); color: var(--ba-tinta); font: 500 16px/normal var(--ba-sans); outline: none; transition: none; -webkit-appearance: none; appearance: none; }
.ba-barra .ba-caja:focus { border-color: var(--ba-boton); box-shadow: 0 0 0 4px var(--ba-halo); outline: none; }
.ba-barra .ba-caja::placeholder { color: var(--ba-gris); font-weight: 400; opacity: 1; }
.ba-barra .ba-caja-lupa { position: absolute; top: 4px; left: 4px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--ba-boton); cursor: pointer; }
.ba-barra .ba-caja-borrar { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ba-gris); cursor: pointer; }
.ba-barra .ba-caja-borrar svg { width: 18px; height: 18px; }
.ba-barra .ba-caja-borrar:hover { background: var(--ba-fondo); color: var(--ba-tinta); }
.ba-barra .ba-caja:placeholder-shown ~ .ba-caja-borrar { display: none; }
.ba-barra-caja [type="submit"] { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; }
/* «Fechar»: la cruz y el texto, de 15 px, sin fondo. */
.ba-capa .ba-cerrar { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ba-tinta); font: 500 15px/normal var(--ba-sans); letter-spacing: normal; text-transform: none; white-space: nowrap; cursor: pointer; }
.ba-cerrar svg { width: 20px; height: 20px; }
.ba-cerrar:hover span { text-decoration: underline; text-underline-offset: 2px; }
/* La cesta: verde oscuro, de 48 px y radio de 12, con el carro y «N produtos». El número del tema, que
   cambia su carrito, va escondido (busqueda.js pone el texto). */
.ba-capa .ba-boton-cesta { display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: 48px; padding: 0 18px; border-radius: 12px; background: var(--ba-boton-oscuro); color: #fff; font: 600 15px/normal var(--ba-sans); text-decoration: none; white-space: nowrap; }
.ba-capa .ba-boton-cesta:hover, .ba-capa .ba-boton-cesta:focus { background: var(--ba-tinta); color: #fff; text-decoration: none; }
.ba-capa .ba-boton-cesta svg { flex: 0 0 auto; }
.ba-boton-cesta-n { display: none; }

/* Arriba de los resultados: las búsquedas sugeridas en chips (sin ninguna, la fila no sale) */
.ba-arriba-fila { display: flex; align-items: center; padding-top: 20px; }
.ba-arriba-vacia { display: none; }
.ba-capa .ba-sugs { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 8px; min-width: 0; }
/* Los chips (sugerencias, «Queria dizer…?», lo más buscado): como las marcas del diseño al abrir. */
.ba-capa .ba-chip { display: inline-block; box-sizing: border-box; height: 40px; margin: 0; padding: 0 16px; border: 1px solid var(--ba-borde); border-radius: 20px; background: #fff; color: var(--ba-tinta); font: 500 14px/38px var(--ba-sans); white-space: nowrap; text-decoration: none; text-transform: none; letter-spacing: normal; vertical-align: middle; cursor: pointer; }
.ba-chip b { font-weight: 700; }
.ba-capa .ba-chip:hover { border-color: var(--ba-boton); background: #fff; color: var(--ba-tinta); }

/* Cuerpo: la columna de filtros a la izquierda (280 px) y los resultados, a 32 px (sin ningún grupo de
   filtros, sin columna: los resultados a todo el ancho) */
.ba-cuerpo { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 32px; row-gap: 0; padding-top: 28px; padding-bottom: 48px; }
.ba-arriba:not(.ba-arriba-vacia) + .ba-cuerpo { padding-top: 24px; }
.ba-cuerpo.ba-sin-filtros { grid-template-columns: minmax(0, 1fr); }
.ba-principal { min-width: 0; }
/* Desde 992 px, como en el diseño, «N resultados para «q»» y «Ordenar por» (con «Ir para …» y la
   corrección encima) van a todo el ancho, sobre la columna y los resultados: .ba-principal se deshace
   (display: contents) y sus piezas pasan a la rejilla de .ba-cuerpo, en este orden: las de arriba, a
   todo el ancho; la columna, a la izquierda desde la fila siguiente; lo demás, a la derecha, una fila
   cada una. La columna cruza 12 filas y la 12.ª, flexible (grid-auto-rows), va detrás de todo lo de la
   derecha: lo que la columna mida de más lo pone esa fila, debajo, sin abrir huecos entre las piezas
   de la derecha. */
@media (min-width: 992px) {
  .ba-cuerpo:not(.ba-sin-filtros) { grid-auto-rows: auto auto auto auto auto auto auto auto auto auto auto 1fr; }
  .ba-cuerpo:not(.ba-sin-filtros) > .ba-principal { display: contents; }
  .ba-cuerpo:not(.ba-sin-filtros) > .ba-principal > * { grid-column: 2; order: 1; min-width: 0; }
  .ba-cuerpo:not(.ba-sin-filtros) > .ba-principal > .ba-ir { grid-column: 1 / -1; order: -3; }
  .ba-cuerpo:not(.ba-sin-filtros) > .ba-principal > .ba-correccion { grid-column: 1 / -1; order: -2; }
  .ba-cuerpo:not(.ba-sin-filtros) > .ba-principal > .ba-cab { grid-column: 1 / -1; order: -1; }
  .ba-cuerpo:not(.ba-sin-filtros) > .ba-filtros { grid-column: 1; grid-row: span 12; order: 0; }
}

/* La columna de filtros (sus grupos los pinta busqueda-filtros.js): una tarjeta blanca con borde y
   radio de 16, que se queda a la vista al bajar (y se desplaza ella si no cabe). Su cabecera («Filtrar»
   y la X) es la de la hoja de «Filtros» (hasta 991 px, más abajo); en la columna solo la oyen los
   lectores. */
.ba-filtros { position: sticky; top: 24px; align-self: start; box-sizing: border-box; max-height: calc(100vh - var(--ba-barra-alto) - 48px); overflow-y: auto; padding: 8px 20px; border: 1px solid var(--ba-linea); border-radius: 16px; background: #fff; }
.ba-filtros-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 11px 16px; border-bottom: 1px solid #e1e1e1; background: #fff; color: #222; }
.ba-capa .ba-filtros-tit { margin: 0; padding: 0; color: #222; font: 700 17px/1.3 var(--ba-sans); letter-spacing: normal; text-transform: none; }
@media (min-width: 992px) {
  .ba-filtros-cab { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
}
/* Cada grupo, un fieldset con su legend (sin lo que les pone el tema: el legend de 21 px con raya
   de Bootstrap, la etiqueta en línea, la casilla con margen y el verde oscuro de global.css), con una
   raya debajo. */
.ba-capa .ba-grupo { min-width: 0; margin: 0; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--ba-linea-suave); }
/* El legend, arriba del todo de su grupo, a 8 px de las opciones: con los 20 px del diseño y las filas de
   44 quedaba mucho aire entre el título y la primera casilla (Marc, 10-11). */
.ba-capa .ba-grupo legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; border: 0; color: var(--ba-tinta); font: 700 15px/1.3 var(--ba-sans); }
.ba-grupo legend + * { clear: left; }
/* Una opción: la casilla de 20 px con el verde, el nombre (15 px) y, a la derecha, su cuenta (14 px,
   gris), en una fila de 36 px en la columna del ordenador (con ratón; en la hoja de la tableta y del
   móvil, de 44, más abajo). A 0 sin marcar, en gris y desactivada (Ruling 13). */
.ba-capa .ba-op { display: flex; align-items: center; gap: 12px; max-width: none; min-height: 36px; margin: 0; padding: 0; color: var(--ba-tinta); font: 400 15px/1.25 var(--ba-sans); cursor: pointer; }
.ba-capa .ba-op input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--ba-boton); cursor: pointer; }
.ba-op > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.ba-capa .ba-n { flex: 0 0 auto; color: var(--ba-gris-2); font-size: 14px; }
.ba-capa .ba-op-cero, .ba-capa .ba-op-cero input, .ba-capa .ba-op-cero .ba-n { color: #8a8a8a; cursor: default; }
.ba-capa .ba-ninguna { margin: 1em 0; }
/* La X y el pie de la hoja de filtros (hasta 991 px, más abajo) no salen en la columna, ni su velo. */
.ba-filtros-x, .ba-filtros-pie, .ba-filtros-velo { display: none; }
/* «Ver as N marcas» / «Ver menos», en verde, y «Pesquisar marca», con el borde y el radio de las cajas. */
.ba-capa .ba-ver-todas { min-height: 36px; margin: 2px 0 0; padding: 0; border: 0; background: none; color: var(--ba-boton); font: 600 14px var(--ba-sans); text-transform: none; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ba-capa .ba-buscar-marca { display: block; box-sizing: border-box; width: 100%; height: 40px; margin: 4px 0 6px; padding: 0 12px; border: 1px solid var(--ba-borde); border-radius: 10px; background: #fff; box-shadow: none; color: var(--ba-tinta); font: 400 15px var(--ba-sans); }
.ba-capa .ba-buscar-marca::placeholder { color: var(--ba-gris); opacity: 1; }
.ba-capa .ba-buscar-marca:focus { border-color: var(--ba-boton); outline: 2px solid var(--ba-halo); outline-offset: 0; }

/* «N resultados para «q»» (Lexend de 26 px) y «Ordenar por», con su select de 44 px */
.ba-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
.ba-capa .ba-titulo { margin: 0; padding: 0; color: var(--ba-tinta); font: 500 26px/1.3 var(--ba-titulos); letter-spacing: -.01em; text-transform: none; }
.ba-titulo b { font-weight: 700; }
/* El título recibe el foco al quitar el último filtro: se ve como el de los demás controles (el
   anillo de :focus-visible, con el teclado); con el ratón, sin anillo, como ellos. */
.ba-capa .ba-titulo:focus:not(:focus-visible) { outline: none; }
/* «Ordenar por» en una línea siempre; si no cabe, cede el select (de 220 px). Con el ancho, el alto y el
   display explícitos: el tema fv2026 pone a todo select display: block, width: 100% y min-height: 48px, y
   con eso el select se comía la etiqueta («Ordenar / por» a 1440 px en pruebas). */
.ba-capa .ba-orden { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 12px; min-width: 0; max-width: 100%; margin: 0; color: var(--ba-gris); font: 400 15px var(--ba-sans); white-space: nowrap; }
.ba-orden select { display: block; flex: 0 1 220px; box-sizing: border-box; width: auto; min-width: 0; height: 44px; min-height: 0; margin: 0; padding: 0 40px 0 12px; border: 1px solid var(--ba-borde); border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314231a' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--ba-tinta); font: 500 15px var(--ba-sans); -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }

/* Lo puesto, encima de la rejilla: un chip por filtro con su × y «Apagar tudo» */
.ba-puestos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.ba-capa .ba-puesto { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 36px; margin: 0; padding: 0 10px 0 14px; border: 1px solid var(--ba-boton); border-radius: 18px; background: #fff; color: var(--ba-tinta); font: 500 14px var(--ba-sans); text-transform: none; letter-spacing: normal; cursor: pointer; }
.ba-capa .ba-puesto:hover { background: var(--ba-fondo); }
.ba-puesto svg { width: 14px; height: 14px; color: var(--ba-gris); }
.ba-capa .ba-borrar-todo { min-height: 36px; margin: 0; padding: 0 4px; border: 0; background: none; color: var(--ba-boton); font: 600 14px var(--ba-sans); text-transform: none; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* Sin nada que quitar («Borrar» del pie de la hoja de «Filtros»), se ve desactivado: gris y sin la mano,
   como las opciones a 0 de la columna (.ba-op-cero). Mismo sitio y tamaño. */
.ba-capa .ba-borrar-todo:disabled { color: #8a8a8a; cursor: default; }
/* Con lo puesto, ningún producto: el aviso con «Apagar filtros», en lugar de la rejilla */
.ba-ayuda { margin: 0; padding: 4px 20px 20px; border: 1px solid var(--ba-linea); border-radius: 16px; background: #fff; }
.ba-capa .ba-ayuda p { margin: 1em 0; font-size: 15px; }

/* ───────────── Las filas especiales (busqueda-filas.js) ───────────── */
/* Las filas, blancas con el borde y el radio de las tarjetas.
   «Ir a …»: la redirección fija, la primera fila, con el borde izquierdo del verde del botón */
.ba-capa .ba-ir { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 18px; border: 1px solid var(--ba-linea); border-left: 4px solid var(--ba-boton); border-radius: 12px; background: #fff; color: var(--ba-tinta); font: 16px/1.35 var(--ba-sans); text-decoration: none; }
.ba-capa .ba-ir:hover, .ba-capa .ba-ir:focus { color: var(--ba-tinta); text-decoration: none; }
.ba-ir b { font-weight: 700; }
.ba-capa .ba-ir small { color: var(--ba-gris); font-size: 13px; }
.ba-ir-txt { min-width: 0; }
.ba-ir .ba-flecha { margin-left: auto; color: var(--ba-boton); font-size: 22px; line-height: 1; }
.ba-ir:hover b { text-decoration: underline; text-underline-offset: 2px; }
/* La corrección («Mostrando resultados para «x». Buscar «y» tal cual ›») o «¿Quisiste decir…?» */
.ba-capa .ba-correccion { margin: 0 0 16px; padding: 12px 18px; border: 1px solid var(--ba-linea); border-radius: 12px; background: #fff; color: var(--ba-texto); font-size: 15px; }
.ba-capa .ba-correccion a { color: var(--ba-boton); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* La línea de los medicamentos de la farmacia (de B), bajo el título */
/* El banner, entre lo puesto y la rejilla, con «Publicidad» encima si lo paga un laboratorio; el
   mismo rótulo va en la ficha de un fijado que paga un laboratorio (Ruling 18) */
.ba-banner { margin: 0 0 20px; }
.ba-banner a { display: block; }
/* El banner ocupa todo el ancho de la columna de resultados, el de la rejilla y con sus bordes (en el
   móvil, el de la hoja), con la imagen de la página o la del móvil (<picture>). El alto sigue la
   proporción de la imagen: nunca se recorta, que lleva texto. «Publicidad», encima, como siempre. */
.ba-banner img { display: block; width: 100%; max-width: none; height: auto; border-radius: 12px; }
.ba-capa .ba-publi { display: inline-block; margin: 0 0 6px; padding: 1px 7px; border: 1px solid var(--ba-borde); border-radius: 6px; background: #fff; color: var(--ba-gris); font: 700 11px/1.5 var(--ba-sans); letter-spacing: .06em; text-transform: uppercase; }

/* La rejilla: el <ul class="product_list grid row"> de la plantilla del módulo (fichas.tpl), en 4
   columnas con huecos de 20 px (los del diseño). Fuera lo que el tema y Bootstrap le ponen a esa lista y
   a sus <li> (el float y el ancho de las columnas, los márgenes de la fila y sus ::before/::after, que en
   una rejilla serían celdas); la tarjeta llena su celda. */
.ba-rejilla > ul.product_list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ba-rejilla > ul.product_list::before, .ba-rejilla > ul.product_list::after { display: none; }
.ba-rejilla > ul.product_list > li.ajax_block_product { display: flex; float: none; clear: none; width: auto; min-width: 0; margin: 0; padding: 0; text-align: center; }

/* ───────────── La tarjeta (fichas.tpl), la del diseño de Joaquín ───────────── */
/* Blanca, con borde y radio de 16; la foto cuadrada sobre blanco (no salta al llegar), con «-X%» y
   «Bio» arriba a la izquierda. Debajo, centrado salvo la marca: la marca en verde y versalitas, el
   nombre (dos líneas como mucho) y, pegado abajo como en la tarjeta del tema fv2026 (.ba-t-pie, con
   margin-top: auto en la columna que llena la tarjeta), las píldoras de las promociones, el precio en
   Lexend con el anterior tachado y el botón verde con la cesta: en una fila, el precio y el botón de
   todas a la misma altura, y lo que cambia de alto (marca, nombre, píldoras), por encima. Cada medida
   y cada letra, explícitas: las del tema (h3, p, a, .product_list) no entran. */
.ba-capa .ba-t-tarjeta { display: flex; flex: 1 1 auto; flex-direction: column; box-sizing: border-box; min-width: 0; overflow: hidden; border: 1px solid var(--ba-linea); border-radius: 16px; background: #fff; color: var(--ba-tinta); font: 400 14px/normal var(--ba-sans); text-align: center; }
.ba-capa .ba-t-foto { position: relative; aspect-ratio: 1 / 1; margin: 0; padding: 0; background: #fff; }
.ba-capa .ba-t-foto > a { display: block; width: 100%; height: 100%; }
.ba-capa .ba-t-foto img { display: block; box-sizing: border-box; width: 100%; max-width: none; height: 100%; margin: 0; padding: 14px; border: 0; object-fit: contain; }
/* Sin foto (el producto no tiene ninguna, o la suya no carga: prepararFotos de busqueda.js), el cuadrado
   con el fondo de la capa y un frasco en el gris verdoso de los bordes, centrado y pequeño. El enlace, con
   la clase del tema: su product_list.css lo deja en display: block. */
.ba-capa .ba-t-foto.ba-t-sinfoto > .product_img_link { position: absolute; top: 14px; right: 14px; bottom: 14px; left: 14px; display: flex; align-items: center; justify-content: center; width: auto; height: auto; border-radius: 12px; background: var(--ba-fondo); }
.ba-capa .ba-t-dibujo { display: block; width: 28%; height: auto; aspect-ratio: 1 / 1; color: var(--ba-borde); }
/* Las insignias, en pila arriba a la izquierda: «-X%» y, debajo, «Bio» en verde (como en fv2026). */
.ba-capa .ba-t-insignias { position: absolute; z-index: 1; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* La etiqueta con imagen de una promoción («2+1», «40% 2ª UD», de OleaMultiPromos), en la esquina de arriba a
   la derecha de la foto (las insignias van a la izquierda): de 44 px, una debajo de otra. Su texto, en la
   píldora solo para lectores. */
.ba-capa .ba-t-etiquetas { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.ba-capa .ba-t-foto .ba-t-etiqueta { display: block; width: 44px; height: auto; padding: 0; object-fit: fill; }
.ba-capa .ba-t-insignia { display: block; padding: 4px 8px; border-radius: 8px; background: var(--ba-insignia); color: #fff; font: 700 12px/normal var(--ba-sans); }
.ba-capa .ba-t-insignia.ba-t-bio { background: var(--ba-boton); }
.ba-capa .ba-t-cuerpo { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 4px; padding: 4px 16px 16px; }
.ba-capa .ba-t-marca { align-self: flex-start; max-width: 100%; margin: 0; overflow: hidden; color: var(--ba-boton); font: 700 11px/normal var(--ba-sans); letter-spacing: .08em; text-align: left; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
/* El tema le pone a todo .product-name su letra con !important (la clase va en el nombre: ahí pone
   busqueda.js «Farmácia» y «Publicidade»). Dos líneas como mucho, con puntos suspensivos: el recorte va
   en el enlace y no en el h3, que con overflow: hidden se comería el anillo del foco. El nombre entero
   sigue en el title y los lectores lo oyen entero. */
.ba-capa .ba-t-nombre { max-width: 100%; min-height: 0; margin: 0; padding: 0; color: var(--ba-tinta); font: 600 15px/1.35 var(--ba-sans); font-family: var(--ba-sans) !important; letter-spacing: normal; text-transform: none; overflow-wrap: anywhere; }
.ba-capa .ba-t-nombre a { display: -webkit-box; overflow: hidden; color: inherit; text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ba-capa .ba-t-nombre a:hover { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ba-capa .ba-t-pie { display: flex; flex: 0 0 auto; flex-direction: column; align-self: stretch; gap: 10px; margin-top: auto; padding-top: 4px; }
.ba-capa .ba-t-precios { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Una píldora por promoción (DafneSearchPromociones::tarjeta), con la etiqueta delante. Puede tomar
   12 px del relleno de cada lado, como en el diseño, donde «15% dto. aplicado no preço» no cabe en la
   tarjeta de 227 px; una más larga (un cupón) pasa a dos líneas en lugar de salirse. */
.ba-capa .ba-t-promo { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; width: max-content; max-width: calc(100% + 24px); min-height: 28px; padding: 4px 10px; border-radius: 8px; background: var(--ba-promo-fondo); color: var(--ba-promo); font: 600 12px/1.25 var(--ba-sans); }
.ba-capa .ba-t-promo b { font-weight: 700; }
.ba-capa .ba-t-promo::before { content: ""; flex: 0 0 14px; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1'/%3E%3C/svg%3E") center / contain no-repeat; }
.ba-capa .ba-t-precio { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 8px; min-height: 26px; margin: 0; }
.ba-capa .ba-t-ahora { color: var(--ba-tinta); font: 700 20px/normal var(--ba-titulos); }
.ba-capa .ba-t-antes { color: var(--ba-gris-2); font: 400 14px/normal var(--ba-sans); text-decoration: line-through; }
/* «Adicionar ao carrinho» (el «añadir» del carrito del tema) y, sin stock, «Esgotado» en gris, que
   lleva a la ficha como en el listado. */
.ba-capa .ba-t-boton { display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: var(--ba-boton); color: #fff; font: 600 14px/normal var(--ba-sans); letter-spacing: normal; text-decoration: none; text-transform: none; white-space: nowrap; cursor: pointer; }
.ba-capa .ba-t-boton::before { content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.6 12.2a1 1 0 0 0 1 .8h8.8a1 1 0 0 0 1-.8L20 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.6 12.2a1 1 0 0 0 1 .8h8.8a1 1 0 0 0 1-.8L20 7H6'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Oscuro al pasar el ratón y con el foco del teclado. En una pantalla táctil, sin el oscuro al pasar: el
   botón que se acaba de tocar se quedaría oscuro hasta tocar otra cosa (el :hover se queda pegado). */
.ba-capa .ba-t-boton:hover, .ba-capa .ba-t-boton:focus { background: var(--ba-boton); color: #fff; text-decoration: none; }
.ba-capa .ba-t-boton:focus-visible { background: var(--ba-boton-oscuro); }
@media (hover: hover) { .ba-capa .ba-t-boton:hover { background: var(--ba-boton-oscuro); } }
.ba-capa .ba-t-boton.ba-t-agotado, .ba-capa .ba-t-boton.ba-t-agotado:hover, .ba-capa .ba-t-boton.ba-t-agotado:focus, .ba-capa .ba-t-boton.ba-t-agotado:focus-visible { background: var(--ba-linea-suave); color: var(--ba-gris); }
.ba-capa .ba-t-agotado::before { display: none; }
/* Sin botón (un regalo, lo que pide más de una unidad): el hueco del botón, para que su precio no baje
   respecto al de las demás de la fila. */
.ba-capa .ba-t-sinboton { display: block; height: 44px; }
/* «Farmácia» («Parafarmácia») entre el nombre y el precio, en la ficha de la otra tienda (la pone
   busqueda.js), con las letras de la marca; «Publicidade», encima del nombre, la de .ba-publi. */
.ba-capa .ba-rejilla .ba-otra { margin: 0; color: var(--ba-boton); font: 700 11px/normal var(--ba-sans); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
/* La ficha de un medicamento (busqueda.js la marca): sin promociones (Rulings 20 y 20b). La plantilla
   ya no le pinta ninguna (DafneSearchPromociones no le da nada); esto es por si una respuesta las
   trajera: fuera la insignia, las píldoras, el tachado y el contador de la oferta. */
.ba-rejilla li[data-ba-medicamento] .ba-t-insignia,
.ba-rejilla li[data-ba-medicamento] .ba-t-promo,
.ba-rejilla li[data-ba-medicamento] .ba-t-etiquetas,
.ba-rejilla li[data-ba-medicamento] .ba-t-antes,
.ba-rejilla li[data-ba-medicamento] .psproductcountdown { display: none !important; }

/* Debajo de la rejilla, centrado: «A mostrar X de N resultados», la barra de lo visto (240 × 4 px) y
   «Mostrar mais resultados», contorneado en verde */
.ba-mas { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 32px 0 0; padding: 8px 0; color: var(--ba-gris); text-align: center; }
.ba-capa .ba-mas p { margin: 0; color: var(--ba-gris); font-size: 14px; }
.ba-progreso { width: 240px; max-width: 100%; height: 4px; overflow: hidden; border-radius: 2px; background: var(--ba-linea); }
.ba-progreso > div { min-width: 12px; height: 100%; border-radius: 2px; background: var(--ba-boton); }
.ba-capa .ba-boton-contorno { box-sizing: border-box; min-height: 48px; margin: 0; padding: 0 28px; border: 2px solid var(--ba-boton); border-radius: 12px; background: #fff; color: var(--ba-boton); font: 600 15px var(--ba-sans); letter-spacing: normal; text-transform: none; cursor: pointer; }
.ba-capa .ba-boton-contorno:hover { background: var(--ba-fondo); color: var(--ba-boton); }

/* ───────────── Al abrir: la franja de la caja vacía (ordenador-abrir.html) ───────────── */
/* Bajo la barra (que lleva «Fechar»), blanca y con su sombra sobre la página oscurecida. A la izquierda,
   en 300 px y a 32 px uno de otro, las recientes, las categorías y las marcas; a la derecha, a 56 px,
   «Os mais vendidos». Lo que no cabe al lado (300 + 56 + 560 px) pasa debajo, como en el diseño. */
.ba-vacia { display: flex; flex-wrap: wrap; gap: 56px; padding-top: 36px; padding-bottom: 44px; }
.ba-vacia-izq { display: flex; flex: 0 0 300px; flex-direction: column; gap: 32px; min-width: 0; }
/* Cada bloque, en columna (como en el diseño): el margen de su título y el de su lista se suman. */
.ba-vacia-izq > section { display: flex; flex-direction: column; min-width: 0; }
.ba-vacia > .ba-vendidos { display: flex; flex: 999 1 560px; flex-direction: column; gap: 20px; min-width: 0; }
/* Los títulos: 12 px, en versalitas y en gris (también los de la vista sin resultados). */
.ba-capa .ba-bloque-tit { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 0; color: var(--ba-gris); font: 700 12px/1.3 var(--ba-sans); letter-spacing: .08em; text-transform: uppercase; }
.ba-capa .ba-vacia .ba-bloque-tit { margin-bottom: 8px; line-height: normal; }
/* Las recientes: el reloj y la búsqueda, de 16 px en filas de 44, a 4 px una de otra. «Apagar» (todas) y
   la «×» de cada una son discretos: «Apagar», pequeño y gris junto al título, sin hacerlo más alto (con
   ratón: en una pantalla táctil sigue de 32 px, que es para el dedo); la «×», solo al pasar por la fila o
   con el foco en ella (en una pantalla táctil, siempre). */
.ba-bloque-tit button { min-height: 32px; margin: 0; padding: 0; border: 0; background: none; color: var(--ba-gris); font: 400 13px var(--ba-sans); letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
@media (hover: hover) {
  .ba-capa .ba-vacia .ba-bloque-tit button { min-height: 24px; margin: -5px 0; line-height: normal; }
}
.ba-capa .ba-bloque-tit button:hover { color: var(--ba-tinta); }
.ba-capa ul.ba-recientes { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ba-capa .ba-reciente { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.ba-capa .ba-chip-texto { display: flex; flex: 1 1 auto; align-items: center; gap: 12px; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ba-tinta); font: 500 16px/1.3 var(--ba-sans); letter-spacing: normal; text-align: left; text-transform: none; cursor: pointer; }
.ba-chip-texto svg { flex: 0 0 auto; color: var(--ba-gris); }
.ba-chip-texto span { min-width: 0; overflow-wrap: anywhere; }
.ba-capa .ba-reciente-quitar { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ba-gris); opacity: 0; cursor: pointer; }
.ba-reciente-quitar svg { width: 16px; height: 16px; }
.ba-capa .ba-reciente:hover .ba-reciente-quitar, .ba-capa .ba-reciente:focus-within .ba-reciente-quitar { opacity: 1; }
.ba-capa .ba-reciente-quitar:hover { background: var(--ba-fondo); color: var(--ba-tinta); }
@media (hover: none) { .ba-capa .ba-reciente-quitar { opacity: 1; } }
/* Al pasar el ratón, el texto en verde (el a:hover del diseño); en una pantalla táctil no, que se queda
   pegado en lo que se acaba de tocar. */
@media (hover: hover) {
  .ba-capa .ba-chip-texto:hover, .ba-capa .ba-chip-marca:hover, html:not(.ba-hoja-abierta) .ba-capa .ba-cats .ba-cat:hover { color: var(--ba-boton); }
}
/* Las categorías: en la vista sin resultados (y en la hoja del móvil), chips con el verde claro del fondo,
   como los demás. */
.ba-capa ul.ba-cats { margin: 0; padding: 0; list-style: none; }
.ba-capa .ba-chips, .ba-capa .ba-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.ba-capa .ba-cats > li { margin: 0; padding: 0; }
.ba-capa .ba-cat { display: inline-flex; align-items: center; box-sizing: border-box; height: 40px; padding: 0 16px; border: 1px solid var(--ba-borde); border-radius: 20px; background: var(--ba-fondo); color: var(--ba-tinta); font: 500 14px/1 var(--ba-sans); text-decoration: none; white-space: nowrap; }
.ba-capa .ba-cat:hover { border-color: var(--ba-boton); color: var(--ba-tinta); text-decoration: none; }
html.ba-hoja-abierta .ba-cat-flecha { display: none; }
/* En la franja (fuera de la hoja del móvil), en lista: filas de 48 px y su raya debajo, con la flecha a la
   derecha. */
html:not(.ba-hoja-abierta) .ba-capa .ba-cats { flex-direction: column; flex-wrap: nowrap; gap: 0; }
html:not(.ba-hoja-abierta) .ba-capa .ba-cats .ba-cat { display: flex; justify-content: space-between; gap: 12px; box-sizing: content-box; height: auto; min-height: 48px; padding: 0; border: 0; border-bottom: 1px solid var(--ba-linea-suave); border-radius: 0; background: none; font: 500 16px/1.3 var(--ba-sans); white-space: normal; }
html:not(.ba-hoja-abierta) .ba-capa .ba-cats .ba-cat:hover { border-color: var(--ba-linea-suave); }
.ba-cat-flecha { flex: 0 0 auto; color: var(--ba-gris); }
/* Las marcas: los chips de siempre (radio de 20), con su nombre en 600 y de 40 px más el borde, como en el
   diseño, a 12 px del título. En la hoja del móvil, de 44 px, como los demás. */
.ba-capa ul.ba-marcas { margin-top: 4px; }
.ba-capa .ba-chip-marca { font-weight: 600; }
html:not(.ba-hoja-abierta) .ba-capa .ba-chip-marca { height: 42px; line-height: 40px; }
/* «Os mais vendidos»: el título en Lexend de 22 px, a 20 px de la rejilla de la tarjeta de los resultados. */
.ba-capa .ba-vendidos .ba-bloque-tit { display: block; margin: 0; color: var(--ba-tinta); font: 600 22px/normal var(--ba-titulos); letter-spacing: -.01em; text-transform: none; }

/* ───────────── Sin resultados (busqueda-filas.js) y sin respuesta del buscador: la salida a /buscar ───────────── */
.ba-cero { max-width: 1040px; padding-top: 28px; padding-bottom: 48px; }
.ba-capa .ba-cero-tit { margin: 0 0 6px; padding: 0; color: var(--ba-tinta); font: 600 24px/1.3 var(--ba-titulos); letter-spacing: -.01em; text-transform: none; }
.ba-capa .ba-cero-tit:focus:not(:focus-visible) { outline: none; }
.ba-capa .ba-cero-sub { margin: 0 0 22px; color: var(--ba-gris); font-size: 15px; }
/* La tarjeta: lo más buscado, las categorías y «¿Te ayudamos a encontrarlo?» */
.ba-cero-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 20px 24px 22px; border: 1px solid var(--ba-linea); border-radius: 16px; background: #fff; }
.ba-capa .ba-cero-cols p { margin: 0; font-size: 15px; line-height: 1.6; }
/* Los teléfonos, subrayados y sin partir el número (como en la página de resultados) */
.ba-capa .ba-cero-cols p a { color: var(--ba-tinta); text-decoration: underline; white-space: nowrap; }
.ba-capa .ba-tienda-toda { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; color: var(--ba-boton); font: 600 16px var(--ba-sans); text-decoration: none; }
.ba-capa .ba-tienda-toda:hover { color: var(--ba-boton); text-decoration: underline; text-underline-offset: 2px; }

/* ───────────── Escritorio estrecho y tableta ───────────── */
/* La barra: el logo y la cesta miden lo suyo (sin los 220 px del diseño), y la caja se lleva el resto. */
@media (max-width: 1199px) {
  .ba-barra-fila { gap: 24px; }
  .ba-capa .ba-logo, .ba-barra-cesta { flex-basis: auto; }
}
@media (max-width: 1279px) {
  .ba-rejilla > ul.product_list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* «Os mais vendidos», al lado de la columna de la izquierda desde 996 px (948 con el relleno de la
   tableta): de 4 desde 1320 px, donde cada tarjeta llega a los 206 px que pide «Adicionar ao carrinho»;
   por debajo, una sola fila de 3, sin la 4.ª suelta (la franja sigue siendo una franja; con .ba-capa
   delante, para ganarle al display: flex de la tarjeta en la rejilla). Entre 948 y 1093 px las 3 no
   llegan a 206 px: la tarjeta del móvil, con «Adicionar» (los lectores oyen el botón entero, con su
   aria-label). Debajo de la columna van a todo el ancho y caben. */
@media (max-width: 1319px) {
  .ba-vendidos .ba-rejilla > ul.product_list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ba-capa .ba-vendidos li.ajax_block_product:nth-child(n + 4) { display: none; }
}
@media (min-width: 948px) and (max-width: 1093px) {
  .ba-vendidos .ba-t-largo { display: none; }
}
/* Con la tarjeta de filtros al lado, por debajo de 1080 px las 3 tarjetas no llegan a 216 px y
   «Adicionar ao carrinho» no cabe en su botón (a 992 px se corta): la tarjeta del móvil, «Adicionar» y
   la píldora sin «no preço» (los lectores oyen el botón entero, con su aria-label). Sin filtros, la
   rejilla va a todo el ancho y cabe. */
@media (min-width: 992px) and (max-width: 1079px) {
  .ba-cuerpo:not(.ba-sin-filtros) .ba-t-largo { display: none; }
}
@media (max-width: 991px) {
  /* La barra de la capa, de 72 px y más apretada. */
  .ba-capa { --ba-barra-alto: 72px; }
  .ba-barra-fila { gap: 16px; padding: 0 16px; }
  .ba-capa .ba-logo img { max-height: 52px; }
  /* El nombre del logo no sale, como en la cabecera del tema a estos anchos (responsive.css lo esconde):
     con él, a 768 px la caja se quedaba en 257 px. */
  .ba-capa .ba-logo-nombre { display: none; }
  .ba-barra-centro { gap: 8px; }
  .ba-barra .ba-caja { height: 48px; }
  .ba-barra .ba-caja-lupa { top: 2px; }
  .ba-barra .ba-caja-borrar { top: 2px; }
  .ba-ancho { padding: 0 16px; }
  .ba-cuerpo { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
  .ba-arriba-fila { padding-top: 14px; }
  .ba-arriba:not(.ba-arriba-vacia) + .ba-cuerpo { padding-top: 14px; }
  .ba-capa .ba-titulo { font-size: 22px; }
  .ba-cab { margin-bottom: 12px; }
  /* La barra «Filtrar» / orden en lugar de «Ordenar por», pegada arriba de lo que se desplaza al bajar
     (bajo la barra de la capa; en el móvil, bajo la caja), como en movil-fenvi.html también en la tableta:
     los dos lado a lado, a 10 px, de 44 px, con el borde de las cajas y radio de 10; el orden es el select
     nativo a la vista (con la orden puesta y la flecha), con letra de 16 px para que iOS no amplíe la
     página al tocarlo (Ruling 83). Cada uno, la mitad (sin «Filtrar», el orden a todo el ancho). */
  .ba-capa .ba-orden-escritorio { display: none; }
  .ba-capa .ba-herr { position: sticky; z-index: 5; top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 -16px 6px; padding: 8px 16px; background: var(--ba-fondo); }
  .ba-capa .ba-herr > :only-child { grid-column: 1 / -1; }
  .ba-capa .ba-herr-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-width: 0; height: 44px; margin: 0; padding: 0 8px; border: 1px solid var(--ba-borde); border-radius: 10px; background: #fff; color: var(--ba-tinta); font: 600 15px var(--ba-sans); letter-spacing: normal; text-transform: none; cursor: pointer; }
  .ba-capa .ba-herr-orden { display: block; min-width: 0; }
  .ba-capa .ba-herr-orden > svg, .ba-capa .ba-herr-orden > span { display: none; }
  .ba-capa .ba-herr-orden select { position: static; display: block; box-sizing: border-box; width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0 34px 0 10px; border: 1px solid var(--ba-borde); border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314231a' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--ba-tinta); font: 600 16px var(--ba-sans); text-overflow: ellipsis; white-space: nowrap; opacity: 1; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
  .ba-capa .ba-herr svg { flex: 0 0 auto; width: 18px; height: 18px; }
  /* Los filtros rápidos (busqueda-filtros.js), bajo la barra, también en la tableta: una fila de chips de
     44 px que se desliza de borde a borde, sin barra, como en movil-fenvi.html: el nombre y su cuenta en
     gris. Puesto, con el borde de 2 px y el fondo claro del verde; a 0 sin poner, en gris y desactivado
     (como en la columna). Lo de debajo, a 14 px de la fila (con sus 4 px de relleno para el dedo dentro). */
  .ba-capa .ba-rapidos { display: flex; gap: 8px; margin: 0 -16px 14px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
  .ba-capa .ba-rapidos::-webkit-scrollbar { display: none; }
  .ba-capa .ba-rapido { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; box-sizing: border-box; height: 44px; margin: 0; padding: 0 16px; border: 1px solid var(--ba-borde); border-radius: 22px; background: #fff; color: var(--ba-tinta); font: 500 14px/normal var(--ba-sans); letter-spacing: normal; text-transform: none; white-space: nowrap; cursor: pointer; }
  .ba-capa .ba-rapido[aria-pressed="true"] { border-color: var(--ba-boton); background: var(--ba-chip-fondo); box-shadow: inset 0 0 0 1px var(--ba-boton); }
  .ba-capa .ba-rapido:disabled, .ba-capa .ba-rapido:disabled .ba-n { color: #8a8a8a; cursor: default; }
  .ba-capa .ba-herr-n { display: inline-grid; place-items: center; box-sizing: border-box; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ba-boton); color: #fff; font-size: 13px; }
  /* La columna «Filtrar» pasa a ser una hoja que sale por la derecha al pulsar «Filtros» (busqueda-filtros.js
     pone ba-filtros-abiertos en la capa): fija, de 420 px como mucho y a toda altura, con sombra, sobre
     un velo que tapa también la cabecera. La capa sube por encima de la cabecera fija de la hoja del
     móvil (45) y sigue por debajo del aviso de cesta del tema (#layer_cart, 99: Ruling 21); la hoja y
     su velo, dentro de ella. «align-self» vuelve a stretch: con «start», un hijo fijo de la rejilla no
     se estira entre top y bottom. */
  .ba-filtros { display: none; position: fixed; z-index: 1100; top: 0; right: 0; bottom: 0; align-self: stretch; width: 420px; max-width: 100%; max-height: none; flex-direction: column; overflow: hidden; padding: 0; border: 0; border-radius: 0; box-shadow: -8px 0 28px rgba(0, 0, 0, .25); }
  .ba-filtros-abiertos .ba-filtros { display: flex; }
  .ba-capa.ba-filtros-abiertos { z-index: 46; }
  .ba-filtros-abiertos > .ba-filtros-velo { display: block; position: fixed; z-index: 1099; top: 0; right: 0; bottom: 0; left: 0; background: rgba(17, 17, 17, .45); }
  /* Su cabecera (la de la columna: blanca, con «Filtrar» de 17 px), con la X de 44 px; el cuerpo, con su
     desplazamiento y los grupos de la columna; el pie, con «Borrar» y «Mostrar N productos», de 48 px. */
  .ba-filtros-cab { flex: 0 0 auto; }
  .ba-capa .ba-filtros-x { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -10px 0 0; padding: 0; border: 0; background: none; color: #222; cursor: pointer; }
  .ba-filtros-x svg { width: 22px; height: 22px; }
  .ba-filtros-cuerpo { flex: 1 1 auto; min-height: 0; padding: 0 16px; overflow-y: auto; overscroll-behavior: contain; }
  .ba-capa .ba-filtros-pie { display: flex; flex: 0 0 auto; gap: 10px; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e1e1e1; background: #fff; }
  .ba-capa .ba-filtros-pie .ba-borrar-todo { flex: 0 0 auto; min-height: 48px; padding: 0 8px; }
  .ba-capa .ba-mostrar { flex: 1 1 auto; min-height: 48px; margin: 0; padding: 0 12px; border: 0; border-radius: 4px; background: var(--ba-boton); color: #fff; font: 700 16px var(--ba-sans); letter-spacing: normal; text-transform: none; cursor: pointer; }
  /* Grupos más juntos; opciones de 44 px con casillas de 22. */
  .ba-capa .ba-grupo { padding-top: 14px; }
  .ba-capa .ba-grupo legend { margin-bottom: 8px; }
  .ba-capa .ba-op { min-height: 44px; font-size: 15px; }
  .ba-capa .ba-op input { width: 22px; height: 22px; }
  .ba-cero-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* La franja, más apretada, como la barra (el relleno de .ba-ancho se lleva el de arriba y el de abajo). */
  .ba-vacia { padding-top: 24px; padding-bottom: 32px; }
}
/* La capa del ordenador por debajo de 768 px (un tema sin la caja del móvil): la barra sin el logo, con
   «Fechar» y la cesta en iconos (su nombre lo oyen los lectores). */
@media (max-width: 767px) {
  .ba-barra-fila { gap: 8px; padding: 0 12px; }
  .ba-capa .ba-logo { display: none; }
  .ba-barra-centro { gap: 4px; }
  .ba-capa .ba-cerrar { padding: 0 10px; }
  .ba-capa .ba-cerrar span, .ba-boton-cesta-txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ba-capa .ba-boton-cesta { height: 44px; padding: 0 12px; }
}

/* ───────────── Móvil (hasta 767 px): la hoja a pantalla completa (movil-abrir.html y movil-fenvi.html) ───────────── */
/* La caja de la cabecera del móvil del tema es la cabecera de la hoja (html.ba-hoja-abierta): fija
   arriba, blanca, de 64 px más su raya, con «←» y la caja, con la lupa dentro a la izquierda y «×» a la
   derecha (busqueda-movil.js). Lo demás de su formulario («SOLARES», «Portes grátis…») no sale, ni la
   lupa del tema, que sigue ahí para Intro y para los lectores. Va por encima de la hoja (44) y por debajo
   del aviso de cesta del tema (#layer_cart, 99: Ruling 21). Cerrada, la caja es la del tema. La lupa y
   «×» se ponen sobre la caja en su sitio de la cabecera (fija, que es su bloque contenedor): la lupa a
   12 px de su borde izquierdo (8 + 44 + 4 + 12) y «×» en su extremo derecho. */
html.ba-hoja-abierta { --ba-hoja-alto: 65px; }
.ba-hoja-cerrar, .ba-hoja-lupa, .ba-hoja-borrar, .ba-herr, .ba-rapidos { display: none; }
.ba-hoja-caja { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.ba-hoja-caja::-webkit-search-cancel-button, .ba-hoja-caja::-webkit-search-decoration { display: none; -webkit-appearance: none; }
html.ba-hoja-abierta .ba-hoja-form { position: fixed !important; z-index: 45; top: 0; right: 0; left: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; box-sizing: border-box; height: var(--ba-hoja-alto); margin: 0 !important; padding: 10px 16px 10px 8px; border-bottom: 1px solid var(--ba-linea); background: #fff; }
html.ba-hoja-abierta .ba-hoja-form > :not(.ba-hoja-cerrar):not(.ba-hoja-lupa):not(.ba-hoja-caja):not(.ba-hoja-borrar):not([type="submit"]):not(label) { display: none !important; }
html.ba-hoja-abierta .ba-hoja-cerrar { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ba-tinta); cursor: pointer; }
html.ba-hoja-abierta .ba-hoja-lupa { position: absolute; top: 22px; left: 68px; display: flex; color: var(--ba-boton); pointer-events: none; }
/* La caja: 44 px, borde verde de 2 px, radio de 12 y letra de 16 px (iOS no amplía la página al
   enfocarla), con sitio para la lupa. Con el foco, el halo de la caja de la barra del ordenador (el borde
   ya es verde). El tema le pone ancho, flotado, márgenes y relleno en línea. */
html.ba-hoja-abierta .ba-hoja-caja { flex: 1 1 auto; float: none !important; box-sizing: border-box; width: auto !important; min-width: 0; height: 44px !important; margin: 0 !important; padding: 0 12px 0 40px !important; border: 2px solid var(--ba-boton) !important; border-radius: 12px; background: #fff; box-shadow: none; color: var(--ba-tinta); font: 500 16px/normal var(--ba-sans); transition: none; }
html.ba-hoja-abierta .ba-hoja-caja::placeholder { color: var(--ba-gris); font-weight: 400; opacity: 1; }
html.ba-hoja-abierta .ba-hoja-caja:focus { outline: none; box-shadow: 0 0 0 3px var(--ba-halo); }
/* «×» dentro de la caja, de 44 × 44 en su extremo derecho, solo con texto (sin texto, la caja enseña su
   texto de ayuda). */
html.ba-hoja-abierta .ba-hoja-caja:not(:placeholder-shown) { padding-right: 44px !important; }
html.ba-hoja-abierta .ba-hoja-caja:not(:placeholder-shown) + .ba-hoja-borrar { position: absolute; z-index: 1; top: 10px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ba-gris); cursor: pointer; }
html.ba-hoja-abierta .ba-hoja-form [type="submit"] { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; }

/* La caja del móvil, con 16 px también cerrada: iOS amplía la página al enfocar una caja con menos,
   y lo mira al primer toque, antes de que se abra la hoja. */
@media (max-width: 767px) {
  #search_query_topR, .ba-hoja-caja { font-size: 16px; }
}

/* La hoja (solo con html.ba-hoja-abierta: sin la caja del móvil en el tema, la capa del ordenador). */
@media (max-width: 767px) {
  /* La hoja: de bajo la caja hasta abajo, sin velo, borde ni sombra; la franja, a pantalla completa. */
  html.ba-hoja-abierta .ba-capa { top: var(--ba-hoja-alto); border-top: 0; }
  html.ba-hoja-abierta .ba-capa.ba-compacta { bottom: 0; max-height: none; box-shadow: none; }
  html.ba-hoja-abierta .ba-compacta .ba-scroll { flex: 1 1 auto; }
  html.ba-hoja-abierta .ba-velo { display: none; }
  /* Lo de dentro, a 16 px de los lados (movil-fenvi.html). */
  html.ba-hoja-abierta .ba-ancho { padding: 0 16px; }
  /* Sin la barra de la capa ni su «Fechar» (cierra la «←» de la caja). Las sugerencias, en una fila de
     chips de 40 px que se desliza de borde a borde, sin barra, y que sin sugerencias no sale. */
  html.ba-hoja-abierta .ba-arriba-fila { padding-top: 0; }
  html.ba-hoja-abierta .ba-cuerpo, html.ba-hoja-abierta .ba-arriba:not(.ba-arriba-vacia) + .ba-cuerpo { padding-top: 16px; padding-bottom: 32px; }
  html.ba-hoja-abierta .ba-capa ul.ba-sugs { flex-wrap: nowrap; margin: 0 -16px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; }
  html.ba-hoja-abierta .ba-capa ul.ba-sugs::-webkit-scrollbar { display: none; }
  html.ba-hoja-abierta .ba-capa ul.ba-sugs > li { flex: 0 0 auto; }
  html.ba-hoja-abierta .ba-capa .ba-chip { height: 40px; border-radius: 20px; line-height: 38px; }
  /* Fichas de 44 px: lo más buscado (sin resultados), las categorías, las marcas, las recientes y su «×». */
  html.ba-hoja-abierta .ba-capa .ba-chips .ba-chip { height: 44px; border-radius: 22px; line-height: 42px; }
  html.ba-hoja-abierta .ba-capa .ba-cat { height: 44px; border-radius: 22px; }
  /* Al abrir, como movil-abrir.html: una columna, a 24 px un bloque de otro (20 px bajo la caja y 32 al
     final): las recientes, las categorías en chips del verde claro, las marcas en chips contorneados (las
     dos, en una fila que se desliza de borde a borde, sin barra) y «Os mais vendidos» de 2 en 2. Los
     títulos, a 8 px de las recientes y a 10 de los chips; «Apagar» (que no sale en el diseño y es lo que
     deja borrar ese dato) sigue de 32 px para el dedo, sin hacer más alta su fila. */
  html.ba-hoja-abierta .ba-vacia { flex-direction: column; flex-wrap: nowrap; gap: 24px; padding-top: 20px; padding-bottom: 32px; }
  html.ba-hoja-abierta .ba-vacia-izq { flex: 0 0 auto; gap: 24px; }
  html.ba-hoja-abierta .ba-vacia > .ba-vendidos { flex: 0 0 auto; gap: 14px; }
  html.ba-hoja-abierta .ba-capa .ba-vacia .ba-bloque-tit button { margin: -9px 0; }
  html.ba-hoja-abierta .ba-capa ul.ba-recientes { margin-top: 0; }
  html.ba-hoja-abierta .ba-capa .ba-reciente-quitar { flex-basis: 44px; width: 44px; height: 44px; }
  html.ba-hoja-abierta .ba-capa .ba-vacia ul.ba-cats, html.ba-hoja-abierta .ba-capa .ba-vacia ul.ba-marcas { flex-wrap: nowrap; margin: 2px -16px 0; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
  html.ba-hoja-abierta .ba-capa .ba-vacia ul.ba-cats::-webkit-scrollbar, html.ba-hoja-abierta .ba-capa .ba-vacia ul.ba-marcas::-webkit-scrollbar { display: none; }
  html.ba-hoja-abierta .ba-capa .ba-vacia ul.ba-cats > li, html.ba-hoja-abierta .ba-capa .ba-vacia ul.ba-marcas > li { flex: 0 0 auto; }
  html.ba-hoja-abierta .ba-capa .ba-vacia .ba-cat { padding: 0 18px; border: 0; background: var(--ba-chip-fondo); font: 500 15px/1 var(--ba-sans); }
  html.ba-hoja-abierta .ba-capa .ba-vacia .ba-chip-marca { padding: 0 18px; font: 600 15px/42px var(--ba-sans); }
  html.ba-hoja-abierta .ba-capa .ba-vendidos .ba-bloque-tit { font-size: 20px; }
  /* La barra «Filtrar» / orden y los filtros rápidos son los de la tableta (más arriba), pegados arriba de
     la hoja, bajo la caja. */
  /* La hoja de «Filtros», a pantalla completa por encima de la caja: sin velo ni sombra. */
  html.ba-hoja-abierta .ba-filtros { width: 100%; box-shadow: none; }
  html.ba-hoja-abierta .ba-filtros-velo { display: none; }
  /* Las filas de arriba y el título, más compactos; «Intro también lleva ahí» no sale, y el enlace
     «Buscar «q» tal cual ›» va en su propia línea. */
  html.ba-hoja-abierta .ba-capa .ba-ir { margin-bottom: 10px; padding: 12px; font-size: 15px; }
  html.ba-hoja-abierta .ba-capa .ba-ir small { display: none; }
  html.ba-hoja-abierta .ba-capa .ba-correccion { padding: 10px 12px; font-size: 14px; }
  html.ba-hoja-abierta .ba-capa .ba-correccion a { display: block; width: fit-content; max-width: 100%; white-space: normal; }
  /* «N resultados para «q»», en Lexend de 18 px; lo de debajo, a 14 px uno de otro. */
  html.ba-hoja-abierta .ba-capa .ba-titulo { font-size: 18px; }
  html.ba-hoja-abierta .ba-cab { margin-bottom: 6px; }
  html.ba-hoja-abierta .ba-puestos, html.ba-hoja-abierta .ba-banner { margin-bottom: 14px; }
  /* La rejilla de 2 con 12 px de hueco; con la tarjeta del móvil. */
  html.ba-hoja-abierta .ba-rejilla > ul.product_list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Debajo, «A mostrar X de N resultados», la barra de 200 px y «Mostrar mais resultados» a todo el ancho. */
  html.ba-hoja-abierta .ba-mas { gap: 12px; margin-top: 14px; padding: 8px 0 0; }
  html.ba-hoja-abierta .ba-progreso { width: 200px; }
  html.ba-hoja-abierta .ba-capa .ba-mas .ba-boton-contorno { width: 100%; }
  /* «Os mais vendidos» en la hoja: las 4 fichas (2 filas de 2), al final */
  html.ba-hoja-abierta .ba-capa .ba-vendidos li.ajax_block_product:nth-child(4) { display: flex; }
  html.ba-hoja-abierta .ba-ayuda { margin-top: 18px; }
  html.ba-hoja-abierta .ba-cero { padding-top: 18px; }
  html.ba-hoja-abierta .ba-cero-cols { padding: 16px; }
}

/* La tarjeta en el móvil (hasta 767 px), la del diseño: más apretada, con «15% dto. aplicado» sin
   «no preço» y «Adicionar» sin «ao carrinho» (los lectores oyen el botón entero, con su aria-label). */
@media (max-width: 767px) {
  .ba-capa .ba-t-tarjeta { border-radius: 14px; }
  .ba-capa .ba-t-foto img { padding: 10px; }
  .ba-capa .ba-t-foto.ba-t-sinfoto > .product_img_link { top: 10px; right: 10px; bottom: 10px; left: 10px; border-radius: 10px; }
  .ba-capa .ba-t-insignias { top: 8px; left: 8px; gap: 5px; }
  .ba-capa .ba-t-insignia { padding: 3px 7px; border-radius: 7px; }
  .ba-capa .ba-t-cuerpo { padding: 2px 12px 12px; }
  .ba-capa .ba-t-marca { letter-spacing: .06em; }
  .ba-capa .ba-t-nombre { font-size: 14px; }
  .ba-capa .ba-t-pie { gap: 8px; padding-top: 2px; }
  .ba-capa .ba-t-promo { gap: 5px; max-width: 100%; min-height: 26px; padding: 4px 8px; border-radius: 7px; }
  .ba-capa .ba-t-promo::before { flex-basis: 13px; width: 13px; height: 13px; }
  .ba-capa .ba-t-precio { column-gap: 6px; min-height: 24px; }
  .ba-capa .ba-t-ahora { font-size: 18px; }
  .ba-capa .ba-t-antes { font-size: 13px; }
  .ba-capa .ba-t-largo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ba-carga::after { animation: none; left: 0; width: 100%; opacity: .5; }
}