/* Phase 8.5.4c — public mobile category grid; desktop carousel remains intact. */
@media (max-width:700px) {
  html, body { max-width:100%; overflow-x:clip; }
  body > main, main, .section, #categories { min-width:0; max-width:100%; box-sizing:border-box; }
  #categories { padding-left:12px; padding-right:12px; }
  #categories .heading { align-items:flex-start; }
  #categories .categoryNav { display:none!important; }
  #categories .categoryCarousel {
    display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important; width:100%!important; max-width:100%!important;
    overflow:visible!important; align-items:stretch!important;
  }
  #categories #fixedAllChip, #categories .categoryViewport {
    display:contents!important;
  }
  #categories .categoryViewport { mask-image:none!important; -webkit-mask-image:none!important; }
  #categories #chips {
    display:contents!important; transform:none!important; animation:none!important;
  }
  #categories .chip, #categories #fixedAllChip .chip, #categories .categoryViewport .chip {
    width:100%!important; min-width:0!important; max-width:100%!important;
    height:auto!important; aspect-ratio:1 / 1!important; min-height:0!important;
    flex:none!important; margin:0!important; padding:9px!important;
    border-radius:12px!important; box-sizing:border-box!important;
    transform:none!important; box-shadow:none!important;
    display:flex!important; flex-direction:column!important; align-items:flex-start!important;
    justify-content:flex-end!important; gap:5px!important;
  }
  #categories .chipIcon { position:relative!important; left:auto!important; top:auto!important; width:21px!important; height:21px!important; flex-shrink:0!important; display:none!important; }
  #categories .chip b { font-size:10px!important; font-weight:600!important; line-height:1.25!important; overflow-wrap:anywhere; text-wrap:balance; }
  #categories .chip:hover, #categories .chip.active { transform:none!important; }
  #categories .mobileCategoryAll { display:inline-flex; align-items:center; gap:5px; color:#ff967d; font-size:11px; font-weight:600; text-decoration:none; white-space:nowrap; }
  #categories .heading { gap:8px; }
  #categories .heading > div:first-child { min-width:0; }
}
@media (max-width:360px) {
  #categories { padding-left:9px; padding-right:9px; }
  #categories .categoryCarousel { gap:6px!important; }
  #categories .chip, #categories #fixedAllChip .chip { padding:7px!important; }
  #categories .chip b { font-size:9px!important; }
}
@media (min-width:701px) { #categories .mobileCategoryAll { display:none!important; } }

/* Keep page-level horizontal overflow clipped while preserving intentional
   horizontal scrolling inside individual wallpaper carousels. */
@media (max-width:700px) {
  html { width:100%; max-width:100%; overflow-x:hidden!important; }
  body { width:100%; max-width:100%; overflow-x:clip!important; }
  body > main, main, .section, #categories, #featured, #explore, #genreBrowse {
    min-width:0; max-width:100%; box-sizing:border-box;
  }
  #categories .categoryCarousel { min-width:0!important; }
}