/* =============================================================
   ZERO 3 CORP. — Website v2
   mobile.css — responsive breakpoints.
   Load AFTER style.css so these rules win the cascade.
   ============================================================= */

/* ---------- Min 1200px (xl / base desktop up) ---------- */
@media (min-width: 1200px) {

}

/* ---------- Max 1199.98px (lg) ---------- */
@media (max-width: 1199.98px) {

}

/* ---------- Max 991.98px (md-lg / tablets) ---------- */
@media (max-width: 991.98px) {

}

/* ---------- Max 767.98px (md) ---------- */
@media (max-width: 767.98px) {
  /* collapse desktop nav, reveal hamburger */
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .nav-toggle { display: block; }

  /* slide-down mobile menu */
  .mobile-menu {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: 99;
    display: grid;
    gap: 0.2rem;
    padding: 1rem var(--gutter) 1.6rem;
    background: #0B0E0CF5;                /* near-black @ ~96% */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .mobile-menu.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .mobile-menu a {
    padding: 0.9rem 0.4rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .mobile-menu a:last-of-type { border-bottom: none; }
  .mobile-menu .btn { margin-top: 0.9rem; justify-content: center; }

  /* products: stack the title/tags above the description instead of forcing two columns */
  .product { flex-direction: column; align-items: stretch; gap: 1.3rem; }
  .product-head, .product-body { flex: 0 0 auto; }
}

/* ---------- Max 575.98px (sm) ---------- */
@media (max-width: 575.98px) {
  .brand { font-size: 1.12rem; }
}

/* ---------- Max 381.98px (xs) ---------- */
@media (max-width: 381.98px) {

}