/* Amer category carousel — shared structure for every design.
 * Designs 2 and 3 sit in the template's container-full (1800px); design 8
 * sits in its plain .container (1440px), which is already this section's
 * default (amer-core.css .amer-section), so it needs no override here.
 */
.amer-category-carousel--d2, .amer-category-carousel--d3 { --mt-content-width: 1800px; }

.amer-cat-slider { position: relative; }
/* The template relies on Swiper's row-height equalising (align-items:
   stretch is the flexbox default) so a two-line name — "Smart Watches" at
   768px — grows the whole row, not just its own tile. Swiper's own
   `.swiper-slide{height:100%}` (percentage, against .swiper-wrapper's own
   auto height) does not resolve to a stretch-eligible "auto" reliably, so
   this states both explicitly instead of leaning on that default. */
.amer-cat-slider .swiper-wrapper { align-items: stretch; }
.amer-cat-slider .swiper-slide { height: auto; align-self: stretch; }
.amer-cat-tile { display: block; block-size: 100%; text-decoration: none; color: inherit; }

/* Optional nav arrows (merchant setting, off by default — the template's own
   category strip has none, only a dot/line pager). */
.amer-cat-slider__prev, .amer-cat-slider__next { position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 2; }
.amer-cat-slider__prev { inset-inline-start: -14px; }
.amer-cat-slider__next { inset-inline-end: -14px; }
@media (max-width: 1279px) { .amer-cat-slider__prev, .amer-cat-slider__next { display: none; } }

/* Design 8's static grid: 1 column under 768px, 3 from 768px (tf-grid-layout
   md-col-3 gap-20 — measured in styles.css, no breakpoint between). */
.amer-cat-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .amer-cat-grid { grid-template-columns: repeat(3, 1fr); } }

.amer-cat-card__media { display: block; position: relative; overflow: hidden; }
.amer-cat-card__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.amer-cat-card__placeholder, .amer-cat-tile__placeholder {
  display: flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 100%;
  background: var(--amer-surface); color: var(--amer-muted); font-size: 32px;
}