/* Gabanto: aspecto de app nativa en teléfonos (<=768px). En PC no cambia nada. */
@media (max-width: 768px) {
  html, body { overflow-x: clip; max-width: 100%; }
  img, video, iframe, table { max-width: 100%; }

  /* App bar compacta */
  .app-top, .pt-top, .gf-top, .gtv-top, header.top, .app-header {
    position: sticky !important; top: 0; z-index: 45;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .app-top-inner, .pt-top-inner, .top-inner {
    min-height: 56px; padding: 6px 12px !important; gap: 8px !important;
    flex-wrap: nowrap !important; display: flex; align-items: center; justify-content: space-between;
  }
  .app-top .brand, .pt-top .pt-brand, header.top .brand { min-width: 0; flex: 1 1 auto; gap: 10px; }
  .app-top .brand img, .pt-top .pt-brand img, header.top .brand img { width: 32px !important; height: 32px !important; flex: none; }
  .app-top .brand > div, header.top .brand > div { min-width: 0; }
  /* Título = nombre del módulo; "Gabanto.com" queda como línea chica */
  .app-top .brand strong, header.top .brand strong { font-size: .68rem !important; font-weight: 700; color: #6b7a8c; line-height: 1.1; }
  .app-top .brand small, header.top .brand small {
    display: block; font-size: 1.05rem !important; font-weight: 800; color: #14243a; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .app-top .top-actions, .pt-top .pt-actions { flex: none; gap: 4px !important; flex-wrap: nowrap; }

  /* Botones de texto -> botones de ícono */
  .gbm-ico {
    position: relative; width: 42px !important; height: 42px !important; min-width: 42px; padding: 0 !important;
    display: inline-grid !important; place-items: center; border-radius: 50% !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important; color: #14243a !important;
  }
  .gbm-ico.gbm-accent { background: #4293E1 !important; color: #fff !important; }
  .gbm-ico:active { background: rgba(66,147,225,.14) !important; }
  .gbm-ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .gbm-ico .gbm-lbl, .gbm-ico #cart-count { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gbm-ico[data-badge]::after {
    content: attr(data-badge); position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: #e5484d; color: #fff; font: 800 11px/18px system-ui, sans-serif; text-align: center;
    box-shadow: 0 0 0 2px #fff;
  }
  .gbm-ico[data-badge="0"]::after { display: none; }
  .gbm-ico[hidden] { display: none !important; }

  /* Vistas a todo el ancho */
  main.wrap, .wrap { padding-left: 12px !important; padding-right: 12px !important; max-width: 100% !important; box-sizing: border-box; }

  /* Búsqueda fija bajo la app bar */
  .filters, .bus-search, .pt-search, .gbm-search {
    position: sticky !important; top: calc(56px + env(safe-area-inset-top, 0px)) !important; z-index: 30;
    background: rgba(244,247,251,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    margin-left: -12px !important; margin-right: -12px !important; padding: 8px 12px !important;
  }
  #search-form.filters { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  #search-form.filters input[type="search"] { grid-column: 1 / -1; }
  #search-form.filters input, #search-form.filters select { min-width: 0; width: 100%; height: 44px; font-size: 16px; }
  body.catalog-shop .app-top .brand small { display: block !important; }

  /* Listas en tarjetas */
  .grid > *, .card { border-radius: 16px; }

  /* Espacio para la barra inferior y zonas seguras */
  body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  body.gb-has-bar { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
}