/* 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 (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;
}

/* ---- «لون الكلام» (text_color, 2026-10-13, round 2) -------------------------
   The section writes the merchant's colour over the theme's text colours
   (category-carousel.jinja, as the product sections do: card.css), so the
   heading, the «View all», the pager and every name and count drawn on the
   section's own colour take it. What has a fill of its own keeps the
   theme's, or light words would land on a light fill: the tiles of the
   small-card strip (design 2) and of design 1's card look, the caption of
   the portrait pictures (3), the surface chips (7), the cards of design 6,
   whose words sit on their picture with their own dark-or-white choice,
   every no-picture placeholder, and the slider arrows (core.css's white
   squares, which turn to the heading colour under the mouse: with the
   merchant's light colour they read 1.04:1 both ways; review of round 2,
   2026-10-13). */
.amer-category-carousel.amer-section--ink .amer-sw-nav,
.amer-category-carousel.amer-section--ink :is(.amer-cat-card__placeholder, .amer-cat-tile__placeholder, .amer-cat-box__placeholder, .amer-cat-tile__media > .ai),
.amer-category-carousel--d1.amer-category-carousel--card.amer-section--ink .amer-cat-tile--d1,
.amer-category-carousel--d2.amer-section--ink .amer-cat-tile--icon,
.amer-category-carousel--d3.amer-section--ink .amer-cat-tile__caption,
.amer-category-carousel--d6.amer-section--ink .amer-cat-box,
.amer-category-carousel--d7.amer-section--ink .amer-cat-tile--icon {
  --amer-heading: var(--amer-theme-heading);
  --amer-text: var(--amer-theme-text);
  --amer-muted: var(--amer-theme-muted);
  --amer-price-old: var(--amer-theme-price-old);
  --amer-card-price: initial;
}