/* ==========================================================================
   ListKr - global responsive layer
   Keeps every page usable from 320px phones up to ultra-wide desktops, with
   special care for the 1000-1280px laptop range where the header, filter row
   and card grids used to overflow.
   ========================================================================== */

/* ---------- 1. never let a page scroll sideways ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { min-width: 0; }
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* ---------- 2. fluid page gutters ---------- */
.px-margin-desktop { padding-left: clamp(14px, 3.2vw, 40px) !important; padding-right: clamp(14px, 3.2vw, 40px) !important; }
.px-margin-mobile  { padding-left: clamp(14px, 3.2vw, 24px) !important; padding-right: clamp(14px, 3.2vw, 24px) !important; }
.max-w-container-max { width: 100%; }

/* ---------- 3. header: fits the 1024px laptop range ---------- */
@media (max-width: 1279px) {
  header .h-20 { height: 68px; gap: 12px; }
  header #location-btn { padding: 6px 12px; }
  header #category-btn { padding: 6px 12px; }
  header #category-btn span:nth-child(2) { display: none; }   /* icon-only categories */
  header #sell-gadget-btn { padding: 8px 16px; }
}
@media (max-width: 1120px) {
  header #location-btn span:nth-child(2) { display: none; }    /* icon-only location */
  header .flex-1 input#search::placeholder { font-size: 13px; }
}
@media (max-width: 900px) {
  header .h-20 { height: 62px; }
  header #sell-gadget-btn span.material-symbols-outlined { margin-right: 0; }
}
@media (max-width: 640px) {
  header .h-20 { gap: 8px; }
  header #sell-gadget-btn { padding: 8px 13px; font-size: 12.5px; }
}

/* ---------- 4. quick-filter tiles + filter row ---------- */
@media (max-width: 1279px) {
  .grid.grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.grid-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .grid.grid-cols-6, .grid.grid-cols-5, .grid.grid-cols-4, .grid.grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 430px) {
  .grid.grid-cols-6, .grid.grid-cols-5, .grid.grid-cols-4, .grid.grid-cols-3, .grid.grid-cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 5. card grids stay readable on every width ---------- */
@media (max-width: 1279px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .md\:grid-cols-4, .lg\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3, .lg\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .md\:grid-cols-4, .lg\:grid-cols-4, .md\:grid-cols-3, .lg\:grid-cols-3,
  .md\:grid-cols-2, .sm\:grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 6. two-column page shells (form + sidebar, product, settings) ---------- */
@media (max-width: 1100px) {
  .lg\:col-span-7, .lg\:col-span-5, .lg\:col-span-8, .lg\:col-span-4,
  .lg\:col-span-9, .lg\:col-span-3 { grid-column: span 12 / span 12; }
}

/* ---------- 7. typography scales down instead of clipping ---------- */
@media (max-width: 1024px) {
  .text-display-lg { font-size: clamp(30px, 4.4vw, 46px) !important; line-height: 1.15 !important; }
  .text-display-md { font-size: clamp(26px, 3.8vw, 38px) !important; line-height: 1.18 !important; }
  .text-headline-md { font-size: clamp(19px, 2.6vw, 26px) !important; }
  .text-headline-sm { font-size: clamp(17px, 2.2vw, 22px) !important; }
}

/* ---------- 8. sticky sidebars stop fighting short viewports ---------- */
@media (max-width: 1100px) {
  .sticky.top-24, .sticky.top-20, .sticky.top-8 { position: static !important; }
}

/* ---------- 9. horizontal rails (featured slider, chips) scroll politely ---------- */
@media (max-width: 1024px) {
  .tx-fs-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tx-fs-viewport::-webkit-scrollbar { display: none; }
}

/* ---------- 10. footer ---------- */
@media (max-width: 900px) {
  footer .md\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
}
@media (max-width: 520px) {
  footer .grid { grid-template-columns: minmax(0, 1fr) !important; }
  .tx-ft-escrow { padding-right: 12px; }
}

/* ---------- 11. forms + dialogs on small screens ---------- */
@media (max-width: 640px) {
  .tx-cf-field, input, select, textarea { font-size: 16px !important; } /* stops iOS zoom */
  .rounded-xl, .rounded-2xl { border-radius: 14px; }
  .p-stack-lg { padding: 18px !important; }
}

/* ---------- 12. chat dock never covers the whole phone screen ---------- */
@media (max-width: 560px) {
  #tx-dock .tx-dw { width: calc(100vw - 20px) !important; right: 10px !important; left: auto !important; }
  #tx-dock-panel { width: calc(100vw - 20px) !important; right: 10px !important; }
}