/* =====================================================================================================================
 * Tienda · capa móvil de la oleada 2 (29-oct-2026) — compactación de cuadrículas, marca/categoría, ficha, banda de confianza y cabecera.
 * Auditoría: C:/Temp/auditoria_movil/INFORME.md (problemas 2-4 y patrones F, I, K).
 *
 * TODO va dentro de @media (max-width: 768px): en escritorio no cambia ni un píxel. Solo se reordena, pliega o compacta; no se quita ningún
 * texto ni dato (lo que desaparece de la vista sigue en el HTML). Es la ÚLTIMA hoja (se encola después de fma-tienda.css, inc/tienda-ui.php),
 * por eso gana a las reglas con !important de style.css / fma-mobile.css / fma-tienda.css sin más trucos que repetir !important y subir
 * un poco la especificidad.
 *
 *  1. Cabecera (misma altura que la web estática: 36 + 56 px, logo 38, iconos 40; buscar, cuenta, cesta, menú) y WhatsApp flotante
 *  2. Cuadrícula: cabecera más corta y tarjeta baja y legible
 *  3. Marca y categoría: acordeón «Guía …» y sin la fila «Filtros aplicados»
 *  4. Ficha: imagen de 260 px, compra a la vista, acordeones «Consejo farmacéutico» y «Datos del producto»
 *  5. Banda de confianza: una línea de 4 iconos
 * ===================================================================================================================== */

/* Etiqueta corta del botón de las tarjetas («+ Añadir»): solo se ve en las cuadrículas del móvil */
.fma-lab-c { display: none; }

