/* ───── KARAFT marquee (Prestige Allure clone) ─────
   Oversized uppercase scrolling band + optional product thumbnail row. */

.kf-marquee {
  padding: 40px 0;
  overflow: hidden;
}

/* ── Scrolling band ───────────────────────────────────────────────────── */
.kf-marquee__band {
  display: flex;
  width: max-content;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 22px 0;
  animation: kf-marquee-scroll var(--kf-marquee-duration, 30s) linear infinite;
}
.kf-marquee:hover .kf-marquee__band { animation-play-state: paused; }
.kf-marquee__track {
  display: flex;
  align-items: center;
  flex: none;
}
.kf-marquee__word {
  flex: none;
  font-family: var(--font-heading);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(34px, 6vw, 78px);
  line-height: 1;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.kf-marquee__dot {
  flex: none;
  font-size: clamp(34px, 6vw, 78px);
  line-height: 1;
  color: var(--color-border-strong);
  margin: 0 0.4em;
}

@keyframes kf-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .kf-marquee__band { animation: none; }
}

/* ── Thumbnail row ────────────────────────────────────────────────────── */
.kf-marquee__thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.kf-marquee__thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--color-placeholder);
  overflow: hidden;
}
.kf-marquee__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.kf-marquee__thumb:hover .kf-marquee__thumb-img { transform: scale(1.05); }
.kf-marquee__thumb-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 40px;
  color: var(--color-text-muted);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .kf-marquee__thumbs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .kf-marquee { padding: 28px 0; }
  .kf-marquee__band { padding: 14px 0; }
  .kf-marquee__thumbs { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
}