/* ============================================================
   ZSE STORE — responsive.css
   All breakpoint overrides centralised here.
   Supplements style.css — do not duplicate base rules.
============================================================ */

/* ── 1280px — Large tablets / small laptops ─────────────────── */
@media (max-width: 1280px) {
  .search-bar { max-width: 300px; }
}

/* ── 1024px — Tablets landscape ─────────────────────────────── */
@media (max-width: 1024px) {
  .btn-shop-brands { display: none; }
  .search-bar { max-width: 260px; }
  .order-hotline { font-size: 0.72rem; }
  .order-hotline a { font-size: 0.82rem; }

  .department-grid { grid-template-columns: repeat(3, 1fr); }
  .featured-grid   { grid-template-columns: repeat(3, 1fr); }
  .why-grid        { grid-template-columns: repeat(2, 1fr); }
  .products-container { grid-template-columns: repeat(3, 1fr); }
}

/* ── 768px — Tablets portrait / large phones ────────────────── */
@media (max-width: 768px) {
  :root { --header-h: 64px; }

  /* Header */
  .top-header-bar { padding: 0 16px; }
  .logo-icon      { height: 44px !important; }
  .search-bar     { display: none; }
  .nav-categories { display: none; }
  .order-hotline  { display: none; }
  .btn-shop-brands { display: none; }
  .hamburger      { display: flex; }

  /* Hero */
  .slider-container { height: 56vh; min-height: 300px; }
  .slide-text       { bottom: 18%; left: 5%; right: 5%; }
  .slide-text h1    { font-size: 1.6rem; }
  .slide-text p     { font-size: 0.875rem; }
  .prev, .next      { width: 38px; height: 38px; font-size: 1rem; }

  /* Store strip */
  .store-strip-inner { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Sections */
  .shop-by-department { padding: 40px 16px 48px; }
  .featured-section   { padding: 40px 16px; }
  .brands-section     { padding: 40px 16px; }
  .why-section        { padding: 40px 16px; }
  .cta-section        { padding: 48px 16px; }
  .section-heading    { margin-bottom: 32px; }

  /* Grids */
  .department-grid    { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .featured-grid      { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .why-grid           { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .products-container { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Products page */
  .filter-section  { top: 64px; padding: 12px 16px; }
  .filter-wrap     { gap: 8px; }
  .products-toolbar { margin-top: 14px; padding: 0 16px; }
  .products-grid-wrap { padding: 0 16px; margin-top: 16px; }
  .page-hero       { padding: 32px 16px 24px; }

  /* Contact */
  .contact-grid       { grid-template-columns: 1fr; }
  .contact-page-wrap  { margin: 28px auto 48px; padding: 0 16px; }
  .contact-form-card,
  .contact-info-card  { padding: 24px 20px; }

  /* Detail page */
  .detail-layout       { flex-direction: column; gap: 24px; }
  .detail-image-wrap   { max-width: 100%; }
  .detail-title        { font-size: 1.4rem; }
  .detail-price        { font-size: 1.6rem; }
  .detail-actions      { flex-direction: column; }
  .btn-whatsapp,
  .btn-call            { text-align: center; width: 100%; }
  .breadcrumb          { padding: 0 16px; margin-top: 16px; }

  /* CTA buttons */
  .cta-buttons { flex-direction: column; align-items: center; }
  .btn-cta-wa,
  .btn-cta-outline { width: 100%; max-width: 320px; justify-content: center; }

  /* Modal */
  .modal-content { padding: 24px 18px; }

  /* Footer */
  .footer { padding: 24px 16px; }
  .footer-nav { gap: 4px; }
  .footer-nav a { padding: 5px 10px; font-size: 0.82rem; }
}

/* ── 480px — Small phones ────────────────────────────────────── */
@media (max-width: 480px) {
  /* Grids */
  .department-grid    { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .featured-grid      { grid-template-columns: 1fr 1fr; gap: 10px; }
  .why-grid           { grid-template-columns: 1fr; gap: 12px; }
  .products-container { grid-template-columns: 1fr; gap: 12px; }

  /* Product cards */
  .product-img-wrap img { height: 180px; }
  .product-name         { font-size: 0.88rem; }

  /* Filter buttons */
  .filter-btn  { padding: 5px 10px; font-size: 0.76rem; }
  .filter-label { display: none; }

  /* Department items */
  .department-item img  { height: 110px; }
  .department-item span { font-size: 0.82rem; }

  /* Hero */
  .slider-container { height: 50vh; min-height: 260px; }
  .slide-text       { bottom: 14%; }
  .slide-text h1    { font-size: 1.3rem; }
  .slide-text p     { display: none; }
  .prev, .next      { width: 32px; height: 32px; font-size: 0.9rem; }
  .prev             { left: 10px; }
  .next             { right: 10px; }

  /* Section headings */
  .section-heading h2 { font-size: 1.3rem; }
  .section-heading p  { font-size: 0.85rem; }

  /* Brands */
  .brands-grid   { gap: 10px; }
  .brand-pill    { padding: 8px 16px; font-size: 0.8rem; }

  /* Why cards */
  .why-card { padding: 22px 18px; }

  /* Floating WA — move up a bit on mobile */
  .floating-whatsapp { bottom: 16px; right: 16px; }
  .floating-whatsapp svg { width: 48px; height: 48px; }

  /* Promo banner */
  .promo-banner { font-size: 0.78rem; padding: 8px 16px; }
}

/* ── 360px — Tiny phones ─────────────────────────────────────── */
@media (max-width: 360px) {
  .department-grid { grid-template-columns: 1fr; }
  .featured-grid   { grid-column: 1fr; }
  .product-img-wrap img { height: 160px; }
  .modal-content   { padding: 20px 14px; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .top-header-bar,
  .hamburger,
  .mobile-nav,
  .floating-whatsapp,
  .slider-container,
  .promo-banner,
  .filter-section,
  .modal,
  .footer { display: none !important; }
  body { background: #fff; color: #000; }
  .product-card { border: 1px solid #ccc; }
  .product-name { color: #000; }
  .product-price { color: #b8860b; }
}