/* =========================================================
   TEMPLATE: APP TILES
   Compact mobile-first menu cards for category discovery.
   ========================================================= */

.loq-style-app-tiles {
  --loq-app-tile-bg: #f6f6f8;
  --loq-app-tile-bg-hover: #efeff3;
  --loq-app-tile-text: #17171a;
  --loq-app-tile-muted: #71717a;
  --loq-app-tile-accent: #5a37e5;
  --loq-app-tile-shadow: 0 10px 28px rgb(17 17 26 / 0.08);
}

.loq-style-app-tiles .loq-mc-container {
  padding-bottom: 18px;
}

.loq-style-app-tiles .loq-mc-track {
  gap: 14px !important;
  padding-left: var(--loq-gutter, 16px) !important;
  padding-right: max(var(--loq-gutter, 16px), 28px) !important;
  padding-bottom: 22px !important;
  margin-bottom: -22px !important;
  scroll-snap-type: x proximity;
}

.loq-style-app-tiles .loq-mc-card {
  flex: 0 0 164px !important;
  max-width: 164px !important;
  min-height: 176px !important;
  padding: 13px 13px 14px !important;
  border-radius: 22px !important;
  background: var(--loq-app-tile-bg) !important;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 10px 24px rgb(17 17 26 / 0.06) !important;
  border: 1px solid rgb(17 17 26 / 0.04) !important;
  display: grid !important;
  grid-template-rows: 112px minmax(34px, auto);
  align-items: end !important;
  gap: 10px !important;
  overflow: hidden;
  text-align: left !important;
  text-decoration: none;
  scroll-snap-align: start;
  transform: translateZ(0);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.loq-style-app-tiles .loq-mc-card:hover {
  background: var(--loq-app-tile-bg-hover) !important;
  box-shadow: var(--loq-app-tile-shadow) !important;
  transform: translateY(-2px);
}

.loq-style-app-tiles .loq-mc-card:active {
  transform: scale(0.985);
}

.loq-style-app-tiles .loq-mc-img {
  width: 100% !important;
  height: 112px !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 10px 16px rgb(0 0 0 / 0.08));
  transition: transform 0.2s ease;
}

.loq-style-app-tiles .loq-mc-card:hover .loq-mc-img {
  transform: scale(1.035);
}

.loq-style-app-tiles .loq-mc-name {
  width: calc(100% - 38px) !important;
  height: auto !important;
  min-height: 34px;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--loq-app-tile-text) !important;
  display: flex !important;
  align-items: center;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
}

.loq-style-app-tiles .loq-mc-cta {
  display: none !important;
}

.loq-style-app-tiles .loq-mc-card::after {
  content: '';
  position: absolute;
  right: 13px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background-color: var(--loq-app-tile-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 8px 18px rgb(90 55 229 / 0.3);
}

.loq-style-app-tiles .loq-mc-badge {
  top: 10px;
  right: 10px;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
}

.loq-style-app-tiles .loq-mc-card.is-active {
  outline: 2px solid rgb(90 55 229 / 0.32);
  background: #fff !important;
}

.loq-style-app-tiles.loq-mobile-grid .loq-mc-track {
  gap: 12px !important;
}

.loq-style-app-tiles.loq-mobile-grid .loq-mc-card {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 389px) {
  .loq-style-app-tiles .loq-mc-card {
    flex-basis: 152px !important;
    max-width: 152px !important;
    min-height: 168px !important;
    grid-template-rows: 104px minmax(32px, auto);
  }

  .loq-style-app-tiles .loq-mc-img {
    height: 104px !important;
  }

  .loq-style-app-tiles .loq-mc-name {
    font-size: 14px !important;
  }
}

@media (min-width: 768px) {
  .loq-style-app-tiles .loq-mc-track {
    gap: 18px !important;
  }

  .loq-style-app-tiles .loq-mc-card {
    flex-basis: 220px !important;
    max-width: 220px !important;
    min-height: 220px !important;
    grid-template-rows: 148px minmax(38px, auto);
    padding: 18px !important;
  }

  .loq-style-app-tiles .loq-mc-img {
    height: 148px !important;
  }

  .loq-style-app-tiles .loq-mc-name {
    font-size: 17px !important;
  }

  .loq-style-app-tiles .loq-mc-card::after {
    right: 18px;
    bottom: 18px;
    width: 38px;
    height: 38px;
  }
}

@media (min-width: 1180px) {
  .loq-style-app-tiles .loq-mc-track {
    padding-left: var(--loq-shell-space, 24px) !important;
    padding-right: var(--loq-shell-space, 24px) !important;
  }
}