/* ============================================================
   MORBID MYSTIQUE — RESPONSIVE STYLES
   Mobile-first. Breakpoints: 480 | 768 | 1024 | 1280
   Designed & developed by Novelio Technologies 2026
   ============================================================ */

/* ─── BASE (all screens) ─────────────────────────────────────── */
.top-bar-center { display: none; }

/* ─── 480px+ (large mobile) ─────────────────────────────────── */
@media (min-width: 480px) {
  .top-bar-center { display: block; }
}

/* ─── 768px+ (tablet) ───────────────────────────────────────── */
@media (min-width: 768px) {
  .sticky-mobile-btns { display: none !important; }
}

/* ─── MOBILE-ONLY OVERRIDES (max-width) ──────────────────────── */

/* Top bar */
@media (max-width: 767px) {
  .top-bar { display: none; }
  .site-nav { position: sticky; top: 0; }

  /* Sticky mobile buttons — show on mobile */
  .sticky-mobile-btns { display: flex !important; }

  /* Nav */
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero */
  .hero-float-1 { right: 4%; top: 12%; width: 80px; }
  .hero-float-2 { display: none; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: min(300px, 100%); justify-content: center; }

  /* Product grid: 1 column */
  .product-grid { grid-template-columns: 1fr; gap: 14px; }
  .product-card { aspect-ratio: 4/3; }

  /* Bestsellers: narrower cards */
  .shop-card { flex: 0 0 220px; }

  /* How it works: stack */
  .hiw-grid { grid-template-columns: 1fr; gap: 32px; }
  .hiw-connector { display: none; }

  /* Reviews */
  .reviews-tabs { gap: 6px; }
  .review-tab { font-size: 12px; padding: 7px 14px; }

  /* Inquiry grid: stack */
  .inquiry-grid { grid-template-columns: 1fr; gap: 40px; }
  .inquiry-form { padding: 24px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .inquiry-stats { grid-template-columns: 1fr 1fr; }

  /* Instagram: 2 columns */
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer: single column */
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
  .footer-bottom-links { justify-content: center; flex-wrap: wrap; gap: 14px; }

  /* Brand story */
  .brand-story-quote { font-size: 1.3rem; }

  /* Product detail */
  .product-detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .product-gallery { position: static; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-img-accent { display: none; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Section padding reduction */
  :root { --section-pad: clamp(40px, 6vw, 80px); }

  /* Nav logo size */
  .nav-logo-text { font-size: 1.2rem; }

  /* Page hero */
  .page-hero { padding-block: 80px 40px; }
}

/* ─── TABLET (481px – 767px) ─────────────────────────────────── */
@media (min-width: 481px) and (max-width: 767px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-card { aspect-ratio: 3/4; }
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .inquiry-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ─── TABLET LANDSCAPE (768px – 1023px) ──────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Nav */
  .nav-links { gap: 0; }
  .nav-links a { padding: 8px 8px; font-size: 11px; }
  .nav-cta { padding: 9px 16px; font-size: 11px; }
  .nav-hamburger { display: none; }

  /* Product grid: 2 col */
  .product-grid { grid-template-columns: repeat(2, 1fr); }

  /* HIW: stay 3 col but reduced */
  .hiw-grid { gap: 20px; }
  .hiw-icon { width: 72px; height: 72px; }

  /* Inquiry */
  .inquiry-grid { grid-template-columns: 1fr; gap: 48px; }

  /* Footer: 2 col */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }

  /* About / Contact */
  .about-grid { gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Product detail */
  .product-detail-grid { gap: 40px; }
}

/* ─── DESKTOP (1024px+) ──────────────────────────────────────── */
@media (min-width: 1024px) {
  .nav-hamburger { display: none; }
  .top-bar-center { display: block; }
  .sticky-mobile-btns { display: none !important; }
}

/* ─── LARGE DESKTOP (1280px+) ────────────────────────────────── */
@media (min-width: 1280px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .instagram-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ─── EXTRA SMALL (< 360px) ──────────────────────────────────── */
@media (max-width: 359px) {
  :root { --gutter: 12px; }
  .hero-title { font-size: 2.2rem; }
  .btn { padding: 12px 20px; font-size: 12px; }
  .smbtn { padding: 10px 14px; font-size: 12px; }
  .smbtn span { display: none; } /* icon only on tiny screens */
}

/* ─── PRINT ──────────────────────────────────────────────────── */
@media print {
  .top-bar, .site-nav, .sticky-mobile-btns,
  .hero-canvas, #particle-canvas,
  .cursor-dot, .cursor-ring,
  #loading-screen { display: none !important; }

  body { background: white; color: black; font-size: 12pt; }
  a { color: black; text-decoration: underline; }
  .container { max-width: 100%; padding: 0; }
}