/* ===== Store background extra light mint ===== */
body {
  background-color: #F1FAF1 !important;
}

/* ===== Header background ===== */
header,
.header,
.top-header {
  background-color: #F1FAF1 !important;
  background-image: none !important;
}

/* ===== Section titles inside box (slightly darker mint) ===== */
.section-title,
.category-title {
  background-color: #E0F2E9 !important;
  padding: 10px 15px;
  border-radius: 6px;
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.banner-section,
.slider,
.salla-slider {
    margin: 0 !important;
    padding: 0 !important;
}
section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Mobile: 2 products per row */
@media (max-width: 767px) {
  .products-list .product-item,
  .products-grid .product-item {
    width: 50% !important; /* 2 per row */
    float: right !important;
    box-sizing: border-box !important;
  }
}

/* Tablet: 3 products per row */
@media (min-width: 768px) and (max-width: 1199px) {
  .products-list .product-item,
  .products-grid .product-item {
    width: 33.33% !important; /* 3 per row */
  }
}
/* Desktop: 4 products per row */
@media (min-width: 1200px) {
  .products-list .product-item,
  .products-grid .product-item {
    width: 25% !important; /* 4 per row */
  }
}

/* ===== Replace profile image with generic account icon ===== */
header img[src*="avatar"],
.header img[src*="avatar"],
.top-header img[src*="avatar"] {
  content: url("https://img.icons8.com/ios-filled/50/000000/user.png") !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

button.add-to-cart {
  background-color: #FF5722 !important;
  color: #fff !important;
}