/* ═══════════════════════════════════════════════════════════════════
   CATALOGO MOBILE FIX v17
   - Categorías: grid vertical 2 columnas
   - Productos: 2 columnas más anchas
   - Landing: espacio arriba + botón "Agregar" más grueso
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tablets: 2 columnas ── */
@media (max-width: 900px) and (min-width: 701px) {
  .f3-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .f3-card-img {
    aspect-ratio: 1 / 1 !important;
    max-height: 200px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FRAME 2 · CATEGORÍAS EN MOBILE (grid 2 columnas)
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  #f2 .frame-content {
    padding-top: calc(var(--header-h) + 20px) !important;
    padding-bottom: 30px !important;
    overflow-y: auto !important;
  }

  .f2-head {
    margin-bottom: 18px !important;
  }
  .f2-title {
    font-size: 28px !important;
  }
  .f2-eyebrow {
    font-size: 9px !important;
    margin-bottom: 6px !important;
  }

  .f2-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    scroll-snap-type: none !important;
  }

  .f2-card,
  .f2-grid:hover .f2-card,
  .f2-grid .f2-card:hover {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 16px !important;
    scroll-snap-align: none !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .f2-card-img {
    filter: brightness(.5) !important;
    transform: none !important;
  }

  .f2-card-overlay {
    background: linear-gradient(0deg,
      rgba(0,0,0,.95) 0%,
      rgba(0,0,0,.75) 40%,
      rgba(0,0,0,.35) 75%,
      rgba(0,0,0,.1) 100%) !important;
  }

  .f2-card-label {
    display: none !important;
  }

  .f2-card-detail {
    opacity: 1 !important;
    transform: none !important;
  }

  .f2-card-content {
    padding: 14px 12px !important;
  }

  .f2-card-evoke {
    font-size: 10px !important;
    margin-bottom: 3px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .f2-card-name {
    font-size: 18px !important;
    line-height: 1.05 !important;
    margin-bottom: 3px !important;
  }

  .f2-card-meta {
    margin-top: 8px !important;
  }
  .f2-card-count {
    font-size: 9px !important;
    letter-spacing: .15em !important;
  }
  .f2-card-arrow {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FRAME 3 · PRODUCTOS EN MOBILE (2 columnas)
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  #f3 .frame-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .f3-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 4px 4px 80px !important;
  }

  .f3-card {
    border-radius: 14px !important;
  }

  .f3-card-img {
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
  }
  .f3-card-img img {
    object-fit: cover !important;
    object-position: center !important;
  }

  .f3-card-tags {
    padding: 6px 8px !important;
    gap: 3px !important;
    min-height: 28px !important;
  }
  .f3-tag {
    font-size: 7px !important;
    padding: 2px 5px !important;
    letter-spacing: .05em !important;
  }

  .f3-card-name {
    font-size: 12px !important;
    line-height: 1.25 !important;
    padding: 8px 10px !important;
  }

  .f3-card-meta {
    font-size: 9px !important;
    padding: 6px 10px !important;
  }

  .f3-card-price-row {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .f3-card-price {
    font-size: 12px !important;
  }
  .f3-card-price.discounted .old {
    font-size: 9px !important;
  }
  .f3-card-quick-add {
    width: 26px !important;
    height: 26px !important;
    font-size: 15px !important;
  }

  .f3-card-discount {
    font-size: 8px !important;
    padding: 2px 6px !important;
    top: 6px !important;
    left: 6px !important;
  }
  .f3-card-qty {
    width: 22px !important;
    height: 22px !important;
    font-size: 9px !important;
    top: 6px !important;
    right: 6px !important;
  }
  .f3-card-qty.granel {
    width: auto !important;
    height: auto !important;
    padding: 2px 6px !important;
    font-size: 9px !important;
  }

  .f3-card-placeholder .name  { font-size: 12px !important; }
  .f3-card-placeholder .brand { font-size: 7px !important; }

  .f3-sort-btn {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ★ LANDING (DETALLE DE PRODUCTO) EN MOBILE
   FIX: más espacio arriba + botón "Agregar" más grueso
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* Stage: MÁS padding arriba para no tapar la imagen con header/marquee */
  .landing-stage {
    padding: 100px 16px 90px !important;  /* ← subido de 60px a 100px */
    align-items: flex-start !important;
  }

  /* Contenido: una sola columna */
  .landing-content {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Zona de imágenes */
  .landing-imagery {
    max-width: 260px !important;
    margin: 0 auto !important;
  }

  /* Ficha del producto (imagen principal) */
  .landing-img-ficha {
    top: 0 !important;
    left: 50% !important;
    width: 100% !important;
    transform: translateX(-50%) translateY(0) !important;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,.5), 0 0 0 8px rgba(244,239,230,.05) !important;
  }
  #landing.on .landing-img-ficha {
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Fondo de contexto: oculto en mobile */
  .landing-img-context {
    display: none !important;
  }

  /* Info: sin padding lateral */
  .landing-info {
    padding: 0 4px !important;
    text-align: left !important;
  }

  .landing-info .breadcrumb {
    font-size: 8px !important;
    letter-spacing: .2em !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .landing-info .brand {
    font-size: 9px !important;
    letter-spacing: .25em !important;
    margin-bottom: 8px !important;
  }

  .landing-info h2 {
    font-size: 26px !important;
    line-height: 1.1 !important;
    margin-bottom: 12px !important;
    word-break: break-word !important;
  }

  .landing-info .evoke {
    font-size: 16px !important;
    margin-bottom: 16px !important;
  }

  .landing-info .desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }

  .landing-info .specs {
    gap: 6px !important;
    margin-bottom: 18px !important;
  }
  .landing-info .spec {
    font-size: 10px !important;
    padding: 5px 10px !important;
  }

  .landing-info .price-row {
    padding: 14px 0 !important;
    margin-bottom: 18px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .landing-info .price {
    font-size: 30px !important;
  }
  .landing-info .price-old {
    font-size: 15px !important;
  }
  .landing-info .price-save {
    font-size: 10px !important;
    padding: 4px 8px !important;
    margin-left: 0 !important;
  }

  /* Controles: cantidad centrada + botón grande abajo */
  .landing-controls {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .landing-qty {
    align-self: center !important;
  }

  /* ★ Botón "Agregar al carrito" MÁS GRUESO */
  .landing-add {
    width: 100% !important;
    padding: 14px 20px !important;   /* ← más padding vertical */
    min-height: 54px !important;      /* ← altura mínima más generosa */
    height: auto !important;          /* ← que crezca si hace falta */
    font-size: 13px !important;       /* ← texto un poquito más grande */
    letter-spacing: .15em !important; /* ← menos apretado */
    line-height: 1.2 !important;
  }
  .landing-add svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Botón "Seguir eligiendo" arriba */
  .landing-back {
    top: 12px !important;
    left: 12px !important;
    padding: 7px 12px 7px 10px !important;
    font-size: 9px !important;
  }
  .landing-back svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Botón "Cerrar" (×) */
  .landing-close {
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }

  /* Botón "Volver al catálogo" abajo */
  .landing-back-fixed {
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 8px 16px !important;
    font-size: 10px !important;
    z-index: 10 !important;
  }
  .landing-back-fixed:hover {
    transform: translateX(-50%) translateY(-2px) !important;
  }

  /* Badge de descuento */
  .landing-img-discount {
    font-size: 9px !important;
    padding: 6px 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CELULARES MUY CHICOS (≤380px)
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {

  /* Categorías */
  .f2-title {
    font-size: 24px !important;
  }
  .f2-grid {
    gap: 8px !important;
  }
  .f2-card,
  .f2-grid:hover .f2-card,
  .f2-grid .f2-card:hover {
    aspect-ratio: 4 / 5 !important;
    border-radius: 14px !important;
  }
  .f2-card-content {
    padding: 12px 10px !important;
  }
  .f2-card-name {
    font-size: 16px !important;
  }
  .f2-card-evoke {
    font-size: 9px !important;
  }
  .f2-card-count {
    font-size: 8px !important;
  }
  .f2-card-arrow {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  /* Productos */
  #f3 .frame-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .f3-grid {
    gap: 6px !important;
    padding: 4px 4px 80px !important;
  }
  .f3-card-tags {
    padding: 5px 7px !important;
  }
  .f3-tag {
    font-size: 6.5px !important;
    padding: 2px 4px !important;
  }
  .f3-card-name {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
  .f3-card-meta {
    font-size: 8px !important;
    padding: 5px 8px !important;
  }
  .f3-card-price-row {
    padding: 6px 8px !important;
  }
  .f3-card-price {
    font-size: 11px !important;
  }
  .f3-card-quick-add {
    width: 22px !important;
    height: 22px !important;
    font-size: 13px !important;
  }

  /* Landing ajustes finos */
  .landing-stage {
    padding: 90px 12px 80px !important;
  }
  .landing-imagery {
    max-width: 220px !important;
  }
  .landing-info h2 {
    font-size: 22px !important;
  }
  .landing-info .evoke {
    font-size: 14px !important;
  }
  .landing-info .desc {
    font-size: 12px !important;
  }
  .landing-info .price {
    font-size: 26px !important;
  }
  .landing-add {
    min-height: 50px !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
  }
}