/**
 * fold.css — Soporte responsive para celulares plegables (foldables)
 * ==================================================================
 * Cubre la pantalla EXTERNA de los plegables (estado cerrado), el ancho
 * más angosto del mercado, que cae por debajo del piso de breakpoints
 * del tema (480px):
 *   · Galaxy Z Fold (cover)   ~344px
 *   · Galaxy Fold original    ~280px
 * La pantalla INTERNA (abierta, ~717–884px) ya queda cubierta por los
 * breakpoints 768–900 existentes.
 *
 * NOTA: NO requiere un <meta viewport> extra. El meta estándar
 * (width=device-width) ya reporta el ancho real del plegable en cada
 * estado; acá sólo afinamos el CSS para esos anchos.
 *
 * Estrategia: dos escalones acotados (≤360px y ≤300px) que ajustan SÓLO
 * los puntos que se aprietan, sin duplicar el sistema responsive base.
 */

/* ───────────────────────────────────────────────────────────────
   Fold cerrado — pantalla externa (≤360px, p. ej. Z Fold cover ~344px)
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {

  /* Blindaje anti scroll horizontal */
  html, body { overflow-x: clip; }

  /* El padding lateral del contenedor (clamp) deja ~20px/lado: en 280px
     son 40px = 14% del ancho. Lo reducimos para ganar área útil. */
  :root { --container-pad: 0.875rem; }

  /* ── Header: compactar para que logo + acciones no compitan ── */
  .site-header__inner   { gap: .5rem; }
  .site-header__actions { gap: .35rem; }
  .site-logo img        { max-height: 34px; width: auto; }
  .site-logo--text      { font-size: 1.05rem; }

  /* ── Títulos de sección: bajar un punto la escala ── */
  .tp-section__title  { font-size: clamp(1.15rem, 6vw, 1.45rem); }
  .tp-section__header { gap: .35rem; }

  /* ── Carruseles: mostrar un poco más de la card siguiente ── */
  .tp-category-slide { flex-basis: calc(66% - .4rem); }

  /* ── Cards de producto (home): tipografía y CTA compactos ── */
  .tp-product-card__name  { font-size: .8rem; line-height: 1.25; }
  .tp-product-card__price { font-size: .9rem; }
  .tp-product-card__cta   { font-size: .72rem; padding: .45rem .5rem; }

  /* ── Cards de loop WooCommerce (tienda/categoría) ──
       El prefijo `body` sube la especificidad para ganarle a woocommerce.css
       sin depender del orden de carga de los stylesheets. */
  body .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: .8rem;
    line-height: 1.25;
  }
  body .woocommerce ul.products li.product .price { font-size: .85rem; }
  body .woocommerce ul.products li.product .button,
  body .woocommerce ul.products li.product a.add_to_cart_button {
    font-size: .72rem;
    padding: .45rem .5rem;
  }

  /* ── Footer EME (F6): de 2 columnas a 1 para que respiren los links ── */
  .tp-f6__menus { grid-template-columns: 1fr; }

  /* ── Grilla de tienda: 2 cols a ~150px aún funcionan en cover (~344px);
       sólo apretamos el gap para que no se corte el botón ── */
  body .tp-shop-cols-2 ul.products,
  body .tp-shop-cols-3 ul.products,
  body .tp-shop-cols-4 ul.products { gap: .5rem; }
}

/* ───────────────────────────────────────────────────────────────
   Fold ultra-angosto — Galaxy Fold original (≤300px)
   A este ancho 2 columnas dejan de ser legibles → 1 columna full-width
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 300px) {

  /* Grilla de tienda → 1 columna (`body` para ganarle a woocommerce.css) */
  body .tp-shop-cols-2 ul.products,
  body .tp-shop-cols-3 ul.products,
  body .tp-shop-cols-4 ul.products,
  body .woocommerce ul.products,
  body .woocommerce-page ul.products {
    grid-template-columns: 1fr;
  }

  /* Grillas de producto del home → 1 columna */
  .tp-products-grid--cols-2,
  .tp-products-grid--cols-3,
  .tp-products-grid--cols-4 {
    grid-template-columns: 1fr;
  }

  /* En 1 columna el botón de loop full-width y más tappable */
  body .woocommerce ul.products li.product .button,
  body .woocommerce ul.products li.product a.add_to_cart_button {
    width: 100%;
    text-align: center;
  }
}