/* Emsai homepage carousel - all rules prefixed .emc- */
/* [Sonnet 5] from the marketer's homepagecarousel.html component, 2026-08-16 - copied verbatim,
   see homepage_product_carousel.php for the markup and integration notes. */

.emc-rail {
  /* Card size lives here. Change these two values to resize the whole strip.
     Compact variant: 138px / 80px. */
  --emc-card-w: 178px;
  --emc-shot-h: 108px;

  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 10px;
  margin: 0;
  list-style: none;
  /* thin scrollbar where supported; harmless elsewhere */
  scrollbar-width: thin;
}

.emc-card {
  flex: 0 0 auto;
  width: var(--emc-card-w);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid #d2d4ca;
  background: #fff;
  transition: border-color .12s ease;
}

.emc-card:hover,
.emc-card:focus-visible {
  border-color: #1f5f8b;
}

.emc-card:focus-visible {
  outline: 2px solid #1f5f8b;
  outline-offset: 2px;
}

.emc-shot {
  display: block;
  width: 100%;
  height: var(--emc-shot-h);
  object-fit: cover;      /* crops to a uniform card regardless of source ratio */
  background: #e5e6df;    /* placeholder while loading */
  border: 0;
}

.emc-meta {
  padding: 7px 9px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.emc-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: #191d1b;
}

/* Price slot - reserved, intentionally empty for now.
   :empty collapses it so there is no gap in the card today.
   To enable later: print the price inside this span, nothing else changes. */
.emc-price {
  font-size: 12px;
  color: #4b524d;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.emc-price:empty { display: none; }

/* Slightly smaller cards on narrow screens */
@media (max-width: 640px) {
  .emc-rail {
    --emc-card-w: 150px;
    --emc-shot-h: 92px;
  }
  .emc-name { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .emc-rail { scroll-behavior: auto; }
  .emc-card { transition: none; }
}

/* [Sonnet 5] full-wide wrapper - the rail itself has no outer width opinion, this makes it
   span the full page width when placed outside the constrained content column. */
.emc-rail-wrap {
  width: 100%;
  padding: 10px 16px 0;
}