/* Design 8 — three static cards with a "Shop now" button (home-jewelry.html
 * ~1946-1997: plain .container, .tf-grid-layout.md-col-3.gap-20,
 * .category-v07.hover-img4). Measured in styles.css: no wrapping spacing
 * utility around this block at all (0 both sides); image 457x320, radius
 * 16px, margin-bottom 15px; title h5 (clamp 22-24px/28-30px, fw 500),
 * margin-bottom 8px, .link:hover turns var(--primary); CTA .tf-btn-line-2
 * .style-primary (below); hover anywhere on the card: the picture zooms 1.1x
 * and a diagonal glare sweeps across (hover-img4).
 */
.mt-section.amer-category-carousel--d8 { padding-block: var(--mt-space-top, 0px) var(--mt-space-bottom, 0px); }
@media (max-width: 767px) {
  .mt-section.amer-category-carousel--d8 { padding-block: var(--mt-space-top-mobile, var(--mt-space-top, 0px)) var(--mt-space-bottom-mobile, var(--mt-space-bottom, 0px)); }
}

.amer-category-carousel--d8 .amer-cat-card__media {
  position: relative;
  display: inline-block;
  aspect-ratio: 457 / 320;
  color: inherit;
  /* The template's own geometry (16px), not the look's recolourable
     --amer-radius-card. */
  border-radius: 16px;
  margin-block-end: 15px;
}
.amer-category-carousel--d8 .amer-cat-card__media img { transition: all 1s; }
/* No picture: the inline-block frame shrink-wraps its content, so the
   placeholder carries the picture's own 457x320 box (capped by the column,
   as the <img> is) instead of collapsing to the icon. */
.amer-category-carousel--d8 .amer-cat-card__placeholder { inline-size: 457px; max-inline-size: 100%; block-size: auto; aspect-ratio: 457 / 320; }
.amer-category-carousel--d8 .amer-cat-card__media::after {
  content: "";
  position: absolute;
  inline-size: 200%;
  block-size: 0;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  background-color: rgba(255, 255, 255, .3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
  pointer-events: none;
}
.amer-category-carousel--d8 .amer-cat-card:hover .amer-cat-card__media img { transform: scale(1.1); }
/* The 600ms sweep is on the hover state only, as in .hover-img4: the glare
   snaps back when the pointer leaves. */
.amer-category-carousel--d8 .amer-cat-card:hover .amer-cat-card__media::after { block-size: 250%; background-color: transparent; transition: all .6s linear; }
/* Keyboard focus on the title or the CTA shows the card's hover. Own rules:
   a browser without :has() drops only these. */
.amer-category-carousel--d8 .amer-cat-card:has(:focus-visible) .amer-cat-card__media img { transform: scale(1.1); }
.amer-category-carousel--d8 .amer-cat-card:has(:focus-visible) .amer-cat-card__media::after { block-size: 250%; background-color: transparent; transition: all .6s linear; }
.amer-category-carousel--d8 .amer-cat-card__title {
  display: block;
  margin-block-end: 8px;
  font-family: var(--amer-font-heading);
  font-weight: var(--amer-fw-heading);
  font-size: clamp(22px, 3vw, 24px);
  line-height: clamp(28px, 3.5vw, 30px);
  color: var(--amer-heading);
  transition: all .3s ease; /* .link */
}
.amer-category-carousel--d8 .amer-cat-card__title:hover,
.amer-category-carousel--d8 .amer-cat-card__title:focus-visible { color: var(--amer-accent); }
/* "Shop Now" = .btn-action.tf-btn-line-2.style-primary around a
   .text-caption-01.fw-semibold span (styles.css ~8045-8135). The text is a
   two-colour gradient clipped to the glyphs: --text (#101010 = --amer-heading)
   at rest, --primary (#DC4646 = --amer-accent) sweeping in from the reading
   start on hover; under it a 2px --text rule (::after) with a --primary rule
   (::before) growing over it from 0 to full width. 0.3s linear, both.
   Arabic mirrors the sweep: it starts at the right. */
.amer-category-carousel--d8 .amer-cat-card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--amer-fs-body);
  line-height: var(--amer-lh-body);
  font-weight: 400;
  color: var(--amer-heading);
  text-decoration: none;
  background: linear-gradient(to right, var(--amer-accent) 50%, var(--amer-heading) 50%);
  background-size: 200% 100%;
  background-position: right;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position .3s linear;
  cursor: pointer;
}
.amer-category-carousel--d8 .amer-cat-card__cta::after,
.amer-category-carousel--d8 .amer-cat-card__cta::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  block-size: 2px;
}
.amer-category-carousel--d8 .amer-cat-card__cta::after { inset-inline-end: 0; background-color: var(--amer-heading); }
.amer-category-carousel--d8 .amer-cat-card__cta::before { inline-size: 0; z-index: 1; background-color: var(--amer-accent); transition: inline-size .3s linear; }
.amer-category-carousel--d8 .amer-cat-card__cta:hover,
.amer-category-carousel--d8 .amer-cat-card__cta:focus-visible { background-position: left; text-decoration: none; }
.amer-category-carousel--d8 .amer-cat-card__cta:hover::before,
.amer-category-carousel--d8 .amer-cat-card__cta:focus-visible::before { inline-size: 100%; }
.amer-category-carousel--d8 .amer-cat-card__cta-text { font-size: var(--amer-fs-small); line-height: 22px; font-weight: 600; }
[dir="rtl"] .amer-category-carousel--d8 .amer-cat-card__cta { background-image: linear-gradient(to left, var(--amer-accent) 50%, var(--amer-heading) 50%); background-position: left; }
[dir="rtl"] .amer-category-carousel--d8 .amer-cat-card__cta:hover,
[dir="rtl"] .amer-category-carousel--d8 .amer-cat-card__cta:focus-visible { background-position: right; }