/* ========================
   1. BASE
   ======================== */
body, html,
#app, main, .page-content {
  background: #fff !important;
}

/* ========================
   2. FOOTER
   ======================== */
footer,
.store-footer,
.footer-is-light,
.store-footer .store-footer__inner {
  background: #fff !important;
  border-top: 1px solid #eee !important;
  color: #333 !important;
}

.store-footer a { color: #555 !important; }
.store-footer a:hover { color: #00C9B1 !important; }

/* ========================
   3. BLOCKS
   ======================== */
.s-block { margin: 12px 0 !important; }
.s-block--banners { margin-bottom: 8px !important; }
.s-block--icons { padding: 16px 8px !important; }
.s-block--icons .grid {
  gap: 8px !important;
  justify-content: center !important;
}
/* ========================
   4. banners
   ======================== */
.s-block--banners .grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
}

.s-block--banners .banner-entry {
    border-radius: 8px !important;
    overflow: hidden !important;
}

.s-block--banners .lazy__bg {
    width: 100% !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
   5. MOBILE
   ======================== */
@media (max-width: 767px) {
  .s-block--banners .grid { gap: 3px !important; }
  .banner-entry { height: 90px !important; }
  .s-block--banners { padding: 0 10px !important; }
}

/* ========================
   6. DESKTOP فقط
   ======================== */
@media (min-width: 768px) {
  .banner-entry:hover img {
    transform: scale(1.05) !important;
    transition: transform 0.25s ease-out !important;
  }
}