/* ============================================================================
   HIGHLAND VAULT — DRAW CAROUSEL + SCROLLABLE TAB STRIP

   Two related behaviours, both layered ON TOP of [hv_draw_tabs] without
   touching its own markup or stylesheet:

   1. TAB STRIP — the pill row already scrolls (overflow-x: auto), but on a wide
      screen with many categories there was no sign that more tabs existed off
      the right edge. Adds arrow buttons and drag-to-scroll, all
      driven by state classes that draw-carousel.js puts on the <nav>.

   2. CATEGORY CAROUSEL — each category's WooCommerce ul.products flips from a
      4-up CSS grid to a horizontal, snapping, looping rail: 3 cards per view on
      desktop, 2 on tablet, ~1.2 (peeking) on phones. The cards themselves are
      untouched, so they stay pixel-identical to the grid layout.

   The JS wraps the list in .hv-carousel and clones the card set to fake the
   loop; clones carry [data-hv-clone] and are inert (aria-hidden, tabindex -1).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 — TAB STRIP
   --------------------------------------------------------------------------- */

/* Mandatory snap fights a drag gesture: the strip yanks to the next pill the
   moment the pointer lifts. Proximity keeps the tidy resting positions without
   overriding where the user actually let go. */
.hv-draw-tabs__track { scroll-snap-type: x proximity; scroll-behavior: smooth; }
.hv-draw-tabs__nav.is-dragging .hv-draw-tabs__track { scroll-snap-type: none; scroll-behavior: auto; }
.hv-draw-tabs__nav.is-dragging .hv-draw-tabs__tab { cursor: grabbing; }

/* Arrows — dark pills matching the tabs, vertically centred on the pill row
   (the track has 14px of bottom padding for the sliding underline, so the
   optical centre sits a few px above the box centre). */
