/* ============================================
   Mobile-First Comprehensive Fixes v3
   All pages including admin
   ============================================ */

/* ---- HEADER ---- */
.site-header-unified__brand img {
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
}
@media (min-width: 768px) {
  .site-header-unified__brand img {
    height: 56px !important;
    max-height: 56px !important;
  }
}
.site-header-unified__inner {
  padding: 0.35rem 0.6rem !important;
  min-height: 56px !important;
  gap: 0.5rem !important;
}
@media (min-width: 768px) {
  .site-header-unified__inner {
    padding: 0.45rem 1rem !important;
    min-height: 64px !important;
  }
}
.site-header-unified__name { font-size: 0.9rem !important; }
.site-header-unified__tag { font-size: 0.65rem !important; }
.site-header-unified__phone { 
  padding: 0.4rem 0.7rem !important; 
  font-size: 0.78rem !important;
  border-radius: 8px !important;
}
.site-header-unified__icon { width: 34px !important; height: 34px !important; }

/* ---- PRODUCT CARDS ---- */
.product-card {
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #eee !important;
}
.product-img {
  width: 100% !important;
  height: 120px !important;
  object-fit: cover !important;
}
.card-body { padding: 0.5rem 0.55rem !important; }
.card-title {
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin-bottom: 0.25rem !important;
}
.price-fa { font-size: 0.8rem !important; font-weight: 800 !important; }
.product-card .btn,
.product-card button,
.product-card a.btn {
  font-size: 0.68rem !important;
  padding: 0.35rem 0.45rem !important;
  border-radius: 6px !important;
  min-height: 32px !important;
}
@media (min-width: 640px) {
  .product-img { height: 150px !important; }
  .card-title { font-size: 0.82rem !important; }
  .card-body { padding: 0.6rem 0.7rem !important; }
  .product-card .btn { font-size: 0.75rem !important; padding: 0.4rem 0.55rem !important; }
}
@media (min-width: 1024px) {
  .product-img { height: 180px !important; }
  .card-title { font-size: 0.9rem !important; }
}

/* ---- GRIDS ---- */
#products-grid, .products-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.5rem !important;
}
@media (min-width: 768px) {
  #products-grid, .products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.85rem !important;
  }
}
@media (min-width: 1280px) {
  #products-grid, .products-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
  }
}

/* ---- RELATED ---- */
.related-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.45rem !important;
}
.related-grid .product-img { height: 100px !important; }
.related-grid .card-title { font-size: 0.68rem !important; }
@media (min-width: 768px) {
  .related-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 0.85rem !important; }
  .related-grid .product-img { height: 140px !important; }
}

/* ---- PRODUCT DETAIL PAGE ---- */
@media (max-width: 899px) {
  .product-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .product-image-box {
    position: static !important;
    max-width: 100% !important;
  }
  .product-image-box img {
    max-height: 280px !important;
    width: 100% !important;
    object-fit: contain !important;
  }
  .product-details-box {
    padding: 1rem !important;
  }
  .product-details-box h1 {
    font-size: 1.25rem !important;
  }
  .product-price-box {
    padding: 0.75rem 1rem !important;
    margin: 0.75rem 0 !important;
  }
  .product-price-box .price {
    font-size: 1.35rem !important;
  }
  .product-meta-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .product-meta-item {
    padding: 0.55rem 0.65rem !important;
    font-size: 0.78rem !important;
  }
  .product-actions .btn-primary,
  .product-actions button {
    width: 100% !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.95rem !important;
  }
}

/* ---- HOMEPAGE HERO ---- */
@media (max-width: 767px) {
  .hero-new { padding: 1.25rem 0.6rem 1.75rem !important; }
  .hero-new__title { font-size: 1.25rem !important; line-height: 1.3 !important; }
  .hero-new__desc { font-size: 0.82rem !important; margin-bottom: 0.85rem !important; }
  .hero-new__btns { flex-direction: column !important; gap: 0.4rem !important; }
  .hero-new__btns a { width: 100% !important; text-align: center !important; padding: 0.7rem 0.85rem !important; }
  .hero-new__image img, .hero-new__video video { max-height: 200px !important; border-radius: 10px !important; }
}

/* ---- CATEGORY CARDS ---- */
@media (max-width: 639px) {
  .cats-new__grid { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }
  .cat-card { min-height: 100px !important; border-radius: 10px !important; }
  .cat-card__title { font-size: 0.78rem !important; }
  .cat-card__img { height: 70px !important; }
}

/* ---- FILTERS ---- */
@media (max-width: 639px) {
  #advanced-filters { flex-direction: column !important; gap: 0.4rem !important; }
  #advanced-filters select, #advanced-filters input[type="number"] { width: 100% !important; min-width: 0 !important; }
  .category-tab { font-size: 0.75rem !important; padding: 0.4rem 0.7rem !important; }
}

/* ---- CART ---- */
@media (max-width: 639px) {
  [id^="row-"] { flex-wrap: wrap !important; gap: 0.5rem !important; padding: 0.75rem !important; }
  [id^="row-"] img { width: 60px !important; height: 60px !important; }
  .cart-qty-btn { width: 36px !important; height: 36px !important; }
}

/* ---- CHECKOUT ---- */
@media (max-width: 639px) {
  .checkout-form input, .checkout-form select, .checkout-form textarea {
    font-size: 16px !important;
    padding: 0.75rem !important;
  }
  .checkout-form .btn { width: 100% !important; padding: 0.9rem !important; }
}

/* ---- ACCOUNT ---- */
@media (max-width: 639px) {
  .ac-grid { grid-template-columns: 1fr !important; }
  .account-menu a { padding: 0.75rem 1rem !important; font-size: 0.9rem !important; }
}

/* ---- FOOTER ---- */
@media (max-width: 767px) {
  .sf-grid, footer .grid, .footer-cols {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    text-align: center !important;
  }
  footer h3, footer h4 { font-size: 0.95rem !important; }
  footer a, footer p { font-size: 0.82rem !important; }
}

/* ---- ADMIN PANEL ---- */
@media (max-width: 1023px) {
  #admin-sidebar { width: min(260px, 80vw) !important; }
  .admin-content, main.admin-main { padding: 0.75rem !important; }
  .admin-table, table { font-size: 0.78rem !important; }
  .admin-table th, .admin-table td, table th, table td { padding: 0.4rem 0.5rem !important; }
  .admin-form input, .admin-form select, .admin-form textarea,
  form input, form select, form textarea { font-size: 16px !important; }
  .admin-btn, .btn-admin { min-height: 40px !important; padding: 0.5rem 0.75rem !important; }
}
@media (max-width: 639px) {
  .admin-table-wrap, .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .admin-stats, .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }
  .admin-card { padding: 0.75rem !important; }
}

/* ---- TOUCH ---- */
@media (max-width: 639px) {
  button, .btn, a.btn, input[type="submit"], input[type="button"] { min-height: 40px !important; }
}

/* ---- SPACING ---- */
@media (max-width: 639px) {
  .max-w-screen-2xl, .max-w-screen-8xl, .container { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }
}