/* ═══════════════════════════════════════════════════════
   YUKI AYURVEDA — Responsive CSS
   All breakpoints for mobile-first design
═══════════════════════════════════════════════════════ */

/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1200px) {
  .container { max-width: 960px; }
}

@media (max-width: 1199px) {
  .main-menu ul li a { padding: 8px 12px; }
}

/* Tablet desktop :768px to 991px */
@media (min-width: 768px) and (max-width: 991px) {
  .mobile-header-area { display: flex !important; }
  .header-area { display: none !important; }
  .product-list .col-md-4 { flex: 0 0 50%; max-width: 50%; }
}

/* Small mobile :320px to 767px */
@media (min-width: 320px) and (max-width: 767px) {
  .mobile-header-area { display: flex !important; }
  .header-area { display: none !important; }
  
  /* 2-column product grid */
  .product-list .col-lg-3,
  .product-list .col-md-4,
  .product-list .col-sm-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  
  /* Stack checkout columns */
  .checkout-area .col-lg-7,
  .checkout-area .col-lg-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  /* Stack product detail */
  .product-single-area .col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  /* Footer stack */
  .footer-area .col-lg-3,
  .footer-area .col-md-4,
  .footer-area .col-md-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }
  
  /* Section spacing */
  .section-top { padding-top: 40px !important; }
  .section-bottom, .pb-5 { padding-bottom: 40px !important; }
}

/* Large Mobile :577px to 767px */
@media only screen and (min-width: 577px) and (max-width: 767px) {
  .container { padding: 0 16px; }
}

/* Extra small :320px to 576px */
@media (max-width: 575.98px) {
  .container { padding: 0 12px; }
  
  .mobile-header-area .header-btn .btn-left .btn-icon { font-size: 20px !important; }
  
  /* Force 2-col product grid */
  .product-list .col-6,
  .product-list [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 6px !important;
  }
  .product-list .row { margin: 0 -6px !important; }
}