/* Shared by every homepage section. */

.hs-hp-section {
  padding-block: var(--hs-space-64);
}

/* Centered title block. The carousel prev/next controls (best sellers,
   flash deals, new arrivals - see inc/helpers/product-grid-section.php)
   are the one thing that still needs to live inside this header instead
   of below it: they're playback controls for the carousel immediately
   below, not a navigational link like "view all" (moved to its own
   centered .hs-hp-section__footer beneath the grid/carousel instead -
   see that class below), so position: absolute keeps them pinned to
   the header's end edge without disturbing the centered title/subtitle
   text flow. */
.hs-hp-section__header {
  position: relative;
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: var(--hs-space-32);
  text-align: center;
}

.hs-hp-section__title {
  position: relative;
  display: inline-block;
  padding-bottom: var(--hs-space-16);
  font-size: var(--hs-font-size-h3);
  font-weight: var(--hs-font-weight-bold);
}

/* The underline the title sits above - an inline-block title (sized to
   its own text, not the full centered header width) plus an absolutely
   positioned, horizontally centered ::after is what lets the underline
   track the title's actual width at any length/font-size instead of
   spanning the whole (wider) header container. */
.hs-hp-section__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3.5rem;
  height: .1875rem;
  border-radius: var(--hs-radius-full);
  background: var(--hs-color-primary-fill);
}

.hs-hp-section__subtitle {
  margin-top: var(--hs-space-4);
  color: var(--hs-color-text-muted);
}

.hs-hp-section__view-all {
  flex-shrink: 0;
}

/* "View all" links/buttons and carousel-adjacent actions all render
   below the grid/carousel now, centered under it, instead of squeezed
   beside the title. */
.hs-hp-section__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--hs-space-32);
}

/* Generic carousel (product carousels today - best sellers, flash
   deals, new arrivals). Same scroll-snap technique as the hero slider,
   just with multiple items visible per "page" instead of one full-width
   slide. */

.hs-carousel__nav-group {
  position: absolute;
  inset-inline-end: 0;
  bottom: var(--hs-space-16);
  display: flex;
  align-items: center;
  gap: var(--hs-space-8);
}

.hs-carousel__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--hs-radius-full);
  border: 1px solid var(--hs-color-border-strong);
  color: var(--hs-color-text);
  transition: background-color var(--hs-transition-fast) var(--hs-ease),
    border-color var(--hs-transition-fast) var(--hs-ease);
}
.hs-carousel__nav:hover {
  background: var(--hs-color-surface-sunken);
  border-color: var(--hs-color-text-muted);
}

/* Physical, not logical: the chevron itself must flip in RTL, same
   reasoning as the hero slider's nav icons. */
:root[dir="rtl"] .hs-carousel__nav svg {
  transform: scaleX(-1);
}

.hs-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.hs-carousel__track::-webkit-scrollbar {
  display: none;
}

.hs-carousel__item {
  flex: 0 0 auto;
  width: calc(25% - var(--hs-space-24) * 3 / 4);
  scroll-snap-align: start;
}

@media (max-width: 64rem) {
  .hs-carousel__item {
    width: calc(33.333% - var(--hs-space-24) * 2 / 3);
  }
}
@media (max-width: 48rem) {
  .hs-carousel__item {
    width: calc(50% - var(--hs-space-16) / 2);
  }
}
@media (max-width: 30rem) {
  .hs-carousel__item {
    width: calc(72% - var(--hs-space-12) / 2);
  }
}

.hs-product-grid--carousel.hs-carousel__track {
  display: flex;
  gap: var(--hs-space-24);
}
@media (max-width: 48rem) {
  .hs-product-grid--carousel.hs-carousel__track {
    gap: var(--hs-space-16);
  }
}
@media (max-width: 30rem) {
  .hs-product-grid--carousel.hs-carousel__track {
    gap: var(--hs-space-12);
  }
}

