/* ==========================================================================
   AL ARAFAH FRAGRANCE — RESPONSIVE STYLESHEET
   Mobile-first breakpoints layered on top of style.css
   ========================================================================== */

/* Base (mobile, <576px) already covered by fluid clamp() values in style.css */

/* Small devices (>=576px) */
@media (min-width: 576px) {
  .hero-desc { max-width: 520px; }
  .newsletter-form { max-width: 380px; }
}

/* Medium devices / tablets (>=768px) */
@media (min-width: 768px) {
  .hero { padding-top: 120px; }
  .page-header { padding-top: 190px; }
  .floating-stack { right: 32px; bottom: 32px; }
}

/* Large devices / small laptops (>=992px) */
@media (min-width: 992px) {
  .hero-visual { min-height: 520px; }
}

/* Extra large / desktops (>=1200px) */
@media (min-width: 1200px) {
  .container-lux { padding: 0 48px; }
}

/* XXL / large desktops & 4K (>=1400px) */
@media (min-width: 1400px) {
  .container-lux { max-width: 1360px; }
}
@media (min-width: 1920px) {
  .container-lux { max-width: 1480px; }
  body { font-size: 17px; }
}

/* ---------- Mobile-specific fixes (<992px) ---------- */
@media (max-width: 991.98px) {
  .hero { text-align: left; }
  .hero-visual { margin-top: 40px; }
  .section { padding: 56px 0; }
  .category-card .cat-body { padding: 18px 14px 22px; }
}

/* Small phones (<400px) */
@media (max-width: 399.98px) {
  .btn-lux { padding: 14px 24px; font-size: 0.88rem; width: 100%; }
  .hero-title { font-size: 2.2rem; }
  .section-title { font-size: 1.7rem; }
  .fab { width: 48px; height: 48px; }
}

/* Landscape phones */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 140px 0 60px; }
  .mobile-menu { padding-top: 90px; }
}

/* Touch target sizing */
@media (hover: none) and (pointer: coarse) {
  .nav-links a, .btn-lux, .fab, .faq-question { min-height: 44px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

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

/* Responsive tables / grids auto stacking handled by Bootstrap grid classes in HTML */