/* =========================================================
   NAGHAM PERFUME — Showcase rails (الأكثر مبيعاً · أحدث العطور)
   A horizontal shelf of .pcard units with arrow navigation,
   snap scrolling and a gold progress hairline.

   Design notes
   • The head is centred with a single title, matching the brand
     marquee and the collections above it — the page keeps one
     heading rhythm from top to bottom.
   • No section background: the whole page is one white run.
   • Arrows sit on the two edges of the list itself, so it is
     obvious which list they move.
   • Cards are the shared .pcard from products.css. Inside a
     rail the notes line and the badge are suppressed: the
     section title already says it, and a tighter card lets more
     of the shelf breathe.
   • RTL-first: no left/right, only inline-start / inline-end.
   ========================================================= */

.showcase {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.4rem, 6vw, 5.4rem);
  background: #fff;
}

/* No section-level background: the whole page is one continuous
   white, so the shelves are separated by the divider gem and
   spacing alone — nothing tints the run. */

/* Two shelves stand back to back, so the second one pulls its
   top padding in: one divider between them is enough air. */
.showcase + .showcase { padding-block-start: clamp(1rem, 2vw, 2rem); }

.showcase__inner {
  position: relative;
  z-index: 1;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Section head — centred, one line, nothing else ----------
   The divider gem above already does the ceremony; a second
   eyebrow or a subtitle would just crowd the title. */
.showcase__head {
  inline-size: min(760px, 100%);
  margin-inline: auto;
  margin-block-end: clamp(1.8rem, 3vw, 2.6rem);
  text-align: center;
}

.showcase__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1rem + 2.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
}
.showcase__title em { font-style: normal; color: var(--gold); }

/* ---------- Arrows — one on each edge of the list ----------
   Anchored to .rail (not the header) so they sit beside the cards
   they control. Vertically they line up with the flacon plate,
   not the card's midpoint, so they never cover the price or the
   add-to-cart button. */
.rail__nav {
  position: absolute;
  /* Dead centre of a card. The stage is taller than the cards by
     the viewport's asymmetric padding (extra room at the bottom for
     the hover lift and its shadow), so half that difference is
     subtracted to land on the card's true midpoint. */
  inset-block-start: 50%;
  translate: 0 calc(-50% - (var(--vp-pad-bottom) - var(--vp-pad-top)) / 2);
  z-index: 3;

  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  color: var(--ink);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  box-shadow: 0 4px 16px rgba(73, 55, 20, .10);
  transition:
    background-color .35s var(--ease-luxe),
    color .35s var(--ease-luxe),
    border-color .35s var(--ease-luxe),
    box-shadow .35s var(--ease-luxe),
    opacity .3s ease,
    scale .3s var(--ease-luxe);
}

/* Half-overhang into the page gutter: the shelf keeps its full
   width and the arrows still read as "outside" the list. */
.rail__nav--prev { inset-inline-start: -22px; }   /* start edge = right in RTL */
.rail__nav--next { inset-inline-end:   -22px; }   /* end edge   = left  in RTL */

.rail__nav svg { inline-size: 18px; block-size: 18px; }

.rail__nav:hover:not(:disabled) {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: #fff;
  scale: 1.06;
  box-shadow: 0 12px 26px rgba(111, 80, 21, .24);
}
.rail__nav:active:not(:disabled) { scale: .97; }
.rail__nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* At the ends of the shelf the arrow fades out but keeps its slot,
   so the row never shifts under the cursor. */
.rail__nav:disabled {
  opacity: .28;
  cursor: default;
  box-shadow: none;
}

/* ---------- The shelf ---------- */
.rail {
  /* Shared by the viewport (as padding) and the arrows (to offset
     their centring) — one source of truth for the shelf's breathing
     room, so the two can never drift apart. */
  --vp-pad-top: .7rem;
  --vp-pad-bottom: 2.2rem;
}

/* Only the cards live in the stage; the progress bar sits below it,
   which is what lets the arrows centre on a card. */
.rail__stage { position: relative; }

.rail__viewport {
  --gap: clamp(.9rem, 1.5vw, 1.35rem);
  --per: 5;

  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;   /* proximity, not mandatory: the last
                                      card must be reachable even when the
                                      final rest position isn't a snap point */
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  /* Breathing room for the card's hover lift + drop shadow,
     pulled back with a negative margin so the section spacing
     stays exactly as designed. */
  padding-block: var(--vp-pad-top) var(--vp-pad-bottom);
  margin-block-end: -1.6rem;
}
.rail__viewport::-webkit-scrollbar { display: none; }
.rail__viewport:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 20px; }

/* A shelf shorter than the view has nothing to scroll, so the cards
   centre instead of hugging the inline-start edge and leaving a gap.
   Toggled by showcase.js, which is the side that knows the measurement. */
.rail__viewport.is-short { justify-content: center; }

/* Exact N cards per view — no half card unless we ask for one */
.rail__viewport > .pcard {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  scroll-snap-align: start;
}

