/* =====================================================================
   YOUNICCAFE — RESPONSIVE RULES
   Mobile-first breakpoints layered over style.css component defaults.
   Target widths: 320/375/390/414/430 (mobile), 768/820/1024 (tablet),
   1280/1440/1600/1920 (desktop).
   ===================================================================== */

/* ---- Desktop XL polish ---- */
@media (min-width: 1600px) {
    .container { max-width: 1480px; }
}

/* ---- Below 1280: tighten container, 3-col grids ---- */
@media (max-width: 1279px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .category-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
    .footer-grid .footer-col--brands { display: none; }
}

/* ---- Tablet: 1024 and down ---- */
@media (max-width: 1024px) {
    .main-nav { display: none; }
    .mobile-menu-toggle { display: flex; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
    .category-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .site-header .container { padding-inline: 18px; }
}

/* ---- Small tablet / large phone: 820 and down ---- */
@media (max-width: 820px) {
    .section { padding-block: clamp(40px, 10vw, 72px); }
    .section-head { flex-direction: column; align-items: flex-start; }
}

/* ---- Phones: 768 and down ---- */
@media (max-width: 768px) {
    .container { padding-inline: 18px; }
    .category-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

/* ---- Small phones: 480 and down ---- */
@media (max-width: 480px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
    .product-card__title { font-size: 14.5px; }
    .product-card__price .current { font-size: 15px; }
    .category-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .category-item__name { font-size: 13px; }
    .btn { padding: 13px 24px; font-size: 14px; }
}

/* ---- Very small phones: 375 and down ---- */
@media (max-width: 375px) {
    .category-grid { grid-template-columns: repeat(2, 1fr); }
}

/* No-horizontal-scroll safety net */
html, body { max-width: 100%; overflow-x: hidden; }