/* ===============================
   MOBILE VIEW (PHONES)
   =============================== */
@media screen and (max-width: 480px) {
  /* ---------- BODY ---------- */
  body {
    font-size: 14px;
  }

  /* ---------- NAVBAR ---------- */
  nav {
    flex-direction: column;
    height: auto;
    padding: 0.8rem;
    gap: 0.8rem;
    border-radius: 0 0 10px 10px;
  }

  nav .logo {
    font-size: 1.2rem;
    text-align: center;
  }

  /* Search bar full width */
  .searchOption {
    width: 100%;
    padding: 0 0.5rem;
  }

  .searchOption input {
    font-size: 0.9rem;
    padding: 0 0.5rem;
  }

  /* Nav buttons stack */
  nav .btn {
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
  }

  /* ---------- SECTION ---------- */
  section {
    margin: 1rem;
  }

  /* Categories wrap */
  section .catagories {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  section .catagories .cat {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }

  /* ---------- MAIN ---------- */
  main {
    margin: 0 1rem;
  }

  main h2 {
    font-size: 1.1rem;
  }

  /* ---------- WALLPAPER GRID ---------- */
  .wallpaper-section {
    grid-template-columns: 1fr;
  }

  .wallpaper-section .wallpaper {
    margin: 0.8rem auto;
    border-width: 10px;
  }

  .wallpaper-section .wallpaper img {
    width: 90vw;
    max-width: 100%;
    height: auto;
  }

  /* ---------- PAGE SKIP ---------- */
  .page-skip {
    margin: 1rem;
  }

  .page-skip ul {
    position: static;
    justify-content: center;
    padding: 0.5rem;
  }

  .page-skip ul li a {
    width: auto;
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
  }

  .page-skip ul li a i {
    font-size: 1.2rem;
  }

  /* ---------- FOOTER ---------- */
  footer {
    height: auto;
    padding: 1rem;
  }

  footer p {
    font-size: 0.9rem;
  }

  footer .store img {
    width: 120px;
  }
}