/* Shared premium dark showcase treatment for every homepage product
   section (best sellers, flash deals, new arrivals, most viewed - all
   carousels; featured products - plain grid) plus, on a single product
   page, related/upsell/recently-viewed (see inc/helpers/product-grid-
   section.php, inc/hooks/product-hooks.php, and each section-*.php
   file's 'section_class'). Opt-in via the .hs-dark-product-section
   class, so the shop archive grid keeps the sitewide light card style
   (see product-card.css) - the one place that intentionally does NOT
   get this treatment. The carousel-specific rules further down (nav
   arrows, pagination dots, item widths) are harmless no-ops on whichever
   sections render as a plain grid instead of a carousel (featured
   products; upsell/recently-viewed when there's 4 or fewer items) -
   .hs-carousel-only elements simply don't exist in their markup.
   Nothing here changes the underlying WooCommerce markup, AJAX
   add-to-cart, wishlist, or rating logic - it only restyles the same
   .hs-product-card/.hs-carousel structure already used everywhere
   else. */

.hs-dark-product-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--hs-section-space);
  background: var(--hs-color-gray-900);
  isolation: isolate;
  --hs-dark-nav-size: 3rem;
}

/* Subtle decoration only - a soft radial glow behind the heading and a
   thin curved accent line, both low-opacity and non-interactive so they
   never compete with the product cards for attention. */
.hs-dark-product-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60rem 30rem at 50% 0%, rgb(249 80 5 / .10), transparent 70%);
}

.hs-dark-product-section::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-end: -10%;
  width: 55%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle, rgb(249 80 5 / .35) 1.5px, transparent 1.5px);
  background-size: 1.75rem 1.75rem;
  -webkit-mask-image: radial-gradient(ellipse 40rem 30rem at 70% 30%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 40rem 30rem at 70% 30%, #000 0%, transparent 70%);
}

.hs-dark-product-section .hs-hp-section__title {
  color: #fff;
}

.hs-dark-product-section .hs-hp-section__subtitle {
  color: var(--hs-color-gray-400);
}

/* The shared "view all" button (.hs-btn--outline, sections.css) uses
   dark text + a light border for the sitewide light background -
   invisible against this section's dark one without an override. */
.hs-dark-product-section .hs-hp-section__view-all.hs-btn--outline {
  border-color: rgb(255 255 255 / .3);
  color: #fff;
}
.hs-dark-product-section .hs-hp-section__view-all.hs-btn--outline:hover {
  background: rgb(255 255 255 / .08);
  border-color: var(--hs-color-primary-500);
  color: var(--hs-color-primary-500);
}

/* Carousel nav: circular, outlined, sitting outside the card row rather
   than pinned inside the header (the shared .hs-carousel__nav-group
   default position - see sections.css). The dark section is wide/full-
   bleed enough that the arrows read better flanking the cards, vertically
   centered on the row, than tucked next to the title. */
.hs-dark-product-section .hs-hp-section__header {
  max-width: none;
}

.hs-dark-product-section .hs-carousel__nav-group {
  position: static;
  display: contents;
}

.hs-dark-product-section .hs-carousel {
  position: relative;
}

.hs-dark-product-section .hs-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: var(--hs-dark-nav-size);
  height: var(--hs-dark-nav-size);
  background: rgb(255 255 255 / .05);
  border-color: rgb(255 255 255 / .2);
  color: #fff;
}
.hs-dark-product-section .hs-carousel__nav:hover {
  background: rgb(249 80 5 / .12);
  border-color: var(--hs-color-primary-500);
  color: var(--hs-color-primary-500);
}
.hs-dark-product-section .hs-carousel__nav--prev {
  inset-inline-start: calc(-1 * var(--hs-dark-nav-size) / 2);
}
.hs-dark-product-section .hs-carousel__nav--next {
  inset-inline-end: calc(-1 * var(--hs-dark-nav-size) / 2);
}

@media (max-width: 64rem) {
  .hs-dark-product-section .hs-carousel__nav {
    display: none;
  }
}

/* Pagination dots - shared skeleton in sections.css, orange/dark palette
   here. */
.hs-dark-product-section .hs-carousel__dots {
  border-color: transparent;
}
.hs-dark-product-section .hs-carousel__dot {
  background: rgb(255 255 255 / .25);
}
.hs-dark-product-section .hs-carousel__dot.is-active {
  background: var(--hs-color-primary-500);
}

/* Cards: same structure as every other product card (image / body /
   footer, see product-card.css), restyled for the dark section only -
   colors/surface flip for the dark background, but sizing now matches
   the sitewide default (15rem media height, same padding scale) instead
   of the smaller/denser card this used to render, so a product looks
   like the same card family whether it's seen here or on the Shop
   archive, not a shrunken carousel-only variant. */
.hs-dark-product-section .hs-product-card {
  /* .hs-carousel__item (this card's direct parent) is a flex child of
     .hs-carousel__track with no align-items override, so it defaults to
     align-items: stretch - meaning every item wrapper in a row is
     already the same height as the tallest card. height: 100% is what
     makes THIS card actually fill that stretched wrapper instead of
     sitting at its own shorter natural height inside it, which is what
     keeps the row's cards visually equal-height (see the min-heights
     above for why the *content* inside each card also stays consistent
     regardless of which optional bits - rating, sale price - a given
     product has). */
  height: 100%;
  border: none;
  border-radius: var(--hs-radius-lg);
  box-shadow: 0 10px 30px rgb(0 0 0 / .35);
}
.hs-dark-product-section .hs-product-card:hover {
  transform: translateY(-.3rem);
  box-shadow: 0 16px 36px rgb(0 0 0 / .45);
}

