/* store234 — tall (≤900px) only. Media query is source of truth.
 * CRITICAL: .rail { display: contents; position: static } — relative kills contents in Chrome.
 */
@media (max-width: 900px) {
  html.ionic-store,
  html.ionic-store body {
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100%;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
  }

  html.ionic-store .app {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  /* Flatten rail so nav + stage are direct flex children of .app */
  html.ionic-store .rail {
    display: contents;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    float: none;
    clear: none;
    overflow: visible;
    contain: none;
    width: auto;
    max-width: none;
    min-width: 0;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    flex: none;
    align-self: auto;
    order: 0;
    z-index: auto;
    transform: none;
    filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html.ionic-store .nav,
  html.ionic-store .nav.glass {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    column-gap: 8px;
    row-gap: 4px;
    order: 0;
    flex: 0 0 auto;
    align-self: stretch;
    width: auto;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 10px 10px 0;
    padding: 10px 8px 8px;
    overflow: hidden;
  }

  html.ionic-store .nav__top {
    display: contents;
  }

  /* Top: logo alone; music moves under categories */
  html.ionic-store .brand,
  html.ionic-store .nav .brand {
    order: 0;
    flex: 1 0 100%;
    max-width: 100%;
    min-width: 0;
    padding: 2px 0 2px 6px;
    margin: 0;
  }

  html.ionic-store .brand__word,
  html.ionic-store .nav .brand__word {
    height: 28px;
    max-height: 28px;
    max-width: min(160px, 42vw);
    width: auto;
    display: block;
    object-fit: contain;
  }

  html.ionic-store #radio,
  html.ionic-store #radio.lmp,
  html.ionic-store #radio.lmp--compact,
  html.ionic-store .radio {
    order: 2;
    flex: 1 0 100%;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin: 4px 0 0;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-rows: 40px;
    grid-template-areas: "art title controls";
    align-items: center;
    gap: 0 6px;
    padding: 0 4px 0 0;
    overflow: hidden;
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    box-sizing: border-box;
  }

  html.ionic-store #radio .lmp-art-slot {
    display: contents;
  }

  html.ionic-store #radio .lmp-art {
    grid-area: art;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    margin: 0;
    border-radius: 8px;
    object-fit: cover;
    z-index: 1;
  }

  html.ionic-store #radio .lmp-title {
    grid-area: title;
    position: relative;
    z-index: 1;
    display: block;
    text-align: left;
    font: 650 12px/1 Outfit, system-ui, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0;
    color: #fff;
    --lmp-title-shadow: 0 1px 1px #000, 0 0 2px rgba(0, 0, 0, 0.85);
    text-shadow: var(--lmp-title-shadow);
    background: transparent;
    border: 0;
  }

  /* EQ behind title — short strip inside the 40px row only */
  html.ionic-store #radio .lmp-title {
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  html.ionic-store #radio .lmp-eq,
  html.ionic-store #radio canvas.lmp-eq,
  html.ionic-store #radio canvas[data-lmp="eq"] {
    grid-area: title;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    height: 28px;
    max-height: 28px;
    min-height: 0;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
    opacity: 0.5;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: hidden;
  }

  html.ionic-store #radio .store-eq-bars {
    display: none;
  }

  html.ionic-store #radio .lmp-controls {
    grid-area: controls;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 40px;
    width: auto;
    padding: 0;
    margin: 0;
    z-index: 1;
  }

  html.ionic-store #radio .lmp-btn {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    height: 36px;
  }

  html.ionic-store #radio .lmp-btn svg {
    width: 18px;
    height: 28px;
  }

  html.ionic-store #radio .lmp-btn--play svg {
    width: 20px;
    height: 20px;
  }

  html.ionic-store #radio .lmp-btn[data-lmp="prev"] {
    display: flex;
  }

  html.ionic-store #radio .lmp-btn--mute,
  html.ionic-store #radio .lmp-btn[data-lmp="mute"] {
    display: none;
  }

  /* Bury seek / times / volume on tall compact player */
  html.ionic-store #radio .lmp-seek,
  html.ionic-store #radio input.lmp-seek,
  html.ionic-store #radio .lmp-times,
  html.ionic-store #radio .lmp-vol-row,
  html.ionic-store #radio .lmp-gain,
  html.ionic-store #radio .lmp-vol-ico {
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* Pills under logo; music under pills (3-col; catalog.js may reinforce) */
  html.ionic-store .pills,
  html.ionic-store #pills,
  html.ionic-store .nav .pills {
    order: 1;
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px 6px;
    margin: 2px 0 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  html.ionic-store .pill,
  html.ionic-store .nav .pill {
    height: 26px;
    min-height: 26px;
    max-height: 26px;
    padding: 0 3px;
    font: 650 9px/1 Outfit, system-ui, sans-serif;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  html.ionic-store .pill__ico,
  html.ionic-store .pill__ico svg {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
  }

  html.ionic-store .pill__label {
    font-size: 9px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Stage / tiles below chrome; page can scroll */
  html.ionic-store .store-stage {
    order: 1;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 16px 18px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }

  html.ionic-store .store-shelf,
  html.ionic-store #shelf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 2px;
  }

  html.ionic-store .store-tile,
  html.ionic-store a.store-tile,
  html.ionic-store article.store-tile {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* © under tiles inside stage (JS placeLegal moves the node) */
  html.ionic-store .store-stage > .legal,
  html.ionic-store .store-stage > #legal,
  html.ionic-store .legal,
  html.ionic-store #legal {
    display: block;
    visibility: visible;
    position: relative;
    flex: 0 0 auto;
    order: 999;
    width: 100%;
    margin: 10px 0 16px;
    padding: 0 12px;
    text-align: center;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    transform: none;
    z-index: auto;
    float: none;
    opacity: 1;
  }
}

/* === store238: tall EQ short strip behind title, no height bleed === */
@media (max-width: 900px) {
  html.ionic-store #radio,
  html.ionic-store #radio.lmp,
  html.ionic-store #radio.lmp--compact,
  html.ionic-store .radio {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    overflow: hidden;
    position: relative;
  }
  html.ionic-store #radio .lmp-title {
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  html.ionic-store #radio .lmp-eq,
  html.ionic-store #radio canvas.lmp-eq,
  html.ionic-store #radio canvas[data-lmp="eq"] {
    grid-area: title;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: 100%;
    height: 28px;
    max-height: 28px;
    transform: translateY(-50%);
    z-index: 0;
    opacity: 0.5;
    overflow: hidden;
    pointer-events: none;
  }
}

