/* SECTION */
.ms-subtiles{ margin:16px 0 8px; }

/* BRANDS (chips) */
.ms-subtiles__brands{
  display:flex; flex-wrap:wrap; gap:8px 10px; margin:0 0 14px; align-items:center;
}
.ms-brand-chip{
  display:inline-block; padding:6px 10px; font-size:12px; line-height:1; border-radius:999px;
  border:1px solid rgba(0,0,0,.12); background:#fff; text-decoration:none; color:inherit; white-space:nowrap;
}
.ms-brand-chip:hover{ box-shadow:0 2px 8px rgba(0,0,0,.12); transform:translateY(-1px); }

/* GRID: max 3 stĺpce na veľkých plochách */
.ms-subtiles__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}

/* TILE – väčšie dlaždice */
.ms-tile{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:14px; border-radius:16px; background:#fff; text-decoration:none; color:inherit;
  box-shadow:0 1px 0 rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.06) inset;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ms-tile:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.12); }

/* circular image inside rectangle */
.ms-tile__thumb{ position:relative; width:68px; height:68px; display:inline-grid; place-items:center; }
.ms-tile__thumb-bg{
  position:absolute; inset:0; border-radius:999px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset, 0 4px 12px rgba(0,0,0,.12);
}
.ms-tile__thumb img{ position:relative; width:44px; height:44px; object-fit:contain; z-index:1; }
.ms-tile__thumb.ph{ background:linear-gradient(135deg,#eee,#ddd); border-radius:999px; }

/* smaller name, clamp to 2 lines */
.ms-tile__name{
  font-size:13px; line-height:1.3; font-weight:600; color:rgba(0,0,0,.86);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* MORE button */
.ms-more{
  margin:12px auto 0; display:block; padding:10px 14px; border-radius:10px; border:1px solid rgba(0,0,0,.12);
  background:#fff; font-size:14px; cursor:pointer;
}
.ms-more:focus{ outline:2px solid rgba(0,0,0,.25); outline-offset:2px; }

/* RESPONSIVE: 2 columns (tablet), 1 column (mobile) */
@media (max-width: 1024px){
  .ms-subtiles__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
  .ms-tile{ padding:12px; gap:12px; }
  .ms-tile__thumb{ width:64px; height:64px; }
  .ms-tile__thumb img{ width:42px; height:42px; }
  .ms-tile__name{ font-size:12px; line-height:1.25; }
}
@media (max-width: 599px){
  .ms-subtiles__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
  .ms-tile{ padding:10px; gap:10px; }
  .ms-tile__thumb{ width:56px; height:56px; }
  .ms-tile__thumb img{ width:36px; height:36px; }
  .ms-tile__name{ font-size:11px; line-height:1.25; }
}

/* hard hide pre klampované karty */
.ms-subtiles__grid .ms-tile[hidden],
.ms-subtiles__grid .ms-tile[data-hidden="1"]{
  display: none !important;
}