/* ==========================================================================
   Hero Carousel Container
   ========================================================================== */

.wp-block-ammweb-instance-hero {
  position: relative;
  width: 100%;
  /*
   * Banner stays full-bleed so the cover panel and image cluster keep running
   * off the right edge of the screen, but the copy is pulled onto the site
   * content grid so it lines up with the header and the rest of the page.
   * Both tokens fall back to the theme values in themes/ammweb-instance/style.css.
   */
  --amm-hero-max-width: var(--amm-site-max-width, var(--wp--style--global--content-size, 1440px));
  --amm-hero-gutter: var(--amm-site-padding-x, clamp(20px, 5vw, 100px));
}

.wp-block-ammweb-instance-hero .ammweb-hero-carousel__slides {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.wp-block-ammweb-instance-hero.alignfull {
  max-width: 100vw;
}

/* ==========================================================================
   Hero Slide (child block)
   ========================================================================== */

.wp-block-ammweb-instance-hero-slide {
  display: flex;
  position: relative;
  isolation: isolate;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 80px 0;
  background-size: cover;
  background-position: center;
  color: var(--amm-palette-primary-3, #ffffff);
  /* Brand cut angle — keep in sync with AMMWEB_HERO_ANGLE in includes/hero/layers.php */
  --amm-hero-angle: 13deg;
  --amm-hero-tan: tan(var(--amm-hero-angle));
  --amm-hero-strip-bbox-k: 0.30640715;
  --amm-hero-strip-bbox-aspect: calc(1 + var(--amm-hero-strip-bbox-k) * var(--amm-hero-tan));
  --amm-hero-strip-vertex-x: calc(100% * var(--amm-hero-tan) / var(--amm-hero-strip-bbox-aspect));
  --amm-hero-strip-triple-fit: calc(3 - 2 * var(--amm-hero-tan) / var(--amm-hero-strip-bbox-aspect));
  --amm-hero-strip-triple-overlap: calc(
    var(--amm-hero-tan) / var(--amm-hero-strip-bbox-aspect) / var(--amm-hero-strip-triple-fit) * 100%
  );
}

.wp-block-ammweb-instance-hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amm-hero-overlay-color, var(--amm-palette-primary-1, #005762));
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 0;
}

.wp-block-ammweb-instance-hero.has-image-overlay .wp-block-ammweb-instance-hero-slide:not(.has-image-overlay-override-disabled)::before,
.wp-block-ammweb-instance-hero-slide.has-image-overlay::before {
  opacity: 1;
}

.wp-block-ammweb-instance-hero-slide.has-image-overlay-override-disabled::before {
  opacity: 0;
}

.wp-block-ammweb-instance-hero.has-overlay .wp-block-ammweb-instance-hero-slide {
  padding-bottom: 180px;
}

/* Carousel mode: stack slides and show only active */
.wp-block-ammweb-instance-hero.is-carousel .wp-block-ammweb-instance-hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 400ms ease;
}

.wp-block-ammweb-instance-hero.is-carousel .wp-block-ammweb-instance-hero-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

/* No slide marked active: the script has not run yet or failed, the page came from a cache
   older than the server-side pick, or the slide the server opened on renders nothing (a slide
   restricted to another language or region prints no markup at all). Every slide is then out
   of flow and invisible, the banner collapses, and whatever follows it (Find Your Belt on Home)
   paints at the top and drops once a slide appears. The first slide holds the space instead. */
.wp-block-ammweb-instance-hero.is-carousel .ammweb-hero-carousel__slides:not(:has(> .wp-block-ammweb-instance-hero-slide.is-active)) > .wp-block-ammweb-instance-hero-slide:first-child {
  position: relative;
  opacity: 1;
  visibility: visible;
}

/* Static mode: single slide, no carousel behavior */
.wp-block-ammweb-instance-hero.is-static .wp-block-ammweb-instance-hero-slide {
  position: relative;
}

.wp-block-ammweb-instance-hero-slide .ammweb-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--amm-hero-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--amm-hero-gutter, clamp(20px, 5vw, 100px));
  padding-right: var(--amm-hero-gutter, clamp(20px, 5vw, 100px));
  padding-top: clamp(5px, 5vh, 20px);
  padding-bottom: clamp(5px, 5vh, 20px);
  box-sizing: border-box;
}

.wp-block-ammweb-instance-hero .ammweb-hero__overlay {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1035px;
  margin: -100px auto 0;
  padding: 0 20px 24px;
  box-sizing: border-box;
}

.wp-block-ammweb-instance-hero .ammweb-hero__overlay-inner {
  width: 100%;
}