/* === store239: tall EQ = cover height (28px); nothing after © === */
@media (max-width: 900px) {
  html.ionic-store #radio .lmp-art {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
  }
  html.ionic-store #radio .lmp-eq,
  html.ionic-store #radio canvas.lmp-eq,
  html.ionic-store #radio canvas[data-lmp="eq"] {
    height: 28px;
    max-height: 28px;
    width: 100%;
  }
  /* Hide seek/vol/times chrome on tall (must not appear under ©) */
  html.ionic-store #radio .lmp-seek,
  html.ionic-store #radio input.lmp-seek,
  html.ionic-store #radio .lmp-times,
  html.ionic-store #radio .lmp-vol-row,
  html.ionic-store #radio .lmp-gain,
  html.ionic-store #radio .lmp-vol-ico,
  html.ionic-store #radio .store-eq-bars {
    display: none;
  }
  /* Anything after © in stage is junk */
  html.ionic-store .store-stage > #legal ~ .lmp-seek,
  html.ionic-store .store-stage > #legal ~ .lmp-vol-row,
  html.ionic-store .store-stage > #legal ~ canvas,
  html.ionic-store .store-stage > #legal ~ audio {
    display: none;
  }
  /* Orphan player chrome outside #radio */
  html.ionic-store .app > .lmp-seek,
  html.ionic-store .app > .lmp-times,
  html.ionic-store .app > .lmp-vol-row,
  html.ionic-store .app > audio,
  html.ionic-store .store-stage > .lmp-seek,
  html.ionic-store .store-stage > .lmp-times,
  html.ionic-store .store-stage > .lmp-vol-row,
  html.ionic-store .store-stage > .lmp-eq,
  html.ionic-store .store-stage > canvas.lmp-eq,
  html.ionic-store .store-stage > audio,
  html.ionic-store .store-stage > .store-eq-bars {
    display: none;
  }
}