@media (max-width: 768px) {

/* ── 1. Cabecera y WhatsApp flotante ──────────────────────────────────────────────────────────────────────────────────────
 * Medidas copiadas de web/css/pages.css (oleada 1): barra superior 36 px, cabecera 56 px + 1 de borde, logo 38 px, iconos de 40 px. */
.topbar { padding: 0 !important; height: 36px !important; min-height: 0 !important; box-sizing: border-box; }
.topbar__inner { height: 100% !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; align-items: center; }
.site-header__inner { height: 56px !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; gap: 8px !important; }
.site-header .brand { gap: 8px !important; }
.site-header .brand__mark, .site-header__inner .brand__mark { width: 38px !important; height: 38px !important; }
.site-header .brand__name { gap: 3px !important; }
.site-header .brand__sub, .site-header__inner .brand__sub { font-size: .6rem !important; letter-spacing: .24em !important; }
.site-header .brand__main, .site-header__inner .brand__main { font-size: 1.32rem !important; }
/* «M. Aguirre», como en la cabecera de la web estática (el «María» entero sigue en el HTML) */
.site-header .brand__nombre { display: none; }
.site-header .brand__main em::before { content: "M. "; }
.site-header .header-actions { gap: 0 !important; margin-left: auto; }
.site-header .header-actions .icon-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
/* «Mi cuenta» se queda a la vista en la cabecera (Jorge, 29-oct: entrar tiene que ser fácil de encontrar); el teléfono va en el menú y en el pie */

/* WhatsApp flotante fuera de las cuadrículas y de la ficha: ya hay «Preguntar por WhatsApp» y la barra de compra */
body.single-product .fab-wa, body.tax-product_cat .fab-wa, body.tax-product_brand .fab-wa, body.tax-product_tag .fab-wa,
body.post-type-archive-product .fab-wa, body.woocommerce-shop .fab-wa, body:has(.fma-shop) .fab-wa { display: none !important; }

/* ── 2. Cuadrícula (tienda, categorías, marcas, búsqueda) ─────────────────────────────────────────────────────────────────── */
/* Cabecera del listado (30-oct-2026, Jorge): arriba solo lo justo = título corto, el buscador de la tienda, «Filtrar», el orden y los productos.
 * El texto de descripción de la tienda, la categoría o la marca ya no va arriba: fma-tienda-movil.js lo baja bajo la cuadrícula y la paginación
 * (dentro del acordeón «Guía …» si la página lo tiene). Sigue ENTERO en el HTML del servidor; mientras no se mueve, aquí no se ve. */
body .fma-shop { padding-top: 6px !important; }
body .fma-shop__breadcrumb { margin-bottom: 0 !important; }
body .fma-shop__top .fma-shop__header .fma-shop__desc { display: none !important; }
body .fma-shop__top { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; padding-bottom: 10px !important; margin-bottom: 10px !important; }
body .fma-shop__title { font-size: 1.5rem !important; }
/* Buscador de la tienda: campo de 44 px (como «Filtrar» y el orden) con la lupa en un cuadrado verde a la derecha. El botón «Buscar» sigue en el HTML
 * (lector de pantalla); aquí solo se ve su lupa. La lupa de la cabecera abre el buscador de toda la web: este es el de la tienda (placeholder «Buscar en la tienda»). */
body .fma-shop__top .fma-shop__search {
  display: flex !important; align-items: stretch; gap: 0 !important; box-sizing: border-box; width: 100%; max-width: none !important; height: 44px; margin: 0 !important; padding: 0 0 0 14px !important;
  background: #fff; border: 0 !important; border-radius: 12px !important; box-shadow: inset 0 0 0 1px var(--c-linea-strong, rgba(31,42,36,.22)); overflow: hidden;
}
body .fma-shop__top .fma-shop__search:focus-within { box-shadow: inset 0 0 0 2px var(--c-verde-botanico, #276b45); }
body .fma-shop__top .fma-shop__search .fma-shop__search-icon { display: none !important; }
body .fma-shop__top .fma-shop__search input[type="search"] { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 8px 0 0 !important; font-size: 16px !important; line-height: 1.2; }
body .fma-shop__top .fma-shop__search button[type="submit"] {
  position: relative; flex: none; width: 44px !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  font-size: 0 !important; line-height: 0 !important; color: transparent !important; overflow: hidden;
}
body .fma-shop__top .fma-shop__search button[type="submit"]::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20.5' y1='20.5' x2='16.2' y2='16.2'/%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='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20.5' y1='20.5' x2='16.2' y2='16.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .fma-toolbar { gap: 6px 10px !important; }
body .fma-toolbar .fma-filter-toggle, body .fma-toolbar .fma-toolbar__sort select { min-height: 44px !important; height: 44px !important; }

/* Tarjeta: foto de 150 px, nombre a 14 px en 2 líneas, precio a 16 px y «+ Añadir» de 44 px en la línea del precio.
 * La etiqueta de categoría y «En stock» no se ven en la tarjeta (el catálogo ya es solo con stock; siguen en el HTML). */
body .fma-shop ul.products { gap: 8px !important; }
body .fma-shop ul.products li.product.fma-card {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-content: flex-start; align-items: center; height: auto !important; padding: 0 0 10px !important; overflow: hidden;
}
body .fma-shop ul.products li.product.fma-card > .fma-card__image-link { flex: 0 0 100%; display: block; }
body .fma-shop ul.products li.product.fma-card .fma-card__image { height: 150px !important; aspect-ratio: auto !important; padding: 0 !important; }
body .fma-shop ul.products li.product.fma-card .fma-card__img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain !important; }
body .fma-shop ul.products li.product.fma-card .fma-card__body { display: contents !important; }
body .fma-shop ul.products li.product.fma-card .fma-card__cat,
body .fma-shop ul.products li.product.fma-card .fma-card__stock { display: none !important; }
body .fma-shop ul.products li.product.fma-card .fma-card__rating { display: none !important; }
body .fma-shop ul.products li.product.fma-card h2.fma-card__title {
  flex: 0 0 100%; box-sizing: border-box; margin: 8px 0 0 !important; padding: 0 10px !important; font-size: .875rem !important; line-height: 1.3 !important;
  height: 2.6em !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important;
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
body .fma-shop ul.products li.product.fma-card h2.fma-card__title a { display: inline !important; font-size: inherit !important; line-height: inherit !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
body .fma-shop ul.products li.product.fma-card .fma-card__price { flex: 1 1 0; margin: 6px 0 0 !important; padding: 0 0 0 10px; line-height: 1.2; font-size: 1rem !important; font-weight: 700; }
body .fma-shop ul.products li.product.fma-card .fma-card__price .amount,
body .fma-shop ul.products li.product.fma-card .fma-card__price ins { font-size: 1rem !important; }
body .fma-shop ul.products li.product.fma-card .fma-card__price del, body .fma-shop ul.products li.product.fma-card .fma-card__price del .amount { font-size: .8125rem !important; }
/* precio rebajado: el tachado encima del precio actual (en una línea no cabía junto al botón); precio variable: puede partirse en dos líneas */
body .fma-shop ul.products li.product.fma-card .fma-card__price { display: block !important; }
body .fma-shop ul.products li.product.fma-card .fma-card__price del, body .fma-shop ul.products li.product.fma-card .fma-card__price ins { display: block; margin: 0; }
body .fma-shop ul.products li.product.fma-card .fma-card__actions { flex: 0 0 auto; margin: 6px 8px 0 auto !important; padding: 0 !important; display: flex !important; }
body .fma-shop ul.products li.product.fma-card .fma-btn--detail { display: none !important; }
/* etiquetas sobre la foto («Oferta», «Nuevo», «Agotado», promociones): ninguna letra por debajo de 13 px en la tarjeta */
body .fma-shop ul.products li.product.fma-card .fma-card__badges, body .fma-shop ul.products li.product.fma-card .fma-card__badges * { font-size: .8125rem !important; line-height: 1.25 !important; }
body .fma-shop ul.products li.product.fma-card .fma-btn--cart {
  width: auto !important; min-width: 76px; height: 44px !important; min-height: 44px !important; padding: 0 9px !important; font-size: .8125rem !important; font-weight: 700; border-radius: 10px !important; white-space: nowrap;
}
body .fma-shop ul.products li.product.fma-card .fma-lab-l { display: none; }
body .fma-shop ul.products li.product.fma-card .fma-lab-c { display: inline; }
/* con otro tipo de botón (leer más, agotado) el botón ocupa su propia línea, a todo el ancho de la tarjeta menos 10 px por lado.
 * (Antes «flex: 0 0 100%» + margen de 10 px: el botón medía el 100 % y además llevaba el margen, y se salía 20 px por la derecha.) */
body .fma-shop ul.products li.product.fma-card:not(:has(.fma-lab-c)) .fma-card__actions { flex: 0 0 100%; box-sizing: border-box; margin: 6px 0 0 !important; padding: 0 10px !important; }
body .fma-shop ul.products li.product.fma-card:not(:has(.fma-lab-c)) .fma-btn--cart { width: 100% !important; }

/* tablet (600-768 px, 3 columnas): la tarjeta es más ancha, la foto también */
@media (min-width: 600px) { body .fma-shop ul.products li.product.fma-card .fma-card__image { height: 190px !important; } }
/* pantallas muy estrechas (≤345 px, tarjeta de ~140 px): precio y botón no caben juntos; el botón pasa a su línea, a todo el ancho */
@media (max-width: 345px) {
  body .fma-shop ul.products li.product.fma-card .fma-card__actions { flex: 0 0 100%; box-sizing: border-box; margin: 4px 0 0 !important; padding: 0 10px !important; }
  body .fma-shop ul.products li.product.fma-card .fma-btn--cart { width: 100% !important; }
  /* tarjeta en columna: el botón queda siempre pegado al fondo, alineado con el de la tarjeta de al lado aunque el precio ocupe dos líneas («Desde …») */
  body .fma-shop ul.products li.product.fma-card { flex-direction: column !important; flex-wrap: nowrap; align-items: stretch; }
  body .fma-shop ul.products li.product.fma-card > .fma-card__image-link,
  body .fma-shop ul.products li.product.fma-card h2.fma-card__title,
  body .fma-shop ul.products li.product.fma-card .fma-card__price { flex: 0 0 auto; }
  body .fma-shop ul.products li.product.fma-card .fma-card__price { margin: 6px 0 4px !important; }
  body .fma-shop ul.products li.product.fma-card .fma-card__actions { flex: 0 0 auto; margin: auto 0 0 !important; }
}

/* ── 3. Marca y categoría ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Sin la fila «Filtros aplicados: <marca> ×»: en una página de marca o de categoría ya lo dice el título (si hay más filtros, se ven los demás) */
body.tax-product_brand .fma-activos--main .fma-chip--cat, body.tax-product_cat .fma-activos--main .fma-chip--cat { display: none !important; }
body.tax-product_brand .fma-activos--main:not(:has(.fma-chip:not(.fma-chip--cat))),
body.tax-product_cat .fma-activos--main:not(:has(.fma-chip:not(.fma-chip--cat))) { display: none !important; }
/* El acordeón «Guía …» (lo arma fma-tienda-movil.js) */
.mc-compra > .fma-acc--guia { margin: 14px 0 12px; }
.mc-compra .fma-acc--guia > .fma-acc__body { padding-top: 4px !important; }
/* La descripción de la página (la que en escritorio va arriba) ya bajada por fma-tienda-movil.js:
 *  · en marcas y categorías con guía, es el primer párrafo DENTRO del acordeón «Guía …» (un solo desplegable, sin «Leer más» aparte);
 *  · en la tienda y en páginas sin guía, va justo bajo la cuadrícula y su paginación, a 3 líneas con su «Leer más» (clases de fma-tienda.css). */
body .fma-shop__main > .fma-shop__desc--abajo { margin: 8px 0 0; padding: 14px 0 0; border-top: 2px solid var(--gold-light, #a9cdd8); max-width: none; font-size: .9375rem; line-height: 1.6; }
body .fma-shop__main > .fma-shop__desc--abajo.is-clamped { max-height: calc(14px + 4.8em); }
body .fma-shop__main > .fma-shop__desc--abajo + .fma-shop__desc-toggle { align-self: flex-start; margin-top: -8px; min-height: 44px; font-size: .9rem; }
.mc-compra .fma-acc--guia .fma-shop__desc { margin: 0 0 14px; max-width: none; font-size: 1rem; line-height: 1.7; color: inherit; }
.mc-compra .fma-acc--guia .fma-shop__desc p { margin: 0; }

/* ── 4. Ficha ──────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.single-product .fma-gallery__main { height: 260px !important; aspect-ratio: auto !important; }
.single-product .fma-gallery__main img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain; }
.single-product .fma-gallery__thumbs { margin-top: 8px !important; }
.single-product .fma-gallery__thumbs li { flex-basis: 52px !important; }
.single-product .fma-gallery__thumbs li img { width: 100%; height: auto; }
.single-product .fma-sp { padding: 12px 12px 16px !important; }
.single-product .fma-sp--v4 .fma-sp__layout { gap: 10px !important; margin-bottom: 24px !important; }
.single-product .fma-sp__info { padding: 14px 16px !important; }
.single-product .fma-sp__meta-row { flex-direction: row !important; flex-wrap: wrap; gap: 2px 14px !important; margin: 0 0 2px !important; }
.single-product .fma-sp__price { padding-bottom: 6px !important; margin: 2px 0 2px !important; }
.single-product .fma-sp__add-to-cart form.cart:not(.variations_form) { flex-direction: row !important; align-items: center; gap: 10px !important; margin: 4px 0 10px !important; }
.single-product .fma-sp__add-to-cart form.cart:not(.variations_form) .quantity { flex: 0 0 auto; height: 44px !important; }
.single-product .fma-sp__add-to-cart form.cart:not(.variations_form) .single_add_to_cart_button { flex: 1 1 auto; min-width: 0; height: 44px !important; max-height: 44px !important; line-height: 1.2 !important; padding: 0 12px !important; font-size: .95rem !important; white-space: nowrap; }
/* ≤400 px: cantidad algo más estrecha para que «Añadir al carrito» quepa en una línea; ≤345 px: el botón pasa debajo, a todo el ancho */
@media (max-width: 400px) {
  .single-product .fma-sp__add-to-cart form.cart:not(.variations_form) .fma-qty__btn,
  .single-product .fma-sp__add-to-cart form.cart:not(.variations_form) input.qty { width: 36px !important; min-width: 0 !important; }
  .single-product .fma-sp__add-to-cart form.cart:not(.variations_form) { gap: 8px !important; }
  .single-product .fma-sp__add-to-cart form.cart:not(.variations_form) .single_add_to_cart_button { font-size: .875rem !important; padding: 0 10px !important; }
}
@media (max-width: 345px) {
  .single-product .fma-gallery__main { height: 220px !important; }
  .single-product .fma-sp__add-to-cart form.cart:not(.variations_form) { flex-wrap: wrap; }
  .single-product .fma-sp__add-to-cart form.cart:not(.variations_form) .single_add_to_cart_button { flex: 1 1 100%; }
}
/* «Consejo farmacéutico» como acordeón cerrado (lo arma fma-tienda-movil.js con el encabezado de siempre) */
.fma-sp__consejo .fma-consejo { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.fma-sp__consejo .fma-acc--consejo { margin: 0 0 12px !important; }
.fma-sp__consejo .fma-acc--consejo > summary { padding: 10px 14px !important; gap: 10px; }
.fma-sp__consejo .fma-acc--consejo .fma-consejo__avatar { flex: none; width: 32px !important; height: 32px !important; font-size: .95rem !important; }
.fma-sp__consejo .fma-acc--consejo .fma-consejo__who { flex: 1 1 auto; min-width: 0; display: block; }
.fma-sp__consejo .fma-acc--consejo .fma-consejo__who strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.05rem !important; font-weight: 600; line-height: 1.2; }
.fma-sp__consejo .fma-acc--consejo .fma-consejo__credito { display: block; margin: 0 0 8px; font-size: .8125rem; line-height: 1.35; font-weight: 500; color: var(--c-grafito-soft, #4a554f); }
.fma-sp__extra > .fma-acc--datos { margin: 0 !important; }

/* ── 5. Banda de confianza «Por qué comprar en una farmacia MTRYX»: una línea de 4 iconos pequeños con los mismos rótulos ──── */
body .mtryx-band { padding: 14px 0 !important; }
body .mtryx-band .wrap-x > div:first-child { margin-bottom: 8px !important; }
body .mtryx-band .subhero__eyebrow { display: none !important; }
body .mtryx-band h2 { font-size: .95rem !important; line-height: 1.25 !important; margin: 0 !important; }
body .mtryx-band__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
body .mtryx-band .feature-card { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 8px 2px !important; gap: 6px !important; border-radius: 10px !important; }
body .mtryx-band .feature-card__icon { width: 32px !important; height: 32px !important; margin: 0 !important; }
body .mtryx-band .feature-card h4 { font-size: .6875rem !important; line-height: 1.2 !important; text-align: center !important; margin: 0 !important; hyphens: manual; overflow-wrap: break-word; }

}

/* «Desde» de los productos con varios tamaños (inc/tienda-ui.php): encima del precio, para que «+ Añadir» siga en su línea */
@media (max-width: 768px) {
  .fma-desde { display: block; line-height: 1.1; color: var(--ink-soft, #5b6660); }
}