/* Amer — Featured list, shared by both designs.
 *
 * The template block is `section-featured-product.flat-spacing` on three
 * pages (home-mental.html:3244, home-auto.html:3652, home-pet-care.html:2325)
 * and every part below is identical in all three; only the promo slide
 * differs, and that lives in featured-list-1.css / -2.css. Measured
 * against the template at 1440 / 1024 / 768 / 390 plus its own 1200 / 991 /
 * 767 / 575 / 425 breakpoints:
 *
 *  - section: .flat-spacing — 80px top and bottom, 60px from 991px down,
 *    40px from 425px down.
 *  - heading: .sect-heading.type-2.text-center, which amer-core's
 *    .amer-head.--center already computes (24px under it, 44px from 992px;
 *    h3 clamp(28,3.8vw,40)/clamp(36,4.5vw,48) at .05em with 8px under it;
 *    .text-body-1 18/28 under that, 14/22 below 576px).
 *  - slider: the template's own numbers as schema defaults (3 / 2 / 2
 *    columns, 30 / 20 / 10px gaps, one column per swipe below 768px, two
 *    and three above) on the shared [data-amer-swiper] contract.
 *  - a slide is one `tf-list.vertical.gap-16`: a grid, 16px apart, as tall
 *    as the tallest slide (`.tf-swiper .swiper-slide > * { height: 100% }`),
 *    each card centred in its share of the column.
 *  - the pager is `.sw-line-default.style-2` = amer-core's .amer-lines
 *    --dark, 20px under the slider (`.tf-swiper .tf-sw-pagination`).
 *  - the cards are the shared small list card (C5) restyled here into the
 *    template's `card-product.product-style_mini_list`: a 1px framed 12px
 *    box with 15px padding, a 160px square picture beside the text from
 *    768px (stacked below it), a 2px dark ring on hover, and a 40px pill
 *    button that is icon-only until the card is hovered on a desktop.
 *
 * The promo slide belongs to wide screens in every template instance
 * (`d-none d-xl-block`); `banner_on_mobile` is the merchant's way out of
 * that, and writes .amer-featured-list__slide--always.
 */

/* ---- Section spacing (.flat-spacing, the template's own breakpoints) ---- */
.mt-section.amer-featured-list {
  padding-block: var(--mt-space-top, 80px) var(--mt-space-bottom, 80px);
}
@media (max-width: 991px) {
  .mt-section.amer-featured-list {
    padding-block: var(--mt-space-top-mobile, var(--mt-space-top, 60px)) var(--mt-space-bottom-mobile, var(--mt-space-bottom, 60px));
  }
}
@media (max-width: 425px) {
  .mt-section.amer-featured-list {
    padding-block: var(--mt-space-top-mobile, var(--mt-space-top, 40px)) var(--mt-space-bottom-mobile, var(--mt-space-bottom, 40px));
  }
}

/* ---- Slider ------------------------------------------------------------- */
.amer-featured-list__stage { position: relative; }
/* The template's .tf-swiper: every slide as tall as the row, and its list
   filling that height, so three short cards and three long ones line up. */
.amer-featured-list .swiper-slide { block-size: auto; }
.amer-featured-list .swiper-slide > * { block-size: 100%; }
/* `tf-list vertical gap-16`: a grid whose items sit centred in their row,
   so the extra height a tall column has is shared evenly between them. */
.amer-featured-list__list {
  display: grid;
  align-items: center;
  gap: 16px;
  block-size: 100%;
}
/* Below 576px the template drops the grid for plain block flow with 16px
   between the cards, so they stack from the top instead of spreading down
   the column (styles.css:21384, the block's only rule of its own). */
@media (max-width: 575px) {
  .amer-featured-list__list { display: block; }
  .amer-featured-list__list > :not(:last-child) { margin-block-end: 16px; }
}
/* `.tf-swiper .tf-sw-pagination:not(.swiper-pagination-lock)` — 20px, at
   every width, ahead of the pager's own margin. */
.amer-featured-list__dots { margin-block-start: var(--amer-pager-gap); /* core.css */ }

/* Optional side arrows (the template has none in this block; the merchant
   can turn them on, same position and opt-in shape as the product
   carousel's). */
.amer-featured-list__nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.amer-featured-list__nav--prev { inset-inline-start: -14px; }
.amer-featured-list__nav--next { inset-inline-end: -14px; }
.amer-featured-list .amer-sw-nav.swiper-button-disabled { pointer-events: none; }
@media (max-width: 1279px) {
  .amer-featured-list__nav { display: none; }
}

