/* THETA AUDIO RESEARCH — mobile layout
   ------------------------------------------------------------------
   Pages are authored with inline styles, which beat stylesheet rules
   on specificity — so every rule here is !important, and scoped to a
   media query so desktop rendering is untouched.

   NOTE: the runtime re-serialises inline styles with spaces after the
   colon ("position: absolute"), while the source files are written
   without ("position:absolute"). Every attribute selector below is
   therefore listed in BOTH spellings.
   ------------------------------------------------------------------ */

@media (max-width: 900px) {

  /* ---- NAV: drop the centred product title onto its own row ---- */
  nav {
    padding: 12px 20px !important;
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }
  nav > a:first-child { height: 50px !important; order: 1 !important; }
  nav > a:first-child svg { height: 38px !important; width: 32px !important; }

  nav > div:last-child {
    order: 2 !important;
    margin-left: auto !important;
    gap: 10px !important;
  }
  nav > div:last-child a {
    padding: 10px 13px !important;
    font-size: 8px !important;
    letter-spacing: 2px !important;
  }

  nav > div[style*="position: absolute"],
  nav > div[style*="position:absolute"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    max-width: none !important;
    width: 100% !important;
    order: 3 !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 0 6px 0 !important;
  }
  nav > div[style*="position: absolute"] h2,
  nav > div[style*="position:absolute"] h2 {
    font-size: 17px !important;
    letter-spacing: 5px !important;
    white-space: normal !important;
    padding-left: 0 !important;
  }
  nav > div[style*="position: absolute"] p,
  nav > div[style*="position:absolute"] p {
    font-size: 7px !important;
    letter-spacing: 3px !important;
    padding-left: 0 !important;
    margin-top: 3px !important;
  }

  /* ---- INDEX HEADER: neon sign stacks above the lockup ---- */
  header[style*="grid-template-columns: 1fr auto 1fr"],
  header[style*="grid-template-columns:1fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    row-gap: 26px !important;
    padding: 30px 20px 34px 20px !important;
  }
  header[style*="grid-template-columns: 1fr auto 1fr"] > a,
  header[style*="grid-template-columns:1fr auto 1fr"] > a { justify-self: center !important; }

  header[style*="grid-template-columns: 1fr auto 1fr"] > div[aria-hidden],
  header[style*="grid-template-columns:1fr auto 1fr"] > div[aria-hidden] { display: none !important; }
}

