body{font-family:sans-serif;padding:20px}

/* ===== Mobile polish (<= 430px) ===== */
@media (max-width: 430px){
  html,body{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
  body{font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

  .site-header{padding:12px 16px; gap:.6rem}
  .brand span{font-size:1rem}
  .nav{gap:.4rem; max-width:100%; overflow-x:auto; scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav .btn{flex:1; min-width:160px; white-space:nowrap; padding:.6rem .8rem; border-radius:12px}

  .container{padding:16px}
  .hero{padding:18px 0 4px 0}
  .hero h1{font-size:clamp(1.2rem,5.5vw,1.8rem); line-height:1.25}
  .hero .sub{font-size:.95rem}

  .hero-cta .btn.lg{width:100%; justify-content:center; padding:.9rem 1rem; border-radius:14px}

  .toolbar{gap:.6rem; margin:14px 0}
  #search{padding:.8rem .9rem; border-radius:12px}
  .filters{width:100%}
  .filters select{flex:1; width:100%; padding:.65rem .8rem; border-radius:12px}
  .filters{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}

  .grid{gap:12px}
  .card{border-radius:14px; padding:12px}
  .card .thumb{border-radius:12px; overflow:hidden}
  .card .thumb img{width:100%; height:100%; object-fit:cover}

  .card .title{font-size:1rem}
  .price{gap:.5rem}
  .badge{font-size:.75rem}

  .site-footer{padding:14px 16px; flex-direction:column; align-items:flex-start; gap:.5rem}
}
/* Improve tap feedback / remove glow on Android */
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn:active{transform:translateY(0); opacity:.92}
/* Safe area for devices with gesture bar */
@supports (padding: max(0px)){
  body{padding-bottom: max(0px, env(safe-area-inset-bottom));}
}