/* ============================================================
   NONDON — Responsive CSS v2
   ============================================================ */

/* Base mobile */
.hero-slider     { height: 260px; }
.slide-title     { font-size: 20px; }
.products-grid   { grid-template-columns: 1fr 1fr !important; gap: 9px; }
.footer-grid     { grid-template-columns: 1fr 1fr; gap: 22px; }
.header-search   { display: none; }
.hamburger       { display: flex; }
.slider-arrow    { display: none; }
.footer-col.footer-brand { grid-column: 1 / -1; }

/* 480px+ */
@media (min-width: 480px) {
    .hero-slider  { height: 300px; }
    .slide-title  { font-size: 24px; }
}

/* 768px+ */
@media (min-width: 768px) {
    .hero-slider       { height: 390px; }
    .slide-title       { font-size: 32px; }
    .products-grid     { grid-template-columns: repeat(3, 1fr) !important; gap: 14px; }
    .header-search     { display: flex; }
    .hamburger         { display: none; }
    .slider-arrow      { display: flex; }
    .product-layout    { grid-template-columns: 1fr 1fr; gap: 30px; }
    .footer-grid       { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
    .footer-col.footer-brand { grid-column: auto; }
    .promo-inner       { flex-wrap: nowrap; }
}

/* 1024px+ */
@media (min-width: 1024px) {
    .hero-slider   { height: 460px; }
    .slide-title   { font-size: 38px; }
    .products-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px; }
    .container     { padding: 0 22px; }
}

/* Mobile overrides */
@media (max-width: 767px) {
    .cat-nav-inner.mobile-open { flex-wrap: wrap; padding: 10px; gap: 7px; }
    .order-form    { border-radius: 16px; padding: 16px; }
    .product-layout { grid-template-columns: 1fr; }
    .promo-inner   { flex-direction: column; gap: 14px; text-align: center; }
    .promo-badges  { justify-content: center; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .lang-switcher { order: -1; }
    .delivery-btns { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 360px) {
    .product-name  { font-size: 11px; }
    .product-price { font-size: 12px; }
    .order-form    { padding: 13px; }
    .lang-btn      { font-size: 10px; padding: 3px 7px; }
}