/* Inside a rail the card gets a little tighter and quieter */
.rail .pcard__notes { display: none; }
.rail .pcard__badge { display: none; }   /* the section title already says it */
.rail .pcard__info { gap: .3rem; padding: 1.15rem 1rem 1.25rem; }
.rail .pcard__name { font-size: 1.12rem; }
.rail .pcard__priceline {
  justify-content: center;
  gap: .55rem;
  margin-block-start: .5rem;
  padding-block-start: .65rem;
}
/* Gold dot between price and size, instead of pushing them apart */
.rail .pcard__size::before {
  content: "·";
  color: var(--gold);
  margin-inline-end: .45rem;
}
.rail .pcard__add { block-size: 43px; font-size: .85rem; margin-block-start: .55rem; }

/* ---------- Progress hairline ---------- */
/* Doubles as the section's bottom rule: it tells you how much
   shelf is left, and it closes the block visually. */
.rail__progress {
  position: relative;
  block-size: 2px;
  border-radius: 2px;
  margin-block-start: 1.5rem;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  overflow: clip;
}
.rail__progress > span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 28%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  translate: 0 0;
  transition: translate .25s linear, inline-size .3s var(--ease-luxe);
}
.rail__progress[hidden] { display: none; }

/* ---------- Empty state ---------- */
.showcase__empty {
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  padding-block: 3rem 2rem;
}

/* ---------- Skeletons ---------- */
.rail__viewport > .rskel {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  display: grid;
  gap: .9rem;
  padding: 0 0 1rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--gold) 14%, transparent);
  overflow: clip;
  background: #fff;
}
.rskel__plate { aspect-ratio: 1 / 1; }
.rskel__l1 { block-size: .7rem; inline-size: 45%; margin-inline: auto; border-radius: 3px; }
.rskel__l2 { block-size: 1rem; inline-size: 68%; margin-inline: auto; border-radius: 3px; }
.rskel__l3 { block-size: 2.4rem; inline-size: calc(100% - 2rem); margin-inline: auto; border-radius: 999px; }
.rskel__plate, .rskel__l1, .rskel__l2, .rskel__l3 {
  background: linear-gradient(100deg, #f2eee7 40%, #faf7f2 50%, #f2eee7 60%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) { .rail__viewport { --per: 4; } }
@media (max-width: 960px)  { .rail__viewport { --per: 3; } }

@media (max-width: 720px) {
  /* Tighter block: on a phone the shelf is most of the screen, so the
     section around it shouldn't take a third of the scroll to get past. */
  .showcase { padding-block: clamp(2.4rem, 7vw, 3.2rem); }
  .showcase + .showcase { padding-block-start: .8rem; }
  .showcase__head { margin-block-end: 1.5rem; }

  /* Touch: the shelf is swiped, not clicked. Hiding the arrows also
     frees the gutter the bleeding viewport needs. */
  .rail__nav { display: none; }

  /* Centred shelf. The card is 72% of the screen and the viewport
     carries (100% - 72%) / 2 of padding on each side — that padding is
     what lets the FIRST and LAST cards reach the middle instead of
     sticking to an edge. Each card then snaps to centre, with an equal
     sliver of its neighbour showing on both sides. */
  .rail__viewport {
    --card: 72%;
    --gap: .7rem;

    margin-inline: calc(-1 * var(--gutter));
    padding-inline: calc((100% - var(--card)) / 2);
    scroll-padding-inline: calc((100% - var(--card)) / 2);
    scroll-snap-type: x mandatory;

    /* Just enough fade to soften where the slivers meet the screen
       edge — the focus treatment below does the actual emphasising. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }

  .rail__viewport > .pcard,
  .rail__viewport > .rskel {
    flex-basis: var(--card);
    scroll-snap-align: center;
  }

  /* The card in the middle is the subject; the slivers are context.
     showcase.js sets .is-focus from the measured scroll position. */
  .rail__viewport > .pcard {
    scale: .93;
    opacity: .5;
    transition: scale .35s var(--ease-luxe), opacity .35s var(--ease-luxe);
    /* Cancel the desktop entry animation — on a carousel it fights
       with the focus transition. */
    animation: none;
  }
  .rail__viewport > .pcard.is-focus {
    scale: 1;
    opacity: 1;
  }
  /* Only the focused card gets the lift; the others stay flat so the
     depth reads as one card standing forward. */
  .rail__viewport > .pcard:not(.is-focus) { box-shadow: none; }

  /* A short centred bar reads as a scroll indicator; full width it just
     looked like a border under the section. */
  .rail__progress {
    inline-size: 92px;
    margin-inline: auto;
    margin-block-start: 1.2rem;
  }

  /* Card internals get their air back at this size */
  .rail .pcard__info { padding: 1rem .85rem 1.1rem; gap: .25rem; }
  .rail .pcard__name { font-size: 1.05rem; }
  .rail .pcard__brand { font-size: .6rem; letter-spacing: .2em; }
  .rail .pcard__priceline { gap: .4rem; padding-block-start: .55rem; margin-block-start: .4rem; }
  .rail .pcard__price { font-size: 1rem; }
  .rail .pcard__size { font-size: .72rem; }
  .rail .pcard__add { block-size: 40px; font-size: .82rem; }
}

@media (max-width: 420px) {
  .rail__viewport { --card: 76%; }
  .rail .pcard__name { font-size: 1rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rail__viewport { scroll-behavior: auto; }
  .rail__viewport > .pcard { transition: none; }
  .rail__progress > span { transition: none; }
  .rail__nav { transition: none; }
  .rskel__plate, .rskel__l1, .rskel__l2, .rskel__l3 { animation: none; }
}