/**
 * Homepage Builder — scoped under .prowp-homepage
 *
 * @package ProWPCommerce
 */

.prowp-homepage {
  --prowp-homepage-gap: var(--prowp-category-gap, 1.25rem);
  --prowp-homepage-section-pad: 2.5rem;
  --prowp-banner-gap: clamp(0.5rem, 1.2vw, 1rem);
  /* Aspect tokens (W/H). Tiles use --tile; full-bleed/carousel use mobile→desktop ladder. */
  --prowp-banner-aspect-mobile: 16 / 9;
  --prowp-banner-aspect-tablet: 2 / 1;
  --prowp-banner-aspect-desktop: 21 / 9;
  --prowp-banner-aspect-tile: 4 / 3;
  --prowp-banner-aspect-mosaic: 16 / 10;
  /* Soft height guards for full-bleed / carousel only — min always ≤ max at every viewport. */
  --prowp-banner-min-height: clamp(10rem, 36vw, 13rem);
  --prowp-banner-max-height: clamp(13rem, 42vw, 22rem);
  --prowp-banner-parallax-overflow: 12%;
  --prowp-banner-parallax-subtle: 0.12;
  --prowp-banner-parallax-medium: 0.2;
  --prowp-banner-parallax-strong: 0.32;
  --prowp-banner-scrim: linear-gradient(
    to top,
    color-mix(in srgb, var(--prowp-overlay, rgba(15, 23, 42, 0.85)) 92%, transparent) 0%,
    color-mix(in srgb, var(--prowp-overlay, rgba(15, 23, 42, 0.85)) 62%, transparent) 32%,
    color-mix(in srgb, var(--prowp-overlay, rgba(15, 23, 42, 0.85)) 28%, transparent) 58%,
    transparent 82%
  );
  --prowp-banner-text-panel: color-mix(in srgb, var(--prowp-overlay, rgba(15, 23, 42, 0.85)) 78%, transparent);
  --prowp-banner-text-shadow: 0 1px 2px color-mix(in srgb, var(--prowp-overlay, #0f172a) 55%, transparent),
    0 4px 16px color-mix(in srgb, var(--prowp-overlay, #0f172a) 40%, transparent);
  color: var(--prowp-color-text, var(--prowp-text, #1a1a1a));
  font-family: var(--prowp-ff, inherit);
	inline-size: 100%;
	max-inline-size: none;
	overflow-x: hidden;
	overflow: clip;
	background: var(--prowp-color-canvas, var(--prowp-bg));
}

.prowp-homepage-main {
	inline-size: 100%;
	max-inline-size: none;
	margin: 0;
	padding: 0;
	background: var(--prowp-color-canvas, var(--prowp-bg));
	color: var(--prowp-color-text, var(--prowp-text));
}

.prowp-homepage :where(
	.prowp-homepage__section-title,
	.prowp-homepage__section-subtitle,
	.prowp-hero__heading,
	.prowp-hero__text,
	.prowp-product-title,
	.prowp-blog-card__title,
	.prowp-blog-card__excerpt,
	.prowp-homepage-category__name,
	.prowp-newsletter__heading,
	.prowp-newsletter__subtitle,
	button,
	.button,
	a
) {
	overflow-wrap: anywhere;
}

.prowp-homepage :where(button, .button, [role="button"], input, select, textarea, .prowp-carousel__btn) {
	min-block-size: 44px;
}

.prowp-homepage :where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--prowp-color-focus, var(--prowp-color-primary, currentColor));
	outline-offset: 3px;
}

.prowp-homepage__section--pad-none { padding-block: 0; }
.prowp-homepage__section--pad-small { padding-block: 1rem; }
.prowp-homepage__section--pad-medium { padding-block: var(--prowp-homepage-section-pad); }
.prowp-homepage__section--pad-large { padding-block: 3.5rem; }

/* CSF Style → Background Color: token fallback when --prowp-section-bg is set
 * on the section (via prowp_homepage_section_attr). Empty keeps preset/shell. */
.prowp-homepage__section:not(.prowp-homepage__section--hero):not(.prowp-homepage__section--announcement) {
  background-color: var(--prowp-section-bg, transparent);
}

/* Merchant-set CSF color must beat preset/editorial/premium shell paints. */
.prowp-homepage__section.prowp-homepage__section--has-bg-color {
  background-color: var(--prowp-section-bg) !important;
}

.prowp-homepage__section-head {
  margin-block-end: 1.25rem;
  padding-inline: clamp(1rem, 3vw, 2rem);
	inline-size: min(100%, var(--prowp-container-width, 1440px));
	margin-inline: auto;
}

.prowp-homepage__section-title {
  font-family: var(--prowp-fh, var(--prowp-ff));
  font-size: var(--prowp-h3, 1.5rem);
  margin: 0;
}

.prowp-homepage__grid {
  display: grid;
  gap: var(--prowp-homepage-gap);
  padding-inline: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(var(--prowp-section-cols-desktop, var(--prowp-grid-cols-fallback, 1)), minmax(0, 1fr));
	inline-size: min(100%, var(--prowp-container-width, 1440px));
	margin-inline: auto;
}

.prowp-homepage .prowp-product-card {
	min-inline-size: 0;
	min-block-size: 0;
	background: var(--prowp-color-surface, var(--prowp-bg));
	color: var(--prowp-color-text, var(--prowp-text));
	border-color: var(--prowp-color-border, var(--prowp-border));
}

.prowp-homepage .prowp-product-card :where(.prowp-product-title, .woocommerce-loop-product__title, .price) {
	color: inherit;
}

.prowp-homepage .prowp-card-image-wrap,
.prowp-homepage .prowp-no-image {
	background: var(--prowp-color-surface-alt, var(--prowp-bg-soft));
}

.prowp-homepage .prowp-card-image-wrap img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.prowp-homepage__section:not(.prowp-homepage__section--full-bleed) > :where(
	.prowp-container,
	.prowp-homepage__custom-content,
	.prowp-newsletter,
	.prowp-carousel
) {
	inline-size: min(100%, var(--prowp-container-width, 1440px));
	margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
	.prowp-homepage *,
	.prowp-homepage *::before,
	.prowp-homepage *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

.prowp-homepage ul.products.prowp-homepage__grid {
  list-style: none;
  margin-block: 0;
  margin-inline: 0;
}

.prowp-homepage ul.products.prowp-homepage__grid li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

.prowp-homepage__grid--cols-1 { --prowp-grid-cols-fallback: 1; }
.prowp-homepage__grid--cols-2 { --prowp-grid-cols-fallback: 2; }
.prowp-homepage__grid--cols-3 { --prowp-grid-cols-fallback: 3; }
.prowp-homepage__grid--cols-4 { --prowp-grid-cols-fallback: 4; }
.prowp-homepage__grid--cols-5 { --prowp-grid-cols-fallback: 5; }
.prowp-homepage__grid--cols-6 { --prowp-grid-cols-fallback: 6; }

@media (max-width: 1023px) {
	.prowp-homepage__grid {
		grid-template-columns: repeat(var(--prowp-section-cols-tablet, 2), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.prowp-homepage__grid {
		grid-template-columns: repeat(var(--prowp-section-cols-mobile, 1), minmax(0, 1fr));
	}

  .prowp-homepage__grid--categories {
    gap: var(--prowp-category-gap-mobile, var(--prowp-category-gap, var(--prowp-homepage-gap)));
  }

}

@media (max-width: 479px) {
	.prowp-homepage__grid { min-width: 0; }
}

.prowp-homepage__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* Homepage product sections — list / row layout (image beside content). */
.prowp-homepage ul.products.prowp-homepage__product-list {
  list-style: none;
  margin-block: 0;
  margin-inline: 0;
  padding-inline: clamp(1rem, 3vw, 2rem);
  display: grid;
  gap: var(--prowp-homepage-gap, var(--prowp-card-spacing, 1.25rem));
}

.prowp-homepage ul.products.prowp-homepage__product-list--cols-1 {
  grid-template-columns: minmax(0, 1fr);
}

.prowp-homepage ul.products.prowp-homepage__product-list--cols-2 {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .prowp-homepage--product-layout-list-2col ul.products.prowp-homepage__product-list--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.prowp-homepage--product-layout-list ul.products.prowp-homepage__product-list > li.product:not(.prowp-carousel__slide),
.prowp-homepage--product-layout-list-2col ul.products.prowp-homepage__product-list > li.product:not(.prowp-carousel__slide) {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(112px, 220px) minmax(0, 1fr) !important;
  gap: var(--woo-space-4, 1rem);
  align-items: center;
}

.prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide),
.prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) {
  display: grid !important;
  grid-template-columns: minmax(112px, 220px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: var(--woo-space-4, 1rem) !important;
  height: auto !important;
}

.prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide):hover,
.prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide):focus-within,
.prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide):hover,
.prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide):focus-within {
  transform: none !important;
}

.prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide) .prowp-card-image-wrap,
.prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) .prowp-card-image-wrap {
  aspect-ratio: 1;
  border-radius: var(--woo-radius-md, 0.75rem);
  overflow: hidden;
}

.prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide) .astra-shop-summary-wrap,
.prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide) .prowp-card-content,
.prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) .astra-shop-summary-wrap,
.prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) .prowp-card-content {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--woo-space-2, 0.5rem) var(--woo-space-4, 1rem) !important;
  padding: var(--woo-space-3, 0.75rem) var(--woo-space-4, 1rem) !important;
}

.prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide) .prowp-product-title,
.prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide) h2.woocommerce-loop-product__title,
.prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) .prowp-product-title,
.prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) h2.woocommerce-loop-product__title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide) .prowp-card-price,
.prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide) .price,
.prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) .prowp-card-price,
.prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) .price {
  flex: 0 0 auto !important;
  margin-inline-start: auto;
}

.prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide) .prowp-card__actions:not(.prowp-card__actions--below-media),
.prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) .prowp-card__actions:not(.prowp-card__actions--below-media) {
  display: none !important;
}

.prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide) a.add_to_cart_button,
.prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide) .button.product_type_simple,
.prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) a.add_to_cart_button,
.prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) .button.product_type_simple {
  flex: 0 0 auto !important;
}

@media (max-width: 640px) {
  .prowp-homepage--product-layout-list ul.products.prowp-homepage__product-list > li.product:not(.prowp-carousel__slide),
  .prowp-homepage--product-layout-list-2col ul.products.prowp-homepage__product-list > li.product:not(.prowp-carousel__slide),
  .prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide),
  .prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: var(--woo-space-3, 0.75rem) !important;
  }
}

/* RTL: image on inline-end when dir=rtl (logical properties keep gap correct). */
[dir="rtl"] .prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide) .prowp-card-price,
[dir="rtl"] .prowp-homepage--product-layout-list .prowp-product-card:not(.prowp-carousel__slide) .price,
[dir="rtl"] .prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) .prowp-card-price,
[dir="rtl"] .prowp-homepage--product-layout-list-2col .prowp-product-card:not(.prowp-carousel__slide) .price {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* Product carousels (Best Sellers etc.): always vertical cards (image on top).
   Never inherit archive list-row or homepage list-layout chrome onto slides. */
.prowp-homepage-products-carousel ul.products.prowp-carousel__track > li.product.prowp-product-card,
.prowp-homepage--products-carousel .prowp-homepage-products-carousel ul.products > li.product.prowp-product-card,
.prowp-homepage ul.products.prowp-carousel__track > li.product.prowp-product-card,
.related.products ul.products.prowp-carousel__track > li.product.prowp-product-card,
.upsells.products ul.products.prowp-carousel__track > li.product.prowp-product-card,
.up-sells ul.products.prowp-carousel__track > li.product.prowp-product-card,
.cross-sells ul.products.prowp-carousel__track > li.product.prowp-product-card,
.prowp-recommendation-carousel ul.products.prowp-carousel__track > li.product.prowp-product-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  gap: 0 !important;
  height: auto !important;
}

.prowp-homepage-products-carousel ul.products.prowp-carousel__track > li.product .astra-shop-summary-wrap,
.prowp-homepage-products-carousel ul.products.prowp-carousel__track > li.product .prowp-card-content,
.prowp-homepage--products-carousel .prowp-homepage-products-carousel ul.products > li.product .astra-shop-summary-wrap,
.prowp-homepage--products-carousel .prowp-homepage-products-carousel ul.products > li.product .prowp-card-content,
.prowp-homepage ul.products.prowp-carousel__track > li.product .astra-shop-summary-wrap,
.prowp-homepage ul.products.prowp-carousel__track > li.product .prowp-card-content,
.related.products ul.products.prowp-carousel__track > li.product .astra-shop-summary-wrap,
.upsells.products ul.products.prowp-carousel__track > li.product .astra-shop-summary-wrap,
.up-sells ul.products.prowp-carousel__track > li.product .astra-shop-summary-wrap,
.cross-sells ul.products.prowp-carousel__track > li.product .astra-shop-summary-wrap,
.prowp-recommendation-carousel ul.products.prowp-carousel__track > li.product .astra-shop-summary-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

.prowp-homepage-products-carousel ul.products.prowp-carousel__track > li.product .astra-shop-thumbnail-wrap,
.prowp-homepage--products-carousel .prowp-homepage-products-carousel ul.products > li.product .astra-shop-thumbnail-wrap,
.prowp-homepage ul.products.prowp-carousel__track > li.product .astra-shop-thumbnail-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* Hero + announcement — full-bleed viewport breakout (same pattern as .prowp-header).
   Section breaks out of theme/homepage containers; frame/bg is edge-to-edge.
   Content insets use --prowp-hero-container-pad to align with .prowp-container. */
.prowp-homepage {
  --prowp-hero-edge: max(1rem, env(safe-area-inset-left));
  --prowp-hero-container-pad: max(1rem, env(safe-area-inset-left));
}

@media (min-width: 768px) {
  .prowp-homepage {
    --prowp-hero-edge: 1.5rem;
    --prowp-hero-container-pad: calc((100vw - min(100vw, var(--prowp-container, 1320px))) / 2 + 1.5rem);
  }
}

.prowp-homepage__section--hero.prowp-homepage__section--full-bleed,
.prowp-homepage__section--announcement.prowp-homepage__section--full-bleed {
  padding-inline: 0;
  padding-block: 0;
  max-width: none;
  width: 100%;
  margin-inline: 0;
  overflow: visible;
  box-sizing: border-box;
}

/* Hero media owns the surface; announcement still honors CSF --prowp-section-bg. */
.prowp-homepage__section--hero.prowp-homepage__section--full-bleed {
  background-color: transparent !important;
}

.prowp-homepage__section--announcement.prowp-homepage__section--full-bleed {
  background-color: var(--prowp-section-bg, transparent);
}

.prowp-homepage__section--hero > .prowp-hero,
.prowp-homepage__section--announcement > .prowp-announcement {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  border-radius: 0;
}

@media (max-width: 767px) {
  .prowp-homepage__section--hero.prowp-homepage__section--full-bleed,
  .prowp-homepage__section--announcement.prowp-homepage__section--full-bleed {
    width: 100%;
    margin-inline: 0;
  }

  .prowp-homepage {
    --prowp-hero-container-pad: max(1rem, env(safe-area-inset-left));
  }
}
.prowp-homepage__section--hero .prowp-hero__viewport,
.prowp-homepage__section--hero .prowp-hero__frame,
.prowp-homepage__section--hero .prowp-hero__picture {
  width: 100%;
  border-radius: 0;
}

.prowp-homepage .prowp-hero {
  position: relative;
}

.prowp-homepage .prowp-hero__viewport {
  overflow: hidden;
}

.prowp-homepage .prowp-hero__track {
  display: flex;
  will-change: transform;
}

.prowp-homepage .prowp-hero__slide {
  flex-shrink: 0;
}

.prowp-homepage .prowp-hero__frame {
  position: relative;
  /* aspect-ratio lives in critical CSS (inc/class-performance.php) so geometry
     is reserved from first paint. Re-declaring here causes desktop CLS ~0.41
     when the deferred builder pack lands after the polish pack. */
  overflow: hidden;
  background: var(--prowp-bg-soft);
}

.prowp-homepage .prowp-hero__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prowp-homepage .prowp-hero__overlay {
  position: absolute;
  inset: 0 !important;
  background: var(--prowp-overlay);
  opacity: var(--prowp-hero-overlay, 0.35);
  pointer-events: none;
}

/* Hero content — vertically centered, respect hero_align (start/center/end)
   for both LTR and RTL via logical properties + the --prowp-hero-align
   variable the server emits. Inline-safe per the storefront (no fixed
   left/right). The horizontal inset uses logical properties + a fluid
   clamp() so it works identically in LTR/RTL and scales responsively. */
.prowp-homepage .prowp-hero__content {
  position: absolute;
  top: 50% !important; /* vertical anchor — wins over theme overrides */
  transform: translateY(-50%);
  /* Horizontal position driven by --prowp-hero-align (start | center | end).
     Logical properties handle RTL automatically. */
  inset-inline: auto;
	direction: inherit;
	inline-size: 42rem;
	max-inline-size: calc(100vw - var(--prowp-hero-container-pad, 1.5rem) - var(--prowp-hero-container-pad, 1.5rem));
	box-sizing: border-box;
	overflow-wrap: anywhere;
  color: var(--prowp-text-on-primary);
  z-index: 1;
  text-align: start;
}
/* Per-alignment horizontal placement. Logical properties mirror naturally:
   start follows the reading start (left in LTR, right in RTL), while end
   follows the opposite edge. Text alignment remains at the reading start. */
.prowp-homepage .prowp-hero--align-start .prowp-hero__content {
  inset-inline-start: var(--prowp-hero-container-pad);
  inset-inline-end: auto;
}
.prowp-homepage .prowp-hero--align-center .prowp-hero__content {
  /* Bulletproof centering: stretch the box across the full frame inline axis
     (inset-inline:0), cap its size with max-width, and let auto margins do the
     horizontal centering. This avoids the fragile `inset-inline-start:50%` +
     `width:100%` + `translate(-50%)` combo, which breaks when competing
     max-width rules shrink the box (translate(-50%) then shifts by half the
     shrunk width, pushing content off-screen in both LTR and RTL). margin:auto
     on an absolutely-positioned element centers correctly within inset:0 and
     is fully logical-property safe (mirrors in RTL). */
  inset-inline: 0;
  margin-inline: auto;
  transform: translateY(-50%);
  width: fit-content;
  max-width: min(48rem, calc(100% - var(--prowp-hero-container-pad, 1.5rem) - var(--prowp-hero-container-pad, 1.5rem)));
  text-align: center;
}
.prowp-homepage .prowp-hero--align-end .prowp-hero__content {
  inset-inline-end: var(--prowp-hero-container-pad);
  inset-inline-start: auto;
  text-align: start;
}
/* When the frame is very short (e.g. `auto`/`sm` height) the centered
   vertical position can clip the content — anchor to the bottom inset
   instead. */
@media (max-height: 480px) {
  .prowp-homepage .prowp-hero__content {
    top: auto;
    inset-block-end: clamp(1rem, 4vw, 2rem);
    transform: none;
  }
  .prowp-homepage .prowp-hero--align-center .prowp-hero__content {
    /* Bottom-anchored centering keeps the margin-inline:auto model from the
       base align-center rule (no translate(-50%) needed). */
    transform: none;
  }
}
/* On narrow viewports drop the centered max-width and use full-bleed so
   the heading + CTAs never clip. */
@media (max-width: 768px) {
  .prowp-homepage .prowp-hero__content {
    top: 50%;
    inset-inline-start: 1rem;
    inset-inline-end: 1rem;
    transform: translateY(-50%);
		inline-size: auto;
		width: auto;
    max-width: none;
  }
  /* align-center on mobile: keep the margin-inline:auto centering model
     (inset-inline:0 from the base center rule is overridden to 1rem here,
     so restore full inset + auto margin to keep copy centered). */
  .prowp-homepage .prowp-hero--align-center .prowp-hero__content {
    inset-inline: 1rem;
		inline-size: auto;
		width: auto;
		margin-inline: 0;
    transform: translateY(-50%);
    text-align: center;
  }

	.prowp-homepage .prowp-hero__heading,
	.prowp-homepage .prowp-hero__text {
		inline-size: 100%;
		max-inline-size: 100%;
		box-sizing: border-box;
	}
}