@media (max-width: 860px) {
  /* ---- Collapse every multi-column content grid ---- */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="repeat(3, minmax(0px, 1fr))"],
  [style*="repeat(3,minmax(0,1fr))"],
  [style*="repeat(auto-fill, minmax(300px, 1fr))"],
  [style*="repeat(auto-fill,minmax(300px,1fr))"],
  [style*="repeat(auto-fit, minmax(340px, 1fr))"],
  [style*="repeat(auto-fit,minmax(340px,1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 760px) {

  html, body { overflow-x: hidden !important; }

  /* ---- Page gutters: 60px is a third of a phone screen ---- */
  main {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 18px !important;
  }
  footer {
    padding: 26px 20px !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    font-size: 8px !important;
    letter-spacing: 3px !important;
  }

  /* ---- Boxed CTAs / status panels ---- */
  main section > div[style*="padding: 40px"],
  main section > div[style*="padding:40px"] { padding: 24px 18px !important; }

  main a[style*="letter-spacing: 6px"][style*="padding: 25px"],
  main a[style*="letter-spacing:6px"][style*="padding:25px"] {
    padding: 20px 14px !important;
    font-size: 10px !important;
    letter-spacing: 3px !important;
  }

  /* ---- INDEX catalogue rows: code + status, then name, then blurb ---- */
  a[style*="grid-template-columns: 70px minmax(0px, 300px) 1fr 100px"],
  a[style*="grid-template-columns:70px minmax(0,300px) 1fr 100px"] {
    grid-template-columns: 1fr auto !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    padding: 16px 2px !important;
  }
  a[style*="grid-template-columns: 70px minmax(0px, 300px) 1fr 100px"] > span:nth-child(1),
  a[style*="grid-template-columns:70px minmax(0,300px) 1fr 100px"] > span:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2 !important;
  }
  a[style*="grid-template-columns: 70px minmax(0px, 300px) 1fr 100px"] > span:nth-child(4),
  a[style*="grid-template-columns:70px minmax(0,300px) 1fr 100px"] > span:nth-child(4) {
    grid-area: 1 / 2 / 2 / 3 !important;
  }
  a[style*="grid-template-columns: 70px minmax(0px, 300px) 1fr 100px"] > span:nth-child(2),
  a[style*="grid-template-columns:70px minmax(0,300px) 1fr 100px"] > span:nth-child(2) {
    grid-area: 2 / 1 / 3 / 3 !important;
    font-size: 19px !important;
    letter-spacing: 3px !important;
    white-space: normal !important;
  }
  a[style*="grid-template-columns: 70px minmax(0px, 300px) 1fr 100px"] > span:nth-child(3),
  a[style*="grid-template-columns:70px minmax(0,300px) 1fr 100px"] > span:nth-child(3) {
    grid-area: 3 / 1 / 4 / 3 !important;
    text-align: left !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
    opacity: 0.6 !important;
  }

  /* ---- STORE rows: thumb + text, status/price wraps beneath ---- */
  a[style*="grid-template-columns: 140px 1fr 300px"],
  a[style*="grid-template-columns:140px 1fr 300px"] {
    grid-template-columns: 88px 1fr !important;
    gap: 14px !important;
    padding: 18px 0 !important;
  }
  a[style*="grid-template-columns: 140px 1fr 300px"] > div:first-child,
  a[style*="grid-template-columns:140px 1fr 300px"] > div:first-child {
    width: 88px !important;
    height: 52px !important;
  }
  a[style*="grid-template-columns: 140px 1fr 300px"] > div:last-child,
  a[style*="grid-template-columns:140px 1fr 300px"] > div:last-child {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* ---- Type ---- */
  h1 { font-size: 25px !important; line-height: 1.32 !important; }
  h1, h2, h3, h4 { overflow-wrap: anywhere !important; }

  /* ---- Lightbox ---- */
  div[style*="z-index: 1000"],
  div[style*="z-index:1000"] { padding: 12px !important; }
}

@media (max-width: 760px) {

  /* ---- Grid children default to min-width:auto and refuse to shrink ---- */
  a[style*="grid-template-columns: 140px 1fr 300px"] > *,
  a[style*="grid-template-columns:140px 1fr 300px"] > *,
  a[style*="grid-template-columns: 70px minmax(0px, 300px) 1fr 100px"] > *,
  a[style*="grid-template-columns:70px minmax(0,300px) 1fr 100px"] > * {
    min-width: 0 !important;
  }
  a[style*="grid-template-columns: 140px 1fr 300px"] span,
  a[style*="grid-template-columns:140px 1fr 300px"] span { overflow-wrap: anywhere !important; }

  /* ---- INDEX header: brand lockup and neon sign both have fixed-width art ---- */
  header svg { max-width: 100% !important; height: auto !important; }
  header > div { max-width: 100% !important; flex-wrap: wrap !important; }
  header a[aria-label="Free plugins"] { padding: 14px 18px !important; }
  header a[aria-label="Free plugins"] > span:first-child {
    font-size: 19px !important; letter-spacing: 4px !important; padding-left: 4px !important;
  }
  header a[aria-label="Free plugins"] > span:last-child {
    font-size: 7px !important; letter-spacing: 3px !important; padding-left: 3px !important;
  }

  /* ---- Wide pill buttons ---- */
  main a[style*="padding: 22px 50px"],
  main a[style*="padding:22px 50px"] {
    padding: 18px 20px !important;
    font-size: 9px !important;
    letter-spacing: 3px !important;
    display: block !important;
    text-align: center !important;
  }
}

