/* =========================================================================
   M16 Cechy sklepu — pasek kafelków nad stopką.

   Kolory z reszty customizacji: akcent #7a9d3f, ramka kafelka #e4e7de
   (tak jak kafelki na /marki i na stronie Kontakt). Stopka klienta jest
   #efefef, więc pasek trzymamy na białym tle i oddzielamy kreską u góry.

   Pasek idzie na PEŁNĄ szerokość okna (nie w kontener 1140px motywu), dlatego
   kolumn jest więcej niż w treści strony: 1 → 2 (576px) → 3 (992px) → 6 w jednym
   rzędzie od 1440px, gdzie sześć kafelków obok siebie ma jeszcze po ~220px.
   ====================================================================== */
.m16feat {
  padding: 38px 0 42px;
  border-top: 1px solid #ececec;
  background: #fff;
}
.m16feat__inner {
  /* pełna szerokość okna — tylko marginesy bezpieczeństwa po bokach */
  max-width: none;
  margin: 0;
  padding: 0 16px;
}
.m16feat__title {
  margin: 0 0 22px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #333;
  text-align: center;
  text-transform: none;
}
.m16feat__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.m16feat__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid #e4e7de;
  border-radius: 8px;
  background: #fff;
  /* Motyw stylizuje listy globalnie — zerujemy to, co dokłada do <li> */
  list-style: none;
  transition: border-color .14s, box-shadow .14s;
}
.m16feat__item::before {
  content: none;
}
.m16feat__item:hover {
  border-color: #cfdcae;
  box-shadow: 0 3px 12px rgba(122, 157, 63, .12);
}
.m16feat__icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f2f7e8;
  color: #7a9d3f;
}
.m16feat__icon svg {
  display: block;
}
.m16feat__body {
  flex: 1 1 auto;
  min-width: 0;
}
.m16feat__h {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #333;
}
.m16feat__d {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: #666;
}

@media (min-width: 576px) {
  .m16feat__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 992px) {
  .m16feat {
    padding: 46px 0 50px;
  }
  .m16feat__inner {
    padding: 0 30px;
  }
  .m16feat__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .m16feat__title {
    margin-bottom: 26px;
    font-size: 24px;
  }
}

/* Szerokie ekrany: wszystkie sześć kafelków w jednym rzędzie, przez całą szerokość */
@media (min-width: 1440px) {
  .m16feat__inner {
    padding: 0 40px;
  }
  .m16feat__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
  }
  .m16feat__item {
    padding: 16px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m16feat__item {
    transition: none;
  }
}