/* ── RESPONSIVE ── */
@media(max-width:980px){
  .hero-meta { margin-left: 0; }
}
@media(max-width:875px){
  .toolbar-btn { padding: 6px 6px; gap: 4px; }
}

@media(max-width:770px){
  /* Browse toolbar (pricing/sort pill groups + view toggle) has more groups than the
     search toolbar, so it runs out of row space earlier and was wrapping to 2 lines
     before the JS overflow check (updateToolbarLayout) kicked in. Force it into the
     same dropdown layout that .toolbar-compact uses, scoped to .toolbar-browse only. */
  .toolbar-browse .toolbar-group-pricing,
  .toolbar-browse .toolbar-group-sort { display: none; }
  .toolbar-browse .toolbar-select {
    display: block;
    height: 32px;
    padding: 0 10px;
    background: var(--canvas);
    border: 1px solid var(--rule);
    border-radius: 7px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.8rem; font-weight: 500;
  }
}

@media(max-width:768px){
  /* Fix: expanding the category strip could grow it taller than the
     viewport, but .cat-strip is position:sticky — a sticky element can't be
     scrolled past its own bottom edge while stuck, so the Collapse button
     sitting below the (now tall) chip list got trapped off-screen. Dropping
     sticky while expanded lets normal page scroll reach it. */
  .cat-strip.expanded-mode { position: static; top: auto; }

  nav { padding: 0 16px; gap: 8px; }
  .nav-logo { font-size: 0.92rem; }
  .nav-logo-img { height: 22px; }
  .font-ctrl button { width: 30px; height: 28px; font-size: 0.78rem; }
  .lang-switcher-btn { height: 28px; padding: 0 4px; }
  .theme-toggle { width: 50px; height: 28px; }
  .theme-thumb { width: 22px; height: 22px; }
  .theme-toggle.is-dark .theme-thumb { transform: translateX(22px); }
  .submit-btn { padding: 0 12px; font-size: 0.72rem; height: 28px; }
  .cat-strip-inner { padding: 6px 16px; max-height: 118px; }
  .cat-strip-expand-row { padding: 0 16px 7px; }
  .cat-btn { padding: 4px 8px; font-size: 0.74rem; gap: 4px; }
  .cat-count { font-size: 0.6rem; }
  .hero-inner { gap: 16px; padding: 0 16px; }
  .hero-sub { font-size: 0.82rem; }
  main { padding: 20px 16px 8px; }
  .box-grid, #search-view .box-grid { gap: 12px; }
  .toolbar-btn { padding: 6px 8px; gap: 4px; }
}

@media(max-width:640px){
  nav { padding: 0 12px; gap: 6px; flex-wrap: nowrap; }
  .nav-logo { font-size: 0.85rem; flex-shrink: 0; }
  .nav-logo-img { height: 20px; }
  .nav-count { display: none !important; }
  .font-ctrl { gap: 1px; }
  .font-ctrl button { width: 28px; height: 28px; font-size: 0.78rem; }
  .lang-switcher-btn { height: 28px; padding: 0 4px; }
  .submit-btn { padding: 0 10px; font-size: 0.66rem; height: 28px; }
  .hero { padding: calc(var(--nav-h) + 24px) 0 24px; }
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 12px; }
  .cat-strip-inner { padding: 6px 12px; }
  .cat-strip-expand-row { padding: 0 12px 7px; }
  .hero h1 { font-size: 2.1rem; white-space: normal; margin-bottom: 12px; }
  .hero-eyebrow { margin-bottom: 8px; font-size: 0.64rem; }
  .hero-sub { margin-bottom: 10px; }
  .hero-metas { display: none; }
  .hero-qtag { height: 27px; padding: 0px 11px; }
  .trust-line { gap: 10px; }
  .trust-avatar { width: 34px; height: 34px; margin-left: -9px; font-size: 0.72rem; }
  .trust-line .stars-wrap svg { width: 13px; height: 13px; }
  .trust-line .trust-text { font-size: 0.86rem; }
  main { padding: 16px 12px 8px; }
  footer { padding: 28px 16px; }
  .toolbar-btn { padding: 6px 8px; font-size: 0.74rem; }

  .modal-overlay { padding: 12px; }
  .modal-card { max-height: 94vh; }
  .modal-head { padding: 13px 12px; }
  .modal-body { padding: 14px 12px; gap: 12px; }
  .modal-foot { padding: 10px 12px; flex-wrap: wrap; }
  .sf-row-2col { gap: 8px; }
  .ad-stage { padding: 20px 16px; }
}

@media(max-width:480px){
  nav { padding: 0 10px; gap: 4px; }
  .nav-logo { font-size: 0.78rem; }
  .nav-logo-img { height: 18px; }
  .font-ctrl button { width: 26px; height: 24px; font-size: 0.78rem; }
  .lang-switcher-btn { height: 24px; padding: 0 3px; }
  .theme-toggle { width: 42px; height: 24px; padding: 2px; }
  .theme-thumb { width: 18px; height: 18px; }
  .theme-toggle.is-dark .theme-thumb { transform: translateX(18px); }
  .theme-thumb svg { width: 13px; height: 13px; }
  .submit-btn { padding: 0 7px; font-size: 0.62rem; height: 24px; letter-spacing: 0; }
  .trust-line { gap: 8px; }
  .trust-avatar { width: 28px; height: 28px; margin-left: -7px; font-size: 0.62rem; }
  .trust-line .stars-wrap svg { width: 11px; height: 11px; }
  .trust-line .trust-text { font-size: 0.8rem; }

  /* Modal — bottom-sheet style on small phones */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-card {
    max-width: 100%; max-height: 96vh;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: none;
  }
  .modal-head { padding: 12px 14px; }
  .modal-body { padding: 14px; gap: 12px; }
  .modal-foot { padding: 10px 14px; flex-wrap: wrap; }
  .modal-btn-cancel, .modal-btn-submit { flex: 1 1 auto; justify-content: center; }
  .sf-row-2col { grid-template-columns: 1fr; gap: 12px; }
}

@media(max-width:420px){
  .box-grid, #search-view .box-grid { grid-template-columns: 1fr; }
  .row-actions { gap: 2px; }
  .row-like, .row-open { padding: 0 5px; }
}

@media(max-width:400px){
  /* Narrowest real phones (iPhone SE-class, ~320–375px): shrink the font-size
     controls further instead of hiding them, so the feature stays available. */
  .font-ctrl { gap: 0; }
  .font-ctrl button { width: 22px; height: 22px; font-size: 0.68rem; }
  .lang-switcher-btn { padding: 0 2px; }
  .lang-switcher-icon { width: 13px; height: 13px; }
  nav { gap: 3px; }
}