/* ================================================================
   INDEX / HOMEPAGE — Mobile Responsive CSS
   ================================================================ */

@media(max-width:640px) {
    /* Hero adjustments */
    .hero-body {
        text-align: center;
        padding: 24px 16px;
        margin: 0 auto;
    }
    .hero-btns { justify-content: center; }
    .hero-h1 { font-size: 1.6rem; }
    .hero-tag { font-size: .65rem; padding: 4px 10px; }
    .hero-shape { display: none; }

    /* Category cards */
    .cat-item { width: 130px; }

    /* Product cards */
    .pcard { width: 150px; }

    /* Sections */
    .section { padding: 24px 0; }

    /* Promo strip */
    .promo-strip {
        flex-direction: column;
        text-align: center;
        padding: 22px 18px;
    }
    .promo-btn { width: 100%; text-align: center; }

    /* Trust bar */
    .trust-bar { gap: 8px; }
    .trust-item { padding: 12px 8px; }
    .trust-icon { font-size: 1.2rem; }
    .trust-label { font-size: .7rem; }
    .trust-sub { font-size: .64rem; }
}

@media(max-width:380px) {
    .cat-item { width: 115px; }
    .pcard { width: 140px; }
    .hero-h1 { font-size: 1.4rem; }
    .hbtn { padding: 10px 18px; font-size: .82rem; }
}