/* ============================================
   MITHOOOS - Mobile Responsive Overrides
   Strictly mobile-only (max-width: 767px)
   Desktop view is NEVER touched here.
   ============================================ */

/* Base mobile body */
@media (max-width: 767px) {
  body { font-size: 13px; }
  .container { padding: 0 var(--space-4); }

  /* Product Grid: 2 columns on mobile */
  .grid-products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-3) !important; }

  /* Product Card - Mobile Polish */
  .product-card { border-radius: 12px !important; }
  .product-card-img { aspect-ratio: 3/4 !important; }
  .product-card-badges { gap: 2px !important; top: 6px !important; left: 6px !important; max-height: 54px !important; overflow: hidden !important; }
  .badge { font-size: 0.55rem !important; padding: 2px 5px !important; border-radius: 4px !important; line-height: 1.2 !important; }
  .btn-wishlist { width: 28px !important; height: 28px !important; top: 6px !important; right: 6px !important; }
  .btn-wishlist svg { width: 13px !important; height: 13px !important; }
  .product-card-actions { transform: translateY(0) !important; opacity: 1 !important; padding: 6px !important; gap: 4px !important; }
  .product-card-actions .btn { font-size: 0.65rem !important; padding: 5px 6px !important; }
  .product-card-body { padding: 8px 8px 10px !important; gap: 2px !important; }
  .product-name { font-size: 0.7rem !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; word-break: break-word !important; }
  .product-brand { font-size: 0.55rem !important; }
  .product-rating { font-size: 0.6rem !important; }
  .product-rating-count { font-size: 0.55rem !important; }
  .product-price { gap: 4px !important; flex-wrap: wrap !important; }
  .product-price-current { font-size: 0.75rem !important; }
  .product-price-original { font-size: 0.6rem !important; }
  /* Navbar */
  .navbar-logo img { height: 48px !important; max-width: 200px !important; }
  .nav-icon-btn { width: 38px; height: 38px; }

  /* Toast */
  .toast-container { right: var(--space-4); left: var(--space-4); bottom: var(--space-4); }
  .toast { max-width: 100%; width: 100%; }

  /* Section headings */
  .section-title { font-size: var(--text-2xl); }
  .section-desc { font-size: var(--text-base); }
  .btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }
}

/* Cart Page */
@media (max-width: 767px) {
  .cart-layout { display: flex !important; flex-direction: column !important; gap: var(--space-6) !important; }
  .cart-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cart-table { min-width: 520px; }
  .cart-summary { width: 100% !important; }
}

/* Checkout Page */
/* Checkout Page */
@media (max-width: 767px) {
  .checkout-layout { 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: stretch !important;
    gap: var(--space-4) !important; 
    padding: var(--space-4) 0 var(--space-12) !important; 
  }
  
  /* Checkout Stepper Fix */
  .checkout-steps { 
    width: 100% !important;
    justify-content: space-between !important;
    gap: 0 !important; 
    margin-bottom: var(--space-6) !important; 
  }
  .ck-step { 
    flex: 0 1 auto !important;
    font-size: 10px !important; 
    gap: 4px !important; 
    min-width: 0 !important;
    white-space: nowrap !important;
  }
  .ck-num { 
    width: 22px !important; 
    height: 22px !important; 
    font-size: 10px !important; 
    border-width: 1.5px !important;
  }
  .ck-line { 
    flex: 1 1 0% !important; 
    min-width: 4px !important;
    margin: 0 4px !important;
  }
  
  /* Panels and Form sizing */
  .ck-panel { 
    padding: var(--space-4) !important; 
    margin-bottom: var(--space-4) !important; 
  }
  .ck-panel-title { font-size: 18px !important; margin-bottom: var(--space-4) !important; }
  .ck-panel-title .step-num { width: 24px !important; height: 24px !important; font-size: 10px !important; }
  
  .ck-order-summary { 
    order: 10; 
    padding: var(--space-4) !important;
    box-sizing: border-box !important;
  }
  
  /* Credit Card Fields */
  .card-row { grid-template-columns: 1fr !important; }
}

  /* Fix for overlapping buttons on mobile */
  .ck-actions {
    flex-direction: column-reverse !important;
  }
  .ck-actions button {
    width: 100% !important;
    flex: none !important;
  }
  .place-order-btn {
    font-size: 14px !important;
  }
/* Shop Page */
@media (max-width: 767px) {
  .shop-layout { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: var(--space-4) !important; }
  .shop-filters { width: 100% !important; position: static !important; }
}

/* Account Page */
@media (max-width: 767px) {
  .account-layout { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: var(--space-6) !important; padding: var(--space-6) 0 var(--space-12) !important; }
  .account-sidebar { position: static !important; width: 100% !important; box-sizing: border-box !important; }
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .orders-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100% !important; }
  .orders-table { min-width: 560px; }
  .account-content { width: 100% !important; overflow: hidden !important; }
}

/* Product Detail Page */
@media (max-width: 767px) {
  .product-detail-layout { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: var(--space-6) !important; padding-top: var(--space-6) !important; }
  .product-gallery-thumbs { flex-direction: row !important; overflow-x: auto; }
  .product-gallery-thumb { width: 64px !important; height: 64px !important; flex-shrink: 0; }
  .product-detail-title { font-size: var(--text-2xl) !important; }
  .product-detail-price { font-size: var(--text-xl) !important; }
}

/* Contact Page */
@media (max-width: 767px) {
  .contact-layout { display: flex !important; flex-direction: column !important; align-items: stretch !important; padding: var(--space-8) 0 var(--space-12) !important; gap: var(--space-8) !important; }
}

/* About Page */
@media (max-width: 767px) {
  .value-cards { grid-template-columns: 1fr !important; gap: var(--space-4) !important; }
}

/* Blog Page */
@media (max-width: 767px) {
  .blog-layout { display: flex !important; flex-direction: column !important; align-items: stretch !important; padding: var(--space-6) 0 var(--space-12) !important; }
  .blog-sidebar { order: -1; }
}

/* Hero */
@media (max-width: 767px) {
  .hero-title { font-size: clamp(2.2rem, 11vw, 3rem) !important; }
  .hero-cta-group { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .hero-cta-group .btn { width: 100%; justify-content: center; }
}