/* Kategori kutuları ve hediye kutusu basamakları */

.categories__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: var(--column-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.categories__list::-webkit-scrollbar { display: none; }
.categories__list > li { scroll-snap-align: start; min-width: 0; }
@media (min-width: 750px) { .categories__list { grid-auto-columns: 28%; } }
@media (min-width: 990px) {
  .categories__list { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
}

.category-tile { display: grid; gap: var(--space-xs); text-decoration: none; }
.category-tile__media img { transition: transform 420ms var(--ease); }
.category-tile:hover .category-tile__media img { transform: scale(1.04); }
.category-tile__text { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--space-xs); padding-inline: 2px; }
.category-tile__title { font-weight: 700; font-size: var(--step-0); line-height: 1.25; }
.category-tile:hover .category-tile__title { color: var(--brand); }
.category-tile__count { font-size: var(--step--1); color: var(--muted); }

/* Hediye ve kutular: üç basamak */
.boxes__list { display: grid; gap: var(--column-gap); }
@media (min-width: 750px) { .boxes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.box-tile {
  display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); text-decoration: none; height: 100%;
}
.box-tile__media { border-radius: 0; }
.box-tile__media img { transition: transform 420ms var(--ease); }
.box-tile:hover .box-tile__media img { transform: scale(1.03); }
.box-tile__body { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-m) var(--space-l) var(--space-l); }
.box-tile__step { font-size: var(--step--2); font-weight: 700; color: var(--brand); }
.box-tile__title { font-family: var(--font-minor); font-weight: var(--minor-weight); letter-spacing: var(--minor-tracking); font-size: var(--step-2); line-height: 1.1; }
.box-tile__text { font-size: var(--step--1); color: var(--muted); }
.box-tile__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-s); margin-top: var(--space-xs); }
.box-tile__price { font-family: var(--font-num); font-weight: var(--num-weight); letter-spacing: var(--num-tracking); color: var(--brand); font-size: var(--step-1); }
@media (max-width: 749px) {
  .boxes__list { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .boxes__list > li { scroll-snap-align: start; }
}

@media (min-width: 990px) { .categories .category-tile__media { aspect-ratio: 5 / 4; } }
.categories__list--page { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: var(--space-l) var(--column-gap); }
@media (min-width: 750px) { .categories__list--page { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 990px) { .categories__list--page { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 749px) {
  .category-tile__text { flex-direction: column; gap: 0; }
  .category-tile__title { font-size: var(--step--1); }
  .category-tile__count { font-size: var(--step--2); }
}