/* Mobile overrides.
   The pages are generated with inline styles only, so these rules match on the
   inline style string (React serialises it with a space after ":" and inside
   repeat()) and win with !important. Values here mirror the inventory of
   layout-critical declarations in the three pages — keep them in sync if the
   generated HTML changes. */

@media (max-width: 900px) {

  /* ---- grids: everything collapses to one column, then exceptions ---- */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: 1fr auto 1fr"] { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; }
  [style*="grid-template-columns: 64px 1fr auto"] { grid-template-columns: 56px minmax(0, 1fr) auto !important; }
  [style*="grid-template-columns: 52px 1fr auto"] { grid-template-columns: 48px minmax(0, 1fr) auto !important; }
  [style*="grid-template-columns: 26px 1fr 34px"] { grid-template-columns: 22px minmax(0, 1fr) 30px !important; }
  [style*="grid-template-columns: auto 1fr"] { grid-template-columns: auto minmax(0, 1fr) !important; }
  /* comparison tables stay 3-up so the columns keep meaning */
  [style*="grid-template-columns: 1.6fr 1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    font-size: 12px !important;
  }
  [style*="grid-template-columns: 1.6fr 1fr 1fr"] > *,
  [style*="grid-template-columns: 1.4fr 1fr 1fr"] > * { padding: 12px 8px !important; font-size: 12px !important; }

  /* ---- section gutters ---- */
  section { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="padding: 96px 36px 0"],
  [style*="padding: 100px 36px 0"],
  [style*="padding: 92px 36px 0"],
  [style*="padding: 88px 36px 0"] { padding: 56px 18px 0 !important; }
  [style*="padding: 64px 36px 32px"] { padding: 44px 18px 28px !important; }
  [style*="padding: 66px 36px 34px"] { padding: 44px 18px 28px !important; }
  [style*="padding: 22px 36px 108px"] { padding: 16px 18px 72px !important; }
  [style*="padding: 22px 36px 40px"] { padding: 16px 18px 32px !important; }
  [style*="padding: 74px 22px 74px 62px"],
  [style*="padding: 70px 24px 70px 62px"],
  [style*="padding: 64px 24px 64px 62px"],
  [style*="padding: 60px 24px 60px 60px"],
  [style*="padding: 76px 62px"],
  [style*="padding: 70px 60px"],
  [style*="padding: 54px"] { padding: 40px 20px !important; }
  [style*="padding: 0 60px 26px 4px"] { padding: 0 18px 22px 4px !important; }

  /* ---- oversized display type: fluid between phone and 900px ---- */
  [style*="font-size: 90px"],
  [style*="font-size: 88px"] { font-size: clamp(38px, 8.5vw, 76px) !important; }
  [style*="font-size: 78px"] { font-size: clamp(34px, 7.5vw, 68px) !important; }
  [style*="font-size: 70px"],
  [style*="font-size: 66px"],
  [style*="font-size: 64px"],
  [style*="font-size: 62px"],
  [style*="font-size: 60px"],
  [style*="font-size: 58px"],
  [style*="font-size: 56px"] { font-size: clamp(30px, 6vw, 52px) !important; }
  [style*="font-size: 44px"],
  [style*="font-size: 42px"] { font-size: clamp(26px, 4.6vw, 40px) !important; }
  [style*="font-size: 34px"],
  [style*="font-size: 32px"] { font-size: clamp(22px, 3.6vw, 30px) !important; }
  [style*="font-size: 30px"] { font-size: clamp(21px, 3.2vw, 28px) !important; }

  /* ---- fixed heights / widths ---- */
  [style*="min-height: 336px"],
  [style*="min-height: 300px"] { min-height: 220px !important; }
  [style*="min-height: 520px"],
  [style*="min-height: 500px"],
  [style*="min-height: 460px"],
  [style*="min-height: 420px"],
  [style*="min-height: 400px"] { min-height: 320px !important; }
  [style*="width: 560px"] { width: calc(100vw - 36px) !important; left: 0 !important; }
  [style*="width: 420px"] { width: 100% !important; max-width: 100% !important; }

  /* ---- rows wrap instead of overflowing ---- */
  [style*="display: flex"] { flex-wrap: wrap !important; }
  [style*="white-space: nowrap"] { white-space: normal !important; }
  /* grid/flex children default to min-width:auto and refuse to shrink */
  [style*="display: grid"] > *, [style*="display: flex"] > * { min-width: 0 !important; }
  [style*="max-width"] { max-width: 100% !important; }
  /* space-between rows are label/value pairs - keep them on one line */
  [style*="display: flex"][style*="justify-content: space-between"] { flex-wrap: nowrap !important; }

  /* ---- announcement bar ---- */
  [data-m="bar"] { height: auto !important; padding: 8px 14px !important; gap: 8px !important; font-size: 9px !important; text-align: center; }

  /* ---- header: logo row, then a scrollable nav row ---- */
  header > div { height: auto !important; padding: 10px 14px !important; gap: 10px !important; flex-wrap: wrap !important; }
  header nav[style*="display: flex"] {
    order: 3; width: 100%; flex: 1 0 100% !important;
    overflow-x: auto; flex-wrap: nowrap !important;
    gap: 0 !important; padding-bottom: 2px;
    scrollbar-width: none;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { white-space: nowrap !important; padding: 7px 10px !important; font-size: 13.5px !important; }
  header nav > div { flex-shrink: 0; }

  /* ---- product page: fixed buy bar ---- */
  [data-m="buybar"] { padding: 10px 14px !important; gap: 10px !important; flex-wrap: nowrap !important; }
  [data-m="buybar"] > span:nth-child(3) { display: none !important; }
  [data-m="buybar"] button { padding: 13px 18px !important; font-size: 14px !important; }
  [data-m="buybar"] > div span:first-child { font-size: 13px !important; }

  /* ---- bundle page: fixed builder bar ---- */
  [data-m="buildbar"] { padding: 10px 14px !important; gap: 10px !important; flex-wrap: nowrap !important; }
  [data-m="buildbar"] > div:first-child span { width: 38px !important; height: 38px !important; }
  [data-m="buildbar"] > div:nth-child(2) { display: none !important; }
  [data-m="buildbar"] > span { font-size: 20px !important; }
  [data-m="buildbar"] button { padding: 12px 16px !important; font-size: 13.5px !important; }

  /* horizontal rails keep scrolling rather than wrapping */
  [data-rail], [data-rail][style*="display: flex"] { flex-wrap: nowrap !important; }
}