/* A picture composed for English — its subject on one side, room for the
   words on the other — has the words land on top of the subject once they
   move to the other side in Arabic. The merchant's per-banner choice turns
   the picture round there, as the template's own `.rtl .sld_image` rule does
   for its slideshow; off by default, because a picture composed for the
   Arabic page would be turned the wrong way and any writing baked into a
   photo would come out reversed (the same reasoning as the hero slider's
   rtl_mirror_image and the countdown banner's flip_image_rtl). */
/* The zoom the template's `hover-img` banner does (design 1 carries it on
   every banner; see featured-list-1.css). It travels as a custom
   property so the mirrored picture below can keep its flip and still zoom. */
.amer-featured-list__promo-media img {
  transform: scale(var(--amer-fl-zoom, 1));
  transition: transform 1.5s cubic-bezier(0, 0, .44, 1.18);
}
[dir="rtl"] .amer-featured-list .amer-featured-list__promo-media--flip img {
  transform: rotateY(180deg) scale(var(--amer-fl-zoom, 1));
}
/* A banner with no words at all: the picture IS the card and its link is the
   only one in it, so it answers the pointer and the keyboard even in a design
   whose template banner does not move (design 2). */
.amer-featured-list__promo-media--only:hover,
.amer-featured-list__promo-media--only:focus-visible { --amer-fl-zoom: 1.1; }

/* A promo the merchant has written but not given a picture yet: the text
   block cannot lie over a photo that is not there, so the card becomes a
   plain panel in the surface colour and the text sits in it normally. Both
   designs share it, one step more specific than their own body rules. */
.amer-featured-list .amer-featured-list__promo--plain {
  background: var(--amer-surface);
  border-radius: 16px;
}
.amer-featured-list .amer-featured-list__promo--plain .amer-featured-list__promo-body {
  position: static;
  inset: auto;
  padding: 24px;
  min-block-size: 250px;
  justify-content: center;
  inline-size: 100%;
}

/* The promo slide is an extra-large-screen slide in every instance of the
   block; hidden, Swiper skips it entirely (it measures computed display). */
@media (max-width: 1199px) {
  .amer-featured-list__slide--promo:not(.amer-featured-list__slide--always) { display: none; }
}

/* Two streams of the same products, one column tall on a desktop and a
   shorter one on a phone, swapped at the template's own `md` break (768px):
   home-mental's and home-pet-care's third card carries `d-none d-md-flex`
   and their extra `d-md-none` slide holds the leftovers, so a phone column
   there is two cards where a desktop one is three. Only the stream for the
   width in hand is displayed, and Swiper skips the other entirely — it reads
   the computed display of every slide before it measures it. Neither class
   is written when both columns hold the same number (home-auto's way), so
   nothing is repeated in the markup unless the merchant asked for it. */
@media (max-width: 767px) {
  .amer-featured-list__slide--wide { display: none; }
}
@media (min-width: 768px) {
  .amer-featured-list__slide--phone { display: none; }
}
/* Below 576px the template's shortened column keeps the 16px that belonged
   to the card it hides: the list is block flow there, the margin sits on
   every child but the last, and the last child is the hidden one — so its
   predecessor's 16px stays at the foot of the column (measured at 390:
   column 682px = 2 cards of 325 + 16 between + 16 under; ours is 666 without
   it). The shorter column is exactly our phone stream, so it carries the
   same 16px and the section measures the template's own height. */
@media (max-width: 575px) {
  .amer-featured-list__slide--phone .amer-featured-list__list > :last-child { margin-block-end: 16px; }
}

/* ---- The small list card (template: card-product product-style_mini_list)
   The shared C5 card is tuned for a card sitting over a photo (96px
   thumbnail, 14px text); this block's card is the framed one, so the
   section restyles it inside its own scope and leaves card.css
   alone. -------------------------------------------------------------- */
.amer-featured-list .amer-card--mini {
  flex-direction: column;
  align-items: normal;
  gap: 16px;
  padding: 15px;
  border: 1px solid var(--amer-line);
  border-radius: 12px;
}
/* Stacked under 768px, the picture is the card's full width and square
   (`.card-product_wrapper { aspect-ratio: 1 }` with no max-width yet); the
   shared card's 96px thumbnail belongs to the sections that hang a card
   over a photo.
   The 12px round the shared card puts on this box is the template's too, one
   element lower: its `.card-product_wrapper` is square-cornered but its only
   child `.product-img` is the same 160x160 box with `border-radius: 12px;
   overflow: hidden` (styles.css `.card-product_wrapper .product-img`),
   measured in the template at 1440 — so the painted corner is 12px on both
   sides. Do not square this off. */