/* Carousel pagination dots - built by carousel.js (one dot per "page" of
   items, recalculated per viewport since how many cards fit per view
   changes with screen width). Empty/collapses to nothing when a
   carousel has only one page, so it never reserves space it doesn't
   need. */
.hs-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--hs-space-8);
  margin-top: var(--hs-space-24);
}

.hs-carousel__dot {
  width: .5rem;
  height: .5rem;
  border-radius: var(--hs-radius-full);
  background: var(--hs-color-border-strong);
  transition: background-color var(--hs-transition-fast) var(--hs-ease),
    width var(--hs-transition-fast) var(--hs-ease);
}
.hs-carousel__dot.is-active {
  width: 1.25rem;
  background: var(--hs-color-primary-fill);
}

/* Product grid (best sellers, flash deals, new arrivals, featured, most viewed) */

.hs-product-grid {
  display: grid;
  grid-template-columns: repeat(var(--hs-grid-columns-desktop, 4), 1fr);
  gap: var(--hs-space-24);
}

@media (max-width: 64rem) {
  .hs-product-grid {
    grid-template-columns: repeat(var(--hs-grid-columns-tablet, 3), 1fr);
  }
}
@media (max-width: 48rem) {
  .hs-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hs-space-16);
  }
}
@media (max-width: 30rem) {
  .hs-product-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--hs-space-12);
  }
}

/* Flash deals countdown */

.hs-flash-deals__countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hs-space-16);
  flex-wrap: wrap;
  margin-bottom: var(--hs-space-24);
  padding: var(--hs-space-16);
  background: color-mix(in srgb, var(--hs-color-danger-500) 12%, var(--hs-color-surface));
  border: 1px solid color-mix(in srgb, var(--hs-color-danger-500) 30%, var(--hs-color-surface));
  border-radius: var(--hs-radius-lg);
}

.hs-flash-deals__countdown-label {
  font-weight: var(--hs-font-weight-semibold);
  color: var(--hs-color-danger-700);
}

.hs-flash-deals__countdown-units {
  display: flex;
  gap: var(--hs-space-8);
}

.hs-flash-deals__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3rem;
  padding: var(--hs-space-8) var(--hs-space-4);
  background: var(--hs-color-surface);
  border-radius: var(--hs-radius-md);
  font-weight: var(--hs-font-weight-bold);
  font-size: var(--hs-font-size-h6);
  color: var(--hs-color-danger-700);
}
.hs-flash-deals__unit small {
  font-size: var(--hs-font-size-caption);
  font-weight: var(--hs-font-weight-regular);
  color: var(--hs-color-text-muted);
}

/* Shop by category */

.hs-category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--hs-space-20);
}
@media (max-width: 64rem) {
  .hs-category-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Below 30rem (480px) the grid hands off to the horizontal carousel
   further down instead of a cramped 2-column wrap - see
   .hs-category-carousel's display rule. */
@media (max-width: 30rem) {
  .hs-category-grid { display: none; }
}

/* Mobile-only horizontal carousel: same [data-hs-carousel] structure/
   mechanism as the product carousels (carousel.js auto-mounts every
   instance on the page, no separate init needed), reusing .hs-carousel__
   track/item/dots primitives already defined above in this file so the
   scroll-snap/dot behavior is identical, just with category-card sizing
   instead of product-card sizing. Hidden above 30rem, where the grid
   above is shown instead - "don't make desktop worse to fix mobile". */
.hs-category-carousel {
  display: none;
}
@media (max-width: 30rem) {
  .hs-category-carousel {
    display: block;
  }
}

.hs-category-carousel__track {
  gap: var(--hs-space-16);
  padding-block-end: var(--hs-space-4);
}

/* ~1.8 cards visible at once (a category card is mostly its circular
   media + two short text lines, narrower content than a product card,
   so a dedicated width - rather than inheriting the generic
   .hs-carousel__item's 72% - lands in the middle of the requested
   1.5-2.2-visible range instead of its lower edge). */
.hs-category-carousel__item {
  width: 55%;
}

.hs-category-carousel__dots {
  display: none;
  justify-content: center;
  margin-block-start: var(--hs-space-16);
}
@media (max-width: 30rem) {
  .hs-category-carousel__dots {
    display: flex;
  }
}

.hs-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hs-space-8);
  text-align: center;
  /* Blocksy's own bare "a { color: ... }" rule (its link-color dynamic
     style) otherwise wins here since neither .hs-category-card nor
     .hs-category-card__name asserted a color of their own - same class
     of cascade issue as the button/submit fixes in buttons.css. */
  color: var(--hs-color-text);
}
.hs-category-card:hover {
  color: var(--hs-color-text);
}

