/* Kafelki kategorii (widżet Creative Elements "abc-category-tiles") - wygląd domyślny w kolorach sklepu.
   Ustawienia z zakładki Styl w edytorze nadpisują te reguły. Progi jak w CE: tablet ≤1024, telefon ≤767. */
.abc-cat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 10px; }
.abc-cat-tiles .abc-cat-tile { display: flex; align-items: center; gap: 14px; min-height: 60px; box-sizing: border-box; padding: 10px 18px; background-color: #FFFFFF; border-radius: 15px; color: #2A4D4A; text-decoration: none; text-align: left; transition: background-color .2s, color .2s; }
.abc-cat-tiles .abc-cat-tile:hover, .abc-cat-tiles .abc-cat-tile:focus { background-color: #F1FCFF; color: #2A4D4A; text-decoration: none; }
.abc-cat-tiles .abc-cat-tile-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; background-color: #ECFBFF; color: #328497; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; }
.abc-cat-tiles .abc-cat-tile-icon svg { width: 17px; height: 17px; fill: #328497; }
.abc-cat-tiles .abc-cat-tile-name { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 800; line-height: 1.3; overflow-wrap: break-word; }
.abc-cat-tiles .abc-cat-tile-arrow { flex: none; color: #328497; font-size: 13px; line-height: 1; }
.abc-cat-tiles .abc-cat-tile-arrow svg { width: 1em; height: 1em; fill: currentColor; }
.abc-cat-tiles .abc-cat-tile--accent { background-color: #328497; color: #FFFFFF; }
.abc-cat-tiles .abc-cat-tile--accent:hover, .abc-cat-tiles .abc-cat-tile--accent:focus { background-color: #264F59; color: #FFFFFF; }
.abc-cat-tiles .abc-cat-tile--accent .abc-cat-tile-icon { background-color: #FFFFFF; }
.abc-cat-tiles .abc-cat-tile--accent .abc-cat-tile-arrow { color: #FFFFFF; }

@media (max-width: 1024px) {
  .abc-cat-tiles .abc-cat-tile { padding: 12px 16px; min-height: 64px; }
}

@media (max-width: 767px) {
  .abc-cat-tiles { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .abc-cat-tiles .abc-cat-tile { padding: 12px 14px; gap: 12px; min-height: 56px; }
}

@media (max-width: 360px) {
  .abc-cat-tiles .abc-cat-tile { padding: 12px; gap: 10px; }
  .abc-cat-tiles .abc-cat-tile-icon { width: 36px; height: 36px; font-size: 15px; }
  .abc-cat-tiles .abc-cat-tile-name { font-size: 14px; }
}