.prowp-homepage .prowp-hero__heading {
	font-size: clamp(2rem, calc(1.65rem + 1.8vw), 3.5rem);
  color: var(--prowp-text-on-primary);
	margin: 0 0 1rem;
	line-height: 1.18;
	letter-spacing: normal;
	font-weight: 800;
	max-inline-size: min(42rem, 100%);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.prowp-homepage .prowp-hero__text {
	font-size: clamp(1rem, calc(0.95rem + 0.25vw), 1.125rem);
	margin: 0 0 2rem;
  opacity: 0.95;
	line-height: 1.65;
	max-inline-size: min(36rem, 100%);
	text-wrap: pretty;
	overflow-wrap: anywhere;
}

.prowp-homepage .prowp-btn,
.prowp-homepage .prowp-hero__btn,
.prowp-homepage .prowp-homepage-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 1.5rem;
  border-radius: var(--prowp-radius-pill, 999px);
  background: var(--prowp-primary);
  color: var(--prowp-text-on-primary);
  text-decoration: none;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.prowp-homepage .prowp-hero__btn:hover,
.prowp-homepage .prowp-hero__btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.prowp-homepage .prowp-btn:focus-visible,
.prowp-homepage .prowp-carousel:focus-visible,
.prowp-homepage .prowp-carousel__btn:focus-visible,
.prowp-homepage .prowp-carousel__dot:focus-visible {
  outline: 2px solid var(--prowp-primary);
  outline-offset: 2px;
}

.prowp-homepage .prowp-carousel__controls:not(.prowp-homepage-banners-carousel__controls--overlay) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding-block: 0.75rem;
}

