/*
 * djv-movil.css — mejoras móviles del informe del cliente (Fase A, 2026-09-24)
 *
 * Se enlaza desde templates/_partials/head.tpl con ?v=AAAAMMDD. Al cambiar este
 * fichero, sube el ?v= del <link>: custom.css se cachea 30 días sin versión y los
 * clientes que ya visitaron la tienda no verían el cambio.
 *
 * Detalle y medidas: docs/informe-movil-fase-a-20260924.md
 */

/* ---- Punto 4 · Bloque "Gominolas por colores" (/content/30-golosinas, post 488 del builder)
 * El widget de texto lleva margin-bottom:-50px (post-488.css) y su contenedor .expandText
 * tiene alto fijo de 190 px en móvil: a 375-390 px los enlaces pisan la última línea (-8 px).
 * Con -20px quedan 22 px de aire (46 px a 430), como el bloque "¿Qué formato necesitas?".
 * Lleva 'body' delante porque post-488.css se carga DESPUÉS que este fichero.
 * (La página 54-golosinas-para-cumpleanos tiene el mismo texto, pero allí la sección de
 * enlaces está oculta en móvil a propósito: no se solapa y no se toca.) */
@media (max-width: 767px) {
  body .elementor-488 .elementor-element.elementor-element-e9798a1 > .elementor-widget-container {
    margin-bottom: -20px;
  }
}

/* ---- Punto 6 · Tabla nutricional de la ficha
 * post-global-setting-css-1.css fija dt.name{min-width:350px} (medida de escritorio): en
 * móvil el valor se queda con ~21 px y se parte en dos líneas. */
@media (max-width: 767px) {
  .product-features dl.data-sheet dt.name {
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 12px;
  }
  .product-features dl.data-sheet dd.value {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
  }
}
/* Filas sin valor (p.ej. "Proteínas" vacía en ~la mitad de las fichas, viene así del ERP) */
.product-features dl.data-sheet:has(> dd.value:empty) {
  display: none;
}

/* ---- Punto 8 · Icono del carrito en la cabecera móvil: más grande y contador con contraste */
.cart_mobile_bar_tri .ajax_cart_bag .fto-glyph {
  font-size: 26px;
}
.cart_mobile_bar_tri .ajax_cart_quantity.amount_circle {
  background-color: #500FA1;
  color: #fff;
  font-weight: 700;
}

/* ---- Punto 7 · Chat flotante de Zendesk: que no tape el menú lateral abierto.
 * PREVENTIVO: a 2026-09-24 el widget está desactivado en Zendesk (compose devuelve
 * {"products":[]}) y no se pinta. Selectores del Web Widget clásico y de Messaging. */
body.stsidebar_opened iframe#launcher,
body.stsidebar_opened iframe[title*="ensajer"],
body.stsidebar_opened iframe[title*="essaging"] {
  visibility: hidden !important;
}

/* ---- Punto 5 · Galería de la ficha (2026-09-24, 2ª entrega)
 * La galería pasa a 1 imagen por vista con puntos por CONFIGURACIÓN del tema (no aquí):
 * STSN_PRO_THUMNBS_PER_XS/SM/MD = 1 y STSN_PRODUCT_THUMBNAILS_MOBILE = 2 ("Bullets").
 * Aquí solo: en móvil sobran las flechas grises (encajonan la foto; se pasa deslizando y los
 * puntos ya indican que hay más), y con una sola foto el tema pinta un punto suelto. */
@media (max-width: 767px) {
  .pro_gallery_top .swiper-button {
    display: none !important;
  }
}
.pro_gallery_top .swiper-pagination-bullet:only-child {
  display: none;
}

/* ---- Punto 9 · Campos del checkout a 16 px: por debajo, iOS Safari hace zoom al enfocar */
@media (max-width: 767px) {
  #checkout #opc_main input.form-control,
  #checkout #opc_main select.form-control,
  #checkout #opc_main select,
  #checkout #opc_main textarea {
    font-size: 16px;
  }
}