/* ============================================================================
   HIGHLAND VAULT — PRODUCT-BLOCK CAROUSEL (blog posts)
   ----------------------------------------------------------------------------
   WooCommerce product blocks (New Arrivals, by Category / Brand…) re-rendered
   as the theme's draw cards in a scroll-snap row — see
   inc/product/class-hv-block-carousel.php. The card itself is styled by
   woocommerce.css; this file only lays out the row, the arrows, and undoes
   the blog article's list / link / image rules that would leak into cards.
   Cards per view follow the carousel's OWN width (container queries), so it
   fits the article column next to the sidebar as well as a full-width slot.
   ========================================================================== */

.hv-block-carousel {
  position: relative;
  container-type: inline-size;
  margin: var(--hv-space-6) 0;
}

/* Row — top padding leaves room for each card's "Ends …" chip (top: -13px)
   and the side padding for the sale flag's 6px overhang; both would be
   clipped by overflow-x otherwise. Negative margins keep the cards aligned
   with the text column. */
body.hv-theme .hv-block-carousel ul.hv-block-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: 78%;
  gap: var(--hv-space-4);
  margin: 0 -8px !important;
  padding: 18px 8px 4px !important;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
body.hv-theme .hv-block-carousel ul.hv-block-carousel__track::-webkit-scrollbar { display: none; }
body.hv-theme .hv-block-carousel ul.hv-block-carousel__track::before,
body.hv-theme .hv-block-carousel ul.hv-block-carousel__track::after { content: none; display: none; }
body.hv-theme .hv-block-carousel li.product.hv-draw-card { scroll-snap-align: start; width: auto !important; float: none !important; }

@container (min-width: 460px)  { body.hv-theme .hv-block-carousel ul.hv-block-carousel__track { grid-auto-columns: calc((100% - 16px - var(--hv-space-4)) / 2); } }
@container (min-width: 700px)  { body.hv-theme .hv-block-carousel ul.hv-block-carousel__track { grid-auto-columns: calc((100% - 16px - 2 * var(--hv-space-4)) / 3); } }
@container (min-width: 1040px) { body.hv-theme .hv-block-carousel ul.hv-block-carousel__track { grid-auto-columns: calc((100% - 16px - 3 * var(--hv-space-4)) / 4); } }

/* Blog article rules (.hv-blog-content a / li / img) — keep them off the cards. */
.hv-block-carousel .hv-draw-card a { text-decoration: none; }
.hv-block-carousel .hv-draw-card li::marker { content: none; }

/* Arrows — round white buttons on the row's edges, vertically on the image. */
.hv-block-carousel__arrow {
  position: absolute; top: 38%; z-index: 7;
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: #fff; color: var(--hv-primary);
  border: 1px solid var(--hv-line); border-radius: 50%;
  box-shadow: 0 6px 18px rgba(16, 32, 58, .16);
  cursor: pointer;
  transition: opacity .2s ease, background .15s ease, color .15s ease;
}
.hv-block-carousel__arrow:hover,
.hv-block-carousel__arrow:focus-visible { background: var(--hv-primary); color: var(--hv-primary-ink, #fff); border-color: var(--hv-primary); }
.hv-block-carousel__arrow[disabled] { opacity: 0; pointer-events: none; }
.hv-block-carousel__arrow--prev { left: -14px; }
.hv-block-carousel__arrow--next { right: -14px; }
/* Everything fits — no arrows at all. */
.hv-block-carousel.is-static .hv-block-carousel__arrow { display: none; }

/* Touch screens swipe; arrows only crowd the cards there. */
@media (hover: none) and (pointer: coarse) {
  .hv-block-carousel__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.hv-theme .hv-block-carousel ul.hv-block-carousel__track { scroll-behavior: auto; }
}