/* ═══════════════════════════════════════════════════════════════════
   responsive.css — Meshit ECommerce Storefront
   Pure responsive overrides. No duplicate base rules.
   Breakpoints:
     xl  > 1200px  (desktop large)
     lg  ≤ 1200px
     md  ≤ 992px
     sm  ≤ 768px
     xs  ≤ 480px
     xxs ≤ 360px
═══════════════════════════════════════════════════════════════════ */

/* ── 0. BASE MOBILE IMPROVEMENTS ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
img, video, svg { max-width: 100%; height: auto; display: block; }

/* Prevent iOS zoom on input focus */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ── 1. HEADER ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  header {
    padding: 10px 16px;
    gap: 12px;
  }
  header > div:first-child { flex: 1; min-width: 0; }
  header > div:first-child h2 { font-size: 16px; }
  header > div:first-child img { max-height: 40px; }
  .nav-icons { gap: 12px; }
  .mobile-menu-toggle { display: flex !important; }
  .desktop-nav { display: none !important; }
}

@media (min-width: 769px) {
  .mobile-menu-toggle { display: none !important; }
  .mobile-drawer      { display: none !important; }
  .mobile-nav-overlay { display: none !important; }
}

@media (max-width: 480px) {
  header { padding: 8px 12px; }
  header > div:first-child h2 { display: none; }
  .nav-icons { gap: 10px; }
  .user-icon { font-size: 16px; }
}

/* ── 2. ANNOUNCEMENT BAR ────────────────────────────────────────── */
@media (max-width: 480px) {
  .announcement-bar,
  .announcement-wrap { font-size: 11px; padding: 7px 12px; }
}

/* ── 3. HERO SLIDER ─────────────────────────────────────────────── */
@media (max-width: 992px) {
  .hero-img,
  .hero-slide picture img { max-height: 480px; }
}

@media (max-width: 768px) {
  .hero-img,
  .hero-slide picture img { max-height: 360px; }
  .hero-content { padding: 20px 18px 28px; max-width: 100%; }
  .hero-title   { font-size: clamp(18px, 5.5vw, 32px); }
  .hero-sub     { font-size: 13px; margin-bottom: 14px; }
  .hero-cta     { padding: 10px 22px; font-size: 13px; }
  .hero-prev, .hero-next { width: 34px; height: 34px; font-size: 16px; }
  /* On mobile, hide hero-sub if viewport is cramped */
}

@media (max-width: 480px) {
  .hero-img,
  .hero-slide picture img { max-height: 260px; }
  .hero-content  { padding: 14px 14px 22px; }
  .hero-title    { font-size: clamp(16px, 5vw, 24px); }
  .hero-sub      { display: none; }
  .hero-cta      { padding: 9px 18px; font-size: 12px; }
  .hero-prev, .hero-next { width: 28px; height: 28px; font-size: 14px; }
  /* Prevent 100vh old slides from breaking layout */
  .slide, .hero-slide { height: auto !important; min-height: 0 !important; }
}

/* ── 4. TRUST BAR ───────────────────────────────────────────────── */
.trust-inner {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.trust-inner::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
  .trust-item  { padding: 9px 14px; }
  .trust-label { font-size: 11px; }
}

@media (max-width: 480px) {
  .trust-item  { padding: 8px 10px; }
  .trust-icon  { font-size: 14px; }
}

/* ── 5. FEATURE ICONS BAR ───────────────────────────────────────── */
@media (max-width: 992px) {
  .features-inner { grid-template-columns: repeat(2, 1fr); }
  .feature-item   { border-right: none; border-bottom: 1px solid var(--nc-border, rgba(180,140,100,0.18)); }
  .feature-item:nth-child(odd)  { border-right: 1px solid var(--nc-border, rgba(180,140,100,0.18)); }
  .feature-item:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 480px) {
  .features-inner { grid-template-columns: repeat(2, 1fr); }
  .feature-item   { padding: 14px 12px; gap: 10px; }
  .feature-icon   { font-size: 22px; }
  .feature-text strong { font-size: 11px; }
  .feature-text span   { font-size: 10px; }
}

/* ── 6. SECTION CONTAINER & SPACING ────────────────────────────── */
@media (max-width: 992px) {
  .nc-container { padding: 0 24px; }
  .nc-section   { padding: 56px 0; }
  .nc-category-layout.nc-container { padding-left: 0 !important; padding-right: 0 !important; }
}

