/* =====================================================================
   woo-carousel.css
   Turns a standard WooCommerce grid (ul.products > li.product) into a
   horizontal carousel using CSS scroll-snap. No markup changes required.

   Arrows and progress bar are independent, both optional.
   ===================================================================== */

.wc-carousel {
  /* Layout — tune these, everything else derives from them.
     --wcc-cols is set inline by the JS from the shortcode's columns="N"
     (or data-visible), so this value is only the fallback. */
  --wcc-cols: 4;                    /* cards in view on desktop */
  --wcc-visible: var(--wcc-cols);
  --wcc-gap: 1.15rem;                /* space between cards */

  /* Arrows */
  --wcc-arrow-size: 2.75rem;
  --wcc-arrow-top: 35%;        /* vertical anchor: sits over the product image */
  --wcc-arrow-bg: #fff;
  --wcc-arrow-fg: #111;

  /* Progress bar */
  --wcc-progress-height: 3px;
  --wcc-progress-offset: 1.25rem;   /* gap between cards and bar */
  --wcc-progress-width: 100%;       /* e.g. 40% for a short centred bar */
  --wcc-progress-track: rgba(0, 0, 0, 0.12);
  --wcc-progress-fill: #b24cff;
  --wcc-progress-min: 24px;         /* thumb never shrinks below this */

  position: relative;
}

/* min() so a 2-column shortcode never gets stretched to 3 on a tablet */
@media (max-width: 1200px) { .wc-carousel { --wcc-visible: min(3, var(--wcc-cols)); } }
@media (max-width: 900px)  { .wc-carousel { --wcc-visible: min(2, var(--wcc-cols)); } }
@media (max-width: 600px)  { .wc-carousel { --wcc-visible: 2; } } /* fractional = peek */

/* ---------------------------------------------------------------------
   The track (this is ul.products itself)
   --------------------------------------------------------------------- */
.wc-carousel__track.products {
  display: grid !important;
  grid-template-columns: none !important;   /* kill the theme's column template */
  grid-template-rows: none !important;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--wcc-visible) - 1) * var(--wcc-gap)) / var(--wcc-visible)
  );
  gap: var(--wcc-gap) !important;

  margin: 0 !important;
  padding: 4px 0 !important;   /* breathing room so shadows/focus rings aren't clipped */
  list-style: none;

  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;             /* the JS just sets scrollLeft; CSS animates it */
  overscroll-behavior-x: contain;      /* stops the swipe-to-go-back gesture */
  -webkit-overflow-scrolling: touch;   /* iOS momentum, older Safari */

  scrollbar-width: none;               /* Firefox */
  -ms-overflow-style: none;            /* legacy Edge */
}

.wc-carousel__track.products::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* WooCommerce's clearfix pseudo-elements become grid columns. Remove them. */
.wc-carousel__track.products::before,
.wc-carousel__track.products::after {
  content: none !important;
  display: none !important;
}

/* Visible focus when the track itself is keyboard-focused */
.wc-carousel__track.products:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   The cards
   --------------------------------------------------------------------- */
.wc-carousel__track > li.product {
  scroll-snap-align: start;
  float: none !important;      /* neutralise Woo's .first / .last / width rules */
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0;                /* let card contents shrink instead of overflowing */
}

/* ---------------------------------------------------------------------
   Arrows  (only present when enabled — see CONFIG.arrows / data-arrows)
   --------------------------------------------------------------------- */
.wc-carousel__nav {
  position: absolute;
  top: var(--wcc-arrow-top);
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wcc-arrow-size);
  height: var(--wcc-arrow-size);
  padding: 0;

  background: var(--wcc-arrow-bg);
  color: var(--wcc-arrow-fg);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  cursor: pointer;

  transition: opacity 0.18s ease, visibility 0.18s ease, box-shadow 0.18s ease;
}

.wc-carousel__nav--prev { left: 0;  transform: translate(-50%, -50%); }
.wc-carousel__nav--next { right: 0; transform: translate(50%, -50%); }
.wc-carousel__nav--next svg { transform: rotate(180deg); }

.wc-carousel__nav:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); }
.wc-carousel__nav:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Hidden rather than greyed out at the ends */
.wc-carousel__nav[disabled] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Nothing to scroll: hide both controls entirely */
.wc-carousel:not(.is-scrollable) .wc-carousel__nav,
.wc-carousel:not(.is-scrollable) .wc-carousel__progress {
  display: none;
}

/* Opt-in: drop the arrows on touch devices, where swiping is the real control.
   Add class="wc-carousel--touch-swipe" via CONFIG.wrapClass, or just delete
   the media query guard if you want this everywhere. */
@media (hover: none) {
  .wc-carousel--touch-swipe .wc-carousel__nav { display: none; }
}

/* ---------------------------------------------------------------------
   Progress bar  (only present when enabled — see CONFIG.progress / data-progress)
   Presentational only: aria-hidden, not a scrollbar substitute.
   --------------------------------------------------------------------- */
.wc-carousel__progress {
  position: relative;
  width: var(--wcc-progress-width);
  height: var(--wcc-progress-height);
  margin: var(--wcc-progress-offset) auto 0;
  background: var(--wcc-progress-track);
  border-radius: 999px;
  overflow: hidden;
}

.wc-carousel__progress-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: var(--wcc-progress-fill);
  border-radius: inherit;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .wc-carousel__track.products { scroll-behavior: auto; }
  .wc-carousel__nav { transition: none; }
}