/* Mobile default (320px – 480px). Use progressive enhancement, keep everything readable. */
@media (max-width: 480px){
    /* Header: stack */
    .topbar{flex-direction:column;align-items:flex-start;gap:.6rem;padding:.8rem 0}
    .brand{align-items:center}
    .brand-text h1{font-size:1rem}
    nav.main{width:100%;display:flex;flex-wrap:wrap;gap:.5rem}
    nav.main a{padding:.45rem .6rem;background:transparent;border-radius:8px}

    /* Hero */
    .hero{min-height:360px;background-position:center; border-radius:12px}
    .hero .overlay{padding:1.6rem}
    .hero h2{font-size:1.6rem}
    .hero p{font-size:.98rem}

    /* Grid -> single column */
    .grid, .product-grid{grid-template-columns:1fr}
    .spotlight{grid-template-columns:1fr}
    .spot-img img{height:220px}
    .card img{height:140px}

    /* quick order layout vertical */
    .grid-2col{grid-template-columns:1fr; gap:12px}
    .aside-info{order:2}
    .quick-order{order:1}

    /* form */
    input, select{font-size:1rem}
    .btn{width:100%}

    /* carousel */
    .carousel{padding-bottom:0}
    .carousel .testimonial{min-width:280px}

    /* social grid smaller */
    .social-grid{grid-template-columns:repeat(2,1fr)}
    .social-grid img{height:110px}

    /* footer spacing */
    .footer-grid{grid-template-columns:1fr;gap:12px}
}

/* Extra small devices (320px wide) tweaks */
@media (max-width: 360px){
    .hero h2{font-size:1.45rem}
    .hero p{font-size:.92rem}
    .logo{width:48px;height:48px}
}

/* Landscape phones (wider but still small) e.g., 390px/420px/460px */
@media (min-width: 361px) and (max-width: 480px){
    .hero h2{font-size:1.55rem}
    .brand-text h1{font-size:1.02rem}
    nav.main{justify-content:flex-end}
    .product-card img{height:150px}
}