@media (max-width: 768px) {
  .nc-container { padding: 0 16px; }
  .nc-section   { padding: 40px 0; }
  .nc-section-header { margin-bottom: 32px; }
  .footer-container { padding: 0 20px; }
  .footer-bottom-inner { padding: 0 20px; }
  .nc-category-layout.nc-container { padding-left: 0 !important; padding-right: 0 !important; }
}

@media (max-width: 480px) {
  .nc-container { padding: 0 12px; }
  .nc-section   { padding: 32px 0; }
  .nc-category-layout.nc-container { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ── 7. CATEGORY GRID (home page) ───────────────────────────────── */
@media (max-width: 1200px) {
  .nc-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .nc-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .nc-cat-card { height: 170px; }
}

@media (max-width: 480px) {
  .nc-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .nc-cat-card { height: 140px; }
  .nc-cat-name { font-size: 12px; letter-spacing: 0.8px; }
}

/* Home compact category grid */
@media (max-width: 1200px) {
  .category-grid-home { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .category-grid-home { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

@media (max-width: 480px) {
  .category-grid-home { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cat-label { font-size: 11px; }
}

/* ── 8. PRICE RANGE GRID ────────────────────────────────────────── */
@media (max-width: 992px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .price-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .price-card { height: 160px; }
}

/* ── 9. PRODUCT GRID (category / search page) ───────────────────── */
@media (max-width: 1200px) {
  .nc-product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
  .nc-product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  /* nc-product-img-wrap uses aspect-ratio:3/4 in filter.css — do not set fixed height */
}

@media (max-width: 480px) {
  .nc-product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  /* nc-product-img-wrap uses aspect-ratio:3/4 in filter.css — do not set fixed height */
  .nc-product-info { padding: 8px 6px; }
  .nc-product-name { font-size: 12px; }
  .nc-price        { font-size: 14px; }
  .nc-btn-add-cart { font-size: 9.5px; padding: 7px 4px; letter-spacing: 0.8px; }
}

@media (max-width: 360px) {
  .nc-product-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  /* aspect-ratio handles image height */
}

/* ── 10. HORIZONTAL SCROLL CARDS ────────────────────────────────── */
.hscroll-track {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.hscroll-track::-webkit-scrollbar { display: none; }
.hscroll-track > * { scroll-snap-align: start; }

@media (max-width: 768px) {
  .product-card-home { width: 155px; }
  .pch-info img { height: 170px; }
}

@media (max-width: 480px) {
  .product-card-home { width: 140px; }
  .pch-name  { font-size: 11px; }
  .pch-price { font-size: 13px; }
}

/* ── 11. CATEGORY PAGE LAYOUT — handled in filter.css ───────────── */
/*  All sidebar + product grid responsive rules live in filter.css.  */
/*  Do NOT add overrides here — they will conflict.                  */

/* ── 12. PAGE HEADER ────────────────────────────────────────────── */
/* Handled by filter.css which loads after this file — no override needed here */

/* ── 13. PRODUCT DETAIL ─────────────────────────────────────────── */
@media (max-width: 992px) {
  .nc-product-detail { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 768px) {
  .nc-product-detail { padding: 1.5rem 0 3rem; }
  .nc-detail-title   { font-size: clamp(22px, 5vw, 30px); }
  .nc-price-lg       { font-size: 24px; }
  .nc-thumb-row {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .nc-thumb-row::-webkit-scrollbar { display: none; }
  .nc-thumb { flex-shrink: 0; }
}

@media (max-width: 480px) {
  .nc-detail-title { font-size: clamp(20px, 5.5vw, 26px); }
  .nc-qty-ctrl button { padding: 8px 14px; font-size: 18px; }
}

/* ── 14. CART ───────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .nc-cart-layout { grid-template-columns: 1fr; }
  .nc-cart-summary { position: static; }
}

@media (max-width: 768px) {
  .nc-cart-item {
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
  }
  .nc-cart-item img          { width: 72px; height: 72px; }
  .nc-cart-item-price        { display: none; }
  .nc-cart-item-subtotal     { grid-column: 2; font-size: 14px; }
  .nc-qty-ctrl               { grid-column: 2; width: fit-content; }
}

@media (max-width: 480px) {
  .nc-cart-item { gap: 8px; }
}

/* ── 15. CHECKOUT ───────────────────────────────────────────────── */
@media (max-width: 992px) {
  .nc-checkout-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nc-form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ── 16. PAYMENT BOX ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .nc-payment-box { margin: 1.5rem 0; padding: 28px 18px; }
  .nc-payment-header h2 { font-size: 22px; }
  .nc-payment-amount strong { font-size: 20px; }
}

/* ── 17. AUTH BOX ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .nc-auth-box    { padding: 32px 20px; }
  .nc-auth-box h2 { font-size: 24px; }
}

/* ── 18. ORDERS ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nc-order-header  { flex-direction: column; align-items: flex-start; gap: 8px; }
  .nc-order-item-row { flex-direction: column; gap: 4px; }
}

@media (max-width: 480px) {
  .nc-order-header  { padding: 14px 16px; }
  .nc-order-items   { padding: 14px 16px; }
  .nc-order-footer  { padding: 12px 16px; }
}

/* ── 19. SUCCESS PAGE ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .nc-success-box {
    margin: 1.5rem 0;
    padding: 32px 16px;
  }
  .nc-success-btns {
    flex-direction: column;
    align-items: stretch;
  }
  .nc-success-btns a,
  .nc-success-btns button { text-align: center; }
}

/* ── 20. FOOTER ─────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

@media (max-width: 640px) {
  .footer-top { padding: 44px 0 32px; }
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .footer-column--brand {
    grid-column: 1 / -1;
    max-width: 100%;
  }
  .footer-col-heading { font-size: 13px; }
  .footer-link        { font-size: 12px; }
}

@media (max-width: 480px) {
  .footer-container { grid-template-columns: 1fr; gap: 20px; }
  .footer-column--brand { grid-column: auto; }
  .newsletter-input-group { flex-direction: column; gap: 8px; }
  .newsletter-input {
    border-right: 1px solid rgba(212,168,85,0.25);
    border-radius: 6px;
    width: 100%;
  }
  .newsletter-btn {
    border-radius: 6px;
    width: 100%;
    padding: 11px;
  }
}

/* Footer bottom bar */
@media (max-width: 640px) {
  .footer-bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .footer-bottom-spacer { display: none; }
  .payment-icons        { justify-content: center; }
  .footer-social-icons  { justify-content: center; }
}

/* ── 21. SALE BANNER ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nc-sale-banner { padding: 44px 16px; }
  .nc-sale-content h2 { font-size: clamp(22px, 6vw, 36px); }
  .nc-sale-sub { font-size: 16px; }
}

/* ── 22. TOAST ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .nc-toast {
    left: 50%; right: auto;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    text-align: center;
    bottom: 16px;
  }
}

/* ── 23. USER DROPDOWN ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .user-dropdown { right: -10px; min-width: 160px; }
}

/* ── 24. ANNOUNCEMENT BAR min-height to avoid CLS ──────────────── */
.announcement-wrap { min-height: 36px; }

/* ── 25. PAGINATION ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .nc-pagination { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .nc-page-btn   { padding: 6px 10px; font-size: 12px; min-width: 32px; height: 32px; }
}

/* ── 26. WHATSAPP FLOAT ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .whatsapp-float { width: 50px; height: 50px; font-size: 24px; bottom: 16px; right: 16px; }
}

/* ── 27. MEGA NAV — desktop only ────────────────────────────────── */
@media (max-width: 768px) {
  .mega-panel   { display: none !important; }
  .nav-chevron  { display: inline-block; }
}

/* ── 28. COLLECTION STRIP ───────────────────────────────────────── */
@media (max-width: 768px) {
  .collection-strip-head h2 { font-size: clamp(18px, 5vw, 24px); }
}

/* ── 29. PROMO BANNER ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .promo-banner img { max-height: 200px; }
}

/* ── 30. SOCIAL ICONS (header WhatsApp) ────────────────────────── */
@media (max-width: 360px) {
  .whatsapp-btn { display: none; } /* hide on very tiny screens */
}

/* ── 31. EMPTY STATE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nc-empty-state { padding: 48px 16px; }
}

/* ── 32. FILTER SIDEBAR scroll on mobile ────────────────────────── */
@media (max-width: 992px) {
  .nc-filter-sidebar {
    max-height: 60vh;
    overflow-y: auto;
  }
}