.hs-category-card__media {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--hs-radius-full);
  background: var(--hs-color-surface-sunken) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--hs-transition-normal) var(--hs-ease);
}
.hs-category-card:hover .hs-category-card__media {
  box-shadow: 0 0 0 3px var(--hs-color-primary-200);
}

.hs-category-card__initial {
  font-size: var(--hs-font-size-h3);
  font-weight: var(--hs-font-weight-bold);
  color: var(--hs-color-primary-500);
}

.hs-category-card__name {
  font-weight: var(--hs-font-weight-semibold);
}

.hs-category-card__count {
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-text-muted);
}

/* Top brands */

.hs-brand-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hs-space-12);
}

.hs-brand-strip__item {
  padding: var(--hs-space-12) var(--hs-space-24);
  border: 1px solid var(--hs-color-border);
  border-radius: var(--hs-radius-full);
  font-weight: var(--hs-font-weight-medium);
  transition: border-color var(--hs-transition-fast) var(--hs-ease),
    color var(--hs-transition-fast) var(--hs-ease);
}
.hs-brand-strip__item:hover {
  border-color: var(--hs-color-primary-500);
  color: var(--hs-color-primary-600);
}

/* Promo banner */

.hs-promo-banner {
  background: linear-gradient(135deg, var(--hs-color-gray-900), var(--hs-color-gray-800));
}

.hs-promo-banner__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hs-space-16);
  padding-block: var(--hs-space-24);
}

.hs-promo-banner__heading {
  color: #fff;
  font-size: var(--hs-font-size-h2);
  font-weight: var(--hs-font-weight-bold);
  max-width: 40rem;
}

.hs-promo-banner__text {
  color: var(--hs-color-gray-300);
  max-width: 34rem;
}

/* Why choose us */

.hs-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hs-space-24);
}
@media (max-width: 48rem) {
  .hs-why-grid { grid-template-columns: repeat(2, 1fr); }
}

.hs-why-card {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-12);
  padding: var(--hs-space-24);
  border: 1px solid var(--hs-color-border);
  border-radius: var(--hs-radius-lg);
}

.hs-why-card__icon {
  display: inline-flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--hs-radius-lg);
  background: var(--hs-color-primary-50);
  color: var(--hs-color-primary-600);
}

.hs-why-card__title {
  font-weight: var(--hs-font-weight-semibold);
  font-size: var(--hs-font-size-h6);
}

.hs-why-card__text {
  color: var(--hs-color-text-muted);
  font-size: var(--hs-font-size-body-sm);
}

/* Stats */

.hs-section-stats {
  background: var(--hs-color-primary-700);
}

/* 3 stat cards (see inc/blocks/asg-stats) sized off the actual child
   count instead of a fixed 4-column grid with an empty leftover cell -
   repeat(auto-fit, minmax(...)) settles on however many columns the
   container's inner width actually has room for and centers the row
   (justify-content: center), so a 3rd/4th item being added or removed
   later reflows on its own without another breakpoint edit here. A
   5.5rem card floor keeps all 3 cards on one centered row through the
   narrowest tested width (320px, .hs-container's 288px inner width at
   --hs-space-16 padding: 3 * 5.5rem + 2 * var(--hs-space-8) gap =
   280px, fits inside 288px) instead of the wider desktop gap forcing an
   early drop to 2-then-1 columns; the fixed 3-column desktop rule below
   then takes over once the container is wide enough for the larger
   --hs-space-24 gap to look intentional rather than cramped. */
