/* Hero & Banner: scoped responsive layouts, optional image finishing, no JS. */
.wa-bl--hero-banner .wa-bl-hero__layout { display:grid; align-items:center; gap:var(--wa-bl-column-gap); min-width:0; }
.wa-bl--hero-banner .wa-bl-hero__copy { min-width:0; width:100%; max-width:var(--wa-bl-hero-copy-max); position:relative; z-index:3; }
.wa-bl--hero-banner .wa-bl-hero__media { position:relative; min-width:0; width:100%; justify-self:center; }
.wa-bl--hero-banner .wa-bl-hero__artwork { position:relative; isolation:isolate; width:min(var(--wa-bl-hero-media-max),calc(100% + var(--wa-bl-hero-extra))); max-width:none; margin-inline:auto; transform:translate(var(--wa-bl-hero-offset-x,0px),var(--wa-bl-hero-offset-y,0px)) scale(var(--wa-bl-hero-scale)); transform-origin:center; }
.wa-bl--hero-banner .wa-bl-hero__image { display:block; width:100%; max-width:100%; height:auto; max-height:920px; object-fit:contain; aspect-ratio:auto; }
/* Contain keeps the media's intrinsic ratio. Applying a 16:9 frame to a 3:1
   plugin screenshot created invisible letterboxing and inflated the section height.
   The chosen ratio is a deliberate crop only when Cover is selected. */
