/*
 * Home category tiles. The grid and the spacing between tiles come from the theme (.k2-tiles).
 * @author mahdi kazemzadeh
 */
.mkct-tile {
  --mkct-ease: cubic-bezier(.2, .7, .2, 1);
  box-sizing: border-box; display: flex; align-items: center; gap: 16px;
  height: 128px; padding: 0 24px;
  border-radius: var(--k2-radius-sm, 10px); background: var(--k2-card, #fff); color: var(--k2-text, #1f1f1f);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: box-shadow .3s var(--mkct-ease);
}
/* RTL: the first child (image) is on the right, the title on the left */
.mkct-tile__media { position: relative; flex: 0 0 112px; width: 112px; height: 112px; }
.mkct-tile__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: opacity .4s ease;
}
/* Hover: the colour image fades in over the outline image; nothing moves */
.mkct-tile__img--color { opacity: 0; }
.mkct-tile__name { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 1.3rem; font-weight: 600; line-height: 1.5; }

.mkct-tile:hover, .mkct-tile:focus-visible { color: var(--k2-text, #1f1f1f); box-shadow: 0 8px 22px rgba(0, 0, 0, .08); }
.mkct-tile--color:hover .mkct-tile__img--line,
.mkct-tile--color:focus-visible .mkct-tile__img--line { opacity: 0; }
.mkct-tile--color:hover .mkct-tile__img--color,
.mkct-tile--color:focus-visible .mkct-tile__img--color { opacity: 1; }

@media (max-width: 1199.98px) {
  .mkct-tile { padding: 0 16px; }
  .mkct-tile__media { flex-basis: 92px; width: 92px; height: 92px; }
  .mkct-tile__name { font-size: 1.1rem; }
}

/* Mobile and tablet: colour image above the title */
@media (max-width: 991.98px) {
  .mkct-tile { flex-direction: column; justify-content: center; gap: 8px; height: auto; min-height: 118px; padding: 12px 4px; border-radius: var(--k2-radius, 14px); }
  .mkct-tile__media { flex: 0 0 auto; width: 58px; height: 58px; }
  .mkct-tile__name { flex: 0 0 auto; max-width: 100%; font-size: clamp(.7rem, 3.3vw, .85rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mkct-tile--color .mkct-tile__img--line { opacity: 0; }
  .mkct-tile--color .mkct-tile__img--color { opacity: 1; }
}