/* ═══════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Media Queries Only
   Sirf is file ko style.css ke baad link karein:
   <link href="style.css" rel="stylesheet" />
   <link href="responsive.css" rel="stylesheet" />

   Layout Logic:
     Desktop  → sidebar | main | preview  (unchanged)
     ≤1024px  → preview thoda chhota
     ≤768px   → STACKED:
                 [HEADER — fixed top]
                 [IFRAME — 50vh fixed]
                 [UI PANEL — 50vh, sirf andar scroll]
                 Body/wrapper KABHI scroll nahi karta
═══════════════════════════════════════════════════════════ */


/* ── iPad LANDSCAPE + small desktops (769px – 1024px) ── */
@media (max-width: 1024px) and (min-width: 769px) {
  .preview  { width: 280px; min-width: 280px; }
  .main     { padding: 20px 18px; max-width: none; }
  .fab-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ── MOBILE + iPad PORTRAIT (≤768px) — stacked layout ── */
@media (max-width: 768px) {
    .msmt-layout{
        width: 100% !important;
    }
    .msmt-right {
        width: 100%; !important
        min-width: 100% !important;
        position: static !important;
        height: auto !important;           /* auto se fixed height do */
        min-height: 120px !important;      /* ya jitna chahiye */
        flex-direction: column !important; /* items stack hon */
        align-items: flex-start !important;
        padding: 16px !important;
        gap: 12px !important;
        transform: unset !important;
    }
    .mgv-label {
        font-size: 20px !important;        /* 18px se thoda bada */
        gap: 12px !important;
    }
      .mgv-wrap {
            width: 100% !important;
      }
      .mgv-range {
            width: 100% !important;
            font-size: 14px !important;
      }
      /* Cards upar rahen */
  .msmt-cards {
    order: 1 !important;
  }
  .msmt-panel {
    order: 2 !important;
  }
  .msmt-left .s-eye { order: 1; }
  .msmt-left .s-title { order: 2; }
  .msmt-left .s-rule { order: 3; }
  .msmt-left .msmt-cards { order: 4; }
  .msmt-left #panelStandard { order: 5; }
  .msmt-left #panelBody { order: 6; }
  /* BACK button sabse neeche */
  .nav-row {
    order: 99 !important;
    margin-top: 20px !important; 
  }
  /* --- BODY / ROOT LOCK --- */
  html, body {
    height: 100%;
    overflow: hidden;
  }

  /* --- HEADER --- */
  .header {
    height: 48px;
    padding: 0 14px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 300;
  }
  .logo       { font-size: 22px; }
  .logo-sub   { display: none; }
  .h-login    { display: none; }
  .h-cta      { padding: 7px 14px; font-size: 13px; }
  .thm-lbl    { display: none; }

  /* --- SHELL — vertical column, fills remaining screen --- */
  .shell {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 48px; left: 0; right: 0; bottom: 0;
    overflow: hidden;
  }

  /* --- SIDEBAR — mobile pe hide --- */
  .sidebar { display: none; }

  /* --- PREVIEW / IFRAME — top 50vh, fixed height --- */
  .preview {
    display: flex !important;
    width: 100%;
    min-width: 100%;
    height: 50vh;
    min-height: 50vh;
    max-height: 50vh;
    flex-shrink: 0;
    position: relative;
    top: auto;
    border-left: none;
    border-bottom: 1px solid var(--line);
    padding: 0;
    justify-content: center;
    align-items: stretch;
  }
  .preview .iframeParent {
    width: 100%;
    height: 100%;
  }
  .preview iframe {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* desktop preview chrome — mobile pe nahi chahiye */
  .prev-top,
  .prev-meta,
  .btn-cart,
  .btn-look { display: none; }

  /* --- MAIN / UI PANEL — bottom 50vh, sirf andar scroll --- */
  .main {
    flex: 1;
    height: 50vh;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 14px 24px;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* --- TYPOGRAPHY --- */
  .s-title { font-size: 36px; margin-bottom: 12px; }
  .s-eye   { margin-bottom: 2px; }
  .s-rule  { margin-bottom: 16px; }
  .slbl    { margin: 14px 0 8px; }

  /* --- FABRIC GRID --- */
  .fab-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .fab-sw   { height: 60px; }

  /* --- OPTION GRIDS --- */
  .og4 { grid-template-columns: repeat(2, 1fr); }
  .og3 { grid-template-columns: repeat(2, 1fr); }

  /* --- COLOR --- */
  .cg6  { grid-template-columns: repeat(5, 1fr); }
  .cdot { width: 34px; height: 34px; }
  .ctile { height: 40px; }

  /* --- NAV ROW --- */
  .nav-row { margin-top: 24px; }
}


/* ── SMALL PHONES (≤430px) ── */
@media (max-width: 430px) {
  .fab-grid { grid-template-columns: repeat(2, 1fr); }
  .og3      { grid-template-columns: repeat(2, 1fr); }
  .og4      { grid-template-columns: repeat(2, 1fr); }
  .cg6      { grid-template-columns: repeat(4, 1fr); }
  .s-title  { font-size: 28px; }
  .header   { padding: 0 10px; }
  .h-cta    { padding: 6px 10px; font-size: 12px; }
}


/* ── LANDSCAPE PHONES (kam height wale) ── */
@media (max-height: 500px) and (orientation: landscape) {
  .preview {
    height: 45vh;
    min-height: 45vh;
    max-height: 45vh;
  }
  .main {
    height: 55vh;
    max-height: 55vh;
  }
}