.prowp-homepage .prowp-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--prowp-color-border, var(--prowp-border));
  background-color: var(--prowp-color-surface, var(--prowp-surface, var(--prowp-bg)));
  color: var(--prowp-color-text, var(--prowp-text, #1a1a1a));
  border-radius: var(--prowp-button-radius, 8px);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Global img/svg/video resets (theme preflight) collapse inline SVG to 0×0 inside flex buttons. */
.prowp-homepage .prowp-carousel__btn svg {
  width: var(--prowp-carousel-icon-size, 1.25rem);
  height: var(--prowp-carousel-icon-size, 1.25rem);
  max-width: none;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  display: block;
  pointer-events: none;
}

.prowp-homepage .prowp-carousel__btn:hover,
.prowp-homepage .prowp-carousel__btn:focus-visible {
  background-color: var(--prowp-color-primary, var(--prowp-primary));
  color: var(--prowp-color-on-primary, var(--prowp-on-primary, var(--prowp-text-on-primary, #ffffff)));
  border-color: var(--prowp-color-primary, var(--prowp-primary));
  box-shadow: 0 4px 12px color-mix(in oklch, var(--prowp-color-primary, var(--prowp-primary)) 22%, transparent);
}

.prowp-homepage .prowp-carousel__btn:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(
    --prowp-primary-hover,
    color-mix(in oklch, var(--prowp-color-primary, var(--prowp-primary)) 86%, #000)
  );
  color: var(--prowp-color-on-primary, var(--prowp-on-primary, var(--prowp-text-on-primary, #ffffff)));
  border-color: var(--prowp-primary-hover, var(--prowp-color-primary, var(--prowp-primary)));
}

/* A dimmed icon-only 44px button reads as "broken" as easily as "disabled" —
   this end-of-track / start-of-track state must be unmistakable at a glance,
   not just slightly faded, so a visitor never mistakes "no more slides" for
   "the arrow doesn't work". Touch target, aria-disabled/disabled semantics,
   and position are untouched — only the visual treatment strengthens. */
.prowp-homepage .prowp-carousel__btn:disabled,
.prowp-homepage .prowp-carousel__btn[aria-disabled="true"] {
  opacity: 0.32;
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--prowp-color-surface, var(--prowp-surface, var(--prowp-bg)));
  border-color: var(--prowp-color-border, var(--prowp-border));
  color: var(--prowp-text-muted, #94a3b8);
  box-shadow: none;
  filter: saturate(0.5);
}

@media (prefers-reduced-motion: reduce) {
  .prowp-homepage .prowp-carousel__btn {
    transition: none;
  }
}

.prowp-homepage .prowp-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0;
  padding: 0;
  list-style: none;
}

.prowp-homepage .prowp-carousel__dot {
  width: 8px;
  height: 8px;
  min-width: 0;
  min-height: 0;
  padding: 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
}

.prowp-homepage .prowp-carousel__dot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--prowp-border, #d1d5db);
  transition: transform 0.2s ease, background 0.2s ease;
}

.prowp-homepage .prowp-carousel__dot.is-active::after,
.prowp-homepage .prowp-carousel__dot[aria-selected="true"]::after {
  background: var(--prowp-primary);
  transform: scale(1.25);
}

.prowp-homepage .prowp-carousel__dots--pills .prowp-carousel__dot {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

.prowp-homepage .prowp-carousel__dots--pills .prowp-carousel__dot::after {
  display: none;
}

.prowp-homepage .prowp-carousel__dots--pills .prowp-carousel__dot {
  font-size: var(--prowp-text-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--prowp-text-muted, #64748b);
  background: color-mix(in srgb, var(--prowp-border, #d1d5db) 35%, transparent);
}

.prowp-homepage .prowp-carousel__dots--pills .prowp-carousel__dot.is-active,
.prowp-homepage .prowp-carousel__dots--pills .prowp-carousel__dot[aria-selected="true"] {
  color: var(--prowp-text-on-primary, #fff);
  background: var(--prowp-primary);
}

.prowp-homepage .prowp-carousel__dots--bars .prowp-carousel__dot::after {
  width: 20px;
  height: 4px;
  margin: -2px 0 0 -10px;
  border-radius: 999px;
}

.prowp-homepage .prowp-carousel__dots--bars .prowp-carousel__dot.is-active::after,
.prowp-homepage .prowp-carousel__dots--bars .prowp-carousel__dot[aria-selected="true"]::after {
  width: 28px;
  margin-inline-start: -14px;
  transform: none;
}

/* Categories — unified viewport (single markup, responsive grid/carousel) */
.prowp-homepage-categories__inner {
  max-width: var(--prowp-container-max, 1280px);
  margin-inline: auto;
  padding-inline: var(--prowp-gutter, 1.25rem);
}

.prowp-homepage-categories__viewport {
  position: relative;
  width: 100%;
}

.prowp-homepage-categories__viewport .prowp-carousel__track-wrap {
  width: 100%;
}

.prowp-homepage-categories__viewport.is-carousel-active .prowp-carousel__track-wrap {
  overflow: hidden;
}

.prowp-homepage-categories__viewport.is-grid-active .prowp-carousel__track-wrap {
  overflow: visible;
}

.prowp-homepage-categories__viewport.is-grid-active .prowp-homepage-categories__track {
  display: grid !important;
  grid-template-columns: repeat(var(--prowp-cat-cols, 4), minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  transform: none !important;
  transition: none !important;
  flex-wrap: wrap !important;
  overflow: visible;
}

@media (max-width: 1024px) {
  .prowp-homepage-categories__viewport.is-grid-active .prowp-homepage-categories__track {
    grid-template-columns: repeat(var(--prowp-cat-cols-tablet, 3), minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .prowp-homepage-categories__viewport.is-grid-active .prowp-homepage-categories__track {
    grid-template-columns: repeat(var(--prowp-cat-cols-mobile, 2), minmax(0, 1fr));
  }
}

/* Layout modifiers also drive the unified track (no JS required for desktop grid). */
.prowp-homepage-categories--layout-grid .prowp-homepage-categories__track,
.prowp-homepage-categories--layout-hybrid .prowp-homepage-categories__track {
  display: grid;
  grid-template-columns: repeat(var(--prowp-cat-cols, 4), minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  overflow: visible;
}

.prowp-homepage-categories--layout-hybrid .prowp-homepage-categories__viewport.is-carousel-active .prowp-homepage-categories__track,
.prowp-homepage-categories--layout-carousel .prowp-homepage-categories__viewport.is-carousel-active .prowp-homepage-categories__track,
.prowp-homepage-categories--layout-desktop-carousel .prowp-homepage-categories__viewport.is-carousel-active .prowp-homepage-categories__track {
  display: flex !important;
  grid-template-columns: unset !important;
}

@media (max-width: 1024px) {
  .prowp-homepage-categories--layout-grid .prowp-homepage-categories__track,
  .prowp-homepage-categories--layout-hybrid .prowp-homepage-categories__track {
    grid-template-columns: repeat(var(--prowp-cat-cols-tablet, 3), minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .prowp-homepage-categories--layout-grid .prowp-homepage-categories__track,
  .prowp-homepage-categories--layout-hybrid .prowp-homepage-categories__track {
    grid-template-columns: repeat(var(--prowp-cat-cols-mobile, 2), minmax(0, 1fr));
  }
}

.prowp-homepage-categories__viewport.is-grid-active .prowp-homepage-categories__slide {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: initial !important;
}

.prowp-homepage-categories__viewport.is-grid-active .prowp-carousel__controls {
  display: none !important;
}

.prowp-homepage-categories__viewport.is-carousel-active .prowp-carousel__controls:not([hidden]) {
  display: flex;
}

/* Legacy dual-markup wrappers (cached pages) — keep one visible per breakpoint */
.prowp-homepage-categories--layout-grid .prowp-homepage-categories__grid-wrap,
.prowp-homepage-categories--layout-hybrid .prowp-homepage-categories__grid-wrap {
  display: grid;
  grid-template-columns: repeat(var(--prowp-cat-cols, 4), minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  overflow: visible;
}

@media (max-width: 1024px) {
  .prowp-homepage-categories--layout-grid .prowp-homepage-categories__grid-wrap,
  .prowp-homepage-categories--layout-hybrid .prowp-homepage-categories__grid-wrap {
    grid-template-columns: repeat(var(--prowp-cat-cols-tablet, 3), minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .prowp-homepage-categories--layout-grid .prowp-homepage-categories__grid-wrap,
  .prowp-homepage-categories--layout-hybrid .prowp-homepage-categories__grid-wrap {
    grid-template-columns: repeat(var(--prowp-cat-cols-mobile, 2), minmax(0, 1fr));
  }
}

.prowp-homepage-categories--layout-hybrid .prowp-homepage-categories__grid-wrap {
  display: none !important;
}

.prowp-homepage-categories--layout-hybrid .prowp-homepage-categories__carousel-wrap {
  display: block;
}

@media (min-width: 768px) {
  .prowp-homepage-categories--layout-hybrid .prowp-homepage-categories__grid-wrap {
    display: grid !important;
  }

  .prowp-homepage-categories--layout-hybrid .prowp-homepage-categories__carousel-wrap {
    display: none !important;
  }
}

.prowp-homepage-categories--layout-grid .prowp-homepage-categories__carousel-wrap {
  display: none;
}

.prowp-homepage-categories--layout-carousel .prowp-homepage-categories__grid-wrap {
  display: none;
}

/* Desktop carousel + mobile grid (inverse of hybrid). */
.prowp-homepage-categories--layout-desktop-carousel .prowp-homepage-categories__carousel-wrap {
  display: block;
}

.prowp-homepage-categories--layout-desktop-carousel .prowp-homepage-categories__grid-wrap {
  display: none;
}

@media (max-width: 767px) {
  .prowp-homepage-categories--layout-desktop-carousel .prowp-homepage-categories__carousel-wrap {
    display: none !important;
  }

  .prowp-homepage-categories--layout-desktop-carousel .prowp-homepage-categories__grid-wrap {
    display: grid !important;
    grid-template-columns: repeat(var(--prowp-cat-cols-mobile, 2), minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .prowp-homepage-categories--layout-desktop-carousel .prowp-homepage-categories__grid-wrap {
    display: none !important;
  }

  .prowp-homepage-categories--layout-desktop-carousel .prowp-homepage-categories__carousel-wrap {
    display: block !important;
  }
}

.prowp-homepage-categories__grid-wrap.prowp-homepage__grid--categories {
  width: 100%;
}

.prowp-homepage-category__thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--prowp-bg-soft, #f8fafc);
  width: min(100%, 7.5rem);
  max-inline-size: 7.5rem;
  margin-inline: auto;
}

.prowp-homepage-category__thumb img,
.prowp-homepage-category__thumb .prowp-term-thumb {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* Full-bleed media for overlay / spotlight featured cards */
.prowp-category-card--style-overlay .prowp-homepage-category__thumb,
.prowp-category-card--spotlight-featured .prowp-homepage-category__thumb,
.prowp-category-card--style-editorial .prowp-homepage-category__thumb {
  width: 100%;
  max-inline-size: none;
  margin-inline: 0;
}

.prowp-homepage-category__thumb-inner {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.prowp-homepage-categories__count,
.prowp-homepage-category__count {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0.2rem 0.4rem;
  font-size: var(--prowp-text-xs, 0.75rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  /* Brand gold square + dark ink (AA). */
  background: var(--prowp-cat-badge-bg, var(--prowp-brand-accent, var(--prowp-color-accent, var(--prowp-primary))));
  color: var(--prowp-cat-badge-ink, var(--prowp-brand-dark, #0a0a0a));
  border-radius: var(--prowp-card-badge-radius, 4px);
  border: 0;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--prowp-brand-dark, #000) 18%, transparent);
  font-variant-numeric: tabular-nums;
}

/*
 * Count badge — always INSIDE the card media (top trailing corner).
 * Uses logical inset so RTL/LTR both land on the trailing edge.
 * Circular apex pill is handled separately below.
 */
.prowp-category-card--count-badge-bottom:not(.prowp-category-card--style-circular) .prowp-homepage-category__count,
.prowp-category-card--count-badge-start:not(.prowp-category-card--style-circular) .prowp-homepage-category__count,
.prowp-category-card--count-badge-overlay .prowp-homepage-category__count,
.prowp-category-card--count-badge-end .prowp-homepage-category__count {
  inset-block-start: var(--prowp-card-badge-inset, 12px);
  inset-block-end: auto;
  inset-inline-start: auto;
  inset-inline-end: var(--prowp-card-badge-inset, 12px);
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  transform: none;
  z-index: 4;
}

/* Circular only: apex pill may sit on the circle rim (overflow visible). */
.prowp-category-card--style-circular.prowp-category-card--count-badge-bottom .prowp-homepage-category__count,
.prowp-category-card--style-circular.prowp-category-card--count-badge-start .prowp-homepage-category__count,
.prowp-category-card--style-circular .prowp-homepage-category__count {
  top: 0;
  bottom: auto;
  left: auto;
  right: auto;
  inset-inline: auto;
  inset-inline-start: 50%;
  inset-block-start: 0;
  transform: translate(-50%, -50%);
}

[dir="rtl"] .prowp-category-card--style-circular.prowp-category-card--count-badge-bottom .prowp-homepage-category__count,
[dir="rtl"] .prowp-category-card--style-circular.prowp-category-card--count-badge-start .prowp-homepage-category__count,
[dir="rtl"] .prowp-category-card--style-circular .prowp-homepage-category__count {
  transform: translate(50%, -50%);
}

.prowp-category-card--style-circular {
  overflow: visible;
}

.prowp-category-card--style-circular .prowp-homepage-category__thumb {
  overflow: visible;
}

/* Non-circular cards: never let the badge escape the media box. */
.prowp-category-card--count-badge-bottom:not(.prowp-category-card--style-circular),
.prowp-category-card--count-badge-start:not(.prowp-category-card--style-circular),
.prowp-category-card--count-badge-overlay:not(.prowp-category-card--style-circular),
.prowp-category-card--count-badge-end:not(.prowp-category-card--style-circular) {
  overflow: hidden;
}

.prowp-category-card--count-badge-bottom:not(.prowp-category-card--style-circular) .prowp-homepage-category__thumb,
.prowp-category-card--count-badge-start:not(.prowp-category-card--style-circular) .prowp-homepage-category__thumb,
.prowp-category-card--count-badge-overlay:not(.prowp-category-card--style-circular) .prowp-homepage-category__thumb,
.prowp-category-card--count-badge-end:not(.prowp-category-card--style-circular) .prowp-homepage-category__thumb {
  overflow: hidden;
  position: relative;
}

.prowp-category-card--style-circular .prowp-homepage-category__thumb {
  overflow: visible;
  padding-block-start: 0.75rem;
  padding-block-end: 0;
}

.prowp-category-card--style-circular .prowp-homepage-category__thumb-inner {
  border-radius: 50%;
}

/* Grid/overlay cards only — circular icons use fixed token sizes above. */
.prowp-homepage-category:not(.prowp-category-card--style-circular) .prowp-homepage-category__thumb img {
  width: 100%;
  max-width: none;
  height: 100%;
  border-radius: calc(var(--prowp-card-radius, 12px) * 0.5);
  object-fit: cover;
}

.prowp-homepage-categories__controls {
  margin-block-start: 1.25rem;
}

/* Categories — cards */
.prowp-homepage-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--prowp-space-2, 0.5rem);
  padding: var(--prowp-space-4, 1rem);
  border: 1px solid var(--prowp-border);
  border-radius: var(--prowp-card-radius, 12px);
  background: var(--prowp-bg);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
}

.prowp-homepage-categories__viewport.is-carousel-active .prowp-homepage-categories__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--prowp-category-gap-mobile, var(--prowp-category-gap, var(--prowp-homepage-gap)));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Categories carousel — flex track (beats organic-farm shell grid rules). */
.prowp-homepage-categories__viewport.is-carousel-active .prowp-homepage-categories__track.prowp-carousel__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-auto-flow: unset !important;
  grid-auto-columns: unset !important;
  grid-template-columns: none !important;
}

.prowp-homepage-categories__viewport.is-carousel-active .prowp-homepage-categories__slide {
  /* carousel.js sets --prowp-slide-basis from data-prowp-carousel + viewport width */
  flex: 0 0 var(--prowp-slide-basis, auto);
  flex-shrink: 0;
  min-width: 0;
}

.prowp-homepage-categories__viewport.is-carousel-active .prowp-homepage-categories__slide > .prowp-homepage-category {
  height: 100%;
}

.prowp-homepage-categories__viewport.is-carousel-active .prowp-carousel__track-wrap {
  overflow: hidden;
  padding-inline: clamp(var(--prowp-space-4, 1rem), 3vw, var(--prowp-space-8, 2rem));
}

.prowp-homepage-categories__controls {
  margin-block-start: var(--prowp-space-3, 0.75rem);
}

.prowp-homepage-categories__carousel--has-dots .prowp-homepage-categories__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 44px;
  padding-block: 0.75rem;
}

.prowp-homepage-categories__carousel--has-dots:not(.prowp-homepage-categories__carousel--has-arrows) .prowp-carousel__dots {
  margin-inline: auto;
}

.prowp-homepage-categories__carousel .prowp-carousel__dots {
  flex: 0 1 auto;
  min-height: 44px;
}

/* Keep pagination in document flow after the complete category cards.
 * Arrow controls may overlay the image rail, but dots must never share that
 * absolute layer or appear between a category image and its title. */
.prowp-homepage-categories__pagination {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-block-start: var(--prowp-space-3, 0.75rem);
  padding-block: var(--prowp-space-1, 0.25rem);
  clear: both;
}

.prowp-homepage-categories__pagination .prowp-carousel__dots {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 auto;
  pointer-events: auto;
}

/* Cached pre-1.1 markup placed dots inside the absolute arrow overlay.
 * Keep that markup usable until page caches expire: return the wrapper to
 * flow, then independently overlay only its arrow buttons. */
.prowp-homepage-categories__controls:not(.prowp-homepage-categories__arrow-controls):has(.prowp-carousel__dots) {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  margin: var(--prowp-space-3, 0.75rem) 0 0 !important;
  padding-block: var(--prowp-space-1, 0.25rem) !important;
  transform: none !important;
  justify-content: center !important;
  pointer-events: none;
}

.prowp-homepage-categories__controls:not(.prowp-homepage-categories__arrow-controls):has(.prowp-carousel__dots) .prowp-carousel__btn {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
}

.prowp-homepage-categories__controls:not(.prowp-homepage-categories__arrow-controls):has(.prowp-carousel__dots) .prowp-carousel__btn--prev {
  inset-inline-start: var(--prowp-space-2, 0.5rem);
}

.prowp-homepage-categories__controls:not(.prowp-homepage-categories__arrow-controls):has(.prowp-carousel__dots) .prowp-carousel__btn--next {
  inset-inline-end: var(--prowp-space-2, 0.5rem);
}

.prowp-homepage-categories__controls:not(.prowp-homepage-categories__arrow-controls):has(.prowp-carousel__dots) .prowp-carousel__dots {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin-inline: auto;
  pointer-events: auto;
}

.prowp-homepage-categories__pagination:has(.prowp-carousel__dots.is-hidden),
.prowp-homepage-categories__pagination:has(.prowp-carousel__dots[aria-hidden="true"]) {
  display: none;
}

.prowp-homepage-categories--grid-only .prowp-homepage__grid--categories,
.prowp-homepage-categories--mobile-carousel .prowp-homepage__grid--categories {
  gap: var(--prowp-category-gap, var(--prowp-homepage-gap));
}

.prowp-homepage-category__thumb img {
  width: 100%;
  max-width: none;
  height: 100%;
  border-radius: calc(var(--prowp-card-radius, 12px) * 0.5);
  object-fit: cover;
}

.prowp-homepage-category__name {
  font-weight: 600;
  text-align: center;
}

.prowp-homepage-category__count {
  font-size: var(--prowp-text-xs, 0.75rem);
  color: var(--prowp-cat-badge-ink, var(--prowp-brand-dark, #0a0a0a));
}

.prowp-homepage__list .prowp-homepage-category {
  flex-direction: row;
  justify-content: flex-start;
}

/* Product cards */
.prowp-homepage-product-card {
  position: relative;
  border: 1px solid var(--prowp-border);
  border-radius: var(--prowp-card-radius, 12px);
  overflow: hidden;
  background: var(--prowp-bg);
  display: flex;
  flex-direction: column;
}

.prowp-homepage-product-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.prowp-homepage-product-card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--prowp-bg-soft);
}

.prowp-homepage-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prowp-homepage-product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.prowp-homepage-product-card__title {
  font-size: 1rem;
  margin: 0.75rem 1rem 0.25rem;
}
.prowp-homepage-product-card__title a {
  color: inherit;
  text-decoration: none;
}
.prowp-homepage-product-card__title a:hover {
  color: var(--prowp-primary);
}

.prowp-homepage-product-card__price {
  margin: 0 1rem 1rem;
  color: var(--prowp-primary);
  font-weight: 600;
}

/* Action buttons inside homepage cards reuse the shared
   .prowp-card__actions / .prowp-card__action-btn styles. In below-media mode
   the row sits at the bottom of the card body; nudge the price margin so the
   divider reads cleanly. */
.prowp-homepage-product-card .prowp-card__actions--below-media {
  margin-inline: 1rem;
  margin-block-end: 1rem;
}
.prowp-homepage-product-card__body > .prowp-card__actions--below-media + .prowp-homepage-product-card__price,
.prowp-homepage-product-card__price:has(+ .prowp-card__actions--below-media) {
  margin-block-end: 0.5rem;
}

/* Homepage overlay action bar — flush to card edges (shop/archive unchanged). */
body.home.woo-premium-ui .prowp-homepage .prowp-product-card .prowp-card__actions:not(.prowp-card__actions--below-media),
.prowp-homepage.woo-premium-ui .prowp-product-card .prowp-card__actions:not(.prowp-card__actions--below-media) {
  padding-inline: 0 !important;
}

/* Banners — count-aware grid (edge-to-edge; gap only between tiles) */
.prowp-homepage__section--banners {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-x: clip;
  box-sizing: border-box;
}
.prowp-homepage-banners {
  display: grid;
  gap: var(--prowp-banner-gap);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-inline: 0;
  margin-inline: 0;
  box-sizing: border-box;
}
.prowp-homepage-banners--count-1 {
  grid-template-columns: minmax(0, 1fr);
}
.prowp-homepage-banners--count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.prowp-homepage-banners--count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.prowp-homepage-banners--count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.prowp-homepage-banners--count-1 .prowp-homepage-banner {
  width: 100%;
  min-width: 0;
}
@media (max-width: 767px) {
  .prowp-homepage-banners--count-2,
  .prowp-homepage-banners--count-3,
  .prowp-homepage-banners--count-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .prowp-homepage-banners--count-3,
  .prowp-homepage-banners--count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .prowp-homepage-banners--count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Banners — reserved aspect box + absolute cover media (CLS-safe) */
.prowp-homepage-banner {
  --prowp-banner-content-safe-inline: clamp(1rem, 4vw, 2.5rem);
  --prowp-banner-content-safe-block: clamp(1rem, 4vw, 2.5rem);
  --prowp-banner-control-size: 44px;
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: var(--prowp-card-radius);
  background: linear-gradient(135deg, var(--prowp-color-primary-soft) 0%, var(--prowp-toolbar-bg-soft) 100%);
  box-shadow: var(--prowp-card-shadow);
  overflow: hidden;
  isolation: isolate;
  color: var(--prowp-text-on-primary);
  text-decoration: none;
  aspect-ratio: var(--prowp-banner-aspect-mobile);
  max-height: none;
  transition: box-shadow 280ms var(--prowp-ease-out, ease-out), transform 280ms var(--prowp-ease-out, ease-out);
}
/* Multi-column tiles: product-friendly 4:3 (overridden by CSF aspect presets). */
.prowp-homepage-banners:not(.prowp-homepage-banners--count-1) .prowp-homepage-banner {
  aspect-ratio: var(--prowp-banner-aspect-tile);
}
/* Full-bleed / single promo: soft min/max so ultrawide does not explode height.
 * Image-only graphic banners opt out (intrinsic ratio) below. */
.prowp-homepage-banners--count-1 .prowp-homepage-banner:not(.prowp-homepage-banner--image-only) {
  min-height: var(--prowp-banner-min-height);
  max-height: var(--prowp-banner-max-height);
}
.prowp-homepage__section--banners--aspect-wide .prowp-homepage-banner {
  aspect-ratio: 21 / 9;
}
.prowp-homepage__section--banners--aspect-standard .prowp-homepage-banner {
  aspect-ratio: 16 / 9;
}
.prowp-homepage__section--banners--aspect-compact .prowp-homepage-banner {
  aspect-ratio: 2 / 1;
}
.prowp-homepage-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.prowp-homepage-banner--image-only {
  padding: 0;
  background: color-mix(in srgb, var(--prowp-color-primary-soft, #e8f2ea) 55%, #f7faf7);
  box-shadow: none;
}
.prowp-homepage-banner--image-only:is(a:hover, a:focus-visible) {
  transform: none;
  box-shadow: none;
}
/*
 * Graphic / image-only promos: show the full designed artwork.
 * Intrinsic ratio from img width/height attrs (CLS-safe). Avoid cover-crop
 * from reserved aspect + max-height that cuts off baked-in text/icons.
 */
.prowp-homepage-banner--image-only {
  aspect-ratio: auto;
  min-height: 0;
  max-height: none;
  height: auto;
}
.prowp-homepage-banners--count-1 .prowp-homepage-banner--image-only {
  min-height: 0;
  max-height: none;
}
.prowp-homepage-banner--image-only .prowp-homepage-banner__media {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.prowp-homepage-banner--image-only .prowp-homepage-banner__image {
  position: static;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
/* Mosaic cells keep a fixed area — contain (not cover) so artwork is not cropped. */
.prowp-homepage-banners--layout-mosaic-asymmetric .prowp-homepage-banner--image-only {
  height: 100%;
  max-height: none;
}
.prowp-homepage-banners--layout-mosaic-asymmetric .prowp-homepage-banner--image-only .prowp-homepage-banner__media {
  position: absolute;
  inset: 0;
  height: 100%;
}
.prowp-homepage-banners--layout-mosaic-asymmetric .prowp-homepage-banner--image-only .prowp-homepage-banner__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.prowp-homepage-banner:is(a:hover, a:focus-visible) {
  box-shadow: var(--prowp-card-shadow-hover);
  transform: translateY(-2px);
}
.prowp-homepage-banner__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 360ms var(--prowp-ease-out, ease-out);
}
/*
 * Parallax overflow ONLY when intensity ≠ none.
 * Transform runs on .prowp-homepage-banner__media (wrapper), not the img —
 * some themes neutralize img transforms. Banner clips the moving layer.
 * Image-only keeps object-fit:contain + intrinsic height (no cover crop).
 */
.prowp-banner--parallax {
  overflow: hidden;
}
.prowp-banner--parallax .prowp-homepage-banner__media {
  will-change: transform;
  transform-origin: center center;
}
/* Fixed-background parallax: JS viewport-lock on the media wrapper.
   CSS position:fixed is unreliable here — hero/banner ancestors use
   contain:layout, isolation, and reveal will-change:transform, all of which
   create containing blocks and flatten fixed backgrounds. */
.prowp-banner--parallax-fixed {
  overflow: hidden;
}
.prowp-banner--parallax-fixed:not(.prowp-homepage-banner--image-only) .prowp-homepage-banner__media {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--prowp-banner-parallax-overflow) * -0.65);
  height: calc(100% + var(--prowp-banner-parallax-overflow) * 1.3);
  will-change: transform;
  transform-origin: center center;
}
.prowp-banner--parallax-fixed:not(.prowp-homepage-banner--image-only) .prowp-homepage-banner__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}
/* Image-only + fixed: clip wrapper motion; keep contain + intrinsic height. */
.prowp-banner--parallax-fixed.prowp-homepage-banner--image-only {
  overflow: hidden;
}
.prowp-banner--parallax-fixed.prowp-homepage-banner--image-only .prowp-homepage-banner__media {
  position: relative;
  display: block;
  width: 100%;
  will-change: transform;
  transform-origin: center center;
}
.prowp-banner--parallax-fixed.prowp-homepage-banner--image-only .prowp-homepage-banner__image {
  position: static;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.prowp-banner--parallax:not(.prowp-homepage-banner--image-only) .prowp-homepage-banner__media {
  height: calc(100% + var(--prowp-banner-parallax-overflow));
  top: calc(var(--prowp-banner-parallax-overflow) * -0.5);
}
.prowp-banner--parallax.prowp-homepage-banner--image-only .prowp-homepage-banner__media {
  overflow: hidden;
}
.prowp-banner--parallax.prowp-homepage-banner--image-only .prowp-homepage-banner__image {
  position: static;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.prowp-homepage-banner:not(.prowp-banner--parallax) .prowp-homepage-banner__media,
.prowp-homepage-banner:not(.prowp-banner--parallax) .prowp-homepage-banner__image {
  will-change: auto;
}
.prowp-homepage-banner:not(.prowp-banner--parallax):is(:hover, :focus-within) .prowp-homepage-banner__image {
  transform: scale(1.04);
}
/* Do not zoom/crop graphic banners on hover; keep full artwork readable. */
.prowp-homepage-banner--image-only:not(.prowp-banner--parallax):is(:hover, :focus-within) .prowp-homepage-banner__image {
  transform: none;
}
.prowp-homepage-banner__scrim {
  position: absolute;
  inset: 0;
  background: var(--prowp-banner-scrim);
  pointer-events: none;
  z-index: 1;
}
.prowp-homepage-banner__content {
  position: absolute;
  inset-inline-start: var(--prowp-banner-content-safe-inline);
  inset-inline-end: auto;
  inset-block-end: var(--prowp-banner-content-safe-block);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  z-index: 2;
  box-sizing: border-box;
  width: auto;
  max-width: min(36rem, 88%);
  padding: 0;
  background: transparent;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: start;
}
.prowp-homepage-banner__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.8vw, 2.125rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--prowp-text-on-primary);
  text-shadow: var(--prowp-banner-text-shadow);
}
.prowp-homepage-banner__text {
  margin: 0;
  font-size: clamp(0.9rem, 1.5vw, 1.0625rem);
  line-height: 1.55;
  color: var(--prowp-text-on-primary-muted);
  text-shadow: var(--prowp-banner-text-shadow);
  max-width: 42ch;
}
.prowp-homepage-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-block-start: 0.625rem;
  padding: 0.6rem 1.25rem;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--prowp-color-on-primary, var(--prowp-text-on-primary, #fff));
  background: var(--prowp-color-primary, var(--prowp-primary));
  border: 2px solid transparent;
  border-radius: var(--prowp-radius-pill, 999px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--prowp-color-primary, var(--prowp-primary)) 32%, transparent);
  opacity: 1;
  transition:
    gap 220ms var(--prowp-ease-out, ease-out),
    background-color 220ms ease,
    transform 220ms var(--prowp-ease-out, ease-out),
    box-shadow 220ms ease;
}
.prowp-homepage-banner__cta-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  transition: transform 220ms var(--prowp-ease-out, ease-out);
}
[dir="rtl"] .prowp-homepage-banner__cta-icon {
  transform: scaleX(-1);
}
.prowp-homepage-banner--linked:is(:hover, :focus-visible) .prowp-homepage-banner__cta {
  gap: 0.625rem;
  background: color-mix(in srgb, var(--prowp-color-primary, var(--prowp-primary)) 88%, #000);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--prowp-color-primary, var(--prowp-primary)) 40%, transparent);
}
.prowp-homepage-banner--linked:is(:hover, :focus-visible) .prowp-homepage-banner__cta-icon {
  transform: translateX(2px);
}
[dir="rtl"] .prowp-homepage-banner--linked:is(:hover, :focus-visible) .prowp-homepage-banner__cta-icon {
  transform: scaleX(-1) translateX(2px);
}
.prowp-homepage-banner__scrim--subtle {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--prowp-overlay, rgba(15, 23, 42, 0.85)) 35%, transparent) 0%,
    transparent 55%
  );
}
@media (prefers-reduced-motion: reduce) {
  .prowp-homepage-banner,
  .prowp-homepage-banner__image {
    transition: none;
  }
  .prowp-homepage-banner:is(:hover, :focus-within) .prowp-homepage-banner__image {
    transform: none;
  }
  .prowp-homepage-banner__cta,
  .prowp-homepage-banner__cta-icon {
    transition: none;
  }
}
.prowp-homepage-banner:not(:has(.prowp-homepage-banner__image)) {
  min-height: clamp(11rem, 32vw, 16rem);
  max-height: none;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1rem, 3vw, 1.75rem);
}
.prowp-homepage-banner:not(:has(.prowp-homepage-banner__image)) .prowp-homepage-banner__media {
  display: none;
}
.prowp-homepage-banner:not(:has(.prowp-homepage-banner__image)) .prowp-homepage-banner__content {
  position: static;
  inset: auto;
}
@media (max-width: 640px) {
  .prowp-homepage-banners { gap: var(--prowp-banner-gap); }
  .prowp-homepage__section--banners--aspect-auto .prowp-homepage-banners--count-1 .prowp-homepage-banner {
    aspect-ratio: var(--prowp-banner-aspect-mobile);
  }
  .prowp-homepage__section--banners--aspect-auto .prowp-homepage-banners:not(.prowp-homepage-banners--count-1) .prowp-homepage-banner {
    aspect-ratio: var(--prowp-banner-aspect-tile);
  }
  /* Image-only graphic banners keep intrinsic ratio (CLS via img width/height). */
  .prowp-homepage__section--banners--aspect-auto .prowp-homepage-banner--image-only,
  .prowp-homepage__section--banners--images-only .prowp-homepage-banner--image-only {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .prowp-homepage__section--banners--aspect-auto .prowp-homepage-banners--count-1 .prowp-homepage-banner {
    aspect-ratio: var(--prowp-banner-aspect-tablet);
  }
  .prowp-homepage__section--banners--aspect-auto .prowp-homepage-banners:not(.prowp-homepage-banners--count-1) .prowp-homepage-banner {
    aspect-ratio: var(--prowp-banner-aspect-tile);
  }
}
@media (min-width: 1024px) {
  .prowp-homepage__section--banners--aspect-auto .prowp-homepage-banners--count-1 .prowp-homepage-banner {
    aspect-ratio: var(--prowp-banner-aspect-desktop);
  }
}

/* Mosaic asymmetric — overall reserved ratio; tiles fill cells (no px min-heights). */
@media (min-width: 768px) {
  .prowp-homepage-banners--layout-mosaic-asymmetric:not(.prowp-homepage-banners--count-1) {
    aspect-ratio: var(--prowp-banner-aspect-mosaic);
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "mosaic-a mosaic-b"
      "mosaic-a mosaic-c"
      "mosaic-d mosaic-c";
  }
  .prowp-homepage-banners--layout-mosaic-asymmetric:not(.prowp-homepage-banners--count-1) .prowp-homepage-banner {
    aspect-ratio: unset;
    min-height: 0;
    max-height: none;
    height: 100%;
  }
  .prowp-homepage-banners--layout-mosaic-asymmetric:not(.prowp-homepage-banners--count-1) .prowp-homepage-banner:nth-child(1) {
    grid-area: mosaic-a;
  }
  .prowp-homepage-banners--layout-mosaic-asymmetric:not(.prowp-homepage-banners--count-1) .prowp-homepage-banner:nth-child(2) {
    grid-area: mosaic-b;
  }
  .prowp-homepage-banners--layout-mosaic-asymmetric:not(.prowp-homepage-banners--count-1) .prowp-homepage-banner:nth-child(3) {
    grid-area: mosaic-c;
  }
  .prowp-homepage-banners--layout-mosaic-asymmetric:not(.prowp-homepage-banners--count-1) .prowp-homepage-banner:nth-child(4) {
    grid-area: mosaic-d;
  }
}
body.prowp-dark .prowp-homepage-banner {
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--prowp-color-primary) 35%, #0b1220) 0%,
    color-mix(in oklch, var(--prowp-color-primary-soft) 12%, #0b1220) 100%);
}
body.prowp-dark .prowp-homepage-banner__text {
  color: var(--prowp-text-on-primary-muted);
}
body.prowp-dark .prowp-homepage-banner__scrim {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--prowp-overlay, #000) 95%, transparent) 0%,
    color-mix(in srgb, var(--prowp-overlay, #000) 65%, transparent) 35%,
    transparent 70%
  );
}
/* Promo banners — carousel (1 column + mobile fallback) */
.prowp-homepage-banners-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.prowp-homepage-banners-carousel__viewport,
.prowp-homepage-banners-carousel .prowp-carousel__track-wrap {
  container-type: inline-size;
  container-name: prowp-banner-carousel;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--prowp-banner-aspect-mobile);
  min-height: var(--prowp-banner-min-height);
  max-height: var(--prowp-banner-max-height);
  isolation: isolate;
  background: color-mix(in srgb, var(--prowp-color-primary-soft, var(--prowp-primary-soft)) 18%, var(--prowp-bg, #fff));
}
.prowp-homepage__section--banners--aspect-wide .prowp-homepage-banners-carousel__viewport {
  aspect-ratio: 21 / 9;
}
.prowp-homepage__section--banners--aspect-standard .prowp-homepage-banners-carousel__viewport {
  aspect-ratio: 16 / 9;
}
.prowp-homepage__section--banners--aspect-compact .prowp-homepage-banners-carousel__viewport {
  aspect-ratio: 2 / 1;
}
@media (max-width: 640px) {
  .prowp-homepage__section--banners--aspect-auto .prowp-homepage-banners-carousel__viewport {
    aspect-ratio: var(--prowp-banner-aspect-mobile);
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .prowp-homepage__section--banners--aspect-auto .prowp-homepage-banners-carousel__viewport {
    aspect-ratio: var(--prowp-banner-aspect-tablet);
  }
}
@media (min-width: 1024px) {
  .prowp-homepage__section--banners--aspect-auto .prowp-homepage-banners-carousel__viewport {
    aspect-ratio: var(--prowp-banner-aspect-desktop);
  }
}
.prowp-homepage .prowp-homepage-banners-carousel__track,
.prowp-homepage .prowp-homepage-banners-carousel .prowp-carousel__track,
.prowp-homepage .prowp-homepage-banners-carousel .prowp-homepage-banners-carousel__track {
  position: absolute;
  inset: 0;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0;
  padding: 0;
  will-change: transform;
}
.prowp-homepage .prowp-homepage-banners-carousel__slide.prowp-carousel__slide {
  --prowp-slide-basis: 100%;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  align-self: stretch !important;
  overflow: hidden;
  box-sizing: border-box;
}
.prowp-homepage-banners-carousel__slide .prowp-homepage-banner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 100% !important;
  border-radius: 0;
  aspect-ratio: unset;
  max-height: none;
  overflow: hidden;
  box-shadow: none;
}
/* Carousel slide height is owned by the viewport aspect-ratio + min/max-height tokens. */
.prowp-homepage-banners-carousel .prowp-homepage-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.prowp-homepage-banners-carousel .prowp-homepage-banner__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Images-only carousel: contain full artwork; soft bg fills letterbox gaps. */
.prowp-homepage__section--banners--images-only .prowp-homepage-banners-carousel__viewport,
.prowp-homepage__section--banners--images-only .prowp-homepage-banners-carousel .prowp-carousel__track-wrap {
  aspect-ratio: auto;
  min-height: 0;
  max-height: none;
  height: auto;
  background: color-mix(in srgb, var(--prowp-color-primary-soft, #e8f2ea) 40%, var(--prowp-bg, #fff));
}
.prowp-homepage__section--banners--images-only .prowp-homepage-banners-carousel__track,
.prowp-homepage__section--banners--images-only .prowp-homepage-banners-carousel .prowp-carousel__track {
  position: relative;
  inset: auto;
  height: auto !important;
  min-height: 0 !important;
}
.prowp-homepage__section--banners--images-only .prowp-homepage-banners-carousel__slide.prowp-carousel__slide {
  height: auto !important;
  min-height: 0 !important;
}
.prowp-homepage__section--banners--images-only .prowp-homepage-banners-carousel__slide .prowp-homepage-banner,
.prowp-homepage__section--banners--images-only .prowp-homepage-banners-carousel .prowp-homepage-banner--image-only {
  height: auto;
  min-height: 0 !important;
  max-height: none;
  aspect-ratio: auto;
}
.prowp-homepage__section--banners--images-only .prowp-homepage-banners-carousel .prowp-homepage-banner__media {
  position: relative;
  inset: auto;
  height: auto;
  overflow: hidden;
}
.prowp-homepage__section--banners--images-only .prowp-homepage-banners-carousel .prowp-homepage-banner__image {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.prowp-homepage-banners-carousel .prowp-homepage-banner:is(:hover, :focus-within) .prowp-homepage-banner__image {
  transform: scale(1.03);
}
.prowp-homepage__section--banners--images-only .prowp-homepage-banners-carousel .prowp-homepage-banner:is(:hover, :focus-within) .prowp-homepage-banner__image {
  transform: none;
}
.prowp-homepage-banners-carousel .prowp-homepage-banner__content {
  inset-block-end: clamp(2.5rem, 5.5vw, 3.25rem);
}
.prowp-homepage-banners-carousel .prowp-banner--parallax:not(.prowp-homepage-banner--image-only) .prowp-homepage-banner__media {
  height: calc(100% + var(--prowp-banner-parallax-overflow));
  top: calc(var(--prowp-banner-parallax-overflow) * -0.5);
}
.prowp-homepage-banners-carousel .prowp-banner--parallax.prowp-homepage-banner--image-only .prowp-homepage-banner__image {
  position: static;
  inset: auto;
  top: auto;
  height: auto;
  object-fit: contain;
}
.prowp-homepage-banners-carousel .prowp-homepage-banner:not(.prowp-banner--parallax) .prowp-homepage-banner__image {
  top: 0;
  will-change: auto;
}
/* Default spacing gutters apply only to Normal Width. Full Width is edge-to-edge. */
.prowp-homepage__section--banners:not(.prowp-homepage__section--full-bleed):not(.prowp-homepage__section--banners--spacing-flush) .prowp-homepage-banners-carousel {
  padding-inline: clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
}
.prowp-homepage__section--banners:not(.prowp-homepage__section--full-bleed):not(.prowp-homepage__section--banners--spacing-flush) .prowp-homepage-banners-carousel__viewport {
  border-radius: var(--prowp-card-radius, 1rem);
  box-shadow: var(--prowp-card-shadow);
  overflow: hidden;
}
.prowp-homepage__section--banners:not(.prowp-homepage__section--full-bleed):not(.prowp-homepage__section--banners--spacing-flush) .prowp-homepage-banners-carousel__slide .prowp-homepage-banner {
  border-radius: var(--prowp-card-radius, 1rem);
}
.prowp-homepage__section--banners.prowp-homepage__section--full-bleed .prowp-homepage-banners-carousel {
  padding-inline: 0;
}
.prowp-homepage__section--banners.prowp-homepage__section--full-bleed .prowp-homepage-banners-carousel__viewport,
.prowp-homepage__section--banners.prowp-homepage__section--full-bleed .prowp-homepage-banners-carousel__slide .prowp-homepage-banner {
  border-radius: 0;
  box-shadow: none;
}
.prowp-homepage-banners-carousel--arrows-hover .prowp-homepage-banners-carousel__viewport {
  position: relative;
}
.prowp-homepage .prowp-homepage-banners-carousel__controls--overlay,
.prowp-homepage .prowp-carousel__controls.prowp-homepage-banners-carousel__controls--overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  padding: 0;
  pointer-events: none;
  background: transparent;
}
.prowp-homepage-banners-carousel__controls--overlay .prowp-carousel__btn {
  position: absolute;
  inset-block-start: 50%;
  inset-block-end: auto;
  width: var(--prowp-banner-control-size, 44px);
  height: var(--prowp-banner-control-size, 44px);
  min-width: var(--prowp-banner-control-size, 44px);
  min-height: var(--prowp-banner-control-size, 44px);
  padding: 0;
  transform: translateY(-50%);
  pointer-events: auto;
  opacity: 0;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--prowp-color-surface, #fff) 72%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--prowp-color-text, var(--prowp-text, #1a1a1a));
  border: 1px solid color-mix(in srgb, var(--prowp-text-on-primary, #fff) 24%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--prowp-overlay, #0f172a) 16%, transparent);
  transition:
    opacity 200ms var(--prowp-ease-out, ease-out),
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    transform 200ms var(--prowp-ease-out, ease-out);
}

@media (max-width: 640px) {
  .prowp-homepage-banner {
    --prowp-banner-content-safe-inline: clamp(0.875rem, 4vw, 1.25rem);
    --prowp-banner-content-safe-block: clamp(0.875rem, 4vw, 1.25rem);
    --prowp-banner-control-size: 44px;
    max-width: 100%;
  }

  .prowp-homepage-banner__content {
    inset-inline-start: var(--prowp-banner-content-safe-inline);
    inset-inline-end: var(--prowp-banner-content-safe-inline);
    inset-block-end: var(--prowp-banner-content-safe-block);
    width: auto;
    max-width: none;
    gap: 0.375rem;
  }

  .prowp-homepage-banner__title {
    font-size: clamp(1.125rem, 6vw, 1.5rem);
    line-height: 1.18;
  }

  .prowp-homepage-banner__text {
    font-size: clamp(0.8125rem, 3.8vw, 0.9375rem);
    line-height: 1.45;
    max-width: none;
  }

  .prowp-homepage-banner__cta {
    max-width: 100%;
    min-height: 44px;
    min-width: 44px;
    padding-block: 0.65rem;
    padding-inline: 1rem;
    box-sizing: border-box;
  }

  .prowp-homepage-banner--image-only,
  .prowp-homepage-banner--image-only .prowp-homepage-banner__media,
  .prowp-homepage-banner--image-only .prowp-homepage-banner__image {
    max-width: 100%;
  }

  .prowp-homepage-banners-carousel,
  .prowp-homepage-banners-carousel__viewport,
  .prowp-homepage-banners-carousel .prowp-carousel__track-wrap {
    max-width: 100%;
    min-width: 0;
  }

  .prowp-homepage-banners-carousel .prowp-homepage-banner__content {
    inset-block-end: clamp(2.75rem, 8vw, 3.5rem);
  }

  /* Soften min/max height guards on narrow phones so aspect-ratio wins. */
  .prowp-homepage {
    --prowp-banner-min-height: clamp(9rem, 42vw, 12rem);
    --prowp-banner-max-height: clamp(12rem, 56vw, 18rem);
  }
}

@media (max-width: 767px) {
  .prowp-homepage__section--banners .prowp-homepage-banners,
  .prowp-homepage__section--banners .prowp-homepage-banners-carousel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .prowp-homepage-banners-carousel__controls--dots .prowp-carousel__dots--pills .prowp-carousel__dot {
    min-width: 44px;
    min-height: 44px;
    padding: 0.85rem;
    box-sizing: content-box;
  }
}
.prowp-homepage-banners-carousel__controls--overlay .prowp-carousel__btn:hover,
.prowp-homepage-banners-carousel__controls--overlay .prowp-carousel__btn:focus-visible {
  background-color: var(--prowp-color-primary, var(--prowp-primary));
  color: var(--prowp-color-on-primary, var(--prowp-text-on-primary, #fff));
  border-color: var(--prowp-color-primary, var(--prowp-primary));
  transform: translateY(calc(-50% - 1px));
}
.prowp-homepage-banners-carousel__controls--overlay .prowp-carousel__btn--prev {
  inset-inline-start: var(--prowp-space-3, 0.75rem);
  inset-inline-end: auto;
}
.prowp-homepage-banners-carousel__controls--overlay .prowp-carousel__btn--next {
  inset-inline-end: var(--prowp-space-3, 0.75rem);
  inset-inline-start: auto;
}
.prowp-homepage-banners-carousel--arrows-hover:is(:hover, :focus-within) .prowp-homepage-banners-carousel__controls--overlay .prowp-carousel__btn,
.prowp-homepage-banners-carousel__controls--overlay .prowp-carousel__btn:focus-visible {
  opacity: 1;
}
@media (hover: none), (pointer: coarse) {
  .prowp-homepage-banners-carousel__controls--overlay .prowp-carousel__btn {
    opacity: 1;
  }
}
.prowp-homepage-banners-carousel__controls--dots {
  position: absolute;
  inset-block-end: clamp(0.75rem, 2.5vw, 1.25rem);
  inset-inline: 0;
  z-index: 5;
  padding: 0;
  background: transparent;
  color: var(--prowp-text-on-primary, #fff);
  pointer-events: none;
}
.prowp-homepage-banners-carousel__controls--dots .prowp-carousel__dots {
  pointer-events: auto;
  gap: 0.375rem;
}
.prowp-homepage-banners-carousel__controls--dots .prowp-carousel__dots--pills .prowp-carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  min-width: 0.5rem;
  min-height: 0;
  padding: 0.35rem;
  border-radius: var(--prowp-radius-pill, 999px);
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: color-mix(in srgb, var(--prowp-text-on-primary, #fff) 42%, transparent);
  border: 0;
  transition:
    width 280ms var(--prowp-ease-out, ease-out),
    background-color 280ms ease,
    transform 280ms var(--prowp-ease-out, ease-out);
}
.prowp-homepage-banners-carousel__controls--dots .prowp-carousel__dots--pills .prowp-carousel__dot.is-active,
.prowp-homepage-banners-carousel__controls--dots .prowp-carousel__dots--pills .prowp-carousel__dot[aria-selected="true"] {
  width: 1.75rem;
  background-color: var(--prowp-color-primary, var(--prowp-primary));
  transform: none;
}
.prowp-homepage-banners-carousel__controls--dots .prowp-carousel__dots--pills .prowp-carousel__dot:focus-visible {
  outline: 2px solid var(--prowp-color-primary, var(--prowp-primary));
  outline-offset: 2px;
}
.prowp-homepage-banners-carousel__controls:not(.prowp-homepage-banners-carousel__controls--overlay) {
  padding-block: 0.625rem;
  background: var(--prowp-bg, #fff);
  color: var(--prowp-color-text, var(--prowp-text, #1a1a1a));
}

/* Overlay arrows sit above slides — must stay transparent (general controls rule is more specific for dots only). */
.prowp-homepage-banners-carousel__controls.prowp-homepage-banners-carousel__controls--overlay {
  padding-block: 0;
  background: transparent;
}

.prowp-homepage-banners-carousel__controls .prowp-carousel__btn {
  color: var(--prowp-color-text, var(--prowp-text, #1a1a1a));
  background-color: var(--prowp-color-surface, var(--prowp-surface, var(--prowp-bg)));
  border-color: var(--prowp-color-border, var(--prowp-border));
}

.prowp-homepage-banners-carousel__controls .prowp-carousel__btn:hover,
.prowp-homepage-banners-carousel__controls .prowp-carousel__btn:focus-visible {
  background-color: var(--prowp-color-primary, var(--prowp-primary));
  color: var(--prowp-color-on-primary, var(--prowp-on-primary, var(--prowp-text-on-primary, #ffffff)));
  border-color: var(--prowp-color-primary, var(--prowp-primary));
}
.prowp-homepage-banners-carousel--mobile-only {
  display: block;
}
@media (min-width: 768px) {
  .prowp-homepage-banners-carousel--mobile-only {
    display: none !important;
  }
  .prowp-homepage-banners--grid-desktop {
    display: grid;
  }
}
@media (max-width: 767px) {
  .prowp-homepage-banners--grid-desktop {
    display: none !important;
  }
}

/* Brands */
.prowp-homepage-brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.prowp-homepage-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

.prowp-homepage-brand__logo {
  max-height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(20%);
}

/* CTA */
.prowp-homepage-cta {
  margin-inline: clamp(1rem, 3vw, 2rem);
  padding: clamp(2rem, 6vw, 4rem);
  border-radius: var(--prowp-card-radius, 12px);
  background: var(--prowp-primary-soft);
  background-image: var(--prowp-cta-bg, none);
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Full-width sections (CSF Section Width → Full Width): viewport breakout like hero; no outer gutters */
.prowp-homepage__section--full-bleed {
  padding-inline: 0;
  padding-block: 0;
  max-width: 100%;
  width: 100%;
  margin-inline: 0;
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .prowp-homepage__section--full-bleed {
    width: 100%;
    margin-inline: 0;
  }
}

.prowp-homepage__section--banners .prowp-homepage__section-head {
  padding-inline: clamp(1rem, 3vw, 2rem);
  width: 100%;
  max-width: min(100%, var(--prowp-container, 1200px));
  margin-inline: auto;
  box-sizing: border-box;
}
.prowp-homepage__section--banners--has-heading:not(.prowp-homepage__section--banners--spacing-flush) .prowp-homepage__section-head {
  margin-block-end: var(--prowp-space-4, 1rem);
  padding-block-start: var(--prowp-homepage-section-pad);
}
.prowp-homepage__section--banners--spacing-flush .prowp-homepage__section-head {
  margin-block-end: var(--prowp-space-3, 0.75rem);
  padding-block-start: var(--prowp-homepage-section-pad);
}
.prowp-homepage__section--banners--spacing-flush.prowp-homepage__section--banners--images-only:not(.prowp-homepage__section--banners--has-heading):not(.prowp-homepage__section--banners--padding) {
  padding-block: 0;
}
.prowp-homepage__section--banners--spacing-custom.prowp-homepage__section--pad-small .prowp-homepage__section-head,
.prowp-homepage__section--banners--spacing-custom.prowp-homepage__section--pad-medium .prowp-homepage__section-head,
.prowp-homepage__section--banners--spacing-custom.prowp-homepage__section--pad-large .prowp-homepage__section-head {
  padding-block-start: 0;
}
.prowp-homepage__section--banners--spacing-custom.prowp-homepage__section--pad-small {
  padding-block: 1rem;
}
.prowp-homepage__section--banners--spacing-custom.prowp-homepage__section--pad-medium {
  padding-block: var(--prowp-homepage-section-pad);
}
.prowp-homepage__section--banners--spacing-custom.prowp-homepage__section--pad-large {
  padding-block: 3.5rem;
}

.prowp-homepage__section--banners .prowp-homepage-banners,
.prowp-homepage__section--banners .prowp-homepage-banners-carousel {
  padding-inline: 0;
}

.prowp-homepage__section--banners .prowp-homepage-banner {
  border-radius: 0;
}

/* Banners (non-custom spacing): flush vertical by design. Full-width other
 * sections keep CSF pad-* vertical spacing; only strip inline gutters.
 * Opt-in Enable Banner Padding/Margin overrides the flush defaults. */
.prowp-homepage__section--banners:not(.prowp-homepage__section--banners--spacing-custom):not(.prowp-homepage__section--banners--padding)[class*="prowp-homepage__section--pad-"] {
  padding-block: 0;
  padding-inline: 0;
}

.prowp-homepage__section--banners.prowp-homepage__section--banners--padding:not(.prowp-homepage__section--banners--spacing-custom) {
  padding-block: var(--prowp-homepage-section-pad);
  padding-inline: 0;
}

.prowp-homepage__section--banners.prowp-homepage__section--banners--margin {
  margin-block: var(--prowp-homepage-gap, var(--prowp-space-4, 1rem));
}

.prowp-homepage__section--full-bleed[class*="prowp-homepage__section--pad-"] {
  padding-inline: 0;
}

.prowp-homepage__section--cta.prowp-homepage__section--full-bleed > .prowp-homepage-cta {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
  min-height: clamp(180px, 28vw, 360px);
  display: flex;
  align-items: center;
}

.prowp-homepage__section--cta:not(.prowp-homepage__section--full-bleed) > .prowp-homepage-cta {
  width: 100%;
  max-width: min(100%, var(--prowp-container, 1200px));
  margin-inline: auto;
  border-radius: var(--prowp-radius, 0.75rem);
  min-height: clamp(180px, 28vw, 360px);
  display: flex;
  align-items: center;
}

.prowp-homepage__section--cta .prowp-homepage-cta__inner {
  width: 100%;
  max-width: min(100%, var(--prowp-container, 1200px));
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

@media (max-width: 479px) {
  .prowp-homepage .prowp-announcement {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem 0.75rem;
    padding-block: 0.5rem;
    padding-inline: 2.75rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    position: relative;
  }

  .prowp-homepage .prowp-announcement__close {
    position: absolute;
    inset-block-start: 0.375rem;
    inset-inline-end: 0.375rem;
  }
}

[dir="rtl"] .prowp-homepage .prowp-announcement__text,
[dir="rtl"] .prowp-homepage .prowp-announcement__link {
  text-align: center;
}

.prowp-homepage-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}

.prowp-homepage-cta__heading {
  margin: 0 0 0.75rem;
  font-size: var(--prowp-h2, 1.75rem);
}

.prowp-homepage-cta__text {
  margin: 0 0 1.25rem;
  color: var(--prowp-text-soft);
}

@media (prefers-reduced-motion: reduce) {
  .prowp-homepage .prowp-hero__track {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   SECTION VISIBILITY + REVEAL + HEADING ALIGNMENT (shared)
   ════════════════════════════════════════════════════════════════ */

/* Responsive section visibility (requirement 2). */
@media (min-width: 1024px) { .prowp-homepage .prowp-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023px) { .prowp-homepage .prowp-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .prowp-homepage .prowp-hide-mobile { display: none !important; } }

/* Heading alignment. */
.prowp-homepage__section-head--start { text-align: start; }
.prowp-homepage__section-head--center { text-align: center; }
.prowp-homepage__section-head--end { text-align: end; }
.prowp-homepage__section-subtitle {
  margin: 0.25rem 0 0;
  color: var(--prowp-text-muted, #64748b);
  font-size: var(--prowp-text-base, 1rem);
}
.prowp-homepage__section-head--center .prowp-homepage__section-subtitle {
  margin-inline: auto;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════
   SECTION REVEAL — composable multi-effect motion engine
   ────────────────────────────────────────────────────────────────
   Each effect class writes one custom property; the section composes
   them into a single transform, so a merchant can stack effects
   ("Slide Up" + "Zoom In" + "Blur" + "3D Flip") and get one
   coordinated entrance instead of one-effect-only behaviour.

   Nothing here is a magic number. Travel, easing, duration, intensity
   and stagger step all come from the motion tokens in
   prowp-design-tokens.css, and every one of them is overridden per
   section by an inline custom property that the renderer emits from
   the section's CSF settings:

     --prowp-rv-amp    intensity multiplier   (Motion Strength)
     --prowp-rv-dur    duration               (Animation Duration)
     --prowp-rv-ease   easing curve           (Easing)
     --prowp-rv-step   stagger step           (Card Stagger Delay)

   Motion is transform/opacity/filter/clip-path only — no
   layout-thrashing properties. will-change is dropped after the
   reveal, because a leftover will-change:transform creates a
   containing block that defeats nested fixed layers. */
/* The neutral values for every effect property live in the token layer,
   NOT here: an element-level declaration would out-specify the effect
   classes below and silently cancel every chosen animation. */
.prowp-homepage .prowp-motion-pending.prowp-reveal[data-prowp-reveal] {
  opacity: var(--prowp-rv-opacity);
  transform:
    perspective(var(--prowp-rv-perspective))
    translate3d(
      calc(var(--prowp-rv-x) * var(--prowp-rv-amp)),
      calc(var(--prowp-rv-y) * var(--prowp-rv-amp)),
      0
    )
    rotateX(calc(var(--prowp-rv-rotate-x) * var(--prowp-rv-amp)))
    rotateY(calc(var(--prowp-rv-rotate-y) * var(--prowp-rv-amp)))
    rotate(calc(var(--prowp-rv-rotate) * var(--prowp-rv-amp)))
    skewY(calc(var(--prowp-rv-skew) * var(--prowp-rv-amp)))
    scale(calc(1 + (var(--prowp-rv-scale) - 1) * var(--prowp-rv-amp)));
  transform-origin: 50% 65%;
  backface-visibility: hidden;
  transition:
    opacity var(--prowp-rv-dur) var(--prowp-rv-ease) var(--prowp-rv-delay),
    transform var(--prowp-rv-dur) var(--prowp-rv-ease) var(--prowp-rv-delay),
    filter var(--prowp-rv-dur) var(--prowp-rv-ease) var(--prowp-rv-delay),
    clip-path var(--prowp-rv-dur) var(--prowp-rv-ease) var(--prowp-rv-delay);
  will-change: opacity, transform;
}

/* Direction / scale / rotation effects — stackable, token-driven. */
.prowp-homepage .prowp-reveal--up { --prowp-rv-y: var(--prowp-rv-distance-y); }
.prowp-homepage .prowp-reveal--down { --prowp-rv-y: calc(-1 * var(--prowp-rv-distance-y)); }
.prowp-homepage .prowp-motion-pending.prowp-reveal--left { --prowp-rv-x: calc(-1 * var(--prowp-rv-distance-x)); }
.prowp-homepage .prowp-motion-pending.prowp-reveal--right { --prowp-rv-x: var(--prowp-rv-distance-x); }
.prowp-homepage .prowp-reveal--zoom-in,
.prowp-homepage .prowp-reveal--zoom { --prowp-rv-scale: var(--prowp-rv-scale-in); }
.prowp-homepage .prowp-reveal--zoom-out { --prowp-rv-scale: var(--prowp-rv-scale-out); }
.prowp-homepage .prowp-reveal--flip-up { --prowp-rv-rotate-x: var(--prowp-rv-tilt); }
.prowp-homepage .prowp-reveal--flip-side { --prowp-rv-rotate-y: var(--prowp-rv-turn); }
.prowp-homepage .prowp-motion-pending.prowp-reveal--rotate { --prowp-rv-rotate: calc(-1 * var(--prowp-rv-spin)); }
.prowp-homepage .prowp-motion-pending.prowp-reveal--skew { --prowp-rv-skew: var(--prowp-rv-slant); }
/* "Fade" is opacity only — the base state already provides it. */

/* Legacy "Ultra-modern fixed reveal" — now a real effect on every screen
   (it used to be force-disabled below 781px, so phones saw nothing). */
.prowp-homepage .prowp-reveal--fixed {
  --prowp-rv-y: var(--prowp-rv-distance-y);
  --prowp-rv-scale: calc(1 - (1 - var(--prowp-rv-scale-in)) / 3);
}

/* Horizontal / rotational travel must never create a page scrollbar.
   overflow-x:clip (not hidden) leaves overflow-y visible, so sticky and
   overlay children inside the section keep working. */
.prowp-homepage .prowp-motion-pending.prowp-reveal--left,
.prowp-homepage .prowp-motion-pending.prowp-reveal--right,
.prowp-homepage .prowp-motion-pending.prowp-reveal--rotate,
.prowp-homepage .prowp-motion-pending.prowp-reveal--skew,
.prowp-homepage .prowp-motion-pending.prowp-reveal--flip-side {
  overflow-x: clip;
}

/* Blur and mask are separate properties, applied only when opted into so
   sections that did not choose them never pay the filter / clip cost. */
.prowp-homepage .prowp-motion-pending.prowp-reveal--blur {
  filter: blur(calc(var(--prowp-rv-blur) * var(--prowp-rv-amp)));
}
.prowp-homepage .prowp-motion-pending.prowp-reveal--blur:is(.is-revealed, .prowp-revealed, .visible) { filter: blur(0); }

.prowp-homepage .prowp-motion-pending.prowp-reveal--mask { clip-path: inset(0 0 100% 0); }
.prowp-homepage .prowp-motion-pending.prowp-reveal--mask:is(.is-revealed, .prowp-revealed, .visible) { clip-path: inset(0 0 0 0); }

/* Stagger-only: the section itself stays put; its cards animate.
   Qualified with the attribute so it out-specifies the base hidden state. */
.prowp-homepage .prowp-motion-pending.prowp-reveal[data-prowp-reveal].prowp-reveal--stagger-only {
  --prowp-rv-opacity: 1;
  opacity: 1;
  transform: none;
  will-change: auto;
  transition: none;
}

/* Revealed = every effect property returns to its neutral value, so the
   single composed transform animates the whole stack at once. */
.prowp-homepage .prowp-motion-pending.prowp-reveal[data-prowp-reveal]:is(.is-revealed, .prowp-revealed, .visible) {
  --prowp-rv-x: 0px;
  --prowp-rv-y: 0px;
  --prowp-rv-scale: 1;
  --prowp-rv-rotate: 0deg;
  --prowp-rv-rotate-x: 0deg;
  --prowp-rv-rotate-y: 0deg;
  --prowp-rv-skew: 0deg;
  --prowp-rv-opacity: 1;
  opacity: 1;
  will-change: auto;
}

/* Phones run the same effects at the same strength; only the horizontal
   travel is re-based on the viewport so a wide slide cannot fight a narrow
   screen. Motion stays clearly visible on every device. */
@media (max-width: 767px) {
  .prowp-homepage .prowp-motion-pending.prowp-reveal[data-prowp-reveal] {
    --prowp-rv-distance-x: min(var(--prowp-space-12, 3rem), 18vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prowp-homepage .prowp-motion-pending.prowp-reveal[data-prowp-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}
/* No-JS / scripting disabled: never leave opted-in sections permanently blank. */
@media (scripting: none) {
  .prowp-homepage .prowp-motion-pending.prowp-reveal[data-prowp-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* Card entrance stagger — children inherit the section's intensity, speed
   and easing. reveal.js writes --prowp-rv-index per child so the cascade
   has no nth-child ceiling (the old rules stopped after the 6th card). */
.prowp-homepage__section.prowp-section--card-stagger.prowp-motion-pending :is(
  .prowp-product-card,
  li.product,
  .prowp-homepage-category,
  .prowp-category-card,
  .prowp-stat,
  .prowp-testimonial,
  .prowp-homepage-brand,
  .prowp-benefit,
  .prowp-blog-card,
  .prowp-homepage-banner,
  .prowp-trust-badge,
  .prowp-instagram__item
) {
  opacity: 0;
  transform:
    translate3d(0, calc(var(--prowp-rv-child-distance) * var(--prowp-rv-amp)), 0)
    scale(calc(1 - var(--prowp-rv-child-scale) * var(--prowp-rv-amp)));
  transition:
    opacity var(--prowp-rv-dur) var(--prowp-rv-ease),
    transform var(--prowp-rv-dur) var(--prowp-rv-ease);
  transition-delay: 0ms;
}
.prowp-homepage__section.prowp-section--card-stagger.prowp-motion-pending:is(.is-revealed, .prowp-revealed, .visible) :is(
  .prowp-product-card,
  li.product,
  .prowp-homepage-category,
  .prowp-category-card,
  .prowp-stat,
  .prowp-testimonial,
  .prowp-homepage-brand,
  .prowp-benefit,
  .prowp-blog-card,
  .prowp-homepage-banner,
  .prowp-trust-badge,
  .prowp-instagram__item
) {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--prowp-rv-index, 0) * var(--prowp-rv-step));
}
@media (prefers-reduced-motion: reduce) {
  .prowp-homepage__section.prowp-section--card-stagger.prowp-motion-pending :is(
    .prowp-product-card,
    li.product,
    .prowp-homepage-category,
    .prowp-category-card,
    .prowp-stat,
    .prowp-testimonial,
    .prowp-homepage-brand,
    .prowp-benefit,
    .prowp-blog-card,
    .prowp-homepage-banner,
    .prowp-trust-badge,
    .prowp-instagram__item
  ) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
@media (scripting: none) {
  .prowp-homepage__section.prowp-section--card-stagger.prowp-motion-pending :is(
    .prowp-product-card,
    li.product,
    .prowp-homepage-category,
    .prowp-category-card,
    .prowp-stat,
    .prowp-testimonial,
    .prowp-homepage-brand,
    .prowp-benefit,
    .prowp-blog-card,
    .prowp-homepage-banner,
    .prowp-trust-badge,
    .prowp-instagram__item
  ) {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Section background parallax — desktop only; CSF gated via class + data attr. */
@media (min-width: 782px) {
  .prowp-homepage__section.prowp-section--bg-parallax.prowp-homepage__section--has-bg-image {
    background-attachment: fixed;
    background-position: center center;
  }
}
@media (max-width: 781px), (prefers-reduced-motion: reduce) {
  .prowp-homepage__section.prowp-section--bg-parallax {
    background-attachment: scroll !important;
  }
}

/* Hero engine — non-slider styles + badge + secondary button.
   The frame reserves its height from a CSS var (CLS-safe) and the picture is
   layered absolutely over it, so the hero box is stable before the image/CSS
   arrives. height:auto still gets a viewport-relative floor (see critical CSS). */
.prowp-homepage .prowp-hero__frame {
  min-height: var(--prowp-hero-height, 600px);
  width: 100%;
}
/* Premium UI: lock explicit height matching critical + polish. */
@media (min-width: 769px) {
  body.home.woo-premium-ui .prowp-homepage .prowp-hero,
  body.home.woo-premium-ui .prowp-homepage .prowp-hero__frame {
    height: var(--prowp-hero-height, 600px) !important;
    max-height: var(--prowp-hero-height, 600px) !important;
    min-height: var(--prowp-hero-height, 600px) !important;
  }
}
@media (max-width: 768px) {
  body.home.woo-premium-ui .prowp-homepage .prowp-hero,
  body.home.woo-premium-ui .prowp-homepage .prowp-hero__frame {
    height: var(--prowp-hero-height, 600px) !important;
    min-height: var(--prowp-hero-height, 600px) !important;
    max-height: var(--prowp-hero-height, 600px) !important;
  }
}
.prowp-homepage .prowp-hero__badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin-block-end: 0.75rem;
  border-radius: var(--prowp-radius-pill, 999px);
  background: var(--prowp-primary);
  color: var(--prowp-text-on-primary, #fff);
  font-size: var(--prowp-text-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prowp-homepage .prowp-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.prowp-homepage .prowp-hero__btn--ghost {
  background: transparent;
  color: var(--prowp-text-on-primary, #fff);
  border: 1px solid var(--prowp-text-on-primary, #fff);
}
.prowp-homepage .prowp-hero__video {
  position: absolute; inset: 0 !important; width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}
.prowp-homepage .prowp-hero__picture {
  display: block; line-height: 0;
  position: absolute; inset: 0 !important; width: 100%; height: 100%;
}
.prowp-homepage .prowp-hero__picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Image-first video hero: the picture is the eager LCP; the video is injected
   post-load and fades in over it. Logical properties keep this RTL/LTR-safe. */
.prowp-homepage .prowp-hero--has-video .prowp-hero__video-target {
  position: absolute; inset: 0 !important; z-index: 0; overflow: hidden;
  background: transparent;
}
.prowp-homepage .prowp-hero--has-video .prowp-hero__picture--lcp {
  position: absolute; inset: 0 !important; z-index: 1;
  transition: opacity 0.6s ease;
}
.prowp-homepage .prowp-hero--has-video .prowp-hero__overlay { z-index: 2; }
.prowp-homepage .prowp-hero--has-video .prowp-hero__content { z-index: 3; }
.prowp-homepage .prowp-hero--video-ready .prowp-hero__picture--lcp { opacity: 0; }
/* If the video fails to load or is skipped (reduced-motion / save-data),
   the image remains fully visible — nothing else to do. */
.prowp-homepage .prowp-hero--video-failed .prowp-hero__video-target { display: none; }
@media (prefers-reduced-motion: reduce) {
  .prowp-homepage .prowp-hero--has-video .prowp-hero__picture--lcp { transition: none; }
}
.prowp-homepage .prowp-hero--no-media .prowp-hero__frame {
  aspect-ratio: auto;
  min-height: clamp(300px, 34vw, 440px);
  display: flex;
  align-items: center;
  justify-content: var(--prowp-hero-align, flex-start);
  background: #070b15;
  padding-inline: var(--prowp-hero-container-pad);
  box-sizing: border-box;
}
.prowp-homepage .prowp-hero--no-media .prowp-hero__picture,
.prowp-homepage .prowp-hero--no-media .prowp-hero__overlay {
  display: none;
}
.prowp-homepage .prowp-hero--no-media .prowp-hero__content {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: var(--prowp-container, 1320px);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 3rem);
  padding-inline: var(--prowp-hero-edge);
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.prowp-homepage .prowp-hero__split-content {
  position: absolute;
  inset-block: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 50%;
  background: var(--prowp-bg, #fff);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-sizing: border-box;
  z-index: 2;
}
.prowp-homepage .prowp-hero__split-content .prowp-hero__content {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  transform: none !important;
  inline-size: auto !important;
  max-inline-size: none !important;
  width: 100% !important;
  margin: 0 !important;
  color: var(--prowp-text, #111);
}
/* Split panel must follow Content Alignment (was hardcoded to inline-end). */
.prowp-homepage .prowp-hero--align-start .prowp-hero__split-content {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.prowp-homepage .prowp-hero--align-end .prowp-hero__split-content {
  inset-inline-end: 0;
  inset-inline-start: auto;
}
.prowp-homepage .prowp-hero--align-center .prowp-hero__split-content {
  inset-inline: 0;
  margin-inline: auto;
  max-width: min(50%, 36rem);
}
@media (max-width: 767px) {
  .prowp-homepage .prowph-hero--split .prowp-hero__split-content {
    position: static;
    max-width: none;
    margin-inline: 0;
    background: transparent;
  }
}
.prowp-homepage .prowph-hero--editorial .prowp-hero__content { inset-block-end: clamp(2rem, 8vw, 4rem); max-width: 48rem; }

/* ════════════════════════════════════════════════════════════════
   HERO — CARD OVERLAY (Organic Farm / RTL-safe frosted card)
   Full-bleed background image; dark text on a white translucent card
   positioned at inline-start (right in RTL, left in LTR).
   ════════════════════════════════════════════════════════════════ */
.prowp-homepage .prowp-hero.prowph-hero--card-overlay {
  position: relative;
  min-height: var(--prowp-hero-height, clamp(420px, 55vh, 640px));
  overflow: hidden;
  display: block;
}

.prowp-homepage .prowph-hero--card-overlay .prowph-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.prowp-homepage .prowph-hero--card-overlay .prowph-hero__media picture,
.prowp-homepage .prowph-hero--card-overlay .prowph-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Directional scrim on the image only — not on the card */
.prowp-homepage .prowph-hero--card-overlay .prowph-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--prowp-hero-overlay, 0.35);
}

[dir="ltr"] .prowp-homepage .prowph-hero--card-overlay .prowph-hero__scrim {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    transparent 70%
  );
}

[dir="rtl"] .prowp-homepage .prowph-hero--card-overlay .prowph-hero__scrim {
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    transparent 70%
  );
}

.prowp-homepage .prowph-hero--card-overlay .prowph-hero__container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: inherit;
  max-width: var(--prowp-container-max, 1280px);
  margin-inline: auto;
  padding: var(--prowp-space-section, 3rem) var(--prowp-gutter, 1.25rem);
  box-sizing: border-box;
}

.prowp-homepage .prowph-hero--align-start .prowph-hero__container {
  justify-content: flex-start;
}

.prowp-homepage .prowph-hero--align-center .prowph-hero__container {
  justify-content: center;
}

.prowp-homepage .prowph-hero--align-end .prowph-hero__container {
  justify-content: flex-end;
}

.prowp-homepage .prowph-hero--card-overlay .prowph-hero__card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--prowp-radius-md, 12px);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: min(520px, 92vw);
  box-shadow: 0 8px 32px rgba(36, 54, 43, 0.12);
  color: var(--prowp-color-on-surface, #1a1a1a);
  text-align: start;
}

.prowp-homepage .prowph-hero--card-overlay .prowph-hero__badge {
  display: inline-block;
  background: var(--prowp-color-primary);
  color: var(--prowp-color-on-primary);
  font-size: var(--prowp-text-xs, 0.75rem);
  padding: 0.35em 0.85em;
  border-radius: 999px;
  margin-block-end: 1rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.prowp-homepage .prowph-hero--card-overlay .prowph-hero__title {
  font-size: var(--prowp-hero-heading, clamp(1.75rem, 4vw, 2.75rem));
  font-weight: 700;
  line-height: var(--prowp-line-height-heading, 1.2);
  color: var(--prowp-color-dark, #24362b);
  margin: 0 0 0.75rem;
}

.prowp-homepage .prowph-hero--card-overlay .prowph-hero__text {
  font-size: var(--prowp-text-base, 1rem);
  line-height: 1.6;
  color: var(--prowp-color-muted, #4b5563);
  margin: 0 0 1.5rem;
  opacity: 1;
}

.prowp-homepage .prowph-hero--card-overlay .prowph-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.prowp-homepage .prowph-hero--card-overlay .prowph-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.prowp-homepage .prowph-hero--card-overlay .prowph-hero__btn--primary {
  background: var(--prowp-color-primary);
  color: var(--prowp-color-on-primary);
  padding: 0.75rem 1.5rem;
  border-radius: var(--prowp-radius-sm, 8px);
  border: 2px solid transparent;
}

.prowp-homepage .prowph-hero--card-overlay .prowph-hero__btn--primary:hover,
.prowp-homepage .prowph-hero--card-overlay .prowph-hero__btn--primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--prowp-color-primary) 25%, transparent);
}

.prowp-homepage .prowph-hero--card-overlay .prowph-hero__btn--secondary {
  background: transparent;
  color: var(--prowp-color-text);
  border: 2px solid var(--prowp-color-border);
  padding: 0.75rem 1.5rem;
  border-radius: var(--prowp-radius-sm, 8px);
}

.prowp-homepage .prowph-hero--card-overlay .prowph-hero__btn--secondary:hover,
.prowp-homepage .prowph-hero--card-overlay .prowph-hero__btn--secondary:focus-visible {
  border-color: var(--prowp-color-text);
  transform: translateY(-1px);
}

/* Card-overlay must not inherit white-on-image hero text colors */
.prowp-homepage .prowph-hero--card-overlay .prowp-hero__content,
.prowp-homepage .prowph-hero--card-overlay .prowp-hero__heading,
.prowp-homepage .prowph-hero--card-overlay .prowp-hero__text {
  color: inherit;
}

@media (max-width: 767px) {
  .prowp-homepage .prowph-hero--card-overlay .prowph-hero__card {
    max-width: 100%;
  }

  .prowp-homepage .prowph-hero--align-start .prowph-hero__container {
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════════
   FLASH DEALS + COUNTDOWN
   ════════════════════════════════════════════════════════════════ */
.prowp-homepage .prowp-flash-deals__countdown {
  display: flex; gap: 0.75rem; justify-content: center;
  margin-block-end: 1.25rem; padding-inline: clamp(1rem, 3vw, 2rem);
}
.prowp-homepage .prowp-flash-deals__cd-unit {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  min-width: 56px; padding: 0.5rem 0.75rem;
  background: var(--prowp-bg, #fff); border: 1px solid var(--prowp-border, #e2e8f0);
  border-radius: var(--prowp-radius-md, 0.5rem);
}
.prowp-homepage .prowp-flash-deals__cd-num {
  font-size: 1.5rem; font-weight: 800; color: var(--prowp-danger, #ef4444);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.prowp-homepage .prowp-flash-deals__cd-label {
  font-size: var(--prowp-text-xs, 0.75rem); color: var(--prowp-text-muted, #64748b);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════════
   PRODUCT TABS (ARIA tablist)
   ════════════════════════════════════════════════════════════════ */
.prowp-homepage .prowp-tabs__list {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  margin-block-end: 1.5rem; padding-inline: clamp(1rem, 3vw, 2rem);
  border-block-end: 2px solid var(--prowp-border, #e2e8f0);
}
.prowp-homepage .prowp-tabs__tab {
  appearance: none; border: 0; background: transparent;
  padding: 0.625rem 1.25rem; cursor: pointer;
  color: var(--prowp-text-muted, #64748b); font-weight: 600; font-size: var(--prowp-text-base, 1rem);
  border-block-end: 2px solid transparent; margin-block-end: -2px;
  transition: color var(--prowp-dur-fast, 0.18s) var(--prowp-ease, ease),
              border-color var(--prowp-dur-fast, 0.18s) var(--prowp-ease, ease);
  min-height: 44px;
}
.prowp-homepage .prowp-tabs__tab:hover { color: var(--prowp-text, #1f2937); }
.prowp-homepage .prowp-tabs__tab.is-active,
.prowp-homepage .prowp-tabs__tab[aria-selected="true"] {
  color: var(--prowp-primary);
  border-block-end-color: var(--prowp-primary);
}
.prowp-homepage .prowp-tabs__tab:focus-visible {
  outline: var(--prowp-focus-ring, 0 0 0 2px var(--prowp-bg), 0 0 0 4px var(--prowp-primary));
  outline-offset: var(--prowp-focus-offset, 3px);
}
.prowp-homepage .prowp-tabs__panel[hidden] { display: none; }
.prowp-homepage .prowp-tabs__empty { color: var(--prowp-text-muted, #64748b); padding: 2rem; text-align: center; }

/* ════════════════════════════════════════════════════════════════
   TESTIMONIALS
   ════════════════════════════════════════════════════════════════ */
.prowp-homepage .prowp-testimonials { list-style: none; margin: 0; padding: 0; }
.prowp-homepage .prowp-testimonial {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.5rem; margin: 0;
  background: var(--prowp-bg, #fff); border: 1px solid var(--prowp-border, #e2e8f0);
  border-radius: var(--prowp-card-radius, 12px);
}
.prowp-homepage .prowp-testimonial__stars { display: flex; gap: 0.125rem; color: var(--prowp-warning, #f59e0b); }
.prowp-homepage .prowp-testimonial__quote {
  margin: 0;
  color: var(--prowp-text, #1f2937);
  font-size: 1rem;
  line-height: 1.6;
  unicode-bidi: isolate;
  text-align: start;
}
.prowp-homepage .prowp-testimonial__author { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.prowp-homepage .prowp-testimonial__avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.prowp-homepage .prowp-testimonial__cite { display: flex; flex-direction: column; }
.prowp-homepage .prowp-testimonial__name { font-weight: 700; color: var(--prowp-text, #1f2937); }
.prowp-homepage .prowp-testimonial__role { font-size: var(--prowp-text-sm, 0.875rem); color: var(--prowp-text-muted, #64748b); }

/* ════════════════════════════════════════════════════════════════
   NEWSLETTER
   ════════════════════════════════════════════════════════════════ */
.prowp-homepage .prowp-newsletter {
  text-align: center; max-width: 40rem; margin-inline: auto;
  padding: clamp(2rem, 6vw, 4rem); border-radius: var(--prowp-card-radius, 12px);
  background: var(--prowp-primary-soft, color-mix(in oklch, var(--prowp-primary) 10%, transparent));
}
.prowp-homepage .prowp-newsletter__heading { margin: 0 0 0.5rem; font-size: var(--prowp-h3, 1.5rem); }
.prowp-homepage .prowp-newsletter__text { margin: 0 0 1.5rem; color: var(--prowp-text-soft, #475569); }
.prowp-homepage .prowp-newsletter__form { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.prowp-homepage .prowp-newsletter__input {
  flex: 1; min-width: 220px; min-height: 48px; padding: 0 1rem;
  border: 1px solid var(--prowp-border, #e2e8f0); border-radius: var(--prowp-radius-md, 0.5rem);
  background: var(--prowp-bg, #fff);
}
.prowp-homepage .prowp-newsletter__input:focus-visible { outline: var(--prowp-focus-ring, 0 0 0 2px var(--prowp-bg), 0 0 0 4px var(--prowp-primary)); outline-offset: var(--prowp-focus-offset, 3px); }
.prowp-homepage .prowp-newsletter__btn {
  min-height: 48px; padding-inline: 1.5rem; border: 0; cursor: pointer;
  border-radius: var(--prowp-radius-md, 0.5rem);
  background: var(--prowp-primary); color: var(--prowp-text-on-primary, #fff); font-weight: 600;
}
.prowp-homepage .prowp-newsletter__btn:focus-visible { outline: var(--prowp-focus-ring, 0 0 0 2px var(--prowp-bg), 0 0 0 4px var(--prowp-primary)); outline-offset: var(--prowp-focus-offset, 3px); }

/* ════════════════════════════════════════════════════════════════
   ANNOUNCEMENT STRIP
   ════════════════════════════════════════════════════════════════ */
.prowp-homepage .prowp-homepage__section--announcement { padding-block: 0; }
.prowp-homepage .prowp-announcement {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 0.625rem clamp(1rem, 3vw, 2rem);
  background: var(--prowp-section-bg, var(--prowp-primary)); color: var(--prowp-text-on-primary, #fff);
  text-align: center; font-size: var(--prowp-text-sm, 0.9375rem); font-weight: 500;
}
.prowp-homepage .prowp-announcement__text { margin: 0; }
.prowp-homepage .prowp-announcement__link { color: inherit; text-decoration: underline; font-weight: 700; }
.prowp-homepage .prowp-announcement__close {
  appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer;
  padding: 0.25rem; min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
}
.prowp-homepage .prowp-announcement__close:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.prowp-homepage .prowp-announcement.is-dismissed { display: none; }

/* ════════════════════════════════════════════════════════════════
   BENEFITS
   ════════════════════════════════════════════════════════════════ */
.prowp-homepage .prowp-benefits { list-style: none; margin: 0; padding: 0; }
.prowp-homepage .prowp-benefit {
  display: flex; align-items: flex-start; gap: 0.875rem; margin: 0;
  padding: 1rem; background: var(--prowp-bg, #fff); border: 1px solid var(--prowp-border, #e2e8f0);
  border-radius: var(--prowp-card-radius, 12px);
}
.prowp-homepage .prowp-benefit__icon {
  flex-shrink: 0; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--prowp-radius-md, 0.5rem);
  background: var(--prowp-primary-soft, color-mix(in oklch, var(--prowp-primary) 10%, transparent));
  color: var(--prowp-primary);
}
.prowp-homepage .prowp-benefit__body { display: flex; flex-direction: column; gap: 0.25rem; }
.prowp-homepage .prowp-benefit__title { font-weight: 700; color: var(--prowp-text, #1f2937); }
.prowp-homepage .prowp-benefit__text { font-size: var(--prowp-text-sm, 0.875rem); color: var(--prowp-text-muted, #64748b); }

/* ════════════════════════════════════════════════════════════════
   BUSINESS STATS / NUMBERS
   Fill-width grid: --prowp-stats-cols-* from PHP (min(count, maxCols))
   + .prowp-stats__list--count-N modifiers (2–6). No empty side tracks.
   ════════════════════════════════════════════════════════════════ */
.prowp-homepage .prowp-stats__list.prowp-homepage__grid {
  list-style: none;
  margin-inline: auto;
  margin-block: 0;
  padding-inline: clamp(1rem, 3vw, 2rem);
  padding-block: 0;
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  justify-items: stretch;
  gap: var(--prowp-homepage-gap, var(--prowp-space-md, 1rem));
  inline-size: min(100%, var(--prowp-container-width, 1440px));
  max-inline-size: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(
    var(--prowp-stats-cols-desktop, var(--prowp-section-cols-desktop, var(--prowp-stats-count, var(--prowp-grid-cols-fallback, 1)))),
    minmax(0, 1fr)
  );
}

/* Count modifiers: CSS fallbacks when PHP vars are missing; reserve intent. */
.prowp-homepage .prowp-stats__list--count-2 { --prowp-stats-count: 2; --prowp-grid-cols-fallback: 2; }
.prowp-homepage .prowp-stats__list--count-3 { --prowp-stats-count: 3; --prowp-grid-cols-fallback: 3; }
.prowp-homepage .prowp-stats__list--count-4 { --prowp-stats-count: 4; --prowp-grid-cols-fallback: 4; }
.prowp-homepage .prowp-stats__list--count-5 { --prowp-stats-count: 5; --prowp-grid-cols-fallback: 3; }
.prowp-homepage .prowp-stats__list--count-6 { --prowp-stats-count: 6; --prowp-grid-cols-fallback: 3; }

.prowp-homepage .prowp-stats__list--count-2 {
  grid-template-columns: repeat(var(--prowp-stats-cols-desktop, 2), minmax(0, 1fr));
}
.prowp-homepage .prowp-stats__list--count-3 {
  grid-template-columns: repeat(var(--prowp-stats-cols-desktop, 3), minmax(0, 1fr));
}
.prowp-homepage .prowp-stats__list--count-4 {
  grid-template-columns: repeat(var(--prowp-stats-cols-desktop, 4), minmax(0, 1fr));
}
/* 5: 3+2 below xl (capped by PHP max); 5-across on xl when allowed. */
.prowp-homepage .prowp-stats__list--count-5 {
  grid-template-columns: repeat(min(3, var(--prowp-stats-cols-desktop, 3)), minmax(0, 1fr));
}
/* 6: 3×2 below xl; 6-across on xl when PHP allows. */
.prowp-homepage .prowp-stats__list--count-6 {
  grid-template-columns: repeat(min(3, var(--prowp-stats-cols-desktop, 3)), minmax(0, 1fr));
}

@media (min-width: 1200px) {
  .prowp-homepage .prowp-stats__list--count-5 {
    grid-template-columns: repeat(var(--prowp-stats-cols-desktop, 5), minmax(0, 1fr));
  }
  .prowp-homepage .prowp-stats__list--count-6 {
    grid-template-columns: repeat(var(--prowp-stats-cols-desktop, 6), minmax(0, 1fr));
  }
}

.prowp-homepage .prowp-stats__list > .prowp-stat {
  inline-size: 100%;
  max-inline-size: none;
  min-inline-size: 0;
  block-size: 100%;
}
.prowp-homepage .prowp-stat {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--prowp-space-2, 0.5rem);
  min-block-size: 0;
  padding: var(--prowp-space-md, 1rem);
  box-sizing: border-box;
}
.prowp-homepage .prowp-stats--cards .prowp-stat {
  background: var(--prowp-bg, var(--prowp-color-surface, #fff));
  border: 1px solid var(--prowp-border, var(--prowp-color-border, #e2e8f0));
  border-radius: var(--prowp-card-radius, 12px);
}
.prowp-homepage .prowp-stats--divided .prowp-stat {
  border-inline-end: 1px solid var(--prowp-border, var(--prowp-color-border, #e2e8f0));
}
.prowp-homepage .prowp-stats--divided .prowp-stat:last-child {
  border-inline-end: 0;
}
.prowp-homepage .prowp-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  flex-shrink: 0;
  border-radius: var(--prowp-radius-md, 0.5rem);
  color: var(--prowp-primary, var(--prowp-color-primary));
  background: var(--prowp-primary-soft, color-mix(in oklch, var(--prowp-primary, var(--prowp-color-primary)) 12%, transparent));
}
.prowp-homepage .prowp-stat__value {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--prowp-text, var(--prowp-color-text));
  font-variant-numeric: tabular-nums;
  /* Reserve vertical space so count-up does not cause CLS. */
  min-block-size: 1.15em;
}
.prowp-homepage .prowp-stat__number {
  display: inline-block;
  min-inline-size: 2ch;
  font-variant-numeric: tabular-nums;
}
.prowp-homepage .prowp-stat__prefix,
.prowp-homepage .prowp-stat__suffix {
  font-weight: 600;
  font-size: 0.85em;
  color: var(--prowp-text-muted, var(--prowp-color-text-muted, #64748b));
}
.prowp-homepage .prowp-stat__label {
  margin: 0;
  font-size: var(--prowp-text-sm, 0.875rem);
  line-height: 1.4;
  color: var(--prowp-text-muted, var(--prowp-color-text-muted, #64748b));
  overflow-wrap: anywhere;
}
@media (max-width: 1023px) {
  .prowp-homepage .prowp-stats__list.prowp-homepage__grid {
    grid-template-columns: repeat(
      var(--prowp-stats-cols-tablet, var(--prowp-section-cols-tablet, 2)),
      minmax(0, 1fr)
    );
  }
  .prowp-homepage .prowp-stats__list--count-2 {
    grid-template-columns: repeat(var(--prowp-stats-cols-tablet, 2), minmax(0, 1fr));
  }
  .prowp-homepage .prowp-stats__list--count-3 {
    grid-template-columns: repeat(var(--prowp-stats-cols-tablet, 3), minmax(0, 1fr));
  }
  .prowp-homepage .prowp-stats__list--count-4 {
    grid-template-columns: repeat(var(--prowp-stats-cols-tablet, 2), minmax(0, 1fr));
  }
  .prowp-homepage .prowp-stats__list--count-5 {
    grid-template-columns: repeat(var(--prowp-stats-cols-tablet, 3), minmax(0, 1fr));
  }
  .prowp-homepage .prowp-stats__list--count-6 {
    grid-template-columns: repeat(var(--prowp-stats-cols-tablet, 3), minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .prowp-homepage .prowp-stats__list.prowp-homepage__grid {
    grid-template-columns: repeat(
      var(--prowp-stats-cols-mobile, var(--prowp-section-cols-mobile, 1)),
      minmax(0, 1fr)
    );
  }
  .prowp-homepage .prowp-stats__list--count-2 {
    grid-template-columns: repeat(var(--prowp-stats-cols-mobile, 2), minmax(0, 1fr));
  }
  .prowp-homepage .prowp-stats__list--count-3 {
    grid-template-columns: repeat(var(--prowp-stats-cols-mobile, 1), minmax(0, 1fr));
  }
  .prowp-homepage .prowp-stats__list--count-4 {
    grid-template-columns: repeat(var(--prowp-stats-cols-mobile, 2), minmax(0, 1fr));
  }
  .prowp-homepage .prowp-stats__list--count-5 {
    grid-template-columns: repeat(var(--prowp-stats-cols-mobile, 1), minmax(0, 1fr));
  }
  .prowp-homepage .prowp-stats__list--count-6 {
    grid-template-columns: repeat(var(--prowp-stats-cols-mobile, 2), minmax(0, 1fr));
  }
  .prowp-homepage .prowp-stats--divided .prowp-stat {
    border-inline-end: 0;
    border-block-end: 1px solid var(--prowp-border, var(--prowp-color-border, #e2e8f0));
  }
  .prowp-homepage .prowp-stats--divided .prowp-stat:last-child {
    border-block-end: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .prowp-homepage .prowp-stat__number {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   INSTAGRAM / GALLERY
   ════════════════════════════════════════════════════════════════ */
.prowp-homepage .prowp-instagram {
  --prowp-ig-gap: var(--prowp-space-2, 0.5rem);
  --prowp-ig-radius: var(--prowp-radius-md, 0.5rem);
  --prowp-ig-cols: 6;
}
.prowp-homepage .prowp-instagram__list {
  list-style: none;
  margin: 0;
  padding-inline: clamp(var(--prowp-space-4, 1rem), 3vw, var(--prowp-space-8, 2rem));
  display: grid;
  grid-template-columns: repeat(var(--prowp-section-cols-desktop, var(--prowp-ig-cols, 6)), minmax(0, 1fr));
  gap: var(--prowp-ig-gap);
}
.prowp-homepage .prowp-instagram__item { margin: 0; min-inline-size: 0; }
.prowp-homepage .prowp-instagram__link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--prowp-ig-radius);
  color: inherit;
  text-decoration: none;
}
.prowp-homepage .prowp-instagram__link:focus-visible {
  outline: var(--prowp-focus-ring, 0 0 0 2px var(--prowp-bg), 0 0 0 4px var(--prowp-primary));
  outline-offset: var(--prowp-focus-offset, 3px);
}
.prowp-homepage .prowp-instagram__media {
  display: block;
  position: relative;
  aspect-ratio: 1;
  background: var(--prowp-surface-muted, var(--prowp-border, #e2e8f0));
  overflow: hidden;
}
.prowp-homepage .prowp-instagram__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity var(--prowp-dur, 0.35s) var(--prowp-ease, ease),
    transform var(--prowp-dur, 0.35s) var(--prowp-ease, ease);
}
.prowp-homepage .prowp-instagram.is-ready .prowp-instagram__img,
.prowp-homepage .prowp-instagram__img.is-visible {
  opacity: 1;
  transform: none;
}
.prowp-homepage .prowp-instagram__link:hover .prowp-instagram__img,
.prowp-homepage .prowp-instagram__link:focus-visible .prowp-instagram__img {
  transform: scale(1.04);
}
.prowp-homepage .prowp-instagram__badge {
  position: absolute;
  inset-block-start: var(--prowp-space-2, 0.5rem);
  inset-inline-end: var(--prowp-space-2, 0.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.75rem;
  min-block-size: 1.75rem;
  border-radius: var(--prowp-radius-pill, 999px);
  background: color-mix(in srgb, var(--prowp-bg, #fff) 82%, transparent);
  color: var(--prowp-text, #111);
  pointer-events: none;
}

/* Grid (default) — already grid above */

/* Masonry */
.prowp-homepage .prowp-instagram--masonry .prowp-instagram__list {
  grid-template-columns: repeat(var(--prowp-section-cols-desktop, var(--prowp-ig-cols, 6)), minmax(0, 1fr));
  grid-auto-rows: var(--prowp-space-2, 0.5rem);
}
.prowp-homepage .prowp-instagram--masonry .prowp-instagram__item:nth-child(3n+1) .prowp-instagram__media {
  aspect-ratio: 3 / 4;
}
.prowp-homepage .prowp-instagram--masonry .prowp-instagram__item:nth-child(3n+2) .prowp-instagram__media {
  aspect-ratio: 1;
}
.prowp-homepage .prowp-instagram--masonry .prowp-instagram__item:nth-child(3n) .prowp-instagram__media {
  aspect-ratio: 4 / 5;
}

/* Stories — horizontal scroll-snap strip */
.prowp-homepage .prowp-instagram--stories .prowp-instagram__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--prowp-space-3, 0.75rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(var(--prowp-space-4, 1rem), 3vw, var(--prowp-space-8, 2rem));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-block-end: var(--prowp-space-2, 0.5rem);
}
.prowp-homepage .prowp-instagram--stories .prowp-instagram__item {
  flex: 0 0 auto;
  inline-size: clamp(4.5rem, 18vw, 6.5rem);
  scroll-snap-align: start;
}
.prowp-homepage .prowp-instagram--stories .prowp-instagram__link,
.prowp-homepage .prowp-instagram--stories .prowp-instagram__media {
  border-radius: var(--prowp-radius-pill, 999px);
}
.prowp-homepage .prowp-instagram--stories .prowp-instagram__media {
  aspect-ratio: 1;
  box-shadow: 0 0 0 2px var(--prowp-bg, #fff), 0 0 0 4px var(--prowp-primary);
}

/* Carousel uses shared .prowp-carousel; tiles keep square media */
.prowp-homepage .prowp-instagram__carousel {
  padding-inline: clamp(var(--prowp-space-4, 1rem), 3vw, var(--prowp-space-8, 2rem));
}
.prowp-homepage .prowp-instagram__carousel .prowp-instagram__list {
  padding-inline: 0;
  display: flex;
  gap: var(--prowp-ig-gap);
}
.prowp-homepage .prowp-instagram__carousel .prowp-instagram__item {
  flex: 0 0 auto;
}

.prowp-homepage .prowp-instagram__follow {
  text-align: center;
  margin-block-start: var(--prowp-space-4, 1rem);
  margin-block-end: 0;
  padding-inline: clamp(var(--prowp-space-4, 1rem), 3vw, var(--prowp-space-8, 2rem));
}
.prowp-homepage .prowp-instagram__follow-link {
  color: var(--prowp-primary);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding-inline: var(--prowp-space-3, 0.75rem);
}
.prowp-homepage .prowp-instagram__follow-link:hover,
.prowp-homepage .prowp-instagram__follow-link:focus-visible {
  text-decoration: underline;
}

/* Admin empty / skeleton */
.prowp-homepage .prowp-instagram__empty {
  padding-inline: clamp(var(--prowp-space-4, 1rem), 3vw, var(--prowp-space-8, 2rem));
}
.prowp-homepage .prowp-instagram__skeletons {
  list-style: none;
  margin: 0 0 var(--prowp-space-3, 0.75rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
  gap: var(--prowp-ig-gap);
}
.prowp-homepage .prowp-instagram__skeleton {
  aspect-ratio: 1;
  border-radius: var(--prowp-ig-radius);
  background: linear-gradient(
    90deg,
    var(--prowp-surface-muted, #e8eef3) 0%,
    var(--prowp-border, #d5dee7) 50%,
    var(--prowp-surface-muted, #e8eef3) 100%
  );
  background-size: 200% 100%;
  animation: prowp-ig-shimmer 1.4s ease-in-out infinite;
}
.prowp-homepage .prowp-instagram__empty-msg {
  margin: 0;
  color: var(--prowp-text-muted, #64748b);
  font-size: var(--prowp-text-sm, 0.875rem);
  text-align: center;
}

@keyframes prowp-ig-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (max-width: 1024px) {
  .prowp-homepage .prowp-instagram__list {
    grid-template-columns: repeat(var(--prowp-section-cols-tablet, 3), minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .prowp-homepage .prowp-instagram__list {
    grid-template-columns: repeat(var(--prowp-section-cols-mobile, 2), minmax(0, 1fr));
  }
  .prowp-homepage .prowp-instagram--stories .prowp-instagram__item {
    inline-size: clamp(4rem, 22vw, 5.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prowp-homepage .prowp-instagram__img,
  .prowp-homepage .prowp-instagram__link:hover .prowp-instagram__img,
  .prowp-homepage .prowp-instagram__link:focus-visible .prowp-instagram__img {
    transition: none !important;
    transform: none !important;
  }
  .prowp-homepage .prowp-instagram__skeleton {
    animation: none !important;
  }
  .prowp-homepage .prowp-instagram.is-ready .prowp-instagram__img,
  .prowp-homepage .prowp-instagram__img.is-visible {
    opacity: 1;
  }
}

/* ════════════════════════════════════════════════════════════════
   FAQ (native <details>)
   ════════════════════════════════════════════════════════════════ */
.prowp-homepage .prowp-faq { max-width: 50rem; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
.prowp-homepage .prowp-faq__item {
  border: 1px solid var(--prowp-border, #e2e8f0); border-radius: var(--prowp-radius-md, 0.5rem);
  margin-block-end: 0.5rem; overflow: hidden; background: var(--prowp-bg, #fff);
}
.prowp-homepage .prowp-faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer; padding: 1rem 1.25rem; margin: 0; font-weight: 600; color: var(--prowp-text, #1f2937);
  list-style: none; min-height: 44px;
}
.prowp-homepage .prowp-faq__question::-webkit-details-marker { display: none; }
.prowp-homepage .prowp-faq__question:focus-visible { outline: var(--prowp-focus-ring, 0 0 0 2px var(--prowp-bg), 0 0 0 4px var(--prowp-primary)); outline-offset: var(--prowp-focus-offset, 3px); }
.prowp-homepage .prowp-faq__icon { flex-shrink: 0; transition: transform var(--prowp-dur, 0.3s) var(--prowp-ease, ease); color: var(--prowp-text-muted, #64748b); }
.prowp-homepage .prowp-faq__item[open] .prowp-faq__icon { transform: rotate(180deg); }
.prowp-homepage .prowp-faq__answer { padding: 0 1.25rem 1.25rem; color: var(--prowp-text-soft, #475569); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .prowp-homepage .prowp-faq__icon { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   BLOG POSTS / NEWS SECTION
   Equal-height contract: grid stretch + fixed media aspect + flex pin CTA
   ════════════════════════════════════════════════════════════════ */
.prowp-homepage .prowp-blog-posts {
  padding-inline: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
}

.prowp-homepage .prowp-blog-card,
.prowp-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  background: var(--prowp-bg, #fff);
  border: 1px solid var(--prowp-border, #e2e8f0);
  border-radius: var(--prowp-card-radius, 12px);
  overflow: hidden;
  transition: transform var(--prowp-dur, 0.3s) var(--prowp-ease, ease), box-shadow var(--prowp-dur, 0.3s) var(--prowp-ease, ease);
}

.prowp-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.prowp-blog-card__media {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: var(--prowp-blog-media-ratio, 16 / 10);
  overflow: hidden;
  background: var(--prowp-bg-soft, #f8fafc);
}

.prowp-blog-card__thumb-link {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  height: 100%;
}

.prowp-blog-card__image,
.prowp-blog-card__media img,
.prowp-blog-card__media .wp-post-image,
.prowp-blog-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.prowp-blog-card__placeholder {
  background:
    linear-gradient(135deg, var(--prowp-bg-soft, #f8fafc) 0%, var(--prowp-border, #e2e8f0) 100%);
}

.prowp-blog-card__image {
  transition: transform var(--prowp-dur, 0.3s) var(--prowp-ease, ease);
}

.prowp-blog-card:hover .prowp-blog-card__image {
  transform: scale(1.04);
}

.prowp-blog-card__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-block-size: 0;
  gap: var(--prowp-space-2, 0.5rem);
  padding: var(--prowp-space-5, 1.25rem);
}

.prowp-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
  font-size: 0.8125rem;
  color: var(--prowp-text-muted, #64748b);
}

.prowp-blog-card__meta-sep {
  opacity: 0.5;
}

.prowp-blog-card__category {
  color: var(--prowp-primary);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.prowp-blog-card__title {
  font-size: 1.125rem;
  line-height: 1.4;
  margin: 0 0 0.75rem;
  font-family: var(--prowp-fh, var(--prowp-ff, inherit));
  font-weight: 700;
}

.prowp-blog-card__title a {
  color: var(--prowp-text, #1f2937);
  text-decoration: none;
  transition: color var(--prowp-dur-fast, 0.18s) var(--prowp-ease, ease);
}

.prowp-blog-card__title a:hover,
.prowp-blog-card__title a:focus-visible {
  color: var(--prowp-primary);
}

.prowp-blog-card__excerpt {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--prowp-text-soft, #475569);
  margin-block-end: 1rem;
  flex-grow: 1;
}

.prowp-blog-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-start: auto;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--prowp-primary);
  text-decoration: none;
  align-self: flex-start;
  transition: color var(--prowp-dur-fast, 0.18s) var(--prowp-ease, ease);
}

.prowp-blog-card__read-more:hover,
.prowp-blog-card__read-more:focus-visible {
  color: var(--prowp-text, #1f2937);
}

.prowp-blog-card__arrow {
  transition: transform var(--prowp-dur-fast, 0.18s) var(--prowp-ease, ease);
}

.prowp-blog-card__read-more:hover .prowp-blog-card__arrow {
  transform: translateX(3px);
}

/* RTL: logical props above; mirror hover nudge */
.is-rtl .prowp-blog-card__arrow,
[dir="rtl"] .prowp-blog-card__arrow {
  transform: scaleX(-1);
}
.is-rtl .prowp-blog-card__read-more:hover .prowp-blog-card__arrow,
[dir="rtl"] .prowp-blog-card__read-more:hover .prowp-blog-card__arrow {
  transform: scaleX(-1) translateX(3px);
}

/* ── Blog card presets ─────────────────────────────────────── */
.prowp-blog-card--style-classic,
.prowp-blog-posts--style-classic .prowp-blog-card {
  border-radius: var(--prowp-card-radius, 12px);
}

.prowp-blog-card--style-minimal,
.prowp-blog-posts--style-minimal .prowp-blog-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.prowp-blog-card--style-minimal:hover,
.prowp-blog-posts--style-minimal .prowp-blog-card:hover {
  transform: none;
  box-shadow: none;
}

.prowp-blog-card--style-minimal .prowp-blog-card__media,
.prowp-blog-posts--style-minimal .prowp-blog-card__media {
  border-radius: 8px;
}

.prowp-blog-card--style-minimal .prowp-blog-card__content,
.prowp-blog-posts--style-minimal .prowp-blog-card__content {
  padding-inline: 0;
  padding-block: 1rem 0;
}

.prowp-blog-card--style-organic-farm,
.prowp-blog-posts--style-organic-farm .prowp-blog-card {
  border-color: color-mix(in srgb, var(--prowp-primary) 18%, var(--prowp-border, #e2e8f0));
  border-radius: 16px;
  background: var(--prowp-bg, #fff);
}

.prowp-blog-card--style-organic-farm .prowp-blog-card__category,
.prowp-blog-posts--style-organic-farm .prowp-blog-card__category,
.prowp-blog-card--style-organic-farm .prowp-blog-card__read-more,
.prowp-blog-posts--style-organic-farm .prowp-blog-card__read-more {
  color: var(--prowp-primary);
}

.prowp-blog-card--style-organic-farm .prowp-blog-card__title,
.prowp-blog-posts--style-organic-farm .prowp-blog-card__title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.prowp-blog-card--style-editorial,
.prowp-blog-posts--style-editorial .prowp-blog-card {
  border: 0;
  border-block-end: 1px solid var(--prowp-border, #e2e8f0);
  border-radius: 0;
  background: transparent;
}

.prowp-blog-card--style-editorial:hover,
.prowp-blog-posts--style-editorial .prowp-blog-card:hover {
  transform: none;
  box-shadow: none;
}

.prowp-blog-card--style-editorial .prowp-blog-card__media,
.prowp-blog-posts--style-editorial .prowp-blog-card__media {
  aspect-ratio: 16 / 10;
  border-radius: 0;
}

.prowp-blog-card--style-editorial .prowp-blog-card__content,
.prowp-blog-posts--style-editorial .prowp-blog-card__content {
  padding-inline: 0;
  padding-block: 1rem 1.25rem;
}

.prowp-blog-card--style-editorial .prowp-blog-card__title,
.prowp-blog-posts--style-editorial .prowp-blog-card__title {
  font-family: var(--prowp-fh, Georgia, "Times New Roman", serif);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.prowp-blog-card--style-editorial .prowp-blog-card__read-more,
.prowp-blog-posts--style-editorial .prowp-blog-card__read-more {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .prowp-blog-card,
  .prowp-blog-card__image,
  .prowp-blog-card__arrow {
    transition: none !important;
  }

  .prowp-blog-card:hover {
    transform: none;
  }

  .prowp-blog-card:hover .prowp-blog-card__image {
    transform: none;
  }
}

.prowp-homepage .prowp-custom-content {
  width: min(100%, var(--prowp-container, 1200px));
  margin-inline: auto;
  color: var(--prowp-text-soft, #475569);
  line-height: 1.75;
}

.prowp-homepage .prowp-custom-content--narrow {
  width: min(100%, 760px);
}

.prowp-homepage .prowp-custom-content--wide {
  width: min(100%, var(--prowp-container-wide, 1400px));
}

.prowp-homepage .prowp-custom-content--full {
  width: 100%;
}

.prowp-homepage .prowp-custom-content > :first-child {
  margin-block-start: 0;
}

.prowp-homepage .prowp-custom-content > :last-child {
  margin-block-end: 0;
}

.prowp-homepage .prowp-custom-content :where(h2, h3, h4) {
  color: var(--prowp-text, #1f2937);
  line-height: 1.25;
  letter-spacing: 0;
}

.prowp-homepage .prowp-custom-content :where(a) {
  color: var(--prowp-primary);
  font-weight: 700;
}

/* ── Custom content: rooted editorial split ───────────────── */
.prowp-homepage__section--custom_content.prowp-homepage__section--rooted-story {
  background-image: none !important;
}

.prowp-homepage .prowp-custom-content--rooted {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  max-width: var(--prowp-container-wide, 1200px);
}

@media (min-width: 768px) {
  .prowp-homepage .prowp-custom-content--rooted {
    grid-template-columns: 1fr 1fr;
  }
}

.prowp-homepage .prowp-custom-content--rooted .prowp-custom-content__media {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(36, 54, 43, 0.1);
}

.prowp-homepage .prowp-custom-content--rooted .prowp-custom-content__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}

.prowp-homepage .prowp-custom-content--rooted .prowp-custom-content__body {
  background: var(--prowp-color-surface, #fff);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 4px 20px rgba(36, 54, 43, 0.06);
}

.prowp-homepage .prowp-rooted-quote {
  margin: 0 0 1rem;
  padding-inline-start: 1.25rem;
  border-inline-start: 4px solid var(--prowp-primary);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--prowp-text, #24362b);
  font-style: normal;
}

.prowp-homepage .prowp-rooted-quote p {
  margin: 0;
}

.prowp-homepage .prowp-rooted-quote p::before {
  content: none;
}

.prowp-homepage .prowp-custom-content__cta {
  margin-block: 1.25rem 0;
}

.prowp-homepage .prowp-custom-content__cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  background: var(--prowp-primary);
  color: var(--prowp-color-on-primary, #fff);
  font-weight: 600;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}

.prowp-homepage .prowp-custom-content__cta-link:hover {
  background: color-mix(in srgb, var(--prowp-primary) 88%, #000);
  transform: translateY(-1px);
}

.prowp-homepage .prowp-custom-content__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 1.25rem 0;
}

.prowp-homepage .prowp-custom-content__cta-link--secondary {
  background: transparent;
  color: var(--prowp-primary);
  border: 2px solid var(--prowp-primary);
}

.prowp-homepage .prowp-custom-content__cta-link--secondary:hover {
  background: color-mix(in srgb, var(--prowp-primary) 10%, transparent);
}

/* ── Full-bleed rooted editorial ──────────────────────────── */
.prowp-homepage__section--custom_content.prowp-homepage__section--full-bleed {
  background-color: var(--prowp-section-bg, var(--prowp-color-surface, #fff));
  border-block-end: 1px solid var(--prowp-border, #e2e8f0);
}

.prowp-homepage .prowp-custom-content--rooted.prowp-custom-content--full-bleed {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: clamp(2rem, 5vw, 4rem);
  box-sizing: border-box;
}

.prowp-homepage .prowp-custom-content--rooted.prowp-custom-content--full-bleed .prowp-custom-content__media {
  border-radius: 0;
  box-shadow: none;
}

.prowp-homepage .prowp-custom-content--rooted.prowp-custom-content--full-bleed .prowp-custom-content__body {
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}

/* ── Promo banner (WoodMart-style full-width split) ─────── */
.prowp-homepage__section--custom_content.prowp-homepage__section--promo-banner {
  background-color: var(--prowp-section-bg, var(--prowp-color-surface, var(--prowp-bg, #fff)));
  border-block-end: 1px solid var(--prowp-color-border, var(--prowp-border, #e2e8f0));
  overflow-x: clip;
  max-inline-size: 100%;
}

.prowp-homepage .prowp-promo-banner {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.prowp-homepage .prowp-promo-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  width: 100%;
  max-width: var(--prowp-container-wide, 1280px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: clamp(1.75rem, 5vw, 4rem);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .prowp-homepage .prowp-promo-banner__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.prowp-homepage .prowp-promo-banner__content {
  min-width: 0;
  max-width: 100%;
}

.prowp-homepage .prowp-promo-banner__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--prowp-color-primary, var(--prowp-primary));
}

.prowp-homepage .prowp-promo-banner__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.375rem, 2.8vw, 2.25rem);
  line-height: 1.2;
  color: var(--prowp-color-text, var(--prowp-text, #1f2937));
  overflow-wrap: anywhere;
}

.prowp-homepage .prowp-promo-banner__description {
  color: var(--prowp-color-text-muted, var(--prowp-text-soft, #475569));
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.prowp-homepage .prowp-promo-banner__description > :first-child {
  margin-block-start: 0;
}

.prowp-homepage .prowp-promo-banner__description > :last-child {
  margin-block-end: 0;
}

.prowp-homepage .prowp-promo-banner__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--prowp-card-radius, var(--prowp-radius, 0.75rem));
  background: color-mix(in srgb, var(--prowp-color-primary-soft, var(--prowp-primary-soft, #e8f2ea)) 35%, var(--prowp-color-canvas, var(--prowp-bg, #fff)));
}

.prowp-homepage .prowp-promo-banner__image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  display: block;
}

.prowp-homepage .prowp-promo-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 1.25rem;
}

.prowp-homepage .prowp-promo-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.65rem 1.4rem;
  border-radius: var(--prowp-radius-pill, 999px);
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.prowp-homepage .prowp-promo-banner__btn--primary {
  background: var(--prowp-color-primary, var(--prowp-primary));
  color: var(--prowp-color-on-primary, #fff);
  border: 2px solid transparent;
}

.prowp-homepage .prowp-promo-banner__btn--primary:hover,
.prowp-homepage .prowp-promo-banner__btn--primary:focus-visible {
  background: color-mix(in srgb, var(--prowp-color-primary, var(--prowp-primary)) 88%, #000);
  color: var(--prowp-color-on-primary, #fff);
  transform: translateY(-1px);
}

.prowp-homepage .prowp-promo-banner__btn--secondary {
  background: transparent;
  color: var(--prowp-color-primary, var(--prowp-primary));
  border: 2px solid var(--prowp-color-primary, var(--prowp-primary));
}

.prowp-homepage .prowp-promo-banner__btn--secondary:hover,
.prowp-homepage .prowp-promo-banner__btn--secondary:focus-visible {
  background: color-mix(in srgb, var(--prowp-color-primary, var(--prowp-primary)) 10%, transparent);
  color: var(--prowp-color-primary, var(--prowp-primary));
}

.prowp-homepage .prowp-promo-banner__btn:focus-visible {
  outline: 2px solid var(--prowp-color-primary, var(--prowp-primary));
  outline-offset: 2px;
  text-decoration: none;
}

.prowp-homepage .prowp-promo-banner__btn--primary:focus-visible {
  outline-color: var(--prowp-color-on-primary, #fff);
}

@media (max-width: 767px) {
  .prowp-homepage .prowp-promo-banner--stack-image-first .prowp-promo-banner__media {
    order: -1;
  }

  .prowp-homepage .prowp-promo-banner__inner {
    gap: 1.25rem;
    padding-block: clamp(1.5rem, 6vw, 2.5rem);
  }

  .prowp-homepage .prowp-promo-banner__title {
    font-size: clamp(1.25rem, 6.5vw, 1.75rem);
  }

  .prowp-homepage .prowp-promo-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .prowp-homepage .prowp-promo-banner__btn {
    width: 100%;
  }

  .prowp-homepage .prowp-promo-banner__media {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
}

body.prowp-dark .prowp-homepage__section--custom_content.prowp-homepage__section--promo-banner {
  background-color: var(--prowp-section-bg, var(--prowp-color-surface, #0b1220));
  border-block-end-color: color-mix(in srgb, var(--prowp-color-border, #334155) 80%, transparent);
}

body.prowp-dark .prowp-homepage .prowp-promo-banner__title {
  color: var(--prowp-color-text, #f8fafc);
}

body.prowp-dark .prowp-homepage .prowp-promo-banner__description {
  color: var(--prowp-color-text-muted, #cbd5e1);
}

body.prowp-dark .prowp-homepage .prowp-promo-banner__media {
  background: color-mix(in srgb, var(--prowp-color-primary, var(--prowp-primary)) 18%, #0b1220);
}

@media (prefers-reduced-motion: reduce) {
  .prowp-homepage .prowp-promo-banner__btn {
    transition: none;
  }

  .prowp-homepage .prowp-promo-banner__btn--primary:hover,
  .prowp-homepage .prowp-promo-banner__btn--primary:focus-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prowp-homepage .prowp-custom-content__cta-link {
    transition: none;
  }

  .prowp-homepage .prowp-custom-content__cta-link:hover {
    transform: none;
  }
}

/* ── Custom content: wide text-on-image overlay ───────────── */
.prowp-homepage__section--custom_content.prowp-homepage__section--custom-overlay {
  background-image: none !important;
}

.prowp-homepage .prowp-custom-content--wide-overlay {
  position: relative;
  isolation: isolate;
  min-height: clamp(280px, 42vw, 420px);
  border-radius: 16px;
  overflow: hidden;
  background-image: var(--prowp-section-bg-image);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prowp-homepage .prowp-custom-content__overlay-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(36, 54, 43, 0.35) 0%,
    rgba(36, 54, 43, 0.55) 100%
  );
  z-index: 0;
}

.prowp-homepage .prowp-custom-content__overlay-inner {
  position: relative;
  z-index: 1;
  max-width: min(640px, 92%);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  color: var(--prowp-color-on-primary, #fff);
}

.prowp-homepage .prowp-custom-content--wide-overlay .prowp-homepage__section-head {
  margin-block-end: 1rem;
}

.prowp-homepage .prowp-custom-content--wide-overlay .prowp-homepage__section-title,
.prowp-homepage .prowp-custom-content--wide-overlay .prowp-homepage__section-subtitle {
  color: inherit;
}

.prowp-homepage .prowp-custom-content__overlay-text {
  line-height: 1.7;
}

.prowp-homepage .prowp-custom-content__cta-link--overlay {
  background: var(--prowp-color-surface, #fff);
  color: var(--prowp-text, #24362b);
}

/* ─────────────────────────────────────────────────────────────────
   Homepage first section: flush against the header.
   The site header sits above the homepage so the first section should
   sit directly underneath with no top padding (visual continuity).
   ───────────────────────────────────────────────────────────────── */
body.home .prowp-homepage__section:first-child.prowp-homepage__section--pad-medium,
body.home .prowp-homepage__section:first-child.prowp-homepage__section--pad-large,
body.home .prowp-homepage__section:first-child.prowp-homepage__section--pad-small {
  padding-top: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   Hero scroll effects — controlled by CSF (hero_parallax + hero_zoom_in).
   The base layer uses transform so it composes with the existing image
   and never causes layout. When the JS module is absent (no-scroll-effects
   path) elements render in their final, non-shifted state thanks to the
   CSS-default below.
   ───────────────────────────────────────────────────────────────── */
.prowp-hero--has-scroll-effects {
  /* The hero frame is the overflow:hidden container; the inner media
     (.prowp-hero__picture / .prowp-hero__video-target) is what gets
     translated. overflow:hidden crops the parallax shift.
     Zoom scale stays at 1 until JS/reveal bumps it — starting at 1.06
     caused CLS when deferred homepage-builder.css arrived. */
	--prowp-hero-zoom-scale: 1;
	--prowp-hero-parallax-y: 0px;
}
.prowp-hero--has-scroll-effects .prowp-hero__frame {
  overflow: hidden;
}
.prowp-hero--has-scroll-effects .prowp-hero__picture,
.prowp-hero--has-scroll-effects .prowp-hero__video-target {
	transform: translate3d(0, var(--prowp-hero-parallax-y), 0);
	scale: var(--prowp-hero-zoom-scale);
	transition: transform 80ms linear, scale 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform, scale;
}
/* Zoom-in starts at the full frame size and grows inside the clipped frame.
   Starting below 1 exposed the frame background as false side gutters. */
.prowp-hero--has-scroll-effects[data-prowp-zoom-in="1"] .prowp-hero__picture {
	scale: 1;
}
.prowp-hero--has-scroll-effects[data-prowp-zoom-in="1"].is-revealed .prowp-hero__picture {
	scale: var(--prowp-hero-zoom-scale);
}

/* Hero fixed parallax (CSF: fixed).
   Primary effect is JS viewport-lock via --prowp-hero-parallax-y.
   Native position:fixed is defeated by critical CSS contain:layout on the
   hero frame and by individual transform/scale on the media layer (zoom-in). */
.prowp-hero--parallax-fixed,
.prowp-hero--parallax-fixed .prowp-hero__frame {
	overflow: hidden;
	/* Drop layout containment so progressive CSS-fixed can work if a theme
	   strips JS; style containment alone keeps paint isolation without
	   creating a fixed containing block. */
	contain: style;
}
.prowp-hero--parallax-fixed .prowp-hero__picture,
.prowp-hero--parallax-fixed .prowp-hero__video-target {
	--prowp-hero-parallax-y: 0px;
	/* Oversized media so the lock translate has headroom without gaps.
	   !important beats critical CSS inset:0!important on .prowp-hero__picture. */
	top: -10% !important;
	bottom: auto !important;
	height: 120% !important;
	inset-inline: 0 !important;
	width: 100% !important;
	transform: translate3d(0, var(--prowp-hero-parallax-y), 0);
	will-change: transform;
}
/* Zoom composes via the individual scale property — keep it on the picture
   so it does not fight the parallax translate. */
.prowp-hero--parallax-fixed .prowp-hero__picture img,
.prowp-hero--parallax-fixed .prowp-hero__picture source + img,
.prowp-hero--parallax-fixed .prowp-hero__picture > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* Respect reduced-motion: kill all transforms + transitions. */
@media (prefers-reduced-motion: reduce) {
  .prowp-hero--has-scroll-effects .prowp-hero__picture,
	.prowp-hero--has-scroll-effects .prowp-hero__video-target {
    transform: none !important;
		scale: 1 !important;
    transition: none !important;
		will-change: auto;
  }
}

/* Homepage product sections — carousel display mode */
body.home.woo-premium-ui .prowp-homepage--products-carousel .prowp-homepage-products-carousel ul.products.prowp-homepage__grid,
body.home.woo-premium-ui .prowp-homepage--products-carousel .prowp-homepage-products-carousel ul.products.prowp-carousel__track,
.prowp-homepage--products-carousel .prowp-homepage-products-carousel ul.products.prowp-homepage__grid,
.prowp-homepage--products-carousel .prowp-homepage-products-carousel ul.products.prowp-carousel__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  grid-auto-flow: unset !important;
}

body.home.woo-premium-ui .prowp-homepage--products-carousel .prowp-homepage-products-carousel ul.products > li.product,
.prowp-homepage--products-carousel .prowp-homepage-products-carousel ul.products > li.product {
  /* carousel.js sets --prowp-slide-basis inline per breakpoint; the clamp()
     is a pre-init / no-JS fallback so cards never collapse to thin strips. */
  flex: 0 0 var(--prowp-slide-basis, clamp(220px, 24%, 320px));
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Woodmart fade carousel — keep root overflow visible for absolute arrows;
   clip horizontal slide overflow only on the track-wrap. */
.prowp-homepage--products-carousel .prowp-homepage-products-carousel {
  overflow: visible;
  height: auto !important;
  max-height: none !important;
}

.prowp-homepage--products-carousel .prowp-homepage-products-carousel .prowp-carousel__track-wrap {
  overflow-x: hidden;
  overflow-y: visible;
  height: auto !important;
  max-height: none !important;
}

/* Scope to product carousels only — .prowp-homepage--products-carousel is on the
   homepage root, so an unqualified .prowp-carousel__track selector also matched
   promo banner tracks and forced height:auto, collapsing banner images to 0px. */
.prowp-homepage--products-carousel .prowp-homepage-products-carousel .prowp-carousel__track {
  align-items: flex-start !important;
  height: auto !important;
}

.prowp-homepage--products-carousel .prowp-homepage-products-carousel .prowp-carousel__slide,
.prowp-homepage--products-carousel .prowp-homepage-products-carousel .prowp-carousel__slide.product {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-self: flex-start !important;
}

/* Hybrid PC/Mobile: grid mode restores CSS grid when carousel JS is torn down. */
.prowp-homepage-products-carousel.is-grid-active .prowp-carousel__btn-wrap,
.prowp-homepage-products-carousel.is-grid-active .prowp-carousel__dots {
  display: none !important;
}

.prowp-homepage-products-carousel.is-grid-active .prowp-carousel__track-wrap {
  overflow: visible;
}

.prowp-homepage-products-carousel.is-grid-active .prowp-carousel__track {
  display: grid !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  transform: none !important;
  transition: none !important;
  grid-template-columns: revert !important;
}

.prowp-homepage-products-carousel.is-grid-active .prowp-carousel__slide {
  flex-basis: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * Product Card Templates — 5 variants × 5 hover states
 * Templates: classic | centered-cta | info-rich | overlay-actions | compact-list
 * Hover:    reveal-actions | image-zoom | glow | swap-image | none
 *
 * All animations use transform/opacity only (no width/height/top/left) to
 * stay on the compositor and avoid layout shift (CLS = 0).
 * Image area always reserves aspect-ratio: 1 / 1 (see prowpcommerce.css
 * .prowp-card-image-wrap) so the layout is stable while the user paints.
 * ════════════════════════════════════════════════════════════════════════ */

/* ----- common card body (used by every template) ----------------------- */
.prowp-homepage--card-classic .prowp-product-card .prowp-card-content,
.prowp-homepage--card-centered-cta .prowp-product-card .prowp-card-content,
.prowp-homepage--card-info-rich .prowp-product-card .prowp-card-content,
.prowp-homepage--card-overlay-actions .prowp-product-card .prowp-card-content,
.prowp-homepage--card-compact-list .prowp-product-card .prowp-card-content,
body.prowp-loop-card-template-classic .prowp-product-card .prowp-card-content,
body.prowp-loop-card-template-classic .prowp-product-card .astra-shop-summary-wrap,
body.prowp-loop-card-template-centered-cta .prowp-product-card .prowp-card-content,
body.prowp-loop-card-template-info-rich .prowp-product-card .prowp-card-content,
body.prowp-loop-card-template-overlay-actions .prowp-product-card .prowp-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--woo-space-2, 0.5rem);
  padding: var(--woo-space-3, 0.75rem) var(--woo-space-4, 1rem) var(--woo-space-4, 1rem);
}

/* RTL uses the same logical properties — no left/right overrides needed. */

/* ----- centered-cta (ref A) -------------------------------------------- */
.prowp-homepage--card-centered-cta .prowp-product-card .prowp-card-content {
  align-items: center;
  text-align: center;
}
.prowp-homepage--card-centered-cta .prowp-product-card .prowp-card-price {
  color: var(--prowp-price-color, var(--prowp-primary, var(--prowp-color-primary)));
  font-weight: var(--prowp-price-weight, 600);
}
.prowp-homepage--card-centered-cta .prowp-product-card .prowp-card-excerpt {
  margin-block: 0;
  font-size: 0.875rem;
  color: var(--prowp-text-muted, #6b7280);
  max-width: 32ch;
}
.prowp-homepage--card-centered-cta .prowp-product-card .prowp-card__compare-corner {
  position: absolute;
  inset-block-start: var(--woo-space-2, 0.5rem);
  inset-inline-start: var(--woo-space-2, 0.5rem);
  z-index: 2;
}
.prowp-homepage--card-centered-cta .prowp-product-card .prowp-card-footer-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--woo-space-2, 0.5rem);
  margin-block-start: var(--woo-space-2, 0.5rem);
}
.prowp-homepage--card-centered-cta .prowp-product-card .prowp-card-footer-cta__main {
  display: flex;
  justify-content: stretch;
}
.prowp-homepage--card-centered-cta .prowp-product-card .prowp-card-footer-cta__main .prowp-card-footer-cta__btn {
  flex: 1 1 auto;
  background: var(--prowp-cta-bg, var(--prowp-primary));
  color: var(--prowp-cta-fg, #fff);
  border-radius: var(--prowp-button-radius, 8px);
  padding-block: 0.625rem;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.prowp-homepage--card-centered-cta .prowp-product-card .prowp-card-footer-cta__side {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----- info-rich (ref B) ---------------------------------------------- */
.prowp-homepage--card-info-rich .prowp-product-card .prowp-card-content {
  align-items: center;
  text-align: center;
  gap: var(--woo-space-3, 0.75rem);
}
.prowp-homepage--card-info-rich .prowp-product-card .prowp-card-rating {
  margin-block: 0;
}
.prowp-homepage--card-info-rich .prowp-product-card .prowp-card-excerpt {
  margin-block: 0;
  font-size: 0.875rem;
  color: var(--prowp-text-muted, #6b7280);
  max-width: 36ch;
}
.prowp-homepage--card-info-rich .prowp-product-card .prowp-card-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
}
.prowp-homepage--card-info-rich .prowp-product-card .prowp-card-swatch {
  --prowp-swatch-size: 18px;
  width: var(--prowp-swatch-size);
  height: var(--prowp-swatch-size);
  border-radius: 999px;
  border: 1px solid var(--prowp-border, rgba(0, 0, 0, 0.12));
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease;
}
.prowp-homepage--card-info-rich .prowp-product-card .prowp-card-swatch__dot {
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  background: var(--prowp-swatch-fill, var(--prowp-muted, #d1d5db));
}
.prowp-homepage--card-info-rich .prowp-product-card .prowp-card-swatch:hover {
  transform: scale(1.1);
}
.prowp-homepage--card-info-rich .prowp-product-card .prowp-card-footer-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--woo-space-2, 0.5rem);
  margin-block-start: auto;
}
.prowp-homepage--card-info-rich .prowp-product-card .prowp-card-footer-cta__main .prowp-card-footer-cta__btn {
  flex: 1 1 auto;
  background: var(--prowp-cta-bg, var(--prowp-primary));
  color: var(--prowp-cta-fg, #fff);
  border-radius: var(--prowp-button-radius, 8px);
  padding-block: 0.625rem;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.prowp-homepage--card-info-rich .prowp-product-card .prowp-card__badges--top_left {
  inset-block-start: var(--woo-space-2, 0.5rem);
  inset-inline-start: var(--woo-space-2, 0.5rem);
}

/* ----- overlay-actions ------------------------------------------------- */
.prowp-homepage--card-overlay-actions .prowp-product-card .prowp-card__actions {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}
.prowp-homepage--card-overlay-actions .prowp-product-card:hover .prowp-card__actions,
.prowp-homepage--card-overlay-actions .prowp-product-card:focus-within .prowp-card__actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.prowp-homepage--card-overlay-actions .prowp-product-card .prowp-card-image-wrap .prowp-image-primary {
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.prowp-homepage--card-overlay-actions .prowp-product-card:hover .prowp-card-image-wrap .prowp-image-primary {
  transform: scale(var(--prowp-image-hover-scale, 1.04));
}

/* ----- compact-list (5th) --------------------------------------------- */
.prowp-homepage--card-compact-list .prowp-product-card {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) auto !important;
  align-items: center;
  gap: var(--woo-space-3, 0.75rem);
  padding: var(--woo-space-3, 0.75rem);
  border: 1px solid var(--prowp-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--prowp-card-radius, 12px);
  background: var(--prowp-card-surface, #fff);
}
@media (min-width: 768px) {
  .prowp-homepage--card-compact-list .prowp-product-card {
    grid-template-columns: 120px minmax(0, 1fr) auto !important;
    gap: var(--woo-space-4, 1rem);
    padding: var(--woo-space-4, 1rem);
  }
}
.prowp-homepage--card-compact-list .prowp-product-card .prowp-card-image-wrap {
  aspect-ratio: 1;
  border-radius: var(--prowp-card-radius, 12px);
  overflow: hidden;
  margin: 0 !important;
}
.prowp-homepage--card-compact-list .prowp-product-card .prowp-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--woo-space-1, 0.25rem);
  padding: 0;
  min-width: 0;
}
.prowp-homepage--card-compact-list .prowp-product-card .prowp-product-title,
.prowp-homepage--card-compact-list .prowp-product-card h2.woocommerce-loop-product__title {
  font-size: 0.95rem;
  margin-block: 0;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prowp-homepage--card-compact-list .prowp-product-card .prowp-card-price {
  font-weight: 600;
  color: var(--prowp-price-color, var(--prowp-primary, var(--prowp-color-primary)));
}
.prowp-homepage--card-compact-list .prowp-product-card .prowp-card-compact-meta {
  display: flex;
  align-items: center;
  gap: var(--woo-space-2, 0.5rem);
}
.prowp-homepage--card-compact-list .prowp-product-card .prowp-card-compact-meta .prowp-card-footer-cta__btn {
  background: var(--prowp-cta-bg, var(--prowp-primary));
  color: var(--prowp-cta-fg, #fff);
  border-radius: var(--prowp-button-radius, 8px);
  padding: 0.5rem 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.prowp-homepage--card-compact-list .prowp-product-card .prowp-card__actions {
  display: none !important;
}
.prowp-homepage--card-compact-list .prowp-product-card .prowp-card__badges {
  inset-block-start: var(--woo-space-1, 0.25rem) !important;
  inset-inline-start: var(--woo-space-1, 0.25rem) !important;
}
.prowp-homepage--card-compact-list .prowp-product-card .prowp-card-excerpt,
.prowp-homepage--card-compact-list .prowp-product-card .prowp-card-swatches {
  display: none;
}
@media (max-width: 480px) {
  .prowp-homepage--card-compact-list .prowp-product-card .prowp-card-compact-meta .prowp-card-footer-cta__btn {
    padding: 0.4rem 0.625rem;
    font-size: 0.75rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Hover-state modifiers — apply on top of any template.
 * Each state uses transform / opacity / filter ONLY (no width/height).
 * ════════════════════════════════════════════════════════════════════════ */

/* reveal-actions: legacy default — works with templates that have the
   icon overlay or footer CTA. reveal-actions slides the .prowp-card__actions
   up; this is the same behavior used by overlay-actions, but scoped by
   the card-hover class so other templates can opt in. */
.prowp-card-hover-reveal-actions .prowp-product-card .prowp-card__actions,
.prowp-product-card.prowp-card-hover-reveal-actions .prowp-card__actions,
body.prowp-loop-card-hover-reveal-actions .prowp-product-card .prowp-card__actions {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}
.prowp-card-hover-reveal-actions .prowp-product-card:hover .prowp-card__actions,
.prowp-card-hover-reveal-actions .prowp-product-card:focus-within .prowp-card__actions,
.prowp-product-card.prowp-card-hover-reveal-actions:hover .prowp-card__actions,
.prowp-product-card.prowp-card-hover-reveal-actions:focus-within .prowp-card__actions,
body.prowp-loop-card-hover-reveal-actions .prowp-product-card:hover .prowp-card__actions,
body.prowp-loop-card-hover-reveal-actions .prowp-product-card:focus-within .prowp-card__actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Always-visible overlay stacks must not slide/fade from reveal-actions.
 * Preserve translateY(-50%) so left/right-center stacks stay vertically centered
 * (transform:none caused a jump when hover restored centering). */
body.prowp-overlay-always .prowp-card-hover-reveal-actions .prowp-product-card .prowp-card__actions,
body.prowp-overlay-icons-always .prowp-card-hover-reveal-actions .prowp-product-card .prowp-card__actions,
body.prowp-overlay-atc-always .prowp-card-hover-reveal-actions .prowp-product-card .prowp-card__actions.prowp-card__actions--atc-always,
body.prowp-overlay-atc-always .prowp-card-hover-reveal-actions .prowp-product-card .prowp-card__actions.is-always-show,
.prowp-card-hover-reveal-actions .prowp-product-card .prowp-card__actions.is-always-show,
.prowp-card-hover-reveal-actions .prowp-product-card .prowp-card-image-wrap.is-always-show .prowp-card__actions {
  opacity: 1 !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
}

/* Below-media stacks are not vertically centered — no translateY. */
.prowp-card-hover-reveal-actions .prowp-product-card .prowp-card__actions.is-always-show.prowp-card__actions--below-media,
.prowp-card-hover-reveal-actions .prowp-product-card .prowp-card__actions--below-media {
  transform: none !important;
}

/* image-zoom: subtle scale on the primary image. */
.prowp-card-hover-image-zoom .prowp-product-card .prowp-card-image-wrap .prowp-image-primary {
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: scale(1);
}
.prowp-card-hover-image-zoom .prowp-product-card:hover .prowp-card-image-wrap .prowp-image-primary,
.prowp-card-hover-image-zoom .prowp-product-card:focus-within .prowp-card-image-wrap .prowp-image-primary {
  transform: scale(var(--prowp-image-hover-scale, 1.04));
}

/* glow: soft elevation + accent ring. */
.prowp-card-hover-glow .prowp-product-card {
  transition: box-shadow 240ms ease, border-color 240ms ease, transform 240ms ease;
  box-shadow: 0 0 0 0 var(--prowp-primary);
}
.prowp-card-hover-glow .prowp-product-card:hover,
.prowp-card-hover-glow .prowp-product-card:focus-within {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--prowp-primary) 35%, transparent),
    0 12px 28px -16px color-mix(in srgb, var(--prowp-primary) 55%, transparent);
  transform: translateY(-2px);
}

/* swap-image: rely on the existing secondary-image infrastructure that
   already exists on every card. We just turn the swap on and tune timing. */
.prowp-card-hover-swap-image .prowp-product-card .prowp-image-secondary {
  opacity: 0;
  transition: opacity 280ms ease;
}
.prowp-card-hover-swap-image .prowp-product-card:hover .prowp-image-primary,
.prowp-card-hover-swap-image .prowp-product-card:focus-within .prowp-image-primary {
  opacity: 0;
}
.prowp-card-hover-swap-image .prowp-product-card:hover .prowp-image-secondary,
.prowp-card-hover-swap-image .prowp-product-card:focus-within .prowp-image-secondary {
  opacity: 1;
}

/* none: kill every transition so the card is fully static. */
.prowp-card-hover-none .prowp-product-card,
.prowp-card-hover-none .prowp-product-card * {
  transition: none !important;
  animation: none !important;
}

/* ----- Reduced-motion: respect user preference ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .prowp-card-hover-reveal-actions .prowp-card__actions,
  .prowp-card-hover-image-zoom .prowp-card-image-wrap .prowp-image-primary,
  .prowp-card-hover-glow .prowp-product-card,
  .prowp-card-hover-swap-image .prowp-image-secondary,
  .prowp-card-hover-swap-image .prowp-image-primary {
    transition: none !important;
  }
  .prowp-card-hover-glow .prowp-product-card:hover,
  .prowp-card-hover-glow .prowp-product-card:focus-within {
    transform: none !important;
  }
}

/* ----- Image first-card fetchpriority ---------------------------------- */
/* The first card in the first viewport qualifies as the LCP candidate on
   the homepage. Skip lazy loading on that one image and request high
   priority. The plugin already emits `loading="lazy"` for secondary
   images; this rule scopes the lazy-load opt-out per template. */
.prowp-homepage ul.products > li.product:first-child .prowp-card-image-wrap img.prowp-image-primary {
  loading: eager;
  fetchpriority: high;
}