/* ==========================================================================
   Component: Product carousel + product card
   Used by "Best Sellers", "New Arrivals" and any future product rail.
   Scroll-snap driven — the arrows only nudge scrollLeft, so it works
   with touch, trackpad and keyboard even before the JS loads.
   Requires: common.css
   ========================================================================== */

.di-rail {
  position: relative;
}

.di-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 5 * 18px) / 6);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding-bottom: 6px;
  /* Hide the native bar; the arrows and swipe are the interface */
  scrollbar-width: none;
}

.di-rail__track::-webkit-scrollbar { display: none; }

.di-rail__item { scroll-snap-align: start; }

/* Arrows */
.di-rail__nav {
  position: absolute;
  top: 42%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--di-border);
  border-radius: 50%;
  background-color: var(--di-white);
  box-shadow: var(--di-shadow);
  cursor: pointer;
  transition: opacity var(--di-transition), background-color var(--di-transition);
}

.di-rail__nav:hover { background-color: var(--di-cream); }
.di-rail__nav--prev { left: -14px; }
.di-rail__nav--next { right: -14px; }

.di-rail__nav[disabled] {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Product card
   -------------------------------------------------------------------------- */

.di-product {
  position: relative; /* anchors the wishlist button to the card */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.di-product__media {
  position: relative;
  border-radius: var(--di-radius-sm);
  background-color: var(--di-cream);
  overflow: hidden;
}

.di-product__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  transition: transform .4s ease;
}

.di-product:hover .di-product__media img { transform: scale(1.04); }

/* Sits at the foot of the cover so it never collides with the imprint */
.di-product__flag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: var(--di-radius-sm);
  background-color: var(--di-green);
  color: var(--di-white);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.di-product__wish {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  padding: 7px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .92);
  box-shadow: var(--di-shadow-sm);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--di-transition), transform var(--di-transition);
}

.di-product:hover .di-product__wish,
.di-product__wish:focus-visible {
  opacity: 1;
  transform: none;
}

/* A saved favourite stays visible and filled, hover or not. */
.di-product__wish[aria-pressed="true"] {
  opacity: 1;
  transform: none;
  background-color: var(--di-gold);
}

.di-product__wish[aria-pressed="true"] .di-icon { filter: brightness(0) invert(1); }

.di-product__wish[disabled] { cursor: progress; opacity: .6; }

.di-product__body { padding-top: 12px; }

.di-product__title {
  margin: 0 0 3px;
  min-height: 2.8em; /* two lines — keeps prices on one baseline */
  font-size: var(--di-fs-base);
  font-weight: 500;
  line-height: 1.4;
  color: var(--di-text);
  /* Keep every card the same height regardless of title length */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.di-product__author {
  margin: 0 0 8px;
  font-size: var(--di-fs-xs);
  color: var(--di-text-muted);
}

.di-product__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.di-product__stars {
  display: inline-flex;
  gap: 1px;
}

.di-product__rating-value {
  font-size: var(--di-fs-xs);
  font-weight: 500;
  color: var(--di-text);
}

.di-product__rating-count {
  font-size: var(--di-fs-xs);
  color: var(--di-text-muted);
}

.di-product__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.di-product__price-now {
  font-size: var(--di-fs-base);
  font-weight: 600;
  color: #b03a2e;
}

.di-product__price-old {
  font-size: var(--di-fs-xs);
  color: var(--di-text-muted);
  text-decoration: line-through;
}

.di-product__discount {
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #fbe6e2;
  color: #b03a2e;
  font-size: 10px;
  font-weight: 600;
}

/* New-arrival cards show a plain price */
.di-product__price--plain .di-product__price-now { color: var(--di-text); }

/* --------------------------------------------------------------------------
   Responsive — how many cards fit
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .di-rail__track { grid-auto-columns: calc((100% - 4 * 18px) / 5); }
  .di-rail__nav--prev { left: -6px; }
  .di-rail__nav--next { right: -6px; }
}

@media (max-width: 991.98px) {
  .di-rail__track { grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; }
}

@media (max-width: 767.98px) {
  .di-rail__track { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; }
  .di-rail__nav { display: none; }
  .di-product__wish { opacity: 1; transform: none; }
}

@media (max-width: 575.98px) {
  .di-rail__track { grid-auto-columns: 46%; gap: 12px; }
}