/* === store240: tall EQ full cover height; bottom lines up with cover === */
@media (max-width: 900px) {
  /* Title fills the 40px row so EQ is not clipped to ~12px text height */
  html.ionic-store #radio .lmp-title {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  html.ionic-store #radio .lmp-art {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    align-self: center;
  }
  html.ionic-store #radio .lmp-eq,
  html.ionic-store #radio canvas.lmp-eq,
  html.ionic-store #radio canvas[data-lmp="eq"] {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    /* cover is 28px centered in 40px → bottom inset 6px */
    top: auto;
    bottom: 0;
    transform: none;
    z-index: 0;
    opacity: 0.5;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
    padding: 0;
  }
}

/* === store241: tall EQ + cover flush to row bottom (no 6px pad) === */
@media (max-width: 900px) {
  html.ionic-store #radio,
  html.ionic-store #radio.lmp,
  html.ionic-store #radio.lmp--compact,
  html.ionic-store .radio {
    align-items: end;
    padding: 0;
  }
  html.ionic-store #radio .lmp-art {
    align-self: end;
    margin: 0;
    padding: 0;
  }
  html.ionic-store #radio .lmp-title {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    display: flex;
    align-items: flex-end;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
  }
  html.ionic-store #radio .lmp-eq,
  html.ionic-store #radio canvas.lmp-eq,
  html.ionic-store #radio canvas[data-lmp="eq"] {
    top: auto;
    bottom: 0;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    transform: none;
    margin: 0;
    padding: 0;
  }
  html.ionic-store #radio .lmp-controls {
    align-items: flex-end;
    padding: 0;
    margin: 0;
  }
}

/* === store242: tall EQ synced to cover; scaleY cancels CDN draw inset === */
@media (max-width: 900px) {
  html.ionic-store #radio .lmp-art {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    align-self: end;
  }
  html.ionic-store #radio .lmp-title {
    height: 40px;
    overflow: hidden;
    position: relative;
  }
  html.ionic-store #radio .lmp-eq,
  html.ionic-store #radio canvas.lmp-eq,
  html.ionic-store #radio canvas[data-lmp="eq"] {
    /* JS sets top/height/scaleY from cover rect — keep absolute only */
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 0;
    pointer-events: none;
  }
}

/* === store243: title inset so first EQ bar sits left of text === */
@media (max-width: 900px) {
  html.ionic-store #radio .lmp-title {
    padding-left: 8px;
    box-sizing: border-box;
  }
  html.ionic-store #radio .lmp-eq,
  html.ionic-store #radio canvas.lmp-eq,
  html.ionic-store #radio canvas[data-lmp="eq"] {
    left: 0;
    /* pull past CDN's ~5px draw inset so first bar is near the cell edge */
    margin-left: 0;
    width: calc(100% + 4px);
    max-width: none;
  }
}

/* === store244: EQ hugs cover; scaleY from bottom; title text inset === */
@media (max-width: 900px) {
  html.ionic-store #radio,
  html.ionic-store #radio.lmp,
  html.ionic-store #radio.lmp--compact {
    overflow: hidden;
    position: relative;
  }
  html.ionic-store #radio .lmp-title {
    padding-left: 10px;
    overflow: hidden;
    z-index: 1;
  }
  html.ionic-store #radio .lmp-art {
    z-index: 1;
    align-self: end;
  }
  html.ionic-store #radio .lmp-eq,
  html.ionic-store #radio canvas.lmp-eq,
  html.ionic-store #radio canvas[data-lmp="eq"] {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    transform-origin: center bottom;
  }
}

