/* =========================================================
   NTE · custom CSS for theme «رائد» (Salla › تخصيص متقدم › CSS)
   Paste into the DRAFT theme copy only. Goes live on publish.
   Rules: target only top-level homepage block classes from Raed,
   never product cards, cart or checkout. If Raed renames a class
   after an update, that rule simply stops applying (no breakage).
   Version 1 · 2026-10-19
   ========================================================= */

/* 1. Section titles: short brand-blue accent under the heading
      (product sliders + brands). Colour follows «لون المتجر». */
.s-slider-block__title-right h2,
.s-block__title .right-side h2 {
  position: relative;
  padding-bottom: 10px;
}
.s-slider-block__title-right h2::after,
.s-block__title .right-side h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: var(--color-primary);
}

/* 2. Homepage image tiles and wide banners: soft lift on hover (desktop) */
@media (hover: hover) and (min-width: 768px) {
  .s-block--banners .banner-entry,
  .s-block--fixed-banner .banner--fixed {
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .s-block--banners .banner-entry:hover,
  .s-block--fixed-banner .banner--fixed:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(6, 60, 110, .18);
  }
}
.s-block--fixed-banner .banner--fixed img { border-radius: .375rem; }

/* 3. Mobile: the 3-tile rows («صور مربعة (محسنة)») become a swipe strip
      instead of stacking 3 tiles × 200px. Tiles keep their 2:1 shape so
      nothing in the image is cropped. Fallback if classes change: normal stack. */
@media (max-width: 767px) {
  .s-block--banners > .grid.md\:grid-cols-3 {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .s-block--banners > .grid.md\:grid-cols-3::-webkit-scrollbar { display: none; }
  .s-block--banners > .grid.md\:grid-cols-3 > .banner-entry {
    flex: 0 0 86%;
    height: auto;
    aspect-ratio: 2 / 1;
    scroll-snap-align: center;
  }
}

/* 4. «ابحث برقم الحبر أو موديل الطابعة» box (created by custom.js) */
.nte-finder { margin-top: 1.5rem; margin-bottom: .5rem; }
.nte-finder__box {
  background: #fff;
  border: 1px solid #DDE7F1;
  border-radius: .5rem;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  box-shadow: 0 6px 20px rgba(6, 60, 110, .06);
}
.nte-finder__title { font-weight: 700; font-size: 1.05rem; color: #0B1B2B; margin: 0; }
.nte-finder__hint { font-size: .8rem; color: #6b7280; margin: 2px 0 0; }
.nte-finder__form { display: flex; flex: 1 1 360px; gap: 8px; }
.nte-finder__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 1px solid #CBD5E1;
  border-radius: .375rem;
  padding: 0 14px;
  font: inherit;
  background: #F8FAFC;
}
.nte-finder__input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; background: #fff; }
.nte-finder__btn {
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: .375rem;
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 767px) {
  .nte-finder__box { padding: 14px; }
  .nte-finder__form { flex-basis: 100%; }
}