@media (max-width: 760px) {

  /* ---- Catalogue groups: the 50px vertical rail label becomes a
         horizontal heading above its list ---- */
  div[style*="max-width: 1050px"][style*="display: flex"],
  div[style*="max-width:1050px"][style*="display:flex"] {
    flex-direction: column !important;
    margin-bottom: 46px !important;
  }
  div[style*="max-width: 1050px"] > div[style*="flex: 0 0 50px"],
  div[style*="max-width:1050px"] > div[style*="flex:0 0 50px"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #54575C !important;
    justify-content: flex-start !important;
    padding: 0 0 9px 0 !important;
    margin-bottom: 14px !important;
  }
  /* the glowing marker dot is anchored to the vertical rule — drop it */
  div[style*="max-width: 1050px"] > div[style*="flex: 0 0 50px"] > span[style*="position: absolute"],
  div[style*="max-width:1050px"] > div[style*="flex:0 0 50px"] > span[style*="position:absolute"] {
    display: none !important;
  }
  /* un-rotate the label */
  div[style*="max-width: 1050px"] div[style*="writing-mode: vertical-rl"],
  div[style*="max-width:1050px"] div[style*="writing-mode:vertical-rl"] {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    max-width: 100% !important;
  }
  div[style*="max-width: 1050px"] div[style*="writing-mode: vertical-rl"] *,
  div[style*="max-width:1050px"] div[style*="writing-mode:vertical-rl"] * {
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 760px) {

  /* ---- Module-shot / spec columns: stack above their copy ----
     These are `flex:0 0 <N>px` sidebars beside a `flex:1` text column. At
     phone width the fixed basis wins and the text is crushed to one word
     per line, so the whole row becomes a column and both go full width.
     (50px is the catalogue rail label — handled separately, left alone.) */
  div[style*="flex: 0 0 200px"], div[style*="flex:0 0 200px"],
  div[style*="flex: 0 0 240px"], div[style*="flex:0 0 240px"],
  div[style*="flex: 0 0 250px"], div[style*="flex:0 0 250px"],
  div[style*="flex: 0 0 260px"], div[style*="flex:0 0 260px"],
  div[style*="flex: 0 0 360px"], div[style*="flex:0 0 360px"],
  div[style*="flex: 0 0 380px"], div[style*="flex:0 0 380px"],
  div[style*="flex: 0 0 440px"], div[style*="flex:0 0 440px"],
  div[style*="flex: 0 0 460px"], div[style*="flex:0 0 460px"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  div:has(> div[style*="flex: 0 0 200px"]),
  div:has(> div[style*="flex:0 0 200px"]),
  div:has(> div[style*="flex: 0 0 380px"]),
  div:has(> div[style*="flex:0 0 380px"]),
  div:has(> div[style*="flex: 0 0 240px"]),
  div:has(> div[style*="flex:0 0 240px"]),
  div:has(> div[style*="flex: 0 0 250px"]),
  div:has(> div[style*="flex:0 0 250px"]),
  div:has(> div[style*="flex: 0 0 260px"]),
  div:has(> div[style*="flex:0 0 260px"]),
  div:has(> div[style*="flex: 0 0 360px"]),
  div:has(> div[style*="flex:0 0 360px"]),
  div:has(> div[style*="flex: 0 0 440px"]),
  div:has(> div[style*="flex:0 0 440px"]),
  div:has(> div[style*="flex: 0 0 460px"]),
  div:has(> div[style*="flex:0 0 460px"]) {
    flex-direction: column !important;
    gap: 24px !important;
  }
  /* the copy column alongside them must be allowed to shrink */
  div:has(> div[style*="flex:0 0 200px"]) > div[style*="flex:1"],
  div:has(> div[style*="flex:0 0 380px"]) > div[style*="flex:1"],
  div:has(> div[style*="flex:0 0 240px"]) > div[style*="flex:1"],
  div:has(> div[style*="flex:0 0 250px"]) > div[style*="flex:1"],
  div:has(> div[style*="flex:0 0 260px"]) > div[style*="flex:1"],
  div:has(> div[style*="flex:0 0 360px"]) > div[style*="flex:1"],
  div:has(> div[style*="flex:0 0 440px"]) > div[style*="flex:1"],
  div:has(> div[style*="flex:0 0 460px"]) > div[style*="flex:1"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ---- Decorative offset frames sit outside the viewport ---- */
  div[style*="top: -20px"][style*="right: -20px"],
  div[style*="top:-20px"][style*="right:-20px"] { display: none !important; }

  /* ---- Deeply padded cards ---- */
  div[style*="padding: 60px"],
  div[style*="padding:60px"] { padding: 26px 18px !important; }
}

/* ---- Touch: hover transforms otherwise stick after a tap ---- */
@media (hover: none) {
  a[style-hover*="translateX(30px)"]:hover,
  a[style-hover*="translateY(-5px)"]:hover { transform: none !important; }
  a[style-hover*="padding-left:20px"]:hover { padding-left: 0 !important; }
}