/* ==========================================================================
   RESPONSIVE — tablet & mobile breakpoints
   Loaded last so its rules take priority at smaller widths.
   ========================================================================== */

/* ---------------- Desktop (4-column grid): cap card width so cards
   read smaller and sit centered within their column, instead of
   stretching edge-to-edge. ---------------- */
@media (min-width: 961px) {
  .product-card { max-width: 240px; margin-inline: auto; }
}

/* ---------------- Large desktop down to laptop ---------------- */
@media (max-width: 1180px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .collection-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- Tablet ---------------- */
@media (max-width: 960px) {
  :root { --nav-h: 76px; }

  /* Keep logo + brand name + toggle from ever fighting for space or
     overflowing the viewport. */
  .navbar .container { gap: var(--sp-2); flex-wrap: nowrap; }

  .nav-brand {
    gap: var(--sp-2);
    font-size: 1.05rem;
    min-width: 0;
    overflow: hidden;
  }
  .nav-brand img,
  .nav-logo { height: 40px; margin-right: 0; }

  .nav-actions { gap: var(--sp-2); flex-shrink: 0; }

  /* Bigger, clearly-tappable hamburger with real breathing room from
     the edge of the screen. */
  .nav-toggle {
    display: flex;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
  }
  .nav-toggle span { width: 22px; }

  /* ---- Dark backdrop behind the off-canvas panel; tapping it closes
     the menu (handled in navigation.js). ---- */
  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-med) var(--ease), visibility var(--dur-med) var(--ease);
    z-index: 95;
  }
  .nav-overlay.is-open { opacity: 1; visibility: visible; }

  /* ---- Left-side off-canvas panel ---- */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    width: min(84vw, 320px);
    height: 100vh;
    max-height: none;
    overflow-y: auto;
    background: var(--bg-0);
    border-bottom: none;
    box-shadow: var(--shadow-md);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--sp-6) + var(--sp-3)) var(--sp-4) var(--sp-5);
    transform: translateX(-100%);
    opacity: 1;
    transition: transform var(--dur-med) var(--ease);
    z-index: 120;
  }
  .nav-links.is-open { transform: translateX(0); opacity: 1; }
  .nav-links a {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--sp-4);
    font-size: 1.05rem;
    border-bottom: none;
  }
  .nav-toggle { display: flex; }

  /* ---- Close (×) button, top-right of the panel ---- */
  .nav-close-item {
    display: block;
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
  }
  .nav-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    color: var(--text-1);
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    transition: color 200ms var(--ease);
  }
  .nav-close:hover { color: var(--accent); }

  .nav-item-dropdown { width: 100%; border-bottom: none; }
  .nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding-block: var(--sp-4);
    font-size: 1.05rem;
  }
  /* Smooth slide open/close via animated max-height, instead of the
     desktop hover-panel (position/opacity) behavior. */
  .nav-dropdown-panel {
    position: static;
    width: 100%;
    min-width: 0;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
    margin-top: 0;
    padding: 0;
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: max-height var(--dur-med) var(--ease);
  }
  .nav-dropdown-panel::before { display: none; }
  .nav-item-dropdown.is-open .nav-dropdown-panel { max-height: 260px; }
  .nav-dropdown-link {
    padding: var(--sp-2) var(--sp-2);
    padding-left: var(--sp-5);
    font-size: var(--fs-base);
  }

  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { order: 2; }
  .hero-visual { order: 1; }
  .hero-copy .hero-sub { margin-inline: auto; }
  .hero-cta { justify-content: center; }

  .about-grid { grid-template-columns: 1fr; }
  .about-visual { position: static; max-width: 320px; margin-inline: auto; }

  .contact-grid { grid-template-columns: 1fr; }

  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .feedback-grid { grid-template-columns: repeat(2, 1fr); }
  .feedback-toolbar { flex-direction: column; align-items: flex-start; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .modal-scroll { grid-template-columns: 1fr; }
  .modal-info { border-left: none; border-top: 1px solid var(--line); }
}

/* ---------------- Mobile ---------------- */
@media (max-width: 640px) {
  :root { --sp-8: 4.5rem; --sp-7: 3rem; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .collection-grid { grid-template-columns: 1fr; }
  .feedback-grid { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .footer-bottom { flex-direction: column; gap: var(--sp-3); text-align: center; }

  .product-actions { flex-direction: column; }

  .spec-list { grid-template-columns: 1fr; }

  .sort-bar { justify-content: center; }
  .sort-select { flex: 1; }
  .sort-select-wrap { width: 100%; max-width: 320px; }

  .products-toolbar { flex-direction: column; align-items: stretch; }
  .products-search { min-width: 0; }

  .whatsapp-float { width: 50px; height: 50px; right: var(--sp-3); bottom: var(--sp-3); }
  .whatsapp-float svg { width: 24px; height: 24px; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr; }

  .navbar .container { padding-inline: var(--sp-3); }
  .nav-brand { font-size: 0.9rem; gap: 6px; letter-spacing: 0.01em; }
  .nav-brand img, .nav-logo { height: 34px; }
  .nav-toggle { width: 46px; height: 46px; }
}