.wa-bl--hero-banner.wa-bl-hero--fit-cover .wa-bl-hero__image { object-fit:cover; aspect-ratio:var(--wa-bl-image-ratio); }
.wa-bl--hero-banner.wa-bl-hero--center .wa-bl-hero__layout,
.wa-bl--hero-banner.wa-bl-hero--stage .wa-bl-hero__layout { justify-items:center; text-align:center; }
.wa-bl--hero-banner.wa-bl-hero--center .wa-bl-hero__copy,
.wa-bl--hero-banner.wa-bl-hero--stage .wa-bl-hero__copy { width:100%; margin-inline:auto; }
.wa-bl--hero-banner.wa-bl-hero--center .wa-bl-hero__media { max-width:min(100%,850px); }
.wa-bl--hero-banner.wa-bl-hero--stage .wa-bl-hero__media { max-width:min(100%,1200px); }
.wa-bl--hero-banner.wa-bl-hero--center .wa-bl__actions,
.wa-bl--hero-banner.wa-bl-hero--stage .wa-bl__actions { justify-content:center; }
.wa-bl--hero-banner.wa-bl-hero--left .wa-bl-hero__layout,
.wa-bl--hero-banner.wa-bl-hero--right .wa-bl-hero__layout { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
.wa-bl--hero-banner.wa-bl-hero--right .wa-bl-hero__media { grid-column:1; grid-row:1; }
.wa-bl--hero-banner.wa-bl-hero--right .wa-bl-hero__copy { grid-column:2; grid-row:1; }
.wa-bl--hero-banner.wa-bl-hero--medium .wa-bl-hero__layout { min-height:540px; }
.wa-bl--hero-banner.wa-bl-hero--tall .wa-bl-hero__layout { min-height:680px; }
.wa-bl--hero-banner.wa-bl-hero--screen .wa-bl-hero__layout { min-height:82svh; }
/* Negative space/blur is generated only by an enabled finishing class. */
.wa-bl--hero-banner.wa-bl-hero--shadow-soft .wa-bl-hero__image { filter:drop-shadow(0 12px 22px #00000035); }
.wa-bl--hero-banner.wa-bl-hero--shadow-studio .wa-bl-hero__image { filter:drop-shadow(0 27px 36px #00000065); }
.wa-bl--hero-banner.wa-bl-hero--shadow-strong .wa-bl-hero__image { filter:drop-shadow(0 34px 52px #000000a6); }
.wa-bl--hero-banner.wa-bl-hero--glow-teal { --wa-bl-hero-glow-color:#56dbc64a; }
.wa-bl--hero-banner.wa-bl-hero--glow-blue { --wa-bl-hero-glow-color:#559cff4c; }
.wa-bl--hero-banner.wa-bl-hero--glow-violet { --wa-bl-hero-glow-color:#a374e949; }
.wa-bl--hero-banner.wa-bl-hero--glow-warm { --wa-bl-hero-glow-color:#e1a36b45; }
.wa-bl--hero-banner.wa-bl-hero--glow-teal .wa-bl-hero__artwork::before,
.wa-bl--hero-banner.wa-bl-hero--glow-blue .wa-bl-hero__artwork::before,
.wa-bl--hero-banner.wa-bl-hero--glow-violet .wa-bl-hero__artwork::before,
.wa-bl--hero-banner.wa-bl-hero--glow-warm .wa-bl-hero__artwork::before {
  content:""; position:absolute; z-index:-1; inset:-10%; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at center,var(--wa-bl-hero-glow-color),transparent 72%);
}
@media (max-width:767px) {
  .wa-bl--hero-banner.wa-bl-hero--left .wa-bl-hero__layout,
  .wa-bl--hero-banner.wa-bl-hero--right .wa-bl-hero__layout { grid-template-columns:minmax(0,1fr); }
  .wa-bl--hero-banner.wa-bl-hero--right .wa-bl-hero__copy,
  .wa-bl--hero-banner.wa-bl-hero--right .wa-bl-hero__media { grid-column:1; grid-row:auto; }
  .wa-bl--hero-banner.wa-bl-hero--mobile-art .wa-bl-hero__media { grid-row:1; }
  .wa-bl--hero-banner.wa-bl-hero--mobile-art .wa-bl-hero__copy { grid-row:2; }
  .wa-bl--hero-banner.wa-bl-hero--medium .wa-bl-hero__layout,
  .wa-bl--hero-banner.wa-bl-hero--tall .wa-bl-hero__layout { min-height:0; }
  .wa-bl--hero-banner.wa-bl-hero--screen .wa-bl-hero__layout { min-height:65svh; }
  .wa-bl--hero-banner .wa-bl-hero__image { max-height:540px; }
  .wa-bl--hero-banner .wa-bl-hero__artwork { width:min(100%,var(--wa-bl-hero-media-max)); transform:none; }
}
@media (prefers-reduced-motion:reduce) { .wa-bl--hero-banner .wa-bl-hero__artwork { transition:none; animation:none; } }
/* Large split artwork can grow into the column gutter, never automatically
   beyond the outside of the section. The v0.2.3 split artwork could be cut
   off by overflow:clip on the section at wide desktop sizes. */
.wa-bl--hero-banner.wa-bl-hero--left .wa-bl-hero__artwork {
  width:min(var(--wa-bl-hero-media-max),calc(100% + var(--wa-bl-hero-extra)));
  margin-left:0;
  margin-right:auto;
}
.wa-bl--hero-banner.wa-bl-hero--right .wa-bl-hero__artwork {
  width:min(var(--wa-bl-hero-media-max),calc(100% + var(--wa-bl-hero-extra)));
  margin-right:0;
  margin-left:calc(-1 * min(var(--wa-bl-hero-extra),var(--wa-bl-column-gap)));
}
@media (max-width:767px) {
  .wa-bl--hero-banner.wa-bl-hero--left .wa-bl-hero__artwork,
  .wa-bl--hero-banner.wa-bl-hero--right .wa-bl-hero__artwork {
    width:min(100%,var(--wa-bl-hero-media-max));
    margin-inline:auto;
  }
}

/* v0.3.2 — explicit artwork stages, independent of display scale. */
@media (min-width:768px) {
  .wa-bl--hero-banner.wa-bl-hero--left.wa-bl-hero--artstage-prominent .wa-bl-hero__layout,
  .wa-bl--hero-banner.wa-bl-hero--right.wa-bl-hero--artstage-prominent .wa-bl-hero__layout { grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr); }
  .wa-bl--hero-banner.wa-bl-hero--left.wa-bl-hero--artstage-immersive .wa-bl-hero__layout,
  .wa-bl--hero-banner.wa-bl-hero--right.wa-bl-hero--artstage-immersive .wa-bl-hero__layout { grid-template-columns:minmax(310px,.66fr) minmax(0,1.34fr); }
  .wa-bl--hero-banner.wa-bl-hero--left.wa-bl-hero--artstage-edge .wa-bl-hero__layout,
  .wa-bl--hero-banner.wa-bl-hero--right.wa-bl-hero--artstage-edge .wa-bl-hero__layout { grid-template-columns:minmax(310px,.60fr) minmax(0,1.40fr); }
  /* When artwork is on the left, the dominant column must be the first. */
  .wa-bl--hero-banner.wa-bl-hero--right.wa-bl-hero--artstage-prominent .wa-bl-hero__layout { grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr); }
  .wa-bl--hero-banner.wa-bl-hero--right.wa-bl-hero--artstage-immersive .wa-bl-hero__layout { grid-template-columns:minmax(0,1.34fr) minmax(310px,.66fr); }
  .wa-bl--hero-banner.wa-bl-hero--right.wa-bl-hero--artstage-edge .wa-bl-hero__layout { grid-template-columns:minmax(0,1.40fr) minmax(310px,.60fr); }
  .wa-bl--hero-banner.wa-bl-hero--artstage-immersive .wa-bl-hero__media,
  .wa-bl--hero-banner.wa-bl-hero--artstage-edge .wa-bl-hero__media { justify-self:stretch; }
}
/* Optional second image exists in markup only for a selected arrangement. */
.wa-bl--hero-banner .wa-bl-hero__primary { position:relative; z-index:2; }
.wa-bl--hero-banner .wa-bl-hero__secondary { position:absolute; z-index:1; width:65%; max-width:100%; pointer-events:none; }
.wa-bl--hero-banner .wa-bl-hero__stack-image { width:100%; height:auto; display:block; object-fit:contain; }
.wa-bl--hero-banner.wa-bl-hero--stack-back-left .wa-bl-hero__primary,
.wa-bl--hero-banner.wa-bl-hero--stack-fan .wa-bl-hero__primary { transform:translateX(4%) rotate(1deg); }
.wa-bl--hero-banner.wa-bl-hero--stack-back-left .wa-bl-hero__secondary { left:1%; top:12%; transform:rotate(-6deg); }
.wa-bl--hero-banner.wa-bl-hero--stack-back-right .wa-bl-hero__primary { transform:translateX(-3%); }
.wa-bl--hero-banner.wa-bl-hero--stack-back-right .wa-bl-hero__secondary { right:1%; top:13%; transform:rotate(6deg); }
.wa-bl--hero-banner.wa-bl-hero--stack-fan .wa-bl-hero__secondary { left:1%; top:15%; transform:rotate(-10deg); }
.wa-bl--hero-banner.wa-bl-hero--stack-offset .wa-bl-hero__secondary { right:-2%; bottom:-14%; width:52%; z-index:3; transform:rotate(1deg); }
/* Smaller, purposeful shadows: compatible with transparent product renders and flat UI screenshots. */
.wa-bl--hero-banner.wa-bl-hero--shadow-contact .wa-bl-hero__image,
.wa-bl--hero-banner.wa-bl-hero--shadow-contact .wa-bl-hero__stack-image { filter:drop-shadow(0 4px 4px #0009); }
.wa-bl--hero-banner.wa-bl-hero--shadow-lifted .wa-bl-hero__image,
.wa-bl--hero-banner.wa-bl-hero--shadow-lifted .wa-bl-hero__stack-image { filter:drop-shadow(0 12px 11px #0008); }
.wa-bl--hero-banner.wa-bl-hero--shadow-directional .wa-bl-hero__image,
.wa-bl--hero-banner.wa-bl-hero--shadow-directional .wa-bl-hero__stack-image { filter:drop-shadow(18px 15px 11px #0008); }
.wa-bl--hero-banner.wa-bl-hero--shadow-rim .wa-bl-hero__image,
.wa-bl--hero-banner.wa-bl-hero--shadow-rim .wa-bl-hero__stack-image { filter:drop-shadow(0 1px 1px #ffffff44) drop-shadow(0 9px 8px #0009); }
.wa-bl--hero-banner.wa-bl-hero--shadow-grounded .wa-bl-hero__image,
.wa-bl--hero-banner.wa-bl-hero--shadow-grounded .wa-bl-hero__stack-image { filter:drop-shadow(0 5px 5px #0008); }
.wa-bl--hero-banner.wa-bl-hero--shadow-grounded .wa-bl-hero__primary::after {
  content:""; position:absolute; pointer-events:none; z-index:-1; left:15%; right:15%; bottom:-11px; height:20px;
  border-radius:50%; background:radial-gradient(ellipse at center,#000a 0%,#0005 48%,transparent 80%);
}
@media (max-width:767px) {
  .wa-bl--hero-banner .wa-bl-hero__artwork { transform:none !important; }
  .wa-bl--hero-banner .wa-bl-hero__secondary { width:59%; }
  .wa-bl--hero-banner.wa-bl-hero--stack-fan .wa-bl-hero__primary,
  .wa-bl--hero-banner.wa-bl-hero--stack-back-left .wa-bl-hero__primary,
  .wa-bl--hero-banner.wa-bl-hero--stack-back-right .wa-bl-hero__primary { transform:none; }
  .wa-bl--hero-banner.wa-bl-hero--stack-offset .wa-bl-hero__secondary { right:0; bottom:-8%; }
}

/* v0.3.3: centred compositional spacing, not stretched implicit grid rows. */
.wa-bl--hero-banner.wa-bl-hero--center .wa-bl-hero__layout,
.wa-bl--hero-banner.wa-bl-hero--stage .wa-bl-hero__layout { grid-template-columns:minmax(0,1fr); grid-auto-rows:max-content; align-content:center; row-gap:var(--wa-bl-hero-stage-gap,32px); }
.wa-bl--hero-banner.wa-bl-hero--center .wa-bl__headline,
.wa-bl--hero-banner.wa-bl-hero--stage .wa-bl__headline { text-align:var(--wa-bl-heading-align,center); }
@media(min-width:768px){
 .wa-bl--hero-banner.wa-bl-hero--left:not(.wa-bl-hero--bleed-off) .wa-bl-hero__artwork { width:min(var(--wa-bl-hero-media-max),calc(100% + var(--wa-bl-hero-extra) + var(--wa-bl-hero-bleed))); margin-right:calc(-1 * var(--wa-bl-hero-bleed)); }
 .wa-bl--hero-banner.wa-bl-hero--right:not(.wa-bl-hero--bleed-off) .wa-bl-hero__artwork { width:min(var(--wa-bl-hero-media-max),calc(100% + var(--wa-bl-hero-extra) + var(--wa-bl-hero-bleed))); margin-left:calc(-1 * var(--wa-bl-hero-bleed)); }
 .wa-bl--hero-banner.wa-bl-hero--stage:not(.wa-bl-hero--bleed-off) .wa-bl-hero__media { max-width:min(calc(100% + var(--wa-bl-hero-bleed)),1600px); }
}
@media(max-width:767px){ .wa-bl--hero-banner.wa-bl-hero--center .wa-bl-hero__layout,.wa-bl--hero-banner.wa-bl-hero--stage .wa-bl-hero__layout { row-gap:min(var(--wa-bl-hero-stage-gap,32px),54px); } }

/* v0.3.4: deterministic centered vertical stack. A percentage-height or
   min-height on the section must not distribute spare space between rows.
   The optional trim compensates intrinsic transparent margins in uploaded art,
   which cannot be measured from the element's CSS rectangle. */
.wa-bl--hero-banner.wa-bl-hero--center .wa-bl-hero__layout,
.wa-bl--hero-banner.wa-bl-hero--stage .wa-bl-hero__layout {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:var(--wa-bl-hero-stage-gap,32px);
}
.wa-bl--hero-banner.wa-bl-hero--center .wa-bl-hero__copy,
.wa-bl--hero-banner.wa-bl-hero--stage .wa-bl-hero__copy {
  flex:none; max-width:var(--wa-bl-hero-copy-max); text-align:center;
}
.wa-bl--hero-banner.wa-bl-hero--center .wa-bl-hero__media,
.wa-bl--hero-banner.wa-bl-hero--stage .wa-bl-hero__media {
  flex:none; margin-block-start:calc(-1 * var(--wa-bl-hero-stage-trim,0px));
}
@media (max-width:767px) {
  .wa-bl--hero-banner.wa-bl-hero--center .wa-bl-hero__media,
  .wa-bl--hero-banner.wa-bl-hero--stage .wa-bl-hero__media {
     margin-block-start:calc(-1 * min(var(--wa-bl-hero-stage-trim,0px), 72px));
  }
}

/* v0.3.5 — Opt-in, whole-section minimum height. Includes section padding.
   Content is centred vertically within the available space. If content exceeds
   the target, the section grows rather than clipping text/product artwork. */
.wa-bl--hero-banner.wa-bl-hero--height-profile {
  min-height:var(--wa-bl-hero-height-target,600px);
  display:flex; flex-direction:column; justify-content:center;
}
@media(max-width:767px){
  .wa-bl--hero-banner.wa-bl-hero--height-profile {
    min-height:var(--wa-bl-hero-height-mobile,0px);
  }
}

/* v0.3.7: reveal a meaningful portion of the second screen in the fan mode.
   Previously the secondary could be almost completely covered by the first image. */
@media (min-width:768px) {
  .wa-bl--hero-banner.wa-bl-hero--stack-fan .wa-bl-hero__primary { transform:translateX(9%) rotate(1deg); }
  .wa-bl--hero-banner.wa-bl-hero--stack-fan .wa-bl-hero__secondary { left:-7%; top:20%; width:78%; transform:rotate(-7deg); }
}

/* v0.3.8: ACF previews can be narrow while the browser viewport is wide.
   Adapt to the actual editor block width, not the host admin viewport.
   Frontend designs and saved artwork positions remain unchanged. */
.wa-bl--hero-banner.wa-bl--editor-preview .wa-bl__wrap { container-type:inline-size; }
.wa-bl--hero-banner.wa-bl--editor-preview .wa-bl-hero__copy { container-type:inline-size; }
/* Intentional front-end edge bleed should never destroy the editor preview. */
.wa-bl--hero-banner.wa-bl--editor-preview .wa-bl-hero__artwork {
  width:min(100%,var(--wa-bl-hero-media-max)) !important;
  max-width:100%; margin-inline:auto !important; transform:none !important;
}
@container (max-width:900px) {
  .wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--left .wa-bl-hero__layout,
  .wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--right .wa-bl-hero__layout {
    grid-template-columns:minmax(0,1fr); gap:clamp(20px,4cqw,40px);
  }
  .wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--right .wa-bl-hero__media,
  .wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--right .wa-bl-hero__copy {
    grid-column:1; grid-row:auto;
  }
  .wa-bl--hero-banner.wa-bl--editor-preview .wa-bl-hero__copy,
  .wa-bl--hero-banner.wa-bl--editor-preview .wa-bl-hero__media {
    max-width:100%; width:100%;
  }
}
/* Headline text scales with the available COPY width, avoiding 168px words
   inside a 300px editor column. This affects editor preview only. */
@container (max-width:900px) {
  .wa-bl--hero-banner.wa-bl--editor-preview .wa-bl-hero__copy .wa-bl__headline {
    font-size:min(var(--wa-bl-heading-size),clamp(32px,12cqw,96px));
    overflow-wrap:normal; word-break:normal;
  }
}


/* WA 0.4: deliberate two-image stages. Native-size main and secondary images remain
   WordPress responsive images. Only enabled stacks render a second image. */
.wa-bl--hero-banner .wa-bl-hero__secondary,
.wa-bl--product-hero:not(.wa-bl-product--dual) .wa-bl-product__secondary {
  width:var(--wa-bl-stack-secondary-scale,82%);
  max-width:100%;
  transform:translate(var(--wa-bl-stack-secondary-x,0px),var(--wa-bl-stack-secondary-y,0px));
}
.wa-bl--hero-banner.wa-bl-hero--stack-order-front .wa-bl-hero__secondary,
.wa-bl--product-hero.wa-bl-product--stack-order-front:not(.wa-bl-product--dual) .wa-bl-product__secondary { z-index:4; }
.wa-bl--hero-banner.wa-bl-hero--stack-order-behind .wa-bl-hero__secondary,
.wa-bl--product-hero.wa-bl-product--stack-order-behind:not(.wa-bl-product--dual) .wa-bl-product__secondary { z-index:1; }
/* Twin: fully readable screenshots, no overlap. */
.wa-bl--hero-banner.wa-bl-hero--stack-twin .wa-bl-hero__artwork,
.wa-bl--product-hero.wa-bl-product--stack-twin:not(.wa-bl-product--dual) .wa-bl-product__artwork {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(10px,2vw,26px); align-items:center;
}
.wa-bl--hero-banner.wa-bl-hero--stack-twin .wa-bl-hero__secondary,
.wa-bl--product-hero.wa-bl-product--stack-twin:not(.wa-bl-product--dual) .wa-bl-product__secondary {
  position:relative; inset:auto; width:100%; max-width:100%; transform:none;
}
/* Reveal real secondary content instead of covering 70-90% as legacy stack did.
   Translation/rotation are applied to child media, so manual X/Y can coexist. */
.wa-bl--hero-banner.wa-bl-hero--stack-rear-offset .wa-bl-hero__artwork,
.wa-bl--product-hero.wa-bl-product--stack-rear-offset:not(.wa-bl-product--dual) .wa-bl-product__artwork { padding-inline-start:11%; padding-block-end:10%; }
.wa-bl--hero-banner.wa-bl-hero--stack-rear-offset .wa-bl-hero__primary,
.wa-bl--product-hero.wa-bl-product--stack-rear-offset:not(.wa-bl-product--dual) .wa-bl-product__primary { width:90%; margin-left:auto; }
.wa-bl--hero-banner.wa-bl-hero--stack-rear-offset .wa-bl-hero__secondary,
.wa-bl--product-hero.wa-bl-product--stack-rear-offset:not(.wa-bl-product--dual) .wa-bl-product__secondary {left:0;top:33%; }
.wa-bl--hero-banner.wa-bl-hero--stack-front-peek .wa-bl-hero__secondary,
.wa-bl--product-hero.wa-bl-product--stack-front-peek:not(.wa-bl-product--dual) .wa-bl-product__secondary {right:-1%;bottom:-18%;width:min(70%,var(--wa-bl-stack-secondary-scale,82%));z-index:4;}
.wa-bl--hero-banner.wa-bl-hero--stack-front-peek .wa-bl-hero__artwork,
.wa-bl--product-hero.wa-bl-product--stack-front-peek:not(.wa-bl-product--dual) .wa-bl-product__artwork {padding-bottom:11%;}
.wa-bl--hero-banner.wa-bl-hero--stack-editorial-overlap .wa-bl-hero__secondary,
.wa-bl--product-hero.wa-bl-product--stack-editorial-overlap:not(.wa-bl-product--dual) .wa-bl-product__secondary {left:-6%;top:65%;width:var(--wa-bl-stack-secondary-scale,82%);z-index:4;}
.wa-bl--hero-banner.wa-bl-hero--stack-editorial-overlap .wa-bl-hero__artwork,
.wa-bl--product-hero.wa-bl-product--stack-editorial-overlap:not(.wa-bl-product--dual) .wa-bl-product__artwork {padding-bottom:24%;}
.wa-bl--hero-banner.wa-bl-hero--stack-spread .wa-bl-hero__artwork,
.wa-bl--product-hero.wa-bl-product--stack-spread:not(.wa-bl-product--dual) .wa-bl-product__artwork {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(4px,1vw,14px);align-items:center;}
.wa-bl--hero-banner.wa-bl-hero--stack-spread .wa-bl-hero__primary,
.wa-bl--product-hero.wa-bl-product--stack-spread:not(.wa-bl-product--dual) .wa-bl-product__primary {transform:translateY(-7%) rotate(-3deg);}
.wa-bl--hero-banner.wa-bl-hero--stack-spread .wa-bl-hero__secondary,
.wa-bl--product-hero.wa-bl-product--stack-spread:not(.wa-bl-product--dual) .wa-bl-product__secondary {position:relative;inset:auto;width:100%;transform:translateY(7%) rotate(3deg);}
.wa-bl--hero-banner.wa-bl-hero--stack-vertical-stage .wa-bl-hero__artwork,
.wa-bl--product-hero.wa-bl-product--stack-vertical-stage:not(.wa-bl-product--dual) .wa-bl-product__artwork {display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2vw,26px);max-width:min(100%,var(--wa-bl-hero-media-max,1400px));}
.wa-bl--hero-banner.wa-bl-hero--stack-vertical-stage .wa-bl-hero__secondary,
.wa-bl--product-hero.wa-bl-product--stack-vertical-stage:not(.wa-bl-product--dual) .wa-bl-product__secondary {position:relative;inset:auto;width:100%;transform:none;}
/* Reflections are pure paint, not a cloned <img>, no second download.
   Supported by Chromium/Safari; unsupported browsers simply show no reflection. */
.wa-bl--hero-banner.wa-bl-hero--reflection-short .wa-bl-hero__primary,
.wa-bl--product-hero.wa-bl-product--reflection-short .wa-bl-product__primary { -webkit-box-reflect:below 4px linear-gradient(to bottom,#0003,transparent 44%); }
.wa-bl--hero-banner.wa-bl-hero--reflection-soft .wa-bl-hero__primary,
.wa-bl--product-hero.wa-bl-product--reflection-soft .wa-bl-product__primary { -webkit-box-reflect:below 7px linear-gradient(to bottom,#0004,transparent 60%); }
.wa-bl--hero-banner.wa-bl-hero--reflection-studio .wa-bl-hero__primary,
.wa-bl--product-hero.wa-bl-product--reflection-studio .wa-bl-product__primary { -webkit-box-reflect:below 3px linear-gradient(to bottom,#0005,transparent 58%); }
.wa-bl--hero-banner.wa-bl-hero--reflection-long .wa-bl-hero__primary,
.wa-bl--product-hero.wa-bl-product--reflection-long .wa-bl-product__primary { -webkit-box-reflect:below 10px linear-gradient(to bottom,#0004,transparent 85%); }
/* Reflection only for a single stage or two non-overlapping images. */
@media (max-width:767px) {
 .wa-bl--hero-banner .wa-bl-hero__secondary,
 .wa-bl--product-hero:not(.wa-bl-product--dual) .wa-bl-product__secondary {transform:none;position:relative;inset:auto;width:100%;max-width:100%;}
 .wa-bl--hero-banner .wa-bl-hero__artwork:has(> .wa-bl-hero__secondary),
 .wa-bl--product-hero:not(.wa-bl-product--dual) .wa-bl-product__artwork:has(> .wa-bl-product__secondary) {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;}
 .wa-bl--hero-banner .wa-bl-hero__primary, .wa-bl--product-hero .wa-bl-product__primary {transform:none!important;width:100%;}
 .wa-bl--hero-banner[class*="--reflection-"] .wa-bl-hero__primary,
 .wa-bl--product-hero[class*="--reflection-"] .wa-bl-product__primary {-webkit-box-reflect:unset;}
}

/* Exact desktop height is optional. Minimum remains the backwards-compatible default.
   The section box includes padding (global box-sizing:border-box). */
@media (min-width:1024px) {
 .wa-bl--hero-banner.wa-bl-hero--height-fixed.wa-bl-hero--height-profile {
  height:var(--wa-bl-hero-height-target); min-height:0; max-height:var(--wa-bl-hero-height-target); overflow:clip;
 }
 .wa-bl--hero-banner.wa-bl-hero--height-fixed .wa-bl-hero__layout {min-height:0;}
 .wa-bl--hero-banner.wa-bl-hero--height-fixed .wa-bl-hero__image {
  max-height:max(100px,calc(var(--wa-bl-hero-height-target) - var(--wa-bl-pad-top) - var(--wa-bl-pad-bottom) - 24px));
  width:auto;max-width:100%;margin-inline:auto;
 }
 .wa-bl--hero-banner.wa-bl-hero--height-fixed.wa-bl-hero--center .wa-bl-hero__image,
 .wa-bl--hero-banner.wa-bl-hero--height-fixed.wa-bl-hero--stage .wa-bl-hero__image {
   max-height:max(100px,calc((var(--wa-bl-hero-height-target) - var(--wa-bl-pad-top) - var(--wa-bl-pad-bottom) - var(--wa-bl-hero-stage-gap)) * .65));
 }
}

/* Deliberate vertical stacks remain full-width on phones; other stack presets
   use two contained thumbnails to avoid obscuring the hero copy. */
@media (max-width:767px) {
  .wa-bl--hero-banner.wa-bl-hero--stack-vertical-stage .wa-bl-hero__artwork {
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* 0.4.1 — ACF editor stability. A narrow editor CAN have a large browser viewport.
   Query the actual hero section width, not the window or a nested column.
   All rules below are editor-only and never affect the published frontend. */
:is(.wa-bl--hero-banner.wa-bl--editor-preview, .editor-styles-wrapper .wa-bl--hero-banner) {
  container:wa-bl-hero-preview / inline-size;
  height:auto !important; min-height:0 !important; max-height:none !important;
}
:is(.wa-bl--hero-banner.wa-bl--editor-preview, .editor-styles-wrapper .wa-bl--hero-banner) .wa-bl-hero__layout {
  min-height:0 !important;
}
:is(.wa-bl--hero-banner.wa-bl--editor-preview, .editor-styles-wrapper .wa-bl--hero-banner) .wa-bl-hero__artwork {
  width:min(100%,var(--wa-bl-hero-media-max)) !important;
  max-width:100% !important;
  transform:none !important;
  margin-inline:auto !important;
}
@container wa-bl-hero-preview (max-width:1150px) {
  .wa-bl-hero__layout {display:flex !important; flex-direction:column !important;
    gap:clamp(18px,3cqw,38px) !important; align-items:stretch !important;
    min-height:0 !important;}
  .wa-bl-hero__copy,.wa-bl-hero__media {
    grid-column:auto !important; grid-row:auto !important;
    min-width:0 !important; width:100% !important;
    max-width:100% !important; margin-inline:auto !important;
  }
  .wa-bl-hero__copy .wa-bl__headline {
    font-size:clamp(28px,5.2cqw,58px) !important;
    line-height:1.12 !important; overflow-wrap:normal !important; word-break:normal !important;
  }
  .wa-bl-hero__artwork:has(> .wa-bl-hero__secondary) {
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:center !important; gap:clamp(8px,2cqw,20px) !important;
    padding:0 !important;
  }
  .wa-bl-hero__artwork > .wa-bl-hero__primary,
  .wa-bl-hero__artwork > .wa-bl-hero__secondary {
    position:relative !important; inset:auto !important;
    width:100% !important; max-width:100% !important;
    transform:none !important; margin:0 !important;
  }
}
@container wa-bl-hero-preview (max-width:620px) {
  .wa-bl-hero__artwork:has(> .wa-bl-hero__secondary) {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .wa-bl-hero__copy .wa-bl__headline {font-size:clamp(26px,7.3cqw,42px) !important;}
}
@container wa-bl-hero-preview (min-width:1151px) {
  .wa-bl-hero__copy .wa-bl__headline {
    font-size:clamp(34px,4.4cqw,64px) !important;
    line-height:1.1 !important; overflow-wrap:normal !important; word-break:normal !important;
  }
  .wa-bl-hero__artwork:has(> .wa-bl-hero__secondary) {
    padding-bottom:9% !important;
  }
  .wa-bl-hero__artwork > .wa-bl-hero__primary {transform:none !important;}
  .wa-bl-hero__artwork:has(> .wa-bl-hero__secondary) > .wa-bl-hero__primary {
    width:76% !important; margin-inline-start:0 !important;
  }
  .wa-bl-hero__artwork > .wa-bl-hero__secondary {
    position:absolute !important; width:55% !important; max-width:55% !important;
    inset:30% 0 auto auto !important; transform:none !important;
  }
}


/* 0.4.2 FRONTEND: centred/stage heroes must allocate the finite FIXED height
   across copy and artwork. The old max-height on the <img> alone did not
   constrain its parents; a tall image pushed below the clipped section.
   Deliberately scope this to fixed desktop centre/stage, not split layouts. */
@media (min-width:1024px) {
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) {
    padding-top:min(var(--wa-bl-pad-top),calc(var(--wa-bl-hero-height-target) * .085));
    padding-bottom:min(var(--wa-bl-pad-bottom),calc(var(--wa-bl-hero-height-target) * .085));
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) .wa-bl__wrap {
    flex:1 1 0; min-height:0; display:flex; flex-direction:column; justify-content:center;
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) .wa-bl-hero__layout {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    flex:1 1 0; height:100%; min-height:0; width:100%;
    gap:clamp(22px,3vh,32px);
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) .wa-bl-hero__copy {
    flex:0 1 auto; min-height:0; max-height:60%; max-width:min(100%,1020px);
    text-align:center; overflow:visible;
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview):not(.wa-bl-hero--headline-manual) .wa-bl__headline {
    font-size:min(var(--wa-bl-heading-size),clamp(34px,4.2vw,76px));
    line-height:1.08; text-align:center;
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) .wa-bl__body {
    margin-block-start:clamp(12px,1.8vh,22px); line-height:1.5;
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) .wa-bl-hero__media {
    flex:1 1 0; height:0; min-height:0; max-height:100%;
    margin-block-start:0; display:flex; justify-content:center; align-items:center;
    max-width:min(100%,var(--wa-bl-hero-media-max));
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) .wa-bl-hero__artwork {
    flex:1 1 auto; height:100%; min-height:0; max-height:100%;
    width:100%; max-width:100%; padding:0; transform:none; margin-inline:auto;
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) .wa-bl-hero__primary {
    height:100%; min-height:0; width:100%; transform:none;
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) .wa-bl-hero__image {
    display:block; width:100%; height:100%; max-width:100%; max-height:100%;
    object-fit:contain; aspect-ratio:auto;
  }
  /* Overlapping stacks use a bounded secondary frame inside the artwork area. */
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) .wa-bl-hero__artwork:has(> .wa-bl-hero__secondary) {
    position:relative; display:flex; align-items:center; justify-content:center;
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) .wa-bl-hero__artwork:has(> .wa-bl-hero__secondary) > .wa-bl-hero__primary {
    width:78%; margin-right:18%; height:100%;
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) .wa-bl-hero__artwork:has(> .wa-bl-hero__secondary) > .wa-bl-hero__secondary {
    position:absolute; top:25%; bottom:auto; left:auto; right:0;
    width:48%; max-width:48%; height:65%; transform:none;
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) .wa-bl-hero__stack-image {
    width:100%;height:100%;object-fit:contain;
  }
  /* Side-by-side/vertical are intentionally two readable full-stage images. */
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):is(.wa-bl-hero--stack-twin,.wa-bl-hero--stack-spread):not(.wa-bl--editor-preview) .wa-bl-hero__artwork:has(> .wa-bl-hero__secondary) {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage):is(.wa-bl-hero--stack-twin,.wa-bl-hero--stack-spread):not(.wa-bl--editor-preview) .wa-bl-hero__artwork:has(> .wa-bl-hero__secondary) > :is(.wa-bl-hero__primary,.wa-bl-hero__secondary) {
    position:relative; inset:auto; width:100%; max-width:100%; height:100%; margin:0; transform:none;
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage).wa-bl-hero--stack-vertical-stage:not(.wa-bl--editor-preview) .wa-bl-hero__artwork:has(> .wa-bl-hero__secondary) {
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;
  }
  .wa-bl--hero-banner.wa-bl-hero--height-fixed:is(.wa-bl-hero--center,.wa-bl-hero--stage).wa-bl-hero--stack-vertical-stage:not(.wa-bl--editor-preview) .wa-bl-hero__artwork:has(> .wa-bl-hero__secondary) > :is(.wa-bl-hero__primary,.wa-bl-hero__secondary) {
    position:relative;inset:auto;width:100%;max-width:100%;height:100%;margin:0;transform:none;
  }
}
/* Content-led/minimum centred layouts may use transparent-image trim, but a
   saved large trim must not remove all separation after the supporting copy. */
.wa-bl--hero-banner:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl-hero--height-fixed) .wa-bl-hero__media {
  margin-block-start:max(calc(-1 * var(--wa-bl-hero-stage-trim,0px)),calc(24px - var(--wa-bl-hero-stage-gap,32px)));
}

/* Content-led and minimum-height editorial heroes should not grow to 1300px
   simply because an uploaded software UI is unusually tall. This cap sizes
   the displayed image, never clips the underlying section or its text. */
@media (min-width:1024px) {
  .wa-bl--hero-banner:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl-hero--height-fixed):not(.wa-bl--editor-preview) .wa-bl-hero__image {
    max-height:min(50svh,540px);width:100%;object-fit:contain;
  }
  /* Cover is an explicit crop request; Fixed Height may constrain the frame,
     but must not silently switch that user choice into Contain. */
  .wa-bl--hero-banner.wa-bl-hero--height-fixed.wa-bl-hero--fit-cover:is(.wa-bl-hero--center,.wa-bl-hero--stage):not(.wa-bl--editor-preview) .wa-bl-hero__image {object-fit:cover;}
}

/* v0.5.0 — Two measured, opt-in reference layouts.
   Source screenshots: AP 1920×680; BA 1920×700. The layout owns GEOMETRY only.
   Shared Quick Look backgrounds, title paint, typography weight, atmosphere, decorations,
   glows, contact shadows, stack ordering and reflections remain fully operational.
   Saved non-template designs retain every preceding selector and layout rule. */
@media (min-width:1024px) {
  .wa-bl.wa-bl--hero-banner.wa-bl-hero--template:not(.wa-bl--editor-preview) {
    padding-block:0;
    --wa-bl-template-pad:0px;
  }
  .wa-bl.wa-bl--hero-banner.wa-bl-hero--template:not(.wa-bl--editor-preview) > .wa-bl__wrap {
    width:min(calc(100% - 48px),1370px);
    max-width:1370px;
  }
  .wa-bl--hero-banner.wa-bl-hero--template:not(.wa-bl--editor-preview) .wa-bl-hero__artwork {
    /* Old arbitrary offsets/scales are not secretly inherited into the template. */
    width:100%; max-width:100%; margin:0; transform:none; padding:0;
  }
  .wa-bl--hero-banner.wa-bl-hero--template:not(.wa-bl--editor-preview) .wa-bl-hero__image {
    width:auto; max-width:100%; height:auto; max-height:var(--wa-bl-template-art-limit);
    margin-inline:auto; object-fit:contain; aspect-ratio:auto;
  }
  .wa-bl--hero-banner.wa-bl-hero--template.wa-bl-hero--fit-cover:not(.wa-bl--editor-preview) .wa-bl-hero__image {
    /* A crop must be a deliberate request, never inferred from a 1:1 saved frame. */
    object-fit:cover; aspect-ratio:var(--wa-bl-image-ratio);
  }
  .wa-bl--hero-banner.wa-bl-hero--template.wa-bl-hero--ap-template:not(.wa-bl--editor-preview) .wa-bl-hero__layout {
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    text-align:center; min-height:680px; height:auto;
    gap:var(--wa-bl-template-stage-gap,98px); padding-block:var(--wa-bl-template-padding-top,114px) var(--wa-bl-template-padding-bottom,95px);
  }
  .wa-bl--hero-banner.wa-bl-hero--ap-template:not(.wa-bl--editor-preview) .wa-bl-hero__copy {
    max-width:min(100%,1000px); margin-inline:auto; flex:0 0 auto; text-align:center;
  }
  .wa-bl--hero-banner.wa-bl-hero--ap-template:not(.wa-bl--editor-preview) .wa-bl__headline {
    text-align:center; line-height:1.02; text-wrap:balance;
  }
  .wa-bl--hero-banner.wa-bl-hero--ap-template:not(.wa-bl--editor-preview) .wa-bl__body {
    max-width:860px; margin-inline:auto; margin-top:var(--wa-bl-template-copy-gap,var(--wa-bl-content-gap,22px));
  }
  .wa-bl--hero-banner.wa-bl-hero--ap-template:not(.wa-bl--editor-preview) .wa-bl__actions {justify-content:center;}
  .wa-bl--hero-banner.wa-bl-hero--ap-template:not(.wa-bl--editor-preview) .wa-bl-hero__media {
    width:100%; max-width:min(100%,1080px); flex:0 1 auto;
    margin:0; min-width:0;
  }
  .wa-bl--hero-banner.wa-bl-hero--ap-template:not(.wa-bl--editor-preview) .wa-bl-hero__primary {display:flex; justify-content:center;}

  .wa-bl--hero-banner.wa-bl-hero--ba-template:not(.wa-bl--editor-preview) .wa-bl-hero__layout {
    display:grid; grid-template-columns:minmax(0,570fr) minmax(0,570fr);
    gap:var(--wa-bl-ba-column-gap,220px);
    min-height:700px; height:auto; align-items:center;
    padding-block:var(--wa-bl-template-padding-top,58px) var(--wa-bl-template-padding-bottom,56px);
  }
  /* Opt-in centred-pair movement: fixed maximum column widths, centred as a unit.
     Decreasing the gap moves BOTH columns inward equally; no transforms and no
     horizontal overflow when the desktop content width is below 1360px. */
  .wa-bl--hero-banner.wa-bl-hero--ba-template.wa-bl-hero--ba-motion-balanced:not(.wa-bl--editor-preview) .wa-bl-hero__layout {
    grid-template-columns:repeat(2,minmax(0,min(575px,calc((100% - var(--wa-bl-ba-column-gap,220px)) / 2))));
    justify-content:center;
  }
  .wa-bl--hero-banner.wa-bl-hero--ba-template:not(.wa-bl--editor-preview) .wa-bl-hero__copy {
    max-width:570px; margin:0; align-self:center; min-width:0; text-align:left;
  }
  .wa-bl--hero-banner.wa-bl-hero--ba-template:not(.wa-bl--editor-preview) .wa-bl__headline {
    text-align:left; line-height:1.13;
  }
  .wa-bl--hero-banner.wa-bl-hero--ba-template:not(.wa-bl--editor-preview) .wa-bl__body {
    margin-top:var(--wa-bl-template-copy-gap,22px); line-height:1.64; font-size:clamp(15px,0.89vw,18px);
  }
  .wa-bl--hero-banner.wa-bl-hero--ba-template:not(.wa-bl--editor-preview) .wa-bl__body li {margin-block:0 9px;}
  .wa-bl--hero-banner.wa-bl-hero--ba-template:not(.wa-bl--editor-preview) .wa-bl-hero__media {
    max-width:100%; width:100%; margin:0; display:flex; align-items:center; justify-content:flex-start;
  }
  .wa-bl--hero-banner.wa-bl-hero--ba-template:not(.wa-bl--editor-preview) .wa-bl-hero__primary {display:flex; justify-content:flex-start;}
  .wa-bl--hero-banner.wa-bl-hero--ba-template:not(.wa-bl--editor-preview) .wa-bl-hero__image {margin-inline:0;}
  /* BA keeps measured reference geometry at 100% / 0 offsets. Unlike generic
     artwork controls (ignored by AP/BA on purpose), these dedicated sliders
     deliberately transform the *whole artwork stage*. Scaling a wide image
     this way visibly grows the interface; it does not change the grid widths,
     copy, headline, preset background, shadows or reflection behaviour. */
  .wa-bl--hero-banner.wa-bl-hero--template.wa-bl-hero--ba-template:not(.wa-bl--editor-preview) .wa-bl-hero__artwork {
    transform:translate(var(--wa-bl-ba-art-offset-x,0px),var(--wa-bl-ba-art-offset-y,0px)) scale(var(--wa-bl-ba-art-scale,1));
    transform-origin:left center;
  }

  .wa-bl--hero-banner.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) {
    height:var(--wa-bl-template-height); max-height:var(--wa-bl-template-height);
    min-height:0; overflow:clip;
  }
  .wa-bl--hero-banner.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) > .wa-bl__wrap {
    height:100%; max-height:100%; min-height:0;
  }
  .wa-bl--hero-banner.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__layout {
    height:100%; min-height:0; max-height:100%; overflow:clip;
  }
  /* A fixed BA banner clips at the full section boundary, not the 1370px
     content-grid boundary. Without this, enlarging or offsetting artwork still
     disappears at the grid edge, making the sliders appear non-functional.
     Only BA's opt-in artwork adjustment bypasses this intermediate clip. */
  .wa-bl--hero-banner.wa-bl-hero--ba-template.wa-bl-hero--ba-art-adjusted.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__layout {
    overflow:visible;
  }
  .wa-bl--hero-banner.wa-bl-hero--ap-template.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__layout {
    padding-top:var(--wa-bl-template-padding-top,clamp(26px,calc(var(--wa-bl-template-height) * .168),114px));
    padding-bottom:var(--wa-bl-template-padding-bottom,clamp(22px,calc(var(--wa-bl-template-height) * .09),65px));
    gap:var(--wa-bl-template-stage-gap,clamp(16px,calc(var(--wa-bl-template-height) * .145),98px));
  }
  .wa-bl--hero-banner.wa-bl-hero--ap-template.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl__headline {
    font-size:min(var(--wa-bl-heading-size),clamp(32px,calc(var(--wa-bl-template-height) * .095),68px));
  }
  .wa-bl--hero-banner.wa-bl-hero--ap-template.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__media {
    flex:1 1 auto; min-height:0; display:flex; align-items:flex-start; justify-content:center;
  }
  .wa-bl--hero-banner.wa-bl-hero--ap-template.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__artwork,
  .wa-bl--hero-banner.wa-bl-hero--ap-template.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__primary {
    height:100%; max-height:100%; min-height:0; display:flex; justify-content:center;
  }
  .wa-bl--hero-banner.wa-bl-hero--ap-template.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__image {
    width:auto; height:auto; max-height:min(var(--wa-bl-template-art-limit),calc(var(--wa-bl-template-height) * .43));
    object-fit:contain;
  }
  .wa-bl--hero-banner.wa-bl-hero--ba-template.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__layout {
    padding-block:var(--wa-bl-template-padding-top,clamp(24px,calc(var(--wa-bl-template-height) * .08),58px)) var(--wa-bl-template-padding-bottom,clamp(24px,calc(var(--wa-bl-template-height) * .08),58px));
  }
  .wa-bl--hero-banner.wa-bl-hero--ba-template.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl__headline {
    font-size:min(var(--wa-bl-heading-size),clamp(26px,calc(var(--wa-bl-template-height) * .064),44px));
  }
  /* BA/AP fixed stages cap the inherited preset headline to protect the stage.
     A deliberately selected Headline size or Custom desktop size must visibly
     win, otherwise many different presets all appear stuck at 44px/68px.
     Fixed-height overflow remains an editorial tradeoff, not a hidden override. */
  .wa-bl--hero-banner.wa-bl-hero--template.wa-bl-hero--template-fixed.wa-bl-hero--headline-manual:not(.wa-bl--editor-preview) .wa-bl__headline {
    font-size:var(--wa-bl-heading-size);
  }
  .wa-bl--hero-banner.wa-bl-hero--ba-template.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__media,
  .wa-bl--hero-banner.wa-bl-hero--ba-template.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__artwork,
  .wa-bl--hero-banner.wa-bl-hero--ba-template.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__primary {
    max-height:100%; height:100%; min-height:0; display:flex; align-items:center;
  }
  .wa-bl--hero-banner.wa-bl-hero--ba-template.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__image {
    width:auto; max-width:100%; height:auto;
    max-height:min(var(--wa-bl-template-art-limit),calc(var(--wa-bl-template-height) - 120px)); object-fit:contain;
  }
}
/* BA product identity is opt-in content, not tied to Woo discounts or product queries. */
.wa-bl--hero-banner .wa-bl-hero__identity {display:flex; align-items:center; gap:12px; min-width:0; margin:0 0 33px;}
.wa-bl--hero-banner .wa-bl-hero__identity-image {display:block; width:52px; height:52px; max-width:52px; object-fit:contain; flex:0 0 52px;}
.wa-bl--hero-banner .wa-bl-hero__identity-lines {display:flex; flex-direction:column; gap:5px; min-width:0;}
.wa-bl--hero-banner .wa-bl-hero__identity-name {font-size:21px; line-height:1.1; font-weight:650; color:var(--wa-bl-fg);}
.wa-bl--hero-banner .wa-bl-hero__identity-subtitle {font-size:13px; line-height:1.35; color:var(--wa-bl-muted);}
.wa-bl--hero-banner .wa-bl-hero__identity-badge {margin-inline-start:auto; white-space:nowrap; border-radius:999px; padding:8px 16px; color:#fff; background:#eb3030; font-size:14px; font-weight:600;}
/* Under 1024px the two reference templates become honest, content-led layouts.
   No fixed-height clipping, including narrow WordPress previews. */
@media (max-width:1023px) {
  .wa-bl.wa-bl--hero-banner.wa-bl-hero--template {height:auto; max-height:none; min-height:0;}
  .wa-bl--hero-banner.wa-bl-hero--template .wa-bl-hero__layout {
    display:flex; flex-direction:column; align-items:stretch; justify-content:center;
    min-height:0; height:auto; gap:var(--wa-bl-template-stage-gap,clamp(26px,5vw,56px)); padding:0;
  }
  .wa-bl--hero-banner.wa-bl-hero--template .wa-bl-hero__media {max-width:100%; margin:0;}
  .wa-bl--hero-banner.wa-bl-hero--template .wa-bl-hero__artwork {width:100%; max-width:100%; margin:0;transform:none;}
  .wa-bl--hero-banner.wa-bl-hero--template .wa-bl-hero__image {max-width:100%;height:auto;max-height:620px;object-fit:contain;aspect-ratio:auto;}
  .wa-bl--hero-banner.wa-bl-hero--ap-template .wa-bl-hero__copy {text-align:center;margin-inline:auto;}
  .wa-bl--hero-banner.wa-bl-hero--ap-template .wa-bl__headline {text-align:center;}
  .wa-bl--hero-banner.wa-bl-hero--ap-template .wa-bl__actions {justify-content:center;}
  .wa-bl--hero-banner.wa-bl-hero--ba-template .wa-bl-hero__copy {max-width:700px;}
  .wa-bl--hero-banner.wa-bl-hero--ba-template .wa-bl__headline {text-align:left;}
}
/* In actual ACF previews, layout adapts to the editor container rather than
   using desktop min-height or reference screenshot padding. */
:is(.wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--template,
    .editor-styles-wrapper .wa-bl--hero-banner.wa-bl-hero--template) {
  height:auto !important; min-height:0 !important; max-height:none !important;
  padding-block:var(--wa-bl-template-mobile-padding-top,var(--wa-bl-template-padding-top,clamp(24px,3vw,54px))) var(--wa-bl-template-mobile-padding-bottom,var(--wa-bl-template-padding-bottom,clamp(24px,3vw,54px))) !important;
}
:is(.wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--template,
    .editor-styles-wrapper .wa-bl--hero-banner.wa-bl-hero--template) .wa-bl-hero__layout {
  min-height:0 !important; height:auto !important; padding:0 !important;
  gap:var(--wa-bl-template-stage-gap,clamp(22px,3vw,54px)) !important;
}
@container wa-bl-hero-preview (max-width:1150px) {
  .wa-bl-hero--template .wa-bl-hero__layout {display:flex !important; flex-direction:column !important;}
  .wa-bl-hero--template .wa-bl-hero__copy {max-width:100% !important;}
  .wa-bl-hero--template .wa-bl-hero__media {max-width:100% !important;}
}

/* Template-only two-image rear offset: guarantee visible supporting art instead of
   a tiny, mostly concealed second screenshot. Respect front/back z-index. */
@media(min-width:1024px) {
 .wa-bl--hero-banner.wa-bl-hero--template.wa-bl-hero--stack-rear-offset:not(.wa-bl--editor-preview) .wa-bl-hero__artwork:has(> .wa-bl-hero__secondary) {padding:0; min-height:0;}
 .wa-bl--hero-banner.wa-bl-hero--template.wa-bl-hero--stack-rear-offset:not(.wa-bl--editor-preview) .wa-bl-hero__primary {width:74%;margin:0;}
 .wa-bl--hero-banner.wa-bl-hero--template.wa-bl-hero--stack-rear-offset:not(.wa-bl--editor-preview) .wa-bl-hero__secondary {width:55%;left:auto;right:0;top:33%;bottom:auto;}
}
/* ACF receives explicit preview classes when rendering blocks. Never impose
   reference screenshot heights or large uncapped artwork within its wrapper. */
.wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--ap-template .wa-bl-hero__layout {
 display:flex;flex-direction:column;align-items:center; gap:var(--wa-bl-template-stage-gap,clamp(24px,4vw,64px));
}
.wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--ap-template .wa-bl-hero__copy {
 max-width:min(100%,1000px);text-align:center;
}
.wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--ap-template .wa-bl__headline {text-align:center;}
.wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--ba-template .wa-bl-hero__layout {
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,70px);min-height:0;
}
.wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--template .wa-bl-hero__image {
 width:auto;max-width:100%;height:auto;max-height:min(46vw,450px);object-fit:contain;aspect-ratio:auto;
}
@container wa-bl-hero-preview (max-width:1150px) {
 .wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--ba-template .wa-bl-hero__layout {display:flex;flex-direction:column;}
}
/* Last-mile editor parity: centre the actual image inside the contained AP stage,
   not only the outer media column (the old preview showed a left-anchored image). */
.wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--ap-template .wa-bl-hero__media {
  margin-inline:auto; max-width:min(100%,1080px); justify-self:center;
}
.wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--ap-template .wa-bl-hero__primary {
  display:flex; justify-content:center; align-items:center; width:100%;
}


/* v0.5.4 — AP/BА composition ordering. Both controls live on Quick Looks.
   Desktop AP inversion preserves the existing copy/media DOM for accessibility;
   tab/navigation reading order is unchanged. Existing layouts default to copy first.
   BA desktop is always copy left / artwork right; its order changes only in the
   stacked tablet/mobile arrangement. */
@media (min-width:1024px) {
  .wa-bl--hero-banner.wa-bl-hero--ap-template.wa-bl-hero--ap-desktop-art .wa-bl-hero__media {order:-1;}
  .wa-bl--hero-banner.wa-bl-hero--ap-template.wa-bl-hero--ap-desktop-art:not(.wa-bl--editor-preview) .wa-bl-hero__layout {
    padding-block:var(--wa-bl-template-padding-top,clamp(32px,3.25vw,62px)) var(--wa-bl-template-padding-bottom,clamp(42px,3.75vw,72px));
    gap:var(--wa-bl-template-stage-gap,clamp(30px,2.8vw,54px));
  }
  .wa-bl--hero-banner.wa-bl-hero--ap-template.wa-bl-hero--ap-desktop-art.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__layout {
    padding-block:var(--wa-bl-template-padding-top,clamp(24px,calc(var(--wa-bl-template-height) * .07),48px)) var(--wa-bl-template-padding-bottom,clamp(24px,calc(var(--wa-bl-template-height) * .07),48px));
    gap:var(--wa-bl-template-stage-gap,clamp(20px,calc(var(--wa-bl-template-height) * .07),44px));
  }
  /* Fixed stages reserve room for text below the art; Auto may grow freely. */
  .wa-bl--hero-banner.wa-bl-hero--ap-template.wa-bl-hero--ap-desktop-art.wa-bl-hero--template-fixed:not(.wa-bl--editor-preview) .wa-bl-hero__image {
    max-height:min(var(--wa-bl-template-art-limit),calc(var(--wa-bl-template-height) * .43));
  }
}
/* At tablet and phone widths AP and BA share a real flex column. Grid-row
   manipulation alone cannot reorder flex items; order works in both contexts. */
@media (max-width:1023px) {
  .wa-bl--hero-banner.wa-bl-hero--template.wa-bl-hero--mobile-art .wa-bl-hero__media {order:-1;}
  .wa-bl--hero-banner.wa-bl-hero--template.wa-bl-hero--mobile-art .wa-bl-hero__copy {order:0;}
  .wa-bl--hero-banner.wa-bl-hero--template.wa-bl-hero--mobile-copy .wa-bl-hero__copy,
  .wa-bl--hero-banner.wa-bl-hero--template.wa-bl-hero--mobile-copy .wa-bl-hero__media {order:0;}
}
/* Gutenberg can narrow the editor's block canvas without narrowing the
   browser viewport. In its mobile-width container, reflect the mobile setting. */
@container wa-bl-hero-preview (max-width:767px) {
  .wa-bl-hero--template.wa-bl-hero--mobile-art .wa-bl-hero__media {order:-1 !important;}
  .wa-bl-hero--template.wa-bl-hero--mobile-art .wa-bl-hero__copy {order:0 !important;}
  .wa-bl-hero--template.wa-bl-hero--mobile-copy .wa-bl-hero__media,
  .wa-bl-hero--template.wa-bl-hero--mobile-copy .wa-bl-hero__copy {order:0 !important;}
}

/* v0.5.5: Template spacing is adjustable rather than hard-coded.
   A numeric 0 is a valid override. Keep the original reference geometry if
   no override was saved. In mobile layouts the *outer* section uses the mobile
   padding tokens, including mobile-specific overrides. */
@media (max-width:1023px) {
  .wa-bl.wa-bl--hero-banner.wa-bl-hero--template:not(.wa-bl--editor-preview) {
    padding-top:var(--wa-bl-template-mobile-padding-top,var(--wa-bl-pad-top-mobile));
    padding-bottom:var(--wa-bl-template-mobile-padding-bottom,var(--wa-bl-pad-bottom-mobile));
  }
  .wa-bl--hero-banner.wa-bl-hero--ap-template:not(.wa-bl--editor-preview) .wa-bl__body {
    margin-top:var(--wa-bl-template-copy-gap,var(--wa-bl-content-gap,22px));
  }
  .wa-bl--hero-banner.wa-bl-hero--ba-template:not(.wa-bl--editor-preview) .wa-bl__body {
    margin-top:var(--wa-bl-template-copy-gap,22px);
  }
}
:is(.wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--ap-template,
    .editor-styles-wrapper .wa-bl--hero-banner.wa-bl-hero--ap-template) .wa-bl__body {
  margin-top:var(--wa-bl-template-copy-gap,var(--wa-bl-content-gap,22px));
}
:is(.wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--ba-template,
    .editor-styles-wrapper .wa-bl--hero-banner.wa-bl-hero--ba-template) .wa-bl__body {
  margin-top:var(--wa-bl-template-copy-gap,22px);
}

/* When a template's vertical rhythm has been deliberately overridden in Auto
   mode, let its content determine the height. Otherwise the old 680px/700px
   reference minimum can swallow padding/gap changes without visible effect.
   Fixed remains an exact outer height regardless of this opt-in class. */
@media (min-width:1024px) {
  .wa-bl--hero-banner.wa-bl-hero--template.wa-bl-hero--template-auto.wa-bl-hero--template-spacing-custom:not(.wa-bl--editor-preview) .wa-bl-hero__layout {
    min-height:0;
  }
}


/* v0.5.6 · Statement is a real copy-only composition. Its artwork is omitted
   at render time, not visually hidden. No image/flex stage reserves space. */
.wa-bl--hero-banner.wa-bl-hero--statement .wa-bl__wrap {
  display:flex; flex-direction:column; align-items:center;
}
.wa-bl--hero-banner.wa-bl-hero--statement .wa-bl-hero__layout {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  width:100%; min-width:0; gap:0; text-align:center;
}
.wa-bl--hero-banner.wa-bl-hero--statement .wa-bl-hero__copy {
  max-width:min(100%,var(--wa-bl-statement-copy-width,980px));
  margin-inline:auto; text-align:center;
}
.wa-bl--hero-banner.wa-bl-hero--statement .wa-bl__headline {text-align:var(--wa-bl-heading-align,center);}
.wa-bl--hero-banner.wa-bl-hero--statement .wa-bl__actions {justify-content:center;}
@media(min-width:1024px) {
  .wa-bl--hero-banner.wa-bl-hero--statement-fixed:not(.wa-bl--editor-preview) {
    height:var(--wa-bl-template-height); min-height:0; max-height:var(--wa-bl-template-height);
    display:flex; flex-direction:column; overflow:hidden; overflow:clip;
  }
  .wa-bl--hero-banner.wa-bl-hero--statement-fixed:not(.wa-bl--editor-preview) .wa-bl__wrap {
    flex:1 1 0; min-height:0; justify-content:center;
  }
  .wa-bl--hero-banner.wa-bl-hero--statement-fixed.wa-bl-hero--statement-top:not(.wa-bl--editor-preview) .wa-bl__wrap {justify-content:flex-start;}
  .wa-bl--hero-banner.wa-bl-hero--statement-fixed.wa-bl-hero--statement-bottom:not(.wa-bl--editor-preview) .wa-bl__wrap {justify-content:flex-end;}
}
/* On mobile, always use content-led height to keep text and CTAs accessible. */
@media(max-width:1023px) {
  .wa-bl--hero-banner.wa-bl-hero--statement-fixed {height:auto;max-height:none;min-height:0;}
  .wa-bl--hero-banner.wa-bl-hero--statement .wa-bl-hero__copy {max-width:min(100%,var(--wa-bl-statement-copy-width,980px));}
}
/* ACF's wider editor viewport can have a narrow inner column. Never crop the
   Statement preview to the published desktop fixed height. */
.wa-bl--hero-banner.wa-bl--editor-preview.wa-bl-hero--statement-fixed,
.editor-styles-wrapper .wa-bl--hero-banner.wa-bl-hero--statement-fixed {
  height:auto!important;max-height:none!important;min-height:0!important;
}