.hv-draw-tabs__arrow {
  position: absolute; top: calc(50% + 5px); transform: translateY(-50%);
  z-index: 2;
  display: none; place-items: center;
  width: 38px; height: 38px; padding: 0 !important;
  background: #111111 !important;
  color: #FFFFFF !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}
.hv-draw-tabs__nav.has-overflow .hv-draw-tabs__arrow { display: grid; }
.hv-draw-tabs__arrow:hover,
.hv-draw-tabs__arrow:focus { background: var(--dt-blue) !important; border-color: transparent !important; outline: none; }
.hv-draw-tabs__arrow:focus-visible { outline: 2px solid var(--dt-blue); outline-offset: 2px; }
.hv-draw-tabs__arrow svg { display: block; width: 18px; height: 18px; }
.hv-draw-tabs__arrow--prev { left: -6px; }
.hv-draw-tabs__arrow--next { right: -6px; }
/* Disabled rather than removed: the strip must not reflow as you reach an end */
.hv-draw-tabs__nav.at-start .hv-draw-tabs__arrow--prev,
.hv-draw-tabs__nav.at-end   .hv-draw-tabs__arrow--next { opacity: 0; pointer-events: none; }

/* Phones swipe natively and have no room for arrows. */
@media (max-width: 768px) {
  .hv-draw-tabs__arrow { display: none !important; }
}

/* ---------------------------------------------------------------------------
   2 — CATEGORY CAROUSEL
   --------------------------------------------------------------------------- */
.hv-carousel {
  --hv-car-gap: var(--hv-space-5, 1.5rem);
  --hv-car-per: 3;                       /* cards per view, set per breakpoint */
  --hv-car-pad: 18px;                    /* in-track air: the date pill hangs
                                            13px above the card and the corner
                                            flag 10px above / 6px right — both
                                            were clipped by the scrollport */
  position: relative;
}
/* Cancel the side padding outwards so resting cards still align flush with the
   section heading; the padding then exists purely as flag/shadow room. */
@media (min-width: 769px) {
  .hv-carousel { margin-inline: calc(-1 * var(--hv-car-pad)); }
}

/* The list itself is the scroll container. `display: flex` overrides the
   theme's `ul.products { display: grid }` — same specificity would lose to the
   grid rule's `.woocommerce` prefix, hence the extra class here. */
.hv-carousel > .products.hv-carousel__track {
  display: flex !important;
  grid-template-columns: none !important;
  gap: var(--hv-car-gap);
  margin: 0;
  padding: var(--hv-car-pad) var(--hv-car-pad) 14px;
  scroll-padding-inline: var(--hv-car-pad); /* snap keeps the side inset too */
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;        /* don't trigger browser back-swipe */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.hv-carousel > .products.hv-carousel__track::-webkit-scrollbar { display: none; }
/* The rail is keyboard-focusable (arrow keys page it) — ring only for keyboards */
.hv-carousel > .products.hv-carousel__track:focus { outline: none; }
.hv-carousel > .products.hv-carousel__track:focus-visible {
  outline: 2px solid var(--hv-primary, var(--hv-primary)); outline-offset: 4px;
}

.hv-carousel > .products.hv-carousel__track > li.product {
  flex: 0 0 calc(
    (100% - (var(--hv-car-per) - 1) * var(--hv-car-gap)) / var(--hv-car-per)
  );
  scroll-snap-align: start;
  width: auto !important; margin: 0 !important; float: none !important;
}

/* Dragging: kill snap and smooth-scroll so the rail tracks the pointer 1:1,
   and stop the card links from swallowing the gesture. */
.hv-carousel.is-dragging > .products.hv-carousel__track {
  scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing;
}
.hv-carousel.is-dragging a,
.hv-carousel.is-dragging img { pointer-events: none; }

/* While the loop repositions scrollLeft, smooth-scroll must be off or the
   browser animates the jump and the seam becomes visible. */
.hv-carousel.is-jumping > .products.hv-carousel__track { scroll-behavior: auto; }

/* Clones exist only to make the loop seamless — never announced, never focusable */
.hv-carousel__track > li.product[data-hv-clone] { user-select: none; }

/* Arrows — circular, over the rail edges, same blue-on-hover as the tabs */
.hv-carousel__arrow {
  position: absolute; top: calc(50% - 4px); transform: translateY(-50%);
  z-index: 3;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0 !important;
  background: #FFFFFF !important;
  color: var(--hv-ink, #111827) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(17, 24, 39, .14) !important;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.hv-carousel__arrow:hover,
.hv-carousel__arrow:focus {
  background: var(--hv-primary, var(--hv-primary)) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  outline: none;
}
.hv-carousel__arrow:focus-visible { outline: 2px solid var(--hv-primary, var(--hv-primary)); outline-offset: 2px; }
.hv-carousel__arrow svg { display: block; width: 20px; height: 20px; }
/* Fully OUTSIDE the cards. (100vw - 100%) / 2 is the free space between the
   rail and the viewport edge, so the 64px stand-off shrinks on narrower
   desktops instead of poking off-screen (16px guards the scrollbar). Always
   visible — an outside control that only appears on hover is undiscoverable. */
.hv-carousel__arrow--prev { left: calc(-1 * min(64px, (100vw - 100%) / 2 - 16px)); }
.hv-carousel__arrow--next { right: calc(-1 * min(64px, (100vw - 100%) / 2 - 16px)); }

/* Not enough cards to scroll: no arrows, no loop, no grab cursor — it is just
   a left-aligned row. The JS adds .is-static in that case. */
.hv-carousel.is-static > .products.hv-carousel__track { cursor: default; overflow-x: visible; }
.hv-carousel.is-static .hv-carousel__arrow { display: none; }

/* --- breakpoints: cards per view ------------------------------------------ */
@media (max-width: 1100px) { .hv-carousel { --hv-car-per: 2; } }
@media (max-width: 768px) {
  .hv-carousel {
    --hv-car-per: 2;                     /* two-up, like the old mobile grid */
    --hv-car-gap: var(--hv-space-3, .75rem);
  }
  /* Touch devices get the swipe; floating arrows would only cover the cards. */
  .hv-carousel__arrow { display: none; }
  /* Bleed to the screen edges so the peeking card reaches the viewport, but
     only inside the theme container, which guarantees the side padding. */
  .hv-container .hv-carousel > .products.hv-carousel__track {
    margin-inline: calc(-1 * var(--hv-space-5, 1.5rem));
    padding-inline: var(--hv-space-5, 1.5rem);
    scroll-padding-inline-start: var(--hv-space-5, 1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hv-draw-tabs__track,
  .hv-carousel > .products.hv-carousel__track { scroll-behavior: auto; }
  .hv-draw-tabs__arrow, .hv-carousel__arrow { transition: none; }
}