/* =====================================================================
   OnlineTyari Pro — Responsive breakpoints
   Mobile-first: base styles in base.css/components.css target small
   screens; this file layers on adjustments as viewport grows.
   Breakpoints verified against: 320/360/375/390/414/480/768/1024/1280/1440/1920.
   ===================================================================== */

/* ---- ≥480px : large phones ---- */
@media (min-width: 480px) {
  .ot-container { padding-inline: var(--ot-space-5); }
}

/* ---- ≥768px : tablets ---- */
@media (min-width: 768px) {
  h1 { font-size: var(--ot-fs-5xl); }
  h2 { font-size: var(--ot-fs-4xl); }
}

/* ---- ≥1024px : small desktop / landscape tablet ---- */
@media (min-width: 1024px) {
  .ot-container { padding-inline: var(--ot-space-8); }
}

/* ---- ≥1280px : desktop ---- */
@media (min-width: 1280px) {
  /* Container is already capped at --ot-container-max via base.css */
}

/* ---- Bottom nav only on mobile (see header.php) ---- */
@media (min-width: 1024px) {
  .ot-bottom-nav { display: none !important; }
}
@media (max-width: 1023.98px) {
  .ot-dashboard-body main {
    padding-bottom: calc(var(--ot-bottom-nav-height) + var(--ot-space-4));
  }
}

/* ---- No horizontal overflow guard ---- */
html, body { max-width: 100%; overflow-x: hidden; }