/* ==========================================================================
   card-slider.css – image slideshow inside each product card (totebag.html)
   Works with public/js/card-slider.js. No external library.
   ========================================================================== */

.card-slider {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--line, #d9ddd5);
  isolation: isolate;
}

/* Clickable photo area → opens the bag's detail page */
.cs-viewport { display: block; width: 100%; height: 100%; }

/* All photos are stacked; only the active one is visible.
   Changing photo = smooth opacity fade (no sliding). */
.cs-stack { position: relative; width: 100%; height: 100%; }

.cs-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;            /* never crop the bag */
  background: #fff;
  opacity: 0;
  transition: opacity 0.6s ease;
  transform: none !important;     /* cancel the card hover zoom on slides */
  user-select: none;
  -webkit-user-drag: none;
}
.cs-slide.is-active { opacity: 1; z-index: 1; }

/* ---- Left / right arrows ---- */
.cs-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  border: 1px solid rgba(27, 42, 36, 0.12);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--pine, #1b2a24);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
}
.cs-arrow svg { width: 18px; height: 18px; }
.cs-arrow:hover { background: #fff; }
.cs-arrow:active { transform: scale(0.94); }
.cs-prev { left: 10px; }
.cs-next { right: 10px; }

/* Arrows appear on hover / keyboard focus (desktop) … */
.card-slider:hover .cs-arrow,
.card-slider:focus-within .cs-arrow { opacity: 1; }
/* … and are always visible on touch screens */
@media (hover: none) {
  .cs-arrow { opacity: 1; width: 32px; height: 32px; margin-top: -16px; }
}

/* ---- Dots ---- */
.cs-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(27, 42, 36, 0.45);
  max-width: calc(100% - 100px);
  overflow: hidden;
}
.cs-dot {
  flex: none;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: width 0.25s, background-color 0.25s;
}
.cs-dot.is-active { width: 16px; background: #fff; }

/* Photo counter, e.g. "3 / 7" */
.cs-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(27, 42, 36, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

/* Single-image products: no controls */
.card-slider[data-count='1'] .cs-arrow,
.card-slider[data-count='1'] .cs-dots,
.card-slider[data-count='1'] .cs-count { display: none; }

/* Badge (e.g. "Best Seller") stays above the slides */
.card-slider .pc-badge { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .cs-slide { transition: none; }
}