/* Matches the sitewide 15rem media height from product-card.css exactly
   (no override needed) - only object-fit/padding differ here. contain
   (not the sitewide cover) is deliberate: these cards sit on a dark
   panel rather than their own white surface, so a product photo shot on
   a white/transparent background needs to be visible in full rather
   than cropped/filled, which cover would do whenever a product photo's
   aspect ratio doesn't match the box. A small breathing margin keeps the
   image off the card's edges without shrinking it as much as before. */
.hs-dark-product-section .hs-product-card__media img {
  object-fit: contain;
  padding: var(--hs-space-8);
}

/* Size now matches the sitewide default (2rem, product-card.css) - only
   the background/shadow differ, since the base's translucent-white pill
   is tuned for a light card surface and needs a dimmer/transparent
   treatment here to read correctly against a white product photo. */
.hs-dark-product-section .hs-product-card__wishlist {
  background: transparent;
  box-shadow: none;
  color: var(--hs-color-gray-500);
}
.hs-dark-product-section .hs-product-card__wishlist:hover,
.hs-dark-product-section .hs-product-card__wishlist.is-active {
  color: var(--hs-color-primary-500);
}

.hs-dark-product-section .hs-product-card__body {
  text-align: center;
}

/* Restored to the same treatment as the sitewide default (product-
   card.css) instead of being hidden - the category label is part of
   the same content hierarchy (category -> title -> rating -> price)
   the Shop archive card uses, and dropping it here was one of the
   things making this card feel like a different, thinner component. */
.hs-dark-product-section .hs-product-card__category {
  color: var(--hs-color-gray-400);
}

/* Line-clamp, min-height and font-size now match the sitewide default in
   product-card.css exactly (2 lines, no override needed here) instead of
   the denser single-line/smaller-font treatment this used to have -
   title hierarchy should read the same on a homepage carousel card as
   on a Shop card. product-card.css's own .hs-product-card__title a rule
   already sets --hs-color-text (white on this dark card) - nothing left
   to override here. */
.hs-dark-product-section .hs-product-card__title a:hover {
  color: var(--hs-color-primary-500);
}

.hs-dark-product-section .hs-product-card__rating {
  display: flex;
  justify-content: center;
  min-height: 1.1rem;
}

.hs-dark-product-section .hs-product-card__price {
  justify-content: center;
  margin-block-start: 0;
  /* Bolder, punchier orange than the sitewide default (--hs-color-
     primary-700, a dark rust-brown that reads fine on the lighter shop
     grid but looked muddy/low-contrast here) - --hs-color-primary-fill
     is the same WCAG-checked shade already used for solid-fill buttons/
     badges elsewhere (see design-tokens.php), reused here for a price
     that's meant to be the strongest accent on the card. Font-size and
     min-height are otherwise unchanged from the sitewide default now
     (no override needed), so price weight/size reads the same as on a
     Shop card. */
  color: var(--hs-color-primary-fill);
}
.hs-dark-product-section .hs-product-card__price ins {
  color: var(--hs-color-primary-fill);
}

/* Card widths - large enough to feel comparable to the Shop grid's own
   15rem-floor cards rather than a dense row of tiny carousel tiles.
   Visible-count target: ~4 on a wide desktop, ~3.5 as it narrows, ~2.5
   on tablet, ~1.3-1.2 on mobile (one full card + a deliberate "peek" of
   the next, signaling the row is swipeable). Percentages are the
   carousel item's own share of the track width - not literal pixel
   counts - so they hold up across the whole 320-1920px range instead of
   just at a handful of tested sizes. */
.hs-dark-product-section .hs-carousel__item {
  width: calc(25% - var(--hs-space-24) * 3 / 4);
}
.hs-dark-product-section .hs-product-grid--carousel.hs-carousel__track {
  gap: var(--hs-space-24);
}

@media (max-width: 90rem) {
  .hs-dark-product-section .hs-carousel__item {
    width: calc(28.5% - var(--hs-space-20) * 3.5 / 4.5);
  }
}
@media (max-width: 64rem) {
  .hs-dark-product-section .hs-carousel__item {
    width: calc(40% - var(--hs-space-16) * 1.5 / 2.5);
  }
  .hs-dark-product-section .hs-product-grid--carousel.hs-carousel__track {
    gap: var(--hs-space-16);
  }
}
@media (max-width: 47.9375rem) {
  .hs-dark-product-section .hs-carousel__item {
    width: calc(74% - var(--hs-space-16) * .35 / 1.35);
  }
}
@media (max-width: 30rem) {
  .hs-dark-product-section .hs-carousel__item {
    width: calc(83% - var(--hs-space-12) * .2 / 1.2);
  }
  .hs-dark-product-section .hs-product-grid--carousel.hs-carousel__track {
    gap: var(--hs-space-12);
  }
}

/* Flash deals countdown (sections.css): the wrapper's own background/
   border are color-mix()'d off --hs-color-surface now (see sections.css),
   so they're already dark-aware without an override here - only the
   label (plain danger-700 text, too dark against this section's own
   panel) and the unit chips (kept a deliberate solid-white "digital
   display" look here, for contrast against the panel) still need one. */
.hs-dark-product-section .hs-flash-deals__countdown-label {
  color: #fff;
}
.hs-dark-product-section .hs-flash-deals__unit {
  background: rgb(255 255 255 / .9);
}