.amer-featured-list .amer-card--mini .amer-card__media {
  inline-size: 100%;
  max-inline-size: none;
}
/* The hover frame: a 2px dark ring drawn 1px outside the card's own border,
   fading in over .3s (`.product-style_mini_list::after`). Keyboard focus
   inside the card shows the same state, as the theme's focus rule asks. */
.amer-featured-list .amer-card--mini::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid var(--amer-primary);
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--amer-ease), visibility .3s var(--amer-ease);
}
.amer-featured-list .amer-card--mini:hover::after,
.amer-featured-list .amer-card--mini:has(:focus-visible)::after {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 768px) {
  .amer-featured-list .amer-card--mini { flex-direction: row; }
  /* `max-width: 160px; flex-shrink: 0` over a square wrapper. */
  .amer-featured-list .amer-card--mini .amer-card__media {
    inline-size: 160px;
    max-inline-size: 160px;
  }
}
@media (min-width: 1200px) {
  .amer-featured-list .amer-card--mini { gap: 24px; }
}

/* The text column: `.card-product_info` is a flex column, items at the
   start, 4px apart, centred in the card's height — a grid here, so every
   piece keeps its own width instead of stretching across the column. */
/* No padding over the text: the card designs set their own on the standard
   card's body (`.amer-cards--d1 .amer-card__body { padding-block-start: 16px }`,
   which is one step more specific than the shared mini card's `padding: 0` and
   would push this card's text 16px down whatever the merchant's card design). */
.amer-featured-list .amer-card--mini .amer-card__body { justify-items: start; padding-block-start: 0; }
/* `.name-product.lh-24.fw-medium`: the body size on a 24px line, two lines. */
.amer-featured-list .amer-card--mini .amer-card__title {
  font-size: var(--amer-fs-body);
  line-height: 24px;
}
/* `.price-wrap`: 8px apart, centred on each other, 12px above the button
   (4px from the column's own gap + 12px of its margin = the template's 16). */
.amer-featured-list .amer-card--mini .amer-price {
  font-size: var(--amer-fs-body);
  align-items: center;
  gap: 8px;
  margin-block-end: 12px;
}
/* `.btn-action`: a 40px pill, 20px sides, the bag icon at 20px and the
   label 8px after it. The icon is the theme's own glyph (ai-bag = the
   template's icon-Handbag), drawn by the button itself because the shared
   card renders a plain label. */
.amer-featured-list .amer-card__mini-button {
  gap: 8px;
  min-block-size: 40px;
  padding-inline: 20px;
  margin-block-start: 0;
  font-size: var(--amer-fs-body);
  font-weight: 600;
  line-height: 26px;
  transition: background-color .4s ease, color .4s ease, padding-inline .4s ease, font-size .4s ease, gap .4s ease;
}
.amer-featured-list .amer-card__mini-button::before {
  content: "\e912";
  font-family: "amer-icons";
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  flex: none;
}
@media (max-width: 991px) {
  .amer-featured-list .amer-card__mini-button { padding-inline: 15px; }
}
/* From 1200px the label is folded away until the card is hovered, and the
   pill turns into the surface-coloured icon button the template shows
   (`.product-style_mini_list:not(:hover) .btn-action`). Below 426px the
   label is gone for good and only the icon is left. */
@media (min-width: 1200px) {
  .amer-featured-list .amer-card--mini:not(:hover):not(:has(:focus-visible)) .amer-card__mini-button {
    gap: 0;
    padding-inline: 10px;
    font-size: 0;
    background: var(--amer-surface);
    color: var(--amer-primary);
  }
}
@media (max-width: 425px) {
  .amer-featured-list .amer-card__mini-button {
    gap: 0;
    padding-inline: 10px;
    font-size: 0;
  }
}

/* ---- «لون الكلام» (text_color, 2026-10-13, round 2) -------------------------
   The section writes the merchant's colour over the theme's text colours
   (featured-list.jinja), so the heading and the product names and prices in
   the columns take it (the cards are card.css's). The banners keep the
   theme's: their words sit on their own picture, with their own dark-or-
   white choice, or on the light panel of a banner with no picture. So do
   the slider arrows, white squares (1.04:1 with a light colour before,
   review of round 2). */
.amer-featured-list.amer-section--ink :is(.amer-featured-list__promo, .amer-sw-nav) {
  --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;
}