/* mobile-fixes.css — endurecimiento móvil global. */

/* === Special Editions OCULTO en todo el sitio (temporal, reversible: borra este bloque) === */
a[href*="special-editions"],
li:has(> a[href*="special-editions"]),
.tab[data-p="special"],
#p-special{ display: none !important; }

/* === Subitems del menú móvil (T1 Series, Supreme M bajo New Collection) === */
.mob-nav .mob-subitem{ font-size: 1.2rem !important; padding-left: 1.6rem !important; opacity: .7 !important; letter-spacing: .04em !important; }

@media (max-width: 600px){

  /* 1) Texto de CUERPO: anular los <br> que se pusieron para escritorio,
        para que el texto fluya solo en móvil (no en títulos). */
  [class*="desc"] br,
  [class*="body"] br,
  [class*="copy"] br,
  [class*="intro"] br,
  [class*="quote"] br,
  [class*="manifesto"] br,
  .mission-intro br,
  .origin-body br,
  .origin-quote br,
  [class*="stanza"] br,
  [class*="lead"] br,
  p br { display: none !important; }

  /* 1b) Los <br> de los TÍTULOS sí se respetan (son saltos intencionales). */
  [class*="title"] br,
  [class*="heading"] br,
  [class*="headline"] br,
  [class*="-name"] br,
  [class*="mega"] br,
  .stmt-text br,
  .hero-sub br { display: inline !important; }

  /* 2) Títulos: GRANDES y potentes, que envuelvan en los espacios y NUNCA se desborden. */
  [class*="title"],
  [class*="headline"],
  [class*="heading"],
  [class*="mega"]{
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    max-width: 100% !important;
  }
  /* Héroes principales: titulazo */
  .hero-title, .col-title, .stmt-mega{
    font-size: clamp(2.8rem, 14vw, 5rem) !important;
    line-height: .92 !important;
  }
  /* Títulos de sección: grandes y consistentes */
  .sec-title, .tech-headline, .dist-title, .origin-title, .vision-title,
  .mission-heading, .cta-title, .spotlight-name, .ch-title, .sg-title,
  .tlib-title{
    font-size: clamp(2.3rem, 11.5vw, 4.2rem) !important;
    line-height: .95 !important;
  }

  /* 3) Nada de texto justificado a la derecha en móvil (se ve roto). */
  .tl-left{ text-align: left !important; padding-right: 0 !important; }

  /* 4) Encabezados "titulo izquierda / boton derecha" -> apilar limpio. */
  .series-hdr, .world-hdr{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .8rem !important;
  }

  /* 5) Sin scroll horizontal accidental. */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  img, video, iframe { max-width: 100% !important; height: auto; }

  /* 5b) Become a Distributor: la columna del CTA a ancho completo para que el botón quede centrado (iPhone). */
  .wsec-cta{ max-width: 100% !important; align-items: stretch !important; }
  .wsec-cta .btn-p{ display: block !important; width: 100% !important; align-self: stretch !important; text-align: center !important; box-sizing: border-box !important; }

  /* 6) Glove finder: botones de talla en 2 filas, sin la sangría que los desbordaba. */
  .chat-opts.size-grid{ grid-template-columns: repeat(5, 1fr) !important; margin-left: 0 !important; }

  /* 7) Technologies: subnav apilado (back arriba, tabs a ancho completo) en móvil. */
  .t-subnav-inner{ flex-direction: column !important; align-items: stretch !important; padding: 0 1rem !important; }
  .t-subnav-back{ order: -1 !important; margin-left: 0 !important; align-self: flex-start !important; padding: .7rem 0 .15rem !important; }
  .t-subnav-links{ width: 100% !important; }

  /* 8) Professionals: "Trusted By / The Best" en 2 líneas (que "Trusted By" quepa). */
  .pro-title{ font-size: clamp(2.2rem, 12vw, 3.4rem) !important; line-height: 1 !important; }

  /* 9) Professionals: todas las fotos de porteros en 2 columnas. */
  .featured-grid, .pros-grid{ grid-template-columns: repeat(2, 1fr) !important; }

  /* 11b) Menú hamburguesa: mismo estilo visual en TODAS las páginas. */
  .mob-nav{ background:#0a0a0a !important; }
  .mob-close{ top:1.5rem !important; right:1.6rem !important; }
  .mob-item{ font-size:2rem !important; padding:.85rem 0 !important; letter-spacing:.05em !important; border-bottom:1px solid rgba(197,162,120,.08) !important; }

  /* 12) New models: títulos que caben en una línea y tarjetas Supreme M con nombre arriba / corte abajo. */
  .built-diff-title{ font-size: clamp(2.4rem, 12vw, 3.4rem) !important; line-height: .9 !important; }
  .si-title{ font-size: clamp(2.4rem, 12vw, 3.4rem) !important; line-height: .9 !important; white-space: nowrap !important; }
  .sm-header{ flex-direction: column !important; align-items: flex-start !important; gap: .55rem !important; }

  /* 13) Manifiesto New Collection: textos CENTRADOS en móvil, título antes de su párrafo, sin palabras pegadas. */
  .mf-grid{ display: flex !important; flex-direction: column !important; width: 100% !important; align-items: center !important; gap: 1.4rem !important; }
  .mf-col, .wbib-left, .wbib-right{ text-align: center !important; }
  .mf-col:has(.mf-headline){ order: -1 !important; }
  .mf-manifesto p, .mf-act p, .mf-col p, .wbib-left p, .wbib-right p{ text-align: center !important; }
  .mf-manifesto p br, .mf-act p br, .mf-col p br, .wbib-left p br, .wbib-right p br{ display: inline !important; }
  .mf-headline, .wbib-headline, .mf-closer-big, .mf-intro-rule, .mf-bridge-text, .mf-manifesto h2{ text-align: center !important; white-space: normal !important; }

  /* 10) Professionals: textos sobre las fotos más chicos, con sombra y degradado para que no se pierdan. */
  .fcard-body{ padding: .8rem .8rem !important; }
  .fcard-name{ font-size: 1.05rem !important; margin-bottom: .2rem !important; text-shadow: 0 2px 8px rgba(0,0,0,.92) !important; }
  .fcard-league{ font-size: .5rem !important; margin-bottom: .25rem !important; text-shadow: 0 1px 4px rgba(0,0,0,.85) !important; }
  .fcard-club{ font-size: .52rem !important; text-shadow: 0 1px 6px rgba(0,0,0,.95) !important; }
  .fcard-accent{ width: 1.7rem !important; height: 1.7rem !important; font-size: .65rem !important; top: .7rem !important; right: .7rem !important; }
  .fcard-overlay{ background: linear-gradient(to top, rgba(5,5,5,.96) 0%, rgba(5,5,5,.55) 42%, rgba(5,5,5,.12) 75%) !important; }
  .pcard-body{ padding: .7rem .7rem !important; }
  .pcard-name{ font-size: .92rem !important; text-shadow: 0 2px 7px rgba(0,0,0,.9) !important; }
  .pcard-club{ text-shadow: 0 1px 5px rgba(0,0,0,.9) !important; }

  /* 11) Professionals: hero más compacto (sin el hueco grande arriba del eyebrow). */
  .pro-hero{ min-height: auto !important; padding-top: 80px !important; padding-bottom: 2.5rem !important; }
}