/* ============================================================
   FEATURED CAROUSEL — 3D Perspective
   Card width defined via --feat-card-w so JS reads it cleanly.
   Side cards peek via overflow:visible on viewport +
   overflow:hidden on the section wrapper.
   ============================================================ */

/* Section clips vertically so shadows don't bleed into page */
.featured-section {
  padding: 16px 0 8px;
  overflow: hidden;
}

/* title box is shared with cards.css — just add side padding here */
.featured-section .section-title-box {
  margin: 0 16px 4px;
}

/* ── Viewport ──────────────────────────────────────────────
   overflow: visible → side cards are NOT clipped.
   The section itself clips, so nothing bleeds outside.
   perspective here gives 3D depth to rotateY on cards.
   ─────────────────────────────────────────────────────── */
.carousel-viewport {
  overflow: visible;
  padding: 20px 0 32px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  perspective: 900px;
  perspective-origin: center center;
}

.carousel-viewport:active { cursor: grabbing; }

/* ── Track ──────────────────────────────────────────────────
   JS moves this with translateX.
   --feat-card-w is read by JS via a probe element.
   ─────────────────────────────────────────────────────── */
.carousel-track {
  display: flex;
  gap: 16px;           /* must match GAP_PX = 16 in carousel.js */
  will-change: transform;
  direction: ltr;

  /* Card width token — only change this */
  --feat-card-w: clamp(160px, 62vw, 260px);
}

/* tablet: show ~2 cards */
@media (min-width: 600px) {
  .carousel-track { --feat-card-w: clamp(200px, 40vw, 320px); }
}

/* desktop: show ~3 cards */
@media (min-width: 1000px) {
  .carousel-track { --feat-card-w: clamp(260px, 26vw, 340px); }
}

/* ── Base card (default = invisible/far away) ─────────────── */
.feat-card {
  flex-shrink: 0;
  width: var(--feat-card-w);

  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 2rem;
  overflow: hidden;
  cursor: pointer;
  transform-origin: center center;

  opacity: 0;
  transform: scale(0.42) rotateY(40deg);
  filter: brightness(0.35);
  pointer-events: none;
  box-shadow: none;

  transition:
    transform  480ms cubic-bezier(0.34, 1.1, 0.64, 1),
    opacity    480ms ease,
    filter     480ms ease,
    box-shadow 480ms ease;
}

/* ── Active (center) ────────────────────────────────────── */
.feat-card.c-active {
  opacity: 1;
  transform: scale(1) rotateY(0deg);
  filter: brightness(1);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.14),
    0 4px 12px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
  pointer-events: auto;
  z-index: 10;
}

/* ── ±1 ─────────────────────────────────────────────────── */
.feat-card.c-prev1 {
  opacity: 0.72;
  transform: scale(0.80) rotateY(20deg);
  filter: brightness(0.70);
  pointer-events: auto;
  z-index: 5;
  box-shadow: none;
}

.feat-card.c-next1 {
  opacity: 0.72;
  transform: scale(0.80) rotateY(-20deg);
  filter: brightness(0.70);
  pointer-events: auto;
  z-index: 5;
  box-shadow: none;
}

/* ── ±2 ─────────────────────────────────────────────────── */
.feat-card.c-prev2 {
  opacity: 0.30;
  transform: scale(0.62) rotateY(30deg);
  filter: brightness(0.48);
  pointer-events: none;
  z-index: 2;
}

.feat-card.c-next2 {
  opacity: 0.30;
  transform: scale(0.62) rotateY(-30deg);
  filter: brightness(0.48);
  pointer-events: none;
  z-index: 2;
}

/* ── ±3+ ────────────────────────────────────────────────── */
.feat-card.c-prev3,
.feat-card.c-next3 {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Image — square ─────────────────────────────────────── */
.feat-img-wrap {
    position: relative;
    inset: 1rem;
    width: calc(100% - 2rem);
    padding-top: calc(100% - 2rem);
    border-radius: 2rem;
    overflow: hidden;
    background: #edeae5;
}

.feat-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.feat-img-placeholder {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--offwhite), #e8e4de);
}

.feat-discount-badge {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 0.62rem; font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  pointer-events: none;
  background: linear-gradient(135deg, #fb923c, #ef4444);
  color: #fff;
  box-shadow: 0 2px 8px rgba(239,68,68,0.4);
}

/* ── Body ─────────────────────────────────────────────────── */
.feat-body { 
    padding: 28px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    
}

.feat-name {
  font-size: clamp(1.1rem, 2.2vw, 1rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--black);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

.feat-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.feat-price .price-old {
  font-size: 0.72rem;
  color: #c4c2bd;
  text-decoration: line-through;
}

.feat-price .price-new {
    direction: rtl;
  font-size: clamp(0.88rem, 2.2vw, 1rem);
  font-weight: 900;
  color: var(--sage-dark);
}

/* ── Dots ─────────────────────────────────────────────────── */
.carousel-dots {
  display: flex;
  flex-direction: row-reverse;   /* RTL: first dot on the right */
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 6px 0 16px;
}

.dot {
  width: 7px; height: 7px;
  border-radius: 4px; border: none;
  background: var(--concrete);
  opacity: 0.3; cursor: pointer; padding: 0;
  transition: opacity 0.25s, width 0.25s, background 0.25s;
}

.dot.active {
  width: 22px;
  background: var(--sage-dark);
  opacity: 1;
}