/* Design 7 — small coloured chips (home-pet-care.html ~1347 and
 * home-furniture.html ~1544: .flat-spacing-3 > .container-full > .tf-swiper
 * of a.category-v05; styles.css 16287-16333). No heading. A chip: flex row,
 * 20px gap, padding 12px 16px, 12px corners; a 60px picture with 6px
 * corners (or a 60px icon, .cate-icon, on furniture's offer chip); the name
 * h6 (20px/28px, 500, 4px under it, .link: accent on hover) over the count
 * (16px/26px, --text-2). To 1199px the chip stacks: picture over the text,
 * centred. 7 per view from 1600px, 5 from 1200px, 4 / 3 / 2, gaps 20 / 15 /
 * 10px, dots 20px under. Section padding .flat-spacing-3: 40px, all widths.
 *
 * Colour: pet-care's chips each take one of seven pastels (bg-v1…bg-v7) in
 * turn; the section writes it on each server-rendered chip as
 * --amer-chip-bg (Swiper's loop reorders slides, so nth-child cannot), and the
 * automatic mode's chips take the same seven from nth-child below. The
 * "surface" palette is furniture's (bg-main, the look's surface colour). An
 * item's own chip_color wins; on a dark one the text turns white (furniture's
 * bg-primary offer chip). The pastels are always light, so text on them is
 * the template's own near-black and grey, whatever the look.
 */
.amer-category-carousel--d7 { --mt-content-width: 1800px; }
.mt-section.amer-category-carousel--d7 { padding-block: var(--mt-space-top, 40px) var(--mt-space-bottom, 40px); }
@media (max-width: 767px) {
  .mt-section.amer-category-carousel--d7 { padding-block: var(--mt-space-top-mobile, var(--mt-space-top, 40px)) var(--mt-space-bottom-mobile, var(--mt-space-bottom, 40px)); }
}

.amer-category-carousel--d7:not(.amer-category-carousel--surface) .swiper-slide:nth-child(7n+1) { --amer-chip-auto: #f3f5ea; }
.amer-category-carousel--d7:not(.amer-category-carousel--surface) .swiper-slide:nth-child(7n+2) { --amer-chip-auto: #eaedf5; }
.amer-category-carousel--d7:not(.amer-category-carousel--surface) .swiper-slide:nth-child(7n+3) { --amer-chip-auto: #f5eaf3; }
.amer-category-carousel--d7:not(.amer-category-carousel--surface) .swiper-slide:nth-child(7n+4) { --amer-chip-auto: #eaf5f2; }
.amer-category-carousel--d7:not(.amer-category-carousel--surface) .swiper-slide:nth-child(7n+5) { --amer-chip-auto: #f5f2ea; }
.amer-category-carousel--d7:not(.amer-category-carousel--surface) .swiper-slide:nth-child(7n+6) { --amer-chip-auto: #eaeff5; }
.amer-category-carousel--d7:not(.amer-category-carousel--surface) .swiper-slide:nth-child(7n+7) { --amer-chip-auto: #f5eaee; }

.amer-category-carousel--d7 .amer-cat-tile--icon {
  --amer-chip-name: var(--amer-heading);
  --amer-chip-count: var(--amer-muted);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--amer-chip-bg, var(--amer-chip-auto, var(--amer-surface)));
  color: var(--amer-chip-name);
  text-decoration: none;
  transition: all .3s ease;
}
/* Light chips (every pastel, a light chip_color): the template's text, the
   count a step darker than its #696E73, which read 4.3:1 on the lavender
   chip (pet care, visual review 2026-09-23; 5.0:1 now). */
.amer-category-carousel--d7:not(.amer-category-carousel--surface) .amer-cat-tile--icon:not(.amer-cat-chip--dark),
.amer-category-carousel--d7 .amer-cat-chip--light { --amer-chip-name: #101010; --amer-chip-count: #5f6469; }
.amer-category-carousel--d7 .amer-cat-chip--dark { --amer-chip-name: #ffffff; --amer-chip-count: #ffffff; }
@media (max-width: 1199px) {
  .amer-category-carousel--d7 .amer-cat-tile--icon { flex-direction: column; justify-content: center; text-align: center; }
}

.amer-category-carousel--d7 .amer-cat-tile__media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 60px;
  max-inline-size: 60px;
  border-radius: 6px;
  overflow: hidden;
}
.amer-category-carousel--d7 .amer-cat-tile__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* .cate-icon: the offer chip's glyph, or a category with no picture. */
.amer-category-carousel--d7 .amer-cat-tile__media .ai {
  font-size: 60px;
  line-height: 1;
  color: var(--amer-chip-name);
}

.amer-category-carousel--d7 .amer-cat-tile__content { display: block; min-inline-size: 0; }
.amer-category-carousel--d7 .amer-cat-tile__name {
  display: block;
  margin-block-end: 4px;
  font-family: var(--amer-font-heading);
  font-weight: var(--amer-fw-heading);
  font-size: var(--amer-fs-h6);
  line-height: 28px;
  letter-spacing: 0;
  color: var(--amer-chip-name);
  transition: all .3s ease; /* .link */
}
/* .link:hover on the name: the accent. The furniture offer chip's white name
   is plain text there (no .link), so a dark chip keeps its white. */
.amer-category-carousel--d7 .amer-cat-tile--icon:not(.amer-cat-chip--dark) .amer-cat-tile__name:hover,
.amer-category-carousel--d7 .amer-cat-tile--icon:not(.amer-cat-chip--dark):focus-visible .amer-cat-tile__name { color: var(--amer-accent); }
.amer-category-carousel--d7 .amer-cat-tile__count {
  display: block;
  font-size: var(--amer-fs-body);
  line-height: 26px;
  color: var(--amer-chip-count);
}

/* 20px under the slider; 8px apart is the shared .amer-dots gap. */
.amer-category-carousel--d7 .amer-dots { margin-block-start: 20px; }