.wp-block-ammweb-instance-hero-slide .ammweb-hero__title {
  color: var(--amm-palette-primary-3, #ffffff);
  overflow-wrap: break-word;
}

.wp-block-ammweb-instance-hero-slide .ammweb-hero__cta {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

/*
 * The CTA markup carries a legacy `mr-8` utility (32px) on every item while the
 * row above already supplies the gap, so the trailing margin on the last item
 * is dead space — enough to throw a centred CTA row 16px off centre. Cleared on
 * the last item only, so the spacing between buttons is unchanged.
 * (industry-expert solves the same thing by zeroing the margin outright.)
 */
.wp-block-ammweb-instance-hero-slide .ammweb-hero__cta > .ammweb-hero__cta-item:last-child {
  margin-right: 0;
}

.wp-block-ammweb-instance-hero-slide .ammweb-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--amm-btn-padding-y, 12px) var(--amm-btn-padding-x, 20px);
  border: 2px solid var(--hero-button-border-color, var(--hero-button-bg, #ffffff));
  border-radius: var(--amm-radius-button, 4px);
  background-color: var(--hero-button-bg, #ffffff);
  box-shadow: var(--hero-button-shadow, none);
  color: var(--hero-button-color, #005762);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  appearance: none;
  transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
}

.wp-block-ammweb-instance-hero-slide .ammweb-hero__button span {
  padding-left: 12px;
}

.wp-block-ammweb-instance-hero-slide .ammweb-hero__button .material-icons {
  font-family: 'Material Icons', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  transition: transform 0.2s ease;
}

.wp-block-ammweb-instance-hero-slide .ammweb-hero__button:hover,
.wp-block-ammweb-instance-hero-slide .ammweb-hero__button:focus-visible {
  background-color: var(--hero-button-hover-bg, #005762);
  color: var(--hero-button-hover-color, #ffffff);
  opacity: var(--hero-button-hover-opacity, 0.75);
}

.wp-block-ammweb-instance-hero-slide .ammweb-hero__button:hover .material-icons,
.wp-block-ammweb-instance-hero-slide .ammweb-hero__button:focus-visible .material-icons {
  transform: translateX(4px);
}

.wp-block-ammweb-instance-hero-slide.is-align-left {
  justify-content: flex-start;
}

.wp-block-ammweb-instance-hero-slide.is-align-center {
  justify-content: center;
}

.wp-block-ammweb-instance-hero-slide.is-align-right {
  justify-content: flex-end;
}

.wp-block-ammweb-instance-hero-slide.is-align-left .ammweb-hero__inner {
  text-align: left;
}

.wp-block-ammweb-instance-hero-slide.is-align-left .ammweb-hero__cta {
  justify-content: flex-start;
}

.wp-block-ammweb-instance-hero-slide.is-align-center .ammweb-hero__inner {
  text-align: center;
}

.wp-block-ammweb-instance-hero-slide.is-align-center .ammweb-hero__cta {
  justify-content: center;
}

.wp-block-ammweb-instance-hero-slide.is-align-right .ammweb-hero__inner {
  text-align: right;
}

.wp-block-ammweb-instance-hero-slide.is-align-right .ammweb-hero__cta {
  justify-content: flex-end;
}

/* ==========================================================================
   Carousel Navigation
   ========================================================================== */

.ammweb-hero-carousel__nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
  z-index: 10;
}

.ammweb-hero-carousel__prev,
.ammweb-hero-carousel__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 200ms ease, transform 200ms ease;
}

.ammweb-hero-carousel__prev:hover,
.ammweb-hero-carousel__next:hover {
  background: #ffffff;
  transform: scale(1.05);
}

.ammweb-hero-carousel__prev .material-icons,
.ammweb-hero-carousel__next .material-icons {
  font-size: 24px;
  color: var(--amm-palette-primary-1, #005762);
}

/* ==========================================================================
   Carousel Dots
   ========================================================================== */

.ammweb-hero-carousel__dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10;
}

.wp-block-ammweb-instance-hero.has-overlay .ammweb-hero-carousel__dots {
  bottom: 160px;
}

.ammweb-hero-carousel__dot {
  width: 12px;
  height: 12px;
  background: var(--amm-palette-primary-1-30, #b2cdd0);
  border: none;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  transition: width 220ms ease, background-color 220ms ease;
}

.ammweb-hero-carousel__dot.is-active {
  width: 87px;
  background: var(--amm-palette-primary-1-90, #1a6872);
}

@media (max-width: 1023px) {
  .wp-block-ammweb-instance-hero.has-overlay .wp-block-ammweb-instance-hero-slide {
    padding-bottom: 140px;
  }

  .wp-block-ammweb-instance-hero .ammweb-hero__overlay {
    margin-top: -80px;
    padding: 0 16px 20px;
  }

  .wp-block-ammweb-instance-hero.has-overlay .ammweb-hero-carousel__dots {
    bottom: 120px;
  }
}

@media (max-width: 767px) {
  .wp-block-ammweb-instance-hero-slide {
    padding: 64px 0;
  }

  .wp-block-ammweb-instance-hero.has-overlay .wp-block-ammweb-instance-hero-slide {
    padding-bottom: 96px;
  }

  .wp-block-ammweb-instance-hero .ammweb-hero__overlay {
    margin-top: -56px;
    padding: 0 12px 16px;
  }

  .wp-block-ammweb-instance-hero.has-overlay .ammweb-hero-carousel__dots {
    bottom: 96px;
  }

  .ammweb-hero-carousel__nav {
    display: none;
  }

  .wp-block-ammweb-instance-hero.is-carousel:has(.ammweb-hero-slide--layout-stacked) .ammweb-hero-carousel__dots {
    bottom: 18px;
  }

  /* Match the industries pagination dots' mobile size (see ammweb-instance-industries.css) so every dot nav on the site reads the same on a phone. */
  .ammweb-hero-carousel__dots {
    gap: 12px;
  }

  .ammweb-hero-carousel__dot {
    width: 8px;
    height: 8px;
  }

  .ammweb-hero-carousel__dot.is-active {
    width: 56px;
  }

  /*
   * The dots sit at a fixed distance from the slide's bottom edge, which only
   * ever accounted for overlay content. A non-overlay CTA row wrapping to two
   * or three lines on a narrow phone grows taller than that reserved space and
   * the dots land on top of the buttons. Overlay heroes keep their own tuned
   * padding above; everything else drops the dots out of the slide entirely
   * so they flow below it and can never collide with CTA content, no matter
   * how many lines it wraps to.
   */
  .wp-block-ammweb-instance-hero.is-carousel:not(.has-overlay) .ammweb-hero-carousel__dots {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    justify-content: center;
    margin: 16px 0 0;
  }
}

/* ==========================================================================
   Hero slide — layered stack (mobile top/bottom zones; text + background default
   bottom; other layers default top; desktop flat via display:contents)
   ========================================================================== */

.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked {
  display: block;
  overflow: hidden;
  padding: 0;
  min-height: 0;
  width: 100%;
  container-type: inline-size;
  --amm-hero-ar-w: 16;
  --amm-hero-ar-h: 1;
  --amm-hero-max-height: 600px;
  aspect-ratio: auto !important;
  height: auto;
}

.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__stack {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  min-height: clamp(
    360px,
    calc(100cqw * var(--amm-hero-ar-h, 1) / var(--amm-hero-ar-w, 16)),
    var(--amm-hero-max-height, 600px)
  );
  max-height: var(--amm-hero-max-height, 600px);
}

/* Desktop: zones are grouping-only — layers share one stack for z-index paint order. */
.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__zone--top,
.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__zone--bottom {
  display: contents;
}

.ammweb-hero-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--background {
  position: absolute;
  inset: 0;
}

/* Text area: 95% of slide width minus the cover panel width. */
.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text {
  position: relative;
  inset: auto;
  width: calc(95% - var(--amm-hero-cover-width-pct, 0) * 1%);
  min-width: 0;
  min-height: 0;
  pointer-events: auto;
  container-type: inline-size;
  container-name: hero-text;
}

/*
 * Inset left-aligned copy from the full-bleed edge to the site content column.
 * The percentage resolves against the stack (the full-bleed width), which keeps
 * this correct when a classic scrollbar makes 100vw wider than the document.
 * The remaining gutter is applied by .ammweb-hero__inner below.
 *
 * Scoped to is-align-left on purpose: centred copy (the CTA banner variant)
 * must stay centred on the page, so it gets symmetric gutters instead.
 */
.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-left .ammweb-hero-layer--text {
  padding-left: max(0px, calc((100% - var(--amm-hero-max-width)) / 2));
}

/*
 * Left gutter matches .site-container so the headline starts on the same
 * vertical line as the header nav and the rest of the page content.
 */
.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__inner {
  min-width: 0;
  max-width: 100%;
  padding-left: var(--amm-hero-gutter, clamp(20px, 5vw, 100px));
  padding-right: clamp(16px, 4cqi, 64px);
  padding-top: clamp(8px, 2cqi, 20px);
  padding-bottom: clamp(8px, 2cqi, 20px);
}

/*
 * Centred copy (CTA banner) stays centred on the page: no grid inset, matching
 * gutters on both sides, and capped to the content column so the block is
 * centred rather than offset by the left-aligned gutter above.
 */
.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-center .ammweb-hero-layer--text .ammweb-hero__inner,
.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-right .ammweb-hero-layer--text .ammweb-hero__inner {
  max-width: var(--amm-hero-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--amm-hero-gutter, clamp(20px, 5vw, 100px));
  padding-right: var(--amm-hero-gutter, clamp(20px, 5vw, 100px));
}

/* Scale headline, subtitle, and CTAs to the text column (cqi), not the viewport. */
.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__title.xl {
  font-size: clamp(
    calc(1.75rem * var(--amm-type-scale-mobile, 1)),
    calc(0.4rem + 7cqi),
    calc(5rem * var(--amm-type-scale-desktop, 1))
  );
  line-height: 1.15;
  margin-top: clamp(8px, 2cqi, 16px);
  margin-bottom: clamp(8px, 2cqi, 16px);
}

.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h2.ammweb-hero__title.xl {
  font-size: clamp(
    calc(1.5rem * var(--amm-type-scale-mobile, 1)),
    calc(0.35rem + 6cqi),
    calc(4rem * var(--amm-type-scale-desktop, 1))
  );
}

/* Centred CTA banners (homepage “interested in our products?”, etc.): 48px max. */
.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-center .ammweb-hero-layer--text .ammweb-hero__title.xl,
.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-center .ammweb-hero-layer--text h2.ammweb-hero__title.xl {
  font-size: clamp(
    calc(1.5rem * var(--amm-type-scale-mobile, 1)),
    calc(0.35rem + 6cqi),
    48px
  );
}

.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h3.ammweb-hero__title.xl {
  font-size: clamp(
    calc(1.375rem * var(--amm-type-scale-mobile, 1)),
    calc(0.3rem + 5cqi),
    calc(3rem * var(--amm-type-scale-desktop, 1))
  );
}

.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h4.ammweb-hero__title.xl,
.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h5.ammweb-hero__title.xl,
.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h6.ammweb-hero__title.xl {
  font-size: clamp(
    calc(1.25rem * var(--amm-type-scale-mobile, 1)),
    calc(0.25rem + 4cqi),
    calc(2rem * var(--amm-type-scale-desktop, 1))
  );
}

.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__subtitle.large {
  font-size: clamp(
    calc(0.875rem * var(--amm-type-scale-mobile, 1)),
    calc(0.2rem + 2.8cqi),
    calc(1.125rem * var(--amm-type-scale-desktop, 1))
  );
  margin-top: clamp(8px, 1.5cqi, 16px);
  margin-bottom: clamp(12px, 3cqi, 32px);
}

/*
 * CTA sizing is deliberately fixed, not cqi-fluid: narrowing the banner to the
 * content grid shrinks the text container, and the buttons must render exactly
 * as before. These are the values the fluid clamps already resolved to at
 * desktop width. The fluid variant is kept for <= 1023px (see media query).
 */
.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__cta {
  gap: 16px;
  margin-bottom: 16px;
}

.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__button {
  font-size: 15px;
  padding: 12px 20px;
}

@container hero-text (max-width: 28rem) {
  .ammweb-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .wp-block-ammweb-instance-hero-slide .ammweb-hero__cta > .ammweb-hero__cta-item {
    margin-right: 0;
  }

  .ammweb-hero__button {
    width: 100%;
  }

  .wp-block-ammweb-instance-hero-slide .ammweb-hero__button {
    justify-content: center;
  }
}

.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-left .ammweb-hero-slide__stack {
  justify-content: flex-start;
}

.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-center .ammweb-hero-slide__stack {
  justify-content: center;
}

.wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-right .ammweb-hero-slide__stack {
  justify-content: flex-end;
}

/* Dynamic accents use explicit geometry; do not inherit full-bleed inset. */
.ammweb-hero-layer--cover,
.ammweb-hero-layer--parallelogram,
.ammweb-hero-layer--strip,
.ammweb-hero-layer--image-logo {
  inset: auto;
}

.ammweb-hero-layer--background .ammweb-hero-layer__fill {
  position: absolute;
  inset: 0;
}

.ammweb-hero-layer.has-layer-overlay::before,
.ammweb-hero-layer__strip-cell.has-layer-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amm-hero-layer-overlay-color, var(--amm-palette-primary-1, #005762));
  mix-blend-mode: multiply;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

/* Keep media under the multiply overlay (::before). */
.ammweb-hero-layer.has-layer-overlay > .ammweb-hero-layer__fill,
.ammweb-hero-layer.has-layer-overlay > .ammweb-hero-layer__bg-media,
.ammweb-hero-layer.has-layer-overlay > .ammweb-hero-layer__img,
.ammweb-hero-layer.has-layer-overlay > .ammweb-hero-layer__logo-img,
.ammweb-hero-layer.has-layer-overlay > .ammweb-hero-layer__img-wrap,
.ammweb-hero-layer.has-layer-overlay > .ammweb-hero-layer__video-player,
.ammweb-hero-layer.has-layer-overlay > .ammweb-hero-layer__video-preview,
.ammweb-hero-layer__strip-cell.has-layer-overlay > .ammweb-hero-layer__img-wrap {
  z-index: 0;
}

/* Focal point (ox/oy) maps across the full image; scale zooms from that point. */
.ammweb-hero-layer--image.ammweb-hero-layer--image-cover,
.ammweb-hero-layer--image.ammweb-hero-layer--image-contain {
  overflow: hidden;
}

.ammweb-hero-layer--media .ammweb-hero-layer__img-wrap,
.ammweb-hero-layer--cover .ammweb-hero-layer__img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Shared inner image: media, cover, dynamic cells (scale + parallax vars). */
.ammweb-hero-layer__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--amm-hero-img-ox, 50%) var(--amm-hero-img-oy, 50%);
  transform: scale(var(--amm-hero-img-scale, 1))
    translate3d(var(--amm-hero-parallax-tx, 0px), var(--amm-hero-parallax-ty, 0px), 0);
  transform-origin: var(--amm-hero-img-ox, 50%) var(--amm-hero-img-oy, 50%);
}

/* Parallax moves the outer shape; inner images must not inherit --amm-hero-parallax-* too. */
.ammweb-hero-layer--strip .ammweb-hero-layer__img,
.ammweb-hero-layer--parallelogram .ammweb-hero-layer__img {
  --amm-hero-parallax-tx: 0px;
  --amm-hero-parallax-ty: 0px;
}

.ammweb-hero-layer--image-contain .ammweb-hero-layer__img {
  object-fit: contain;
}

/* Background + media layer video (inline cover / contain fill) */
.ammweb-hero-layer--background.ammweb-hero-layer--has-video {
  overflow: hidden;
}

.ammweb-hero-layer--background .ammweb-hero-layer__fill,
.ammweb-hero-layer--background .ammweb-hero-layer__bg-media,
.ammweb-hero-layer--background .ammweb-hero-layer__video-player,
.ammweb-hero-layer--image.ammweb-hero-layer--has-video .ammweb-hero-layer__video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ammweb-hero-layer--background .ammweb-hero-layer__video-player,
.ammweb-hero-layer--image.ammweb-hero-layer--has-video .ammweb-hero-layer__video-player {
  overflow: hidden;
}

.ammweb-hero-layer--background .ammweb-hero-layer__bg-media,
.ammweb-hero-layer--background .ammweb-hero-layer__video-player video,
.ammweb-hero-layer--background .ammweb-hero-layer__video-file,
.ammweb-hero-layer--image.ammweb-hero-layer--has-video .ammweb-hero-layer__video-player video,
.ammweb-hero-layer--image.ammweb-hero-layer--has-video .ammweb-hero-layer__video-file {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  object-fit: var(--amm-hero-bg-media-fit, cover);
  object-position: center;
}

.ammweb-hero-layer--image.ammweb-hero-layer--has-video .ammweb-hero-layer__video-file {
  object-fit: cover;
}

.ammweb-hero-layer--image.ammweb-hero-layer--image-contain.ammweb-hero-layer--has-video .ammweb-hero-layer__video-file {
  object-fit: contain;
}

.ammweb-hero-layer__video-embed,
.ammweb-hero-layer__video-embed > * {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  padding: 0 !important;
  margin: 0;
}

.ammweb-hero-layer--background .ammweb-hero-layer__video-embed {
  overflow: hidden;
}

.ammweb-hero-layer__video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* oEmbed: approximate cover when fit is cover (16:9 source). */
.ammweb-hero-layer--background.ammweb-hero-layer--background-fit-cover .ammweb-hero-layer__video-embed iframe {
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}

.ammweb-hero-layer--background.ammweb-hero-layer--background-fit-contain .ammweb-hero-layer__video-embed iframe {
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  transform: translate(-50%, -50%);
}

/* Static right cover panel — width from right; left edge uses brand 13° cut. */
.ammweb-hero-layer--cover {
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--amm-hero-strip-width-eff, calc(var(--amm-hero-cover-width-pct, 30) * 1%));
  max-width: 50%;
  min-width: var(--amm-hero-strip-angle-min-width, 0px);
  height: 100%;
  transform: none;
  clip-path: polygon(
    var(--amm-hero-cover-vtx-eff, var(--amm-hero-strip-vertex-x)) 0%,
    0% 100%,
    100% 100%,
    100% 0%
  );
  overflow: hidden;
}

/* Width 0: stack-only drag anchor — no visible panel (live drag / legacy markup). */
.ammweb-hero-layer--cover.ammweb-hero-layer--cover-width-zero {
  width: 0;
  min-width: 0;
  overflow: hidden;
  clip-path: none;
  visibility: hidden;
}

/* Dynamic parallelogram — height sets slope (dx = H×tan θ); width sets clip % (via JS). */
.ammweb-hero-layer--parallelogram {
  right: auto;
  bottom: auto;
  height: var(--amm-hero-strip-height-eff, calc(var(--amm-hero-strip-height-pct, 70) * 1%));
  max-height: var(--amm-hero-strip-height-eff, calc(var(--amm-hero-strip-height-pct, 70) * 1%));
  width: var(--amm-hero-strip-width-eff, calc(100% * var(--amm-hero-strip-width-pct, 100) / 100));
  max-width: var(--amm-hero-strip-width-eff, calc(100% * var(--amm-hero-strip-width-pct, 100) / 100));
  min-width: var(--amm-hero-strip-angle-min-width, 0px);
  transform: translate(-50%, -50%)
    translate3d(var(--amm-hero-parallax-tx, 0px), var(--amm-hero-parallax-ty, 0px), 0);
  clip-path: polygon(
    var(--amm-hero-strip-vtx-eff, var(--amm-hero-strip-vertex-x)) 0%,
    0% 100%,
    calc(100% - var(--amm-hero-strip-vtx-eff, var(--amm-hero-strip-vertex-x))) 100%,
    100% 0%
  );
  overflow: hidden;
}

.ammweb-hero-layer--parallelogram .ammweb-hero-layer__img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Diagonal strips — height sets slope (dx = H×tan θ); width only affects clip % (via JS). */
.ammweb-hero-layer--strip {
  right: auto;
  bottom: auto;
  height: var(--amm-hero-strip-height-eff, calc(var(--amm-hero-strip-height-pct, 70) * 1%));
  max-height: var(--amm-hero-strip-height-eff, calc(var(--amm-hero-strip-height-pct, 70) * 1%));
  width: var(--amm-hero-strip-width-eff, calc(100% * var(--amm-hero-strip-width-pct, 100) / 100));
  max-width: var(--amm-hero-strip-width-eff, calc(100% * var(--amm-hero-strip-width-pct, 100) / 100));
  min-width: var(--amm-hero-strip-cluster-min-width, var(--amm-hero-strip-angle-min-width, 0px));
  display: flex;
  gap: 0;
  align-items: stretch;
  transform: translate(-50%, -50%)
    translate3d(var(--amm-hero-parallax-tx, 0px), var(--amm-hero-parallax-ty, 0px), 0);
}

.ammweb-hero-layer__strip-cell {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  min-width: var(--amm-hero-strip-angle-min-width, 0px);
  overflow: hidden;
  clip-path: polygon(
    var(--amm-hero-strip-vtx-eff, var(--amm-hero-strip-vertex-x)) 0%,
    0% 100%,
    calc(100% - var(--amm-hero-strip-vtx-eff, var(--amm-hero-strip-vertex-x))) 100%,
    100% 0%
  );
}

/* Single strip: clip the outer layer (like parallelogram); cell fills it absolutely. */
.ammweb-hero-layer--strip-count-1 {
  display: block;
  overflow: hidden;
  clip-path: polygon(
    var(--amm-hero-strip-vtx-eff, var(--amm-hero-strip-vertex-x)) 0%,
    0% 100%,
    calc(100% - var(--amm-hero-strip-vtx-eff, var(--amm-hero-strip-vertex-x))) 100%,
    100% 0%
  );
}

.ammweb-hero-layer--strip-count-1 .ammweb-hero-layer__strip-cell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  clip-path: none;
}

/* Width: parallelogram fit only (clip angle uses cell W in strip-geometry.js). Gap is margin only. */
.ammweb-hero-layer--strip-count-3 .ammweb-hero-layer__strip-cell {
  width: calc(100% / var(--amm-hero-strip-triple-fit));
}

.ammweb-hero-layer--strip-count-3 .ammweb-hero-layer__strip-cell + .ammweb-hero-layer__strip-cell {
  margin-left: var(--amm-hero-strip-used-gap, var(--amm-hero-gap, 0px));
}

/* Shared triple-strip image spans the full cluster; each cell clips its slice. */
.ammweb-hero-layer--strip-shared .ammweb-hero-layer__strip-cell .ammweb-hero-layer__img-wrap {
  top: 0;
  bottom: 0;
  right: auto;
  height: 100%;
  width: var(--amm-hero-strip-shared-span-width, 100%);
  left: var(--amm-hero-strip-shared-offset-x, 0);
}

.ammweb-hero-layer__img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Logo overlay on brand wedge — Position X/Y is the center of the logo box. */
.ammweb-hero-layer--image-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%)
    translate3d(var(--amm-hero-parallax-tx, 0px), var(--amm-hero-parallax-ty, 0px), 0);
  overflow: hidden;
}

.ammweb-hero-layer__logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Mobile + tablet: top visuals row + bottom copy row (layers[].mobileZone; text always bottom; unset mobileZone defaults to top). */
@media (max-width: 1023px) {
  .wp-block-ammweb-instance-hero.has-overlay .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked {
    padding-bottom: 0;
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__stack {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-left .ammweb-hero-slide__stack,
  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-center .ammweb-hero-slide__stack,
  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-right .ammweb-hero-slide__stack {
    justify-content: flex-start;
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__zone--top,
  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__zone--bottom {
    display: block;
    position: relative;
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__zone--top:not(:empty) {
    flex: 0 0 auto;
    min-height: max(240px, 42vw);
    overflow: hidden;
    pointer-events: none;
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__zone--bottom {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .wp-block-ammweb-instance-hero.is-carousel:not(.has-overlay) .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__zone--bottom {
    padding-bottom: 56px;
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-left .ammweb-hero-slide__zone--bottom {
    justify-content: flex-start;
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-center .ammweb-hero-slide__zone--bottom {
    justify-content: center;
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-right .ammweb-hero-slide__zone--bottom {
    justify-content: flex-end;
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--background {
    position: absolute;
    inset: 0;
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text {
    position: relative;
    width: 100%;
  }

  /*
   * Full-width text column on mobile/tablet — lower cqi slope and cap below desktop
   * (wide container + 7cqi was hitting the 5rem desktop max).
   */
  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__title.xl {
    font-size: clamp(
      calc(1.5rem * var(--amm-type-scale-mobile, 1)),
      calc(0.35rem + 4.5cqi),
      calc(2.25rem * var(--amm-type-scale-tablet, 1))
    );
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h2.ammweb-hero__title.xl {
    font-size: clamp(
      calc(1.375rem * var(--amm-type-scale-mobile, 1)),
      calc(0.3rem + 4cqi),
      calc(2rem * var(--amm-type-scale-tablet, 1))
    );
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h3.ammweb-hero__title.xl {
    font-size: clamp(
      calc(1.25rem * var(--amm-type-scale-mobile, 1)),
      calc(0.28rem + 3.5cqi),
      calc(1.75rem * var(--amm-type-scale-tablet, 1))
    );
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h4.ammweb-hero__title.xl,
  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h5.ammweb-hero__title.xl,
  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h6.ammweb-hero__title.xl {
    font-size: clamp(
      calc(1.125rem * var(--amm-type-scale-mobile, 1)),
      calc(0.25rem + 3cqi),
      calc(1.5rem * var(--amm-type-scale-tablet, 1))
    );
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__subtitle.large {
    font-size: clamp(
      calc(0.875rem * var(--amm-type-scale-mobile, 1)),
      calc(0.18rem + 2.2cqi),
      calc(1rem * var(--amm-type-scale-tablet, 1))
    );
  }

  /* Below desktop the CTA keeps its original fluid sizing (see desktop rule). */
  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__cta {
    gap: clamp(8px, 2cqi, 16px);
    margin-bottom: clamp(8px, 2cqi, 16px);
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__button {
    font-size: clamp(13px, calc(0.15rem + 1.8cqi), 15px);
    padding: clamp(8px, calc(0.35rem + 0.4cqi), 12px) clamp(14px, calc(0.5rem + 1.2cqi), 20px);
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--strip-count-3 .ammweb-hero-layer__strip-cell:nth-child(n + 2) {
    display: none;
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--strip-count-3 .ammweb-hero-layer__strip-cell:first-child {
    width: 100%;
    margin-left: 0;
  }

  .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--strip-shared .ammweb-hero-layer__strip-cell .ammweb-hero-layer__img-wrap--strip-shared {
    width: 100%;
    left: 0;
    --amm-hero-strip-shared-span-width: 100%;
    --amm-hero-strip-shared-offset-x: 0;
  }
}

/*
 * Products page only: keep the banner side-by-side (image/graphic on the
 * right, copy on the left) on mobile/tablet instead of stacking, per request.
 * Scoped to this page so other hero banners keep the stacked layout above —
 * side-by-side gets cramped on slides with a subtitle + CTA row.
 * (Products is a product_cat_page CPT post with slug "products". Core's
 * body_class() has no slug-based class for this CPT, only single-{post_type}
 * and postid-{ID} — the latter isn't stable across environments/DB
 * re-imports — so ammweb_instance_add_product_cat_page_slug_body_class() in
 * includes/products/cpt.php adds product-cat-page-{slug} to scope this.)
 */
@media (max-width: 1023px) {
  body.product-cat-page-products .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__stack {
    flex-direction: row;
    align-items: center;
    min-height: max(360px, calc(100cqw * var(--amm-hero-ar-h, 1) / var(--amm-hero-ar-w, 16)));
  }

  body.product-cat-page-products .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-left .ammweb-hero-slide__stack {
    justify-content: flex-start;
  }

  body.product-cat-page-products .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__zone--top,
  body.product-cat-page-products .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__zone--bottom {
    display: contents;
  }

  body.product-cat-page-products .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text {
    position: relative;
    width: calc(95% - var(--amm-hero-cover-width-pct, 0) * 1%);
  }
}

/* Product category pages: hero title uses the 60px Industries Heading Bold size. */
.single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__title.xl,
.single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h2.ammweb-hero__title.xl {
  font-size: 60px;
  line-height: 60px;
  letter-spacing: -1.5px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__title.xl,
  .single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h2.ammweb-hero__title.xl {
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -1px;
    font-weight: 700;
  }
}

/*
 * Products page only: keep the banner side-by-side (image/graphic on the
 * right, copy on the left) on mobile/tablet instead of stacking, per request.
 * Scoped to this page so other hero banners keep the stacked layout above —
 * side-by-side gets cramped on slides with a subtitle + CTA row.
 * (Products is a product_cat_page CPT post — WordPress body class is
 * postid-{ID}, not page-id-{ID}.)
 */
@media (max-width: 1023px) {
  body.postid-201719 .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__stack {
    flex-direction: row;
    align-items: center;
    min-height: max(360px, calc(100cqw * var(--amm-hero-ar-h, 1) / var(--amm-hero-ar-w, 16)));
  }

  body.postid-201719 .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-left .ammweb-hero-slide__stack {
    justify-content: flex-start;
  }

  body.postid-201719 .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__zone--top,
  body.postid-201719 .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-slide__zone--bottom {
    display: contents;
  }

  body.postid-201719 .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text {
    position: relative;
    width: calc(95% - var(--amm-hero-cover-width-pct, 0) * 1%);
  }
}

/* Product category pages: hero title uses the 60px Industries Heading Bold size. */
.single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__title.xl,
.single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h2.ammweb-hero__title.xl {
  font-size: 60px;
  line-height: 60px;
  letter-spacing: -1.5px;
  font-weight: 700;
}

@media (max-width: 767px) {
  /*
   * Matches the 32px CI h1 mobile size further down (the h2-qualified selector
   * above otherwise outranks it and pins this at the old 40px value).
   */
  .single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__title.xl,
  .single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text h2.ammweb-hero__title.xl {
    font-size: 32px;
    line-height: 32px;
    letter-spacing: -0.8px;
    font-weight: 700;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-ammweb-instance-hero-slide.has-parallax [data-amm-parallax-x],
  .wp-block-ammweb-instance-hero-slide.has-parallax [data-amm-parallax-y],
  .wp-block-ammweb-instance-hero-slide.has-parallax .ammweb-hero-layer__img,
  .wp-block-ammweb-instance-hero-slide.has-parallax .ammweb-hero-layer--media .ammweb-hero-layer__video-file,
  .wp-block-ammweb-instance-hero-slide.has-parallax .ammweb-hero-layer--media .ammweb-hero-layer__video-embed {
    --amm-hero-parallax-tx: 0px;
    --amm-hero-parallax-ty: 0px;
    transform: scale(var(--amm-hero-img-scale, 1)) !important;
  }

  .ammweb-hero-layer--image-logo,
  .ammweb-hero-layer--parallelogram,
  .ammweb-hero-layer--strip {
    --amm-hero-parallax-tx: 0px;
    --amm-hero-parallax-ty: 0px;
    transform: translate(-50%, -50%) !important;
  }
}

/*
 * Product category pages: hero titles follow the CI h1 scale so they outrank
 * section intros (h2) and product names (h3). Container-query clamps otherwise
 * shrink the page title below the section heading.
 */
.single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__title.xl {
  font-size: calc(32px * var(--amm-type-scale-mobile, 1));
  font-weight: 700;
}

@media (min-width: 768px) {
  .single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__title.xl {
    font-size: calc(44px * var(--amm-type-scale-tablet, 1));
  }
}

@media (min-width: 1024px) {
  .single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked .ammweb-hero-layer--text .ammweb-hero__title.xl {
    font-size: calc(60px * var(--amm-type-scale-desktop, 1));
  }
}

/*
 * End-of-page CTA banners (centred stacked heroes) sit at CI h2, not h1.
 * The long line reads as a shout at 57px.
 */
.single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-center .ammweb-hero-layer--text .ammweb-hero__title.xl {
  font-size: calc(24px * var(--amm-type-scale-mobile, 1));
  font-weight: 700;
}

@media (min-width: 768px) {
  .single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-center .ammweb-hero-layer--text .ammweb-hero__title.xl {
    font-size: calc(36px * var(--amm-type-scale-tablet, 1));
  }
}

@media (min-width: 1024px) {
  .single-product_cat_page .wp-block-ammweb-instance-hero-slide.ammweb-hero-slide--layout-stacked.is-align-center .ammweb-hero-layer--text .ammweb-hero__title.xl {
    font-size: calc(48px * var(--amm-type-scale-desktop, 1));
  }
}