/* ═══════════════════════════════════════════════════════════════
   AJUSTES PARA MÓVIL — tienda.zonelan.es (15/09/2026)

   Se carga en TODAS las páginas de la tienda, después de sus estilos
   propios, y solo actúa en pantallas de 767px o menos: en ordenador y
   tablet la web se ve exactamente igual que antes.

   Todos los selectores empiezan por "html" a propósito: así ganan a las
   reglas originales de cada página sin tener que usar !important.

   Objetivos:
   - Nada se sale por los lados (sin desplazamiento horizontal).
   - Botones y enlaces de al menos ~44px de alto: fáciles de pulsar con
     el dedo.
   - Textos legibles (nada por debajo de ~12px).
   - Campos de formulario a 16px: el iPhone no hace zoom al tocarlos.
   - Cabecera más compacta, que no se coma media pantalla.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Base ─────────────────────────────────────────────────── */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-anchor: none; }
  html input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  html select,
  html textarea { font-size: 16px; }

  /* ── Barra superior (dirección, teléfono, email, redes) ──── */
  html .tb { padding: .3rem 1rem; }
  html .tb-chip { min-width: 40px; min-height: 36px; justify-content: center; }
  html .tb-chip svg { width: 15px; height: 15px; }
  html .tb-soc { width: 34px; height: 34px; }
  html .tb-soc img { width: 16px; height: 16px; }
  html .biz-state { font-size: .72rem; }

  /* ── Cabecera ─────────────────────────────────────────────── */
  html .nav { padding: .45rem 1rem; row-gap: .45rem; gap: .3rem; }
  html .logo img { height: 34px; }
  /* "Consultar pedido" ya está en el menú ☰ */
  html .hdr-consulta { display: none; }
  html .nav-acc { width: 44px; height: 44px; padding: 0; justify-content: center; }
  html .nav-acc svg { width: 22px; height: 22px; }
  html .hdr-cart { width: 44px; height: 44px; }
  html .hbg { width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
  html .hbg span { width: 22px; height: 2px; }
  html #mnav { padding: .6rem 1rem 1rem; }
  html #mnav a { padding: .95rem 1rem; font-size: 1rem; }

  /* Buscador de la cabecera */
  html .search-box input { padding: .62rem .5rem; }
  html .search-box button { min-height: 42px; padding: .6rem 1rem; font-size: .9rem; }
  html .search-suggest a,
  html .search-suggest button { min-height: 44px; }

  /* Fila de categorías: botón "Categorías" + accesos directos en una
     tira que se desliza con el dedo (antes solo se veía el botón). */
  html .nav-row2 {
    height: auto; padding: .4rem 1rem .5rem; gap: .45rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  html .nav-row2::-webkit-scrollbar { display: none; }
  html .catmenu-trigger { min-height: 40px; padding: .5rem .9rem; }
  html .catmenu-trigger span { display: inline; }
  html .nav-row2 .navl { display: flex; flex-wrap: nowrap; gap: .4rem; }
  html .nav-row2 .navl a {
    display: flex; align-items: center; min-height: 40px; white-space: nowrap;
    padding: .45rem .85rem; border: 1px solid var(--bdr); border-radius: 999px;
    background: #fff; color: var(--navy); font-size: .84rem;
  }
  html .nav-row2 .navl a::after { display: none; }
  /* Al bajar por la página la tira de categorías se recoge y la cabecera
     fija se queda solo con logo, cuenta, carrito, menú y buscador. */
  html header.scrolled .nav-row2 { display: none; }

  /* Paneles laterales (categorías, carrito, filtros) */
  html .catmenu-close,
  html .cart-close,
  html .filtros-close { width: 44px; height: 44px; }
  html .catmenu-item { min-height: 48px; }
  html .catmenu-subitem { padding: .75rem .6rem; font-size: .9rem; }
  html .catmenu-trending a { min-height: 44px; }
  html .catmenu-item .cmc,
  html .catmenu-trending h4,
  html .catmenu-trending .cmbadge { font-size: .72rem; }
  html .cart-clear { padding: .6rem .2rem; font-size: .85rem; }

  /* El carrito ya está siempre visible en la cabecera fija: la bola
     flotante sobraba y tapaba textos y la burbuja del chat. */
  html .cart-fab-round { display: none; }

  /* ── Portada: carrusel e imagen secundaria ───────────────── */
  /* Con imagen: la caja toma la proporción de la imagen (1600×450 y
     700×380) en vez de una altura fija que la recortaba por los lados. */
  html .hero-carrusel { padding-top: 1rem; }
  html .hero-carrusel-slot.has-img { height: auto; aspect-ratio: 1600 / 450; border-radius: 12px; }
  html .hero-carrusel-slot.has-img img { border-radius: 10px; }
  html .hero-carrusel-dots span { width: 9px; height: 9px; }
  html .hero-carrusel-dots span.active { width: 24px; }
  html .franjadoble-hueco.has-img { min-height: 0; aspect-ratio: 700 / 380; }

  /* ── Destacados ───────────────────────────────────────────── */
  html .destacados-head { align-items: flex-end; }
  html .destacados-vermas { padding: .5rem 0; font-size: .86rem; }
  html .destacados-sub { font-size: .8rem; }
  html .destacados-dots { gap: .8rem; }
  html .destacados-dot { width: 10px; height: 10px; }
  html .dcard-cat, html .dcard-envio, html .dcard-stock { font-size: .72rem; }
  html .dcard-name { font-size: .86rem; }

  /* Categorías destacadas */
  html .catdest-desc, html .catdest-link { font-size: .78rem; }
  html .catdest-link { display: inline-block; padding: .35rem 0; }

  /* ── Rejilla de productos ─────────────────────────────────── */
  html .tienda-toolbar { gap: .6rem; }
  html .tienda-sort select { min-height: 42px; }
  html .filtros-toggle { min-height: 42px; }
  html .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  html .prod-body { padding: .25rem .7rem .8rem; }
  html .prod-cat, html .prod-stock, html .prod-ref { font-size: .72rem; }
  html .prod-name {
    font-size: .85rem; min-height: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Precio arriba y botón "Añadir" a lo ancho debajo: antes iban en la
     misma fila y el botón se salía de la tarjeta. */
  html .prod-foot { flex-direction: column; align-items: stretch; gap: .45rem; }
  html .prod-price { font-size: 1.1rem; }
  html .prod-add { justify-content: center; min-height: 44px; font-size: .88rem; }
  html .tienda-pager button,
  html .tienda-pager a { min-width: 44px; min-height: 44px; }

  /* ── Formularios (login, registro, consulta de pedido, cuenta) ─ */
  html form button[type=submit],
  html .btn, html .btn-primary,
  html .acc-btn { min-height: 48px; }
  /* Enlaces de texto sueltos: más zona pulsable sin cambiar su aspecto */
  html .acc-links a,
  html .acc-foot a,
  html .cp-ayuda a { display: inline-block; padding: .6rem .15rem; }
  html .btns { display: inline-flex; align-items: center; min-height: 44px; }

  /* Migas de pan y "Volver" (producto, configurador) */
  html .pd-breadcrumb { font-size: .8rem; row-gap: 0; }
  html .pd-breadcrumb a { display: inline-block; padding: .5rem 0; }
  html .pd-back { padding: .6rem 0; }

  /* Selector de cantidad de la ficha de producto */
  html .qty button, html .pd-qty button { min-width: 44px; min-height: 44px; }

  /* ── Pie de página ────────────────────────────────────────── */
  html .fg { gap: 2rem; padding: 2.5rem 0 1.5rem; }
  html .fc h4 { font-size: .72rem; }
  html .fc ul { gap: 0; }
  html .fc ul a { display: block; padding: .55rem 0; font-size: .95rem; }
  html .fci a { display: inline-block; padding: .3rem 0; font-size: .95rem; }
  html .fci strong { font-size: .75rem; }
  html .soc { width: 44px; height: 44px; }
  html .soc svg { width: 17px; height: 17px; }
  html .fbot { font-size: .72rem; padding-bottom: 5.5rem; } /* hueco para la burbuja del chat */
  html .flegal a { display: inline-block; padding: .5rem .2rem; font-size: .78rem; }

  /* Aviso de cookies: botones cómodos */
  html .ckb button { min-height: 46px; font-size: .9rem; }
}

/* ═══════════════════════════════════════════════════════════════
   AUTOAJUSTE A CUALQUIER ANCHO DE PANTALLA (16/09/2026)

   El problema que se veía en el móvil de Hamza: con el navegador con
   zoom, o con el tamaño de letra del sistema grande, el ancho útil baja
   a ~300px (aunque el móvil sea de 360 o 412). A ese ancho, varias
   rejillas de 2 columnas y algunas filas no sabían encogerse y la web
   se salía por la derecha… y como antes se recortaba el desbordamiento,
   en vez de poder deslizarla, se veía CORTADA.

   La solución va por tres caminos:
   1. Que todo pueda encoger: en una rejilla o fila flexible, los hijos
      traen de serie "no encojas por debajo de tu contenido"
      (min-width:auto); con min-width:0 ya pueden.
   2. Márgenes laterales fluidos con clamp(): se estrechan solos en
      pantallas pequeñas en vez de comerse el ancho útil.
   3. Por debajo de 400px, una sola columna en las rejillas y textos
      grandes con tamaño fluido.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* 1) Que nada imponga un ancho mínimo mayor que la pantalla */
  html .catdest-grid > *, html .servicios-grid > *, html .catpreview-grid > *,
  html .prod-grid > *, html .destacados-page > *, html .confianza-item,
  html .fg > *, html .cart-item, html .cart-item > *, html .pd-grid > *,
  html .tienda-toolbar > *, html .nav > *, html .tb > *, html .tb .left, html .tb .right,
  html .prod-foot > *, html .dcard > *, html .fci > * { min-width: 0; }
  html .prod-name, html .dcard-name, html .cart-item-name,
  html .prod-cat, html .dcard-cat { overflow-wrap: anywhere; }

  /* 2) Márgenes laterales fluidos: 1.5rem en tablet → 0.65rem en pantallas muy estrechas */
  html .nav, html .nav-row2, html .ph, html .si, html .tienda-layout,
  html .tienda-toolbar, html .tienda-msg, html .tienda-aprox, html .pd-grid,
  html .pd-desc-section, html .pd-related, html .cp-wrap, html .cfg-why,
  html .estado-wrap, html .timeline {
    padding-left: clamp(.65rem, 4vw, 1.5rem);
    padding-right: clamp(.65rem, 4vw, 1.5rem);
  }
  /* En móvil el carrusel de destacados NO se sale hasta el borde: se
     alinea con el margen de la página, así no queda media tarjeta
     cortada en el lado derecho. */
  html .destacados-viewport { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  html .tb { padding-left: clamp(.5rem, 3vw, 1rem); padding-right: clamp(.5rem, 3vw, 1rem); }

  /* La barra superior se reparte en dos líneas si no cabe */
  html .tb { flex-wrap: wrap; row-gap: .35rem; }
  html .tb .left, html .tb .right { flex-wrap: wrap; }

  /* Logo proporcional al ancho */
  html .logo img { height: auto; max-height: 34px; max-width: 42vw; }

  /* Buscador: el botón se adapta y el campo nunca fuerza ancho mínimo */
  html .search-box { min-width: 0; }
  html .search-box input { min-width: 0; }
  html .search-box button { padding: .6rem clamp(.5rem, 3vw, 1rem); }

  /* Aviso de cookies dentro de la pantalla */
  html #ck, html .ck { max-width: calc(100vw - 1.2rem); }
}

/* ── Pantallas estrechas de verdad (o con zoom/letra grande): ≤ 420px ── */
@media (max-width: 420px) {
  html .catdest-grid, html .servicios-grid, html .catpreview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .destacados-head { flex-direction: column; align-items: flex-start; gap: .3rem; }
  html .tienda-toolbar { flex-direction: column; align-items: stretch; }
  html .tienda-sort { justify-content: space-between; }
  html .hdr-consulta { display: none; }
}

/* ── Muy estrecho: ≤ 340px (o zoom fuerte): todo a una columna ── */
@media (max-width: 340px) {
  html .prod-grid, html .catdest-grid, html .servicios-grid,
  html .catpreview-grid { grid-template-columns: 1fr; }
  html .confianza-item { flex: 1 1 100%; border-right: none; }
  html .logo img { max-height: 30px; }
  html .search-box button { font-size: .8rem; }
}

/* ═══════════════════════════════════════════════════════════════
   BARRA SUPERIOR SIEMPRE EN UNA SOLA LÍNEA (16/09/2026)
   Antes se partía en dos filas en pantallas estrechas y ocupaba el
   doble. Ahora los chips, las redes y el aviso de horario encogen a la
   vez para caber en una sola línea; por debajo de 340px las redes se
   ocultan (siguen en el pie de página).
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html .tb { flex-wrap: nowrap; gap: .3rem; }
  html .tb .left, html .tb .right { flex-wrap: nowrap; gap: .3rem; min-width: 0; }
  html .tb-chip { min-width: 32px; min-height: 32px; padding: .28rem .4rem; flex-shrink: 0; }
  html .tb-chip svg { width: 14px; height: 14px; }
  html .tb-soc { width: 30px; height: 30px; flex-shrink: 0; }
  html .tb-soc img { width: 14px; height: 14px; }
  html .biz-badge { padding: .25rem .5rem; margin-left: 0; min-width: 0; }
  html .biz-state { font-size: .66rem; }
}
@media (max-width: 400px) {
  html .tb-soc { width: 27px; height: 27px; }
  html .tb-soc img { width: 13px; height: 13px; }
  html .tb-chip { min-width: 30px; padding: .25rem .32rem; }
  html .tb { gap: .22rem; }
  html .tb .left, html .tb .right { gap: .22rem; }
}

/* Las redes solo desaparecen de la barra superior en pantallas
   diminutas (por debajo de 290px): hasta ahí caben en la misma línea. */
@media (max-width: 289px) {
  html .tb-soc { display: none; }
}

/* ── Pantallas extremas (≤300px: móvil pequeño con mucho zoom) ──
   La fila "cantidad + Añadir al carrito" de la ficha de producto y las
   casillas del configurador no cabían y sobresalían unos píxeles. */
@media (max-width: 300px) {
  html .pd-buyrow { flex-wrap: wrap; }
  html .pd-buybtn { flex: 1 1 100%; min-width: 0; }
  html .pd-qty { width: 100%; justify-content: space-between; }
  html .cfg-slot-grid { grid-template-columns: 1fr; }
  html .cfg-slot { min-width: 0; }
}

/* ── Configurador en móvil (16/09/2026) ─────────────────────────────────
   La vista interactiva del equipo es útil, pero a pantalla completa se
   comía todo el alto antes de llegar a las piezas. En el móvil se pone en
   horizontal (dibujo a la izquierda, texto y leyenda a la derecha) y con
   el dibujo más bajito, así se ve de un vistazo sin empujar el contenido. */
@media (max-width: 619px) {
  html .cfg-vista{display:grid;grid-template-columns:120px 1fr;gap:.5rem .9rem;align-items:center;text-align:left;padding:.9rem}
  html .cfgv-svg{grid-row:1/5;max-height:200px}
  html .cfgv-titulo{margin-bottom:0;font-size:.95rem}
  html .cfgv-ayuda{margin-bottom:0;font-size:.72rem}
  html .cfgv-info{min-height:0;margin-top:0;font-size:.76rem}
  html .cfgv-leyenda{justify-content:flex-start;margin-top:0}
}
@media (max-width: 380px) {
  html .cfg-vista{grid-template-columns:100px 1fr;gap:.4rem .7rem}
  html .cfgv-svg{max-height:170px}
  html .cfgv-leyenda{gap:.15rem .5rem;font-size:.66rem}
}
/* Etiquetas de datos y ranuras del configurador */
@media (max-width: 767px) {
  html .cfg-slot-grid{grid-template-columns:1fr}
  html .sel-orden-fila select{min-height:42px}
  html .cfg-progreso p{font-size:.8rem}
}

/* ── Configurador: revisión móvil 18/09/2026 ──
   - El panel para elegir pieza dejaba una franja de la página a la izquierda
     (94vw): en el móvil ocupa todo el ancho.
   - En la lista de discos/ventiladores el nombre quedaba en una columna
     estrechísima (4 líneas) por el precio y "Quitar": pasan a la línea de abajo. */
@media (max-width: 767px) {
  html .sel-panel{width:100%}
}
/* Móviles de ~285-300px útiles (zoom o letra grande): la barra superior se
   pasaba unos píxeles, el logo sobresalía 3px de su caja y el botón
   "Añadir al carrito" de la ficha no cabía junto a la cantidad hasta 340px. */
@media (max-width: 340px) {
  html .pd-buyrow { flex-wrap: wrap; }
  html .pd-buybtn { flex: 1 1 100%; min-width: 0; }
  html .pd-qty { width: 100%; justify-content: space-between; }
}
@media (max-width: 310px) {
  html .tb-chip { min-width: 27px; min-height: 30px; padding: .2rem .24rem; }
  html .tb-soc { width: 25px; height: 25px; }
  html .tb, html .tb .left, html .tb .right { gap: .15rem; }
  html .biz-badge { padding: .2rem .35rem; }
  html .biz-state { font-size: .6rem; }
  html .logo { min-width: 0; }
  html .logo img { max-width: 100%; }
  html .cfg-pick-btn { min-width: 0; max-width: 100%; padding-left: .6rem; padding-right: .6rem; white-space: normal; }
}