/* Rudra Opticals — responsive layer.
   Loaded after the page's own styles. Desktop is untouched; these rules only
   take effect on tablet and phone widths. */

img, video, canvas { max-width: 100%; height: auto; }

/* ---------- Site header ---------- */
@media (max-width: 900px) {
  .rl-head {
    flex-wrap: wrap;
    gap: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .rl-head > a:first-child { font-size: 20px !important; }

  .rl-nav {
    order: 3;
    width: 100%;
    margin-left: 0 !important;
    gap: 18px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .rl-nav::-webkit-scrollbar { display: none; }
  .rl-nav > a { white-space: nowrap; }

  .rl-actions { flex: 1 1 auto !important; min-width: 0; }
  .rl-actions > div { min-width: 0 !important; }
  .rl-actions .input { min-width: 0; }
}

@media (max-width: 560px) {
  .rl-head { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ---------- Two-column page shells ---------- */
@media (max-width: 980px) {
  .rl-split-main,
  .rl-side-layout,
  .rl-shop-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  .rl-split-main > *,
  .rl-side-layout > *,
  .rl-shop-layout > * { min-width: 0; }
  .rl-split-main > aside,
  .rl-side-layout > aside,
  .rl-shop-layout > aside,
  .rl-split-main > div[style*="position:sticky"] {
    position: static !important;
    top: auto !important;
  }
  /* on the shop, frames come first and filters sit underneath */
  .rl-shop-layout > aside { order: 2; }
  .rl-shop-layout > main  { order: 1; }
}

/* ---------- Admin shell ---------- */
@media (max-width: 900px) {
  .rl-admin { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; }
  .rl-admin > aside, .rl-admin > main { min-width: 0; }
  .rl-admin > aside {
    padding: 12px 14px !important;
    gap: 12px !important;
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .rl-admin-nav {
    flex-direction: row !important;
    gap: 6px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rl-admin-nav::-webkit-scrollbar { display: none; }
  .rl-admin-nav > button { white-space: nowrap; }
  .rl-admin-foot {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    margin-top: 0 !important;
  }
  .rl-admin-head {
    flex-wrap: wrap;
    gap: 10px !important;
    padding: 14px 16px !important;
  }
}

/* ---------- Wide content scrolls inside its own box ---------- */
@media (max-width: 900px) {
  .rl-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- Comfortable tap targets ---------- */
@media (max-width: 700px) {
  button, .btn, select, input[type="checkbox"], input[type="radio"] {
    touch-action: manipulation;
  }
  .btn { min-height: 42px; }
  /* iOS zooms the page when a focused field is under 16px */
  input, select, textarea { font-size: 16px !important; }
}