.hs-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: var(--hs-space-8);
  text-align: center;
  justify-content: center;
}

@media (min-width: 30rem) {
  .hs-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 12rem));
    gap: var(--hs-space-24);
  }
}

.hs-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
}

.hs-stat-card__number {
  font-size: var(--hs-font-size-h1);
  font-weight: var(--hs-font-weight-bold);
  color: #fff;
}

.hs-stat-card__label {
  color: var(--hs-color-primary-100);
  font-size: var(--hs-font-size-body-sm);
}

/* Testimonials */

.hs-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hs-space-24);
}
@media (max-width: 64rem) {
  .hs-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .hs-testimonial-grid { grid-template-columns: 1fr; }
}

.hs-testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-12);
  padding: var(--hs-space-24);
  background: var(--hs-color-surface);
  border: 1px solid var(--hs-color-border);
  border-radius: var(--hs-radius-lg);
}

.hs-testimonial-card__text {
  color: var(--hs-color-text);
  line-height: var(--hs-line-height-body);
}

.hs-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--hs-space-12);
  margin-top: auto;
}

.hs-testimonial-card__avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--hs-radius-full);
  object-fit: cover;
}

.hs-testimonial-card__name {
  font-weight: var(--hs-font-weight-semibold);
}

.hs-testimonial-card__role {
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-text-muted);
}

/* Partners */

.hs-partner-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hs-space-48);
}

.hs-partner-strip__item img {
  max-height: 2.5rem;
  width: auto;
  filter: grayscale(1);
  opacity: .7;
  transition: filter var(--hs-transition-fast) var(--hs-ease), opacity var(--hs-transition-fast) var(--hs-ease);
}
.hs-partner-strip__item:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Instagram gallery */

.hs-instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--hs-space-12);
}
@media (max-width: 48rem) {
  .hs-instagram-grid { grid-template-columns: repeat(3, 1fr); }
}

.hs-instagram-grid__item {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--hs-radius-md);
}
.hs-instagram-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hs-transition-normal) var(--hs-ease);
}
.hs-instagram-grid__item:hover img {
  transform: scale(1.05);
}

/* Latest articles */

.hs-article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hs-space-24);
}
/* Tablet: 2 columns rather than jumping straight from 3 to 1 - the
   homepage teaser only ever shows 3 posts total (so this rarely bites
   there), but the full Blog archive (home.php) can show many, where a
   bare 3-then-1 breakpoint left tablet widths (e.g. ~820px) cramped into
   3 narrow columns instead of a comfortable 2. */
@media (max-width: 64rem) {
  .hs-article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 48rem) {
  .hs-article-grid { grid-template-columns: 1fr; }
}

/* FAQ */

.hs-section-faq__inner {
  max-width: 48rem;
}

/* Footer CTA */

/* --hs-color-primary-50 (a very light brand-orange tint) reads as a soft
   highlight band against a white page, but is barely visible against a
   dark one - color-mix keeps the same "faint brand tint" intent while
   scaling its lightness to whatever --hs-color-bg actually is (light or
   dark), rather than a second hardcoded dark-mode override value. */
.hs-footer-cta {
  background: color-mix(in srgb, var(--hs-color-primary-500) 12%, var(--hs-color-bg));
}

.hs-footer-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-24);
  flex-wrap: wrap;
}

.hs-footer-cta__heading {
  font-size: var(--hs-font-size-h3);
  font-weight: var(--hs-font-weight-bold);
}

.hs-footer-cta__text {
  color: var(--hs-color-text-muted);
  margin-top: var(--hs-space-4);
}