/* ================================================================
   Muzuri Designs — Responsive Styles
   ================================================================ */

/* ── Large Desktop (1400px+) ──────────────────────────────────── */
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
  .hero-swiper-content { padding-left: 140px; }
  .products-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Desktop (992px – 1399px) ─────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1399px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tablet (768px – 991px) ───────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
  .products-grid      { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .hero-swiper-content { padding-left: 3rem; }
  .hero-title          { font-size: clamp(2.5rem, 6vw, 4.5rem); }
  .lookbook-grid       { grid-template-columns: 1fr 1fr; }
  .admin-sidebar       { min-height: auto; }
  .section-pad         { padding: 60px 0; }
}

/* ── Prevent ALL horizontal overflow globally ─────────────────── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Navbar mobile — collapse tagline, tighten brand ──────────── */
@media (max-width: 991px) {
  /* Hide the long tagline text — causes overflow on small screens */
  .nav-tagline { display: none !important; }

  /* Brand is just the logo on mobile */
  .muzuri-brand { flex-direction: row; align-items: center; }

  /* Slightly smaller logo on mobile so it fits with icons + toggler */
  .nav-logo { height: 40px !important; }

  /* Tighter navbar padding so row doesn't overflow */
  .muzuri-navbar .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }

  /* Ensure the brand + icons + toggler all stay on one line without overflow */
  .muzuri-navbar { padding: 0.65rem 0 !important; }
}

/* ── Landing overlay — contain glow, ensure logo shows ───────── */
#lo-overlay { overflow: hidden !important; }

.lo-glow {
  /* Cap glow at viewport size so it doesn't extend past overlay edges */
  width:  min(700px, 100vw)  !important;
  height: min(700px, 100vw)  !important;
}

@media (max-width: 575px) {
  /* Make the overlay logo a bit smaller on phones */
  .lo-logo-wrap img { width: min(280px, 75vw) !important; }

  /* Reduce tagline letter-spacing on tiny screens */
  .lo-tagline { letter-spacing: 0.1em !important; font-size: 10px !important; }

  /* Tighter Enter button padding */
  .lo-btn { padding: 12px 28px !important; }

  /* Hint text at the bottom — move up from bottom on small screens */
  .lo-hint { bottom: 20px !important; font-size: 9px !important; }
}

/* ── Mobile (max 767px) ───────────────────────────────────────── */
@media (max-width: 767px) {
  body.muzuri-dark { padding-bottom: 70px; }

  .products-grid       { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .lookbook-grid       { grid-template-columns: 1fr; }
  .lookbook-item.wide  { grid-column: span 1; }
  .lookbook-item.tall  { grid-row: span 1; }

  .hero-swiper         { height: 90vh; }
  .hero-swiper-content { padding: 0 1.5rem; }
  .hero-title          { font-size: 2.5rem; }
  .hero-desc           { font-size: 0.95rem; }
  .hero-actions        { flex-direction: column; }
  .hero-actions .btn   { width: 100%; text-align: center; }

  .section-pad         { padding: 50px 0; }
  .section-title       { font-size: clamp(1.75rem, 7vw, 2.5rem); }

  .footer-top          { padding: 50px 0 30px; }

  .product-card-body   { padding: 0.85rem; }
  .product-card-name   { font-size: 0.9rem; }

  .product-actions     { gap: 0.75rem; }
  .btn-add-cart,
  .btn-buy-now         { width: 100%; }
  .btn-wishlist-pdp    { width: 100%; border-radius: var(--radius-pill); height: 46px; }

  .cart-product-img    { width: 60px; height: 75px; }

  .checkout-section    { padding: 1.25rem; }

  .dashboard-sidebar   { margin-bottom: 1.5rem; }

  .admin-sidebar       { position: static; }

  .page-hero           { padding: 100px 0 40px; }

  .h-scroll-gallery-item { flex: 0 0 220px; }

  .mega-menu           { display: none !important; }

  .counter-item        { padding: 2rem 0.5rem; }
  .counter-number      { font-size: 2.5rem; }

  .testimonial-card    { padding: 1.25rem; }
  .testimonial-text    { font-size: 1rem; }

  .blog-card-body      { padding: 1rem; }
  .blog-card-title     { font-size: 1.05rem; }

  .cart-summary        { margin-top: 1.5rem; }

  .filter-sidebar      { margin-bottom: 1.5rem; }
  .filter-sidebar-collapse { display: none; }
  .filter-sidebar-collapse.show { display: block; }

  .search-form-main input { font-size: 1.5rem; }
}

/* ── Small Mobile (max 480px) ─────────────────────────────────── */
@media (max-width: 480px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .product-card-body { padding: 0.65rem; }
  .product-card-name { font-size: 0.82rem; }
  .price-current { font-size: 0.95rem; }

  .hero-title { font-size: 2rem; }

  .mobile-bottom-item span { display: none; }
  .mobile-bottom-item i { font-size: 1.25rem; }

  .nav-logo { height: 40px; }

  .product-thumb { width: 55px; height: 70px; }
}

/* ── Touch / Hover Breakpoints ────────────────────────────────── */
@media (hover: none) {
  .product-card-actions  { opacity: 1; transform: translateX(0); }
  .product-card:hover    { transform: none; }
  .product-card .product-card-img-hover { display: none; }
}

/* ── Mobile: lift buttons above the bottom nav (70px) ────────── */
@media (max-width: 991px) {
  /* WhatsApp sits just above the mobile bottom nav */
  .whatsapp-float  { bottom: 82px; right: 16px; width: 48px; height: 48px; }
  /* Back-to-top sits above WhatsApp */
  .back-to-top     { bottom: 144px; right: 16px; }
  /* Hide tooltip on touch devices (no hover) */
  .whatsapp-tooltip { display: none !important; }
}

/* ── Print ────────────────────────────────────────────────────── */
@media print {
  .site-header, .muzuri-footer, .mobile-bottom-nav,
  .back-to-top, .whatsapp-float, #preloader, .announcement-bar { display: none !important; }
  body.muzuri-dark { background: white; color: black; }
}