/* ============================================================
   basket.fun — responsive overrides (mobile <= 760px)
   Inline JS styles are overridden with !important.
   ============================================================ */
@media (max-width: 760px) {
  .page { padding: 18px 16px 40px !important; }

  /* hero */
  .hero { grid-template-columns: 1fr !important; gap: 0 !important; padding: 0 !important; }
  .hero > div { border-right: none !important; }
  .hero > div:first-child { padding: 24px 20px 26px !important; border-bottom: 1px solid var(--line) !important; }
  .hero > div:last-child { padding: 24px 20px 22px !important; }
  .hero p { font-size: 14.5px !important; }

  /* explore cards */
  .card-grid { grid-template-columns: 1fr !important; }

  /* basket detail */
  .detail-grid { grid-template-columns: 1fr !important; }
  .detail-grid > div { position: static !important; top: auto !important; }
  .g4 { grid-template-columns: repeat(2, 1fr) !important; row-gap: 18px !important; }

  /* portfolio */
  .pf-summary { grid-template-columns: 1fr !important; }
  .pf-hero-spark { display: none !important; }
  .g5 { grid-template-columns: repeat(2, 1fr) !important; row-gap: 20px !important; }
  .pf-holdings { grid-template-columns: 1fr !important; }
  .pos-head { flex-wrap: wrap !important; }
  .pos-actions { width: 100% !important; }
  .pos-actions > button { flex: 1 !important; }

  /* kol studio */
  .kol-grid { grid-template-columns: 1fr !important; }
}

.top-search > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-search > svg,
.top-search > kbd {
  flex-shrink: 0;
}

@media (max-width: 420px) {
  .g5 { grid-template-columns: repeat(2, 1fr) !important; }
}