/* TOPDON 1.2.2: ajustes responsive aprobados — íconos de categorías y búsqueda como LAUNCH.
   Solo reorganiza el formulario existente; conserva la búsqueda AJAX nombre/SKU. */
@media (max-width: 1000px) {
  header .wrap.header-inner {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 13px !important;
    padding-bottom: 14px !important;
  }
  header .header-inner > .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    justify-self: start;
  }
  header .header-inner > .header-actions-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end;
    min-width: 0;
    margin: 0;
  }
  header .header-inner > form.topdon-search {
    display: flex !important;
    position: relative !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 47px !important;
    min-height: 47px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #30435a !important;
    border-radius: 10px !important;
    background: #111923 !important;
    color: #a9bbce;
    box-shadow: none !important;
    inset: auto !important;
    z-index: 15;
  }
  header .header-inner > form.topdon-search:focus-within {
    border-color: #10acf9 !important;
    box-shadow: 0 0 0 3px rgba(16,172,249,.12) !important;
  }
  header .header-inner > form.topdon-search svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: #10acf9;
  }
  header .header-inner > form.topdon-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f4f8ff;
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.3;
  }
  header .header-inner > form.topdon-search input::placeholder { color: #8496ac; opacity: 1; }
  header .header-inner > form.topdon-search .search-key { display: none !important; }
  /* Ya existe la barra; no mostrar la lupa independiente en teléfonos ni tablet. */
  header .header-icons > #tabSearch { display: none !important; }
  /* El desplegable de resultados pertenece al formulario, bajo su segunda fila. */
  header .header-inner > form.topdon-search .td-search-results {
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    max-height: min(55vh, 370px);
  }
}

@media (max-width: 767px) {
  /* Recuperar los 3 cuadros con SVG que antes se ocultaban por display:none. */
  .td-cat-strip .td-cat-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 150px !important;
    gap: 14px !important;
    padding: 18px !important;
  }
  .td-cat-strip .td-cat-card .td-cat-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .td-cat-strip .td-cat-card h3 {
    font-size: clamp(21px, 6vw, 25px) !important;
    line-height: 1.1 !important;
    overflow-wrap: break-word;
  }
  .td-cat-strip .td-cat-card .td-cat-visual {
    display: flex !important;
    position: relative;
    flex: 0 0 92px !important;
    width: 92px !important;
    min-width: 0 !important;
    align-self: center !important;
    justify-content: center !important;
    align-items: center !important;
    visibility: visible !important;
  }
  .td-cat-strip .td-cat-card .td-cat-iconbox {
    width: 90px !important;
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
  }
  .td-cat-strip .td-cat-card .td-cat-iconbox svg {
    display: block !important;
    width: 47px !important;
    height: 47px !important;
  }
}

@media (max-width: 380px) {
  header .wrap.header-inner { column-gap: 6px !important; }
  header .header-inner .header-actions-wrap { gap: 8px !important; }
  header .header-inner .header-icons { gap: 10px !important; }
  .td-cat-strip .td-cat-card { gap: 9px !important; padding: 15px !important; min-height: 138px !important; }
  .td-cat-strip .td-cat-card .td-cat-visual { flex-basis: 74px !important; width: 74px !important; }
  .td-cat-strip .td-cat-card .td-cat-iconbox { width: 74px !important; height: 74px !important; border-radius: 13px !important; }
  .td-cat-strip .td-cat-card .td-cat-iconbox svg { width: 40px !important; height: 40px !important; }
  .td-cat-strip .td-cat-card h3 { font-size: 21px !important; }
}