/* === store245: no overflow spill; nothing after ©; bury tall chrome === */
@media (max-width: 900px) {
  html.ionic-store #radio,
  html.ionic-store #radio.lmp,
  html.ionic-store #radio.lmp--compact {
    overflow: hidden;
    max-height: 40px;
  }
  html.ionic-store #radio .lmp-seek,
  html.ionic-store #radio .lmp-times,
  html.ionic-store #radio .lmp-vol-row,
  html.ionic-store #radio .lmp-gain,
  html.ionic-store #radio .lmp-vol-ico,
  html.ionic-store #radio .store-eq-bars {
    display: none;
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
    left: -9999px;
  }
  /* only hide leftover player chrome after © — never .store-shelf */
  html.ionic-store .store-stage > #legal ~ .lmp-seek,
  html.ionic-store .store-stage > #legal ~ .lmp-times,
  html.ionic-store .store-stage > #legal ~ .lmp-vol-row,
  html.ionic-store .store-stage > #legal ~ .lmp-art-slot,
  html.ionic-store .store-stage > #legal ~ img.lmp-art,
  html.ionic-store .store-stage > #legal ~ canvas.lmp-eq,
  html.ionic-store .store-stage > #legal ~ audio {
    display: none;
  }
}

/* === store246: seek/vol/times gone on tall; nothing after © === */
@media (max-width: 900px) {
  html.ionic-store #radio .lmp-seek,
  html.ionic-store #radio .lmp-times,
  html.ionic-store #radio .lmp-vol-row,
  html.ionic-store #radio .lmp-gain,
  html.ionic-store #radio .lmp-vol-ico,
  html.ionic-store #radio .store-eq-bars {
    display: none;
  }
  /* junk after ©: only player leftovers, never wipe layout siblings */
  html.ionic-store .store-stage > #legal ~ .lmp-seek,
  html.ionic-store .store-stage > #legal ~ .lmp-vol-row,
  html.ionic-store .store-stage > #legal ~ .lmp-art-slot,
  html.ionic-store .store-stage > #legal ~ img.lmp-art,
  html.ionic-store .store-stage > #legal ~ canvas,
  html.ionic-store .store-stage > #legal ~ audio {
    display: none;
  }
}

/* === store248: tall EQ behind title label only (not controls) === */
@media (max-width: 900px) {
  html.ionic-store #radio .lmp-title {
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  html.ionic-store #radio .lmp-controls {
    position: relative;
    z-index: 2;
    background: transparent;
  }
  html.ionic-store #radio .lmp-eq,
  html.ionic-store #radio canvas.lmp-eq,
  html.ionic-store #radio canvas[data-lmp="eq"] {
    max-width: 100%;
    pointer-events: none;
    z-index: 0;
  }
}

/* === store249: tall wordmark height = cover (28px) === */
@media (max-width: 900px) {
  html.ionic-store .brand__word,
  html.ionic-store .nav .brand__word {
    height: 28px;
    max-height: 28px;
  }
  html.ionic-store .brand,
  html.ionic-store .nav .brand {
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* === store251: restore tall stack — rail contents+static; kill nuclear © hide === */
@media (max-width: 900px) {
  html.ionic-store .rail {
    display: contents;
    position: static;
  }
  html.ionic-store .app {
    display: flex;
    flex-direction: column;
  }
  html.ionic-store .store-stage,
  html.ionic-store .store-shelf {
    display: flex;
    flex-direction: column;
    visibility: visible;
    opacity: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  html.ionic-store .store-shelf {
    display: grid;
  }
}

/* === store253: tall clip junk; never leave inline max-height for wide === */
@media (max-width: 900px) {
  html.ionic-store #radio,
  html.ionic-store #radio.lmp,
  html.ionic-store #radio.lmp--compact {
    overflow: hidden;
    max-height: 40px;
  }
  html.ionic-store #radio .lmp-seek,
  html.ionic-store #radio .lmp-times,
  html.ionic-store #radio .lmp-vol-row,
  html.ionic-store #radio .lmp-gain,
  html.ionic-store #radio .lmp-vol-ico,
  html.ionic-store #radio .store-eq-bars {
    display: none;
  }
}

/* === store254: tall — bury any leftover art/eq under © === */
@media (max-width: 900px) {
  html.ionic-store .store-stage .lmp-art-slot,
  html.ionic-store .store-stage img.lmp-art,
  html.ionic-store .store-stage canvas.lmp-eq,
  html.ionic-store .store-stage audio.lmp-audio {
    display: none !important;
  }
  html.ionic-store #radio .lmp-art {
    grid-area: art;
  }
}