/* Stencil Hero — block styles */

.stencil-hero {
  position: relative;
  /* Full-bleed at first paint. The JS below re-measures and corrects for
     asymmetric containers, but in a centred one (Dawn's page-width wrapper)
     this already matches what the JS computes, so nothing shifts. Leaving it
     at width:100% meant every block rendered inset until its script finished
     downloading — a visible gap on every load. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(420px, 70vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--sh-bg-color, #333333);
  box-sizing: border-box;
}

/* Background image layer */
.stencil-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.stencil-hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
  backface-visibility: hidden;
}

.stencil-hero__bg-placeholder {
  width: 100%;
  height: 100%;
}
.stencil-hero__bg-placeholder svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stencil-hero__overlay {
  /* Dawn ships a rule that collapses empty leaf div elements, which is
     what this is — same bug already fixed on Counter Scroll, Flip Cards,
     Kinetic Headline and Scroll Reveal Text. display:block is the browser
     default for a div, so the !important is a no-op everywhere else and
     just forces Dawn back to it, letting the merchant's Image overlay
     opacity actually paint. */
  display: block !important;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, var(--sh-overlay-alpha, 0.2));
  pointer-events: none;
  z-index: 1;
}

/* Content layer */
.stencil-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Held in a variable because the stencil-mode merge has to cancel this
     exact value to sit flush against the frame. Hardcoding it in both
     places let the two drift apart at the mobile breakpoint. */
  --sh-content-gap: 1.25rem;
  gap: var(--sh-content-gap);
  padding: 2rem;
  text-align: center;
  width: 100%;
  max-width: 1200px;
}

/* Preset SVG container */
.stencil-hero__preset {
  width: 100%;
  max-width: 1100px;
  line-height: 0;
}
.stencil-hero__preset-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Frame corners =====
   The frame fills the SVG box exactly, so clipping the box rounds the
   frame. clip-path takes CSS pixels straight from the theme variable —
   no converting into viewBox units and re-measuring on resize, which is
   what the old rx approach needed — and, unlike a rect's rx, it can
   round corners individually. */
.stencil-hero--mode-stencil .stencil-hero__preset-svg,
.stencil-hero--mode-stencil .stencil-hero__custom-svg {
  clip-path: inset(0 round var(--buttons-radius, 16px));
}
/* With the supporting text fused on, the frame keeps only its top
   corners and the text block below carries the bottom ones. The two then
   meet along a straight edge, so nothing has to overlap to hide a curve
   — which is what used to shave the descenders off round letters. */
.stencil-hero--has-sub.stencil-hero--mode-stencil .stencil-hero__preset-svg,
.stencil-hero--has-sub.stencil-hero--mode-stencil .stencil-hero__custom-svg {
  clip-path: inset(0 round var(--buttons-radius, 16px) var(--buttons-radius, 16px) 0 0);
}

/* The mask-frame rect is filled with the mask color for stencil mode.
   In stencil mode, the SVG <mask> punches the text shapes out, revealing the bg image. */
.stencil-hero__mask-frame {
  fill: var(--sh-mask-color, #E5E5E5);
}

/* Layered mode: solid letters rendered in mask_color over the bg image. */
.stencil-hero__layered-text {
  fill: var(--sh-mask-color, #E5E5E5);
}

/* Toggle which layer renders based on the active mode. */
.stencil-hero--mode-stencil .sh-layer-layered { display: none; }
.stencil-hero--mode-layered .sh-layer-stencil { display: none; }

/* Custom-text heading (used in layered mode only) */
.stencil-hero__custom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stencil-hero__custom-svg {
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: block;
}

/* Both modes now draw the heading inside the SVG, which is aria-hidden.
   This carries the merchant's words for assistive tech and search only —
   it is never painted. Replaces the old visible <h2>, whose
   text-transform, word-break and clamp() font-size were why layered mode
   uppercased the text and wrapped it differently from stencil mode. */
.stencil-hero__heading-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Secondary text "pill" — always solid, never stencil */
.stencil-hero__sub {
  display: inline-block;
  /* Padding in em so it scales with whichever size variant is active,
     rather than needing to be restated per size and per breakpoint. */
  padding: 0.7em 1.4em;
  background-color: var(--sh-mask-color, #E5E5E5);
  color: var(--sh-sub-color, #111);
  font-family: var(--sh-sub-font-family, "Helvetica Neue", Arial, sans-serif);
  font-style: var(--sh-sub-font-style, normal);
  font-weight: var(--sh-sub-font-weight, 600);
  /* Size comes from the sub-size variants below. */
  letter-spacing: 0.04em;
  /* No text-transform: the merchant's casing is theirs to choose. The
     tracking is looser than body text but tighter than the 0.08em this
     carried while it was uppercase-only, which reads as gappy on
     lowercase. */
  text-decoration: none;
  /* Inherit the theme's button radius rather than forcing a pill — this
     element reads as a button, so it should match the storefront's. Same
     variable and fallback the stencil frame uses. Themes with pill
     buttons still get a pill, because that's what they set. */
  border-radius: var(--buttons-radius, 16px);
  /* Was 1, which set the lines solid the moment the text wrapped. */
  line-height: 1.35;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.stencil-hero__sub-text { display: inline-block; }
a.stencil-hero__sub:hover { transform: translateY(-1px); opacity: 0.92; }

/* Full-section click overlay */
.stencil-hero__full-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}
.stencil-hero--click-entire_section .stencil-hero__sub { pointer-events: none; }

/* Animations */
.stencil-hero--anim-parallax .stencil-hero__bg-image {
  will-change: transform;
}

/* Responsive: stack preset content slightly tighter on mobile */
@media (max-width: 749px) {
  .stencil-hero { min-height: 60vh; }
  .stencil-hero__content { --sh-content-gap: 1rem; padding: 1.25rem; }
  /* The supporting text needs no override here any more: its size clamps
     against the viewport and its padding is in em, so both scale down on
     their own. The old rem override fought the size variants. */
}

/* ===== Supporting text size =====
   Two things were wrong with the previous fixed rem sizes.

   rem resolves against the root element, and Dawn sets html to 62.5% for
   its own em maths, so every value landed at ~62% of its intended size
   there — Small came out around 8px, which is why it was barely legible.
   em resolves against the parent instead, so these now track whatever
   body size the theme actually sets.

   And a single fixed size cannot suit both ends of the viewport range:
   Small read fine on mobile but got lost on a wide desktop, while Large
   was right on desktop and overbearing on a phone. Each size is now a
   clamp, so it grows with the viewport between its own floor and
   ceiling and stays in proportion at both ends.

   Padding is inherited from the base rule in em, so it follows.

   The two ends are tuned separately because different parts of the clamp
   win at each: the em floor is what mobile settles on, and the vw term
   (bounded by the ceiling) is what desktop settles on. So the floors
   carry the +15% mobile uplift, while the vw term and ceiling carry the
   +35% desktop one. */
.stencil-hero--sub-size-sm .stencil-hero__sub { font-size: clamp(0.94em, 1.42vw, 1.28em); }
.stencil-hero--sub-size-md .stencil-hero__sub { font-size: clamp(1.01em, 1.69vw, 1.53em); }
.stencil-hero--sub-size-lg .stencil-hero__sub { font-size: clamp(1.15em, 2.07vw, 1.86em); }

/* ===== Stencil mode: merge the supporting text into the frame =====
   The frame and the supporting text already share --sh-mask-color, so
   matching the text block's width to the frame, squaring its top corners,
   and pulling it up over the frame's rounded bottom edge makes the two
   read as a single panel instead of a panel with a pill floating beneath.

   Applies to both content types — a preset frame and a custom-text frame
   are the same object as far as the seam is concerned. Layered mode is
   untouched in both: it has no frame for the text to merge with, so the
   pill still makes sense there.

   Placed after the sub-size variants so its padding wins on source order
   (it also outweighs them, and the mobile override, on specificity). */
.stencil-hero--mode-stencil .stencil-hero__preset + .stencil-hero__sub,
.stencil-hero--mode-stencil .stencil-hero__custom + .stencil-hero__sub {
  display: block;
  width: 100%;
  max-width: 1100px;
  /* Cancel .stencil-hero__content's row gap so this sits flush against
     the frame's bottom edge, then take one more pixel.

     The extra pixel closes a subpixel seam. The frame's SVG is height:
     auto, so it renders at a fractional height, and the content column is
     centred — changing this element's size changes the stack's height,
     which shifts the centring offset by a fraction of a pixel. Whenever
     the frame's bottom and this block's top round to different pixels, the
     background shows through as a hairline. Overlapping by 1px is safe
     here in a way the old radius-sized overlap was not: both edges at the
     seam are straight, and 1px cannot reach the lettering.

     The gap is sourced from the variable rather than a repeated literal
     because it narrows at the mobile breakpoint, and a hardcoded value
     would silently over-pull there. */
  margin-top: calc(-1 * var(--sh-content-gap, 1.25rem) - 1px);
  /* em, not rem, for the same reason as the size variants: rem would
     shrink these to ~11px on Dawn and throw the panel out of proportion. */
  padding-top: 1.1em;
  padding-bottom: 1.1em;
  border-radius: 0 0 var(--buttons-radius, 16px) var(--buttons-radius, 16px);
}
/* The lift would tear open the seam now that the two are one shape. */
.stencil-hero--mode-stencil .stencil-hero__preset + a.stencil-hero__sub:hover,
.stencil-hero--mode-stencil .stencil-hero__custom + a.stencil-hero__sub:hover {
  transform: none;
}

/* ===== Shadow — adds depth =====
   Stencil mode: drop-shadow on the SVG group (frame + cut-outs) so the
   letters gain a subtle offset shadow.
   Layered mode: drop-shadow on the h2 / SVG text to project a shadow
   around the letters (360° when depth). */
.stencil-hero--shadow-up .stencil-hero__preset-svg,
.stencil-hero--shadow-up .stencil-hero__custom-svg {
  filter: drop-shadow(0 -6px 14px rgba(0, 0, 0, 0.45));
}
.stencil-hero--shadow-down .stencil-hero__preset-svg,
.stencil-hero--shadow-down .stencil-hero__custom-svg {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
.stencil-hero--shadow-depth .stencil-hero__preset-svg,
.stencil-hero--shadow-depth .stencil-hero__custom-svg {
  filter:
    drop-shadow(0 0 12px rgba(0, 0, 0, 0.35))
    drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

/* ===== Shadow on the fused stencil panel =====
   Stencil mode welds the supporting text onto the frame, so filtering the
   SVG on its own casts a shadow along the join and splits the two back
   apart — the seam the merge exists to hide.

   Move the filter up to the element they share instead. In stencil mode
   .stencil-hero__content resolves to exactly the frame and the supporting
   text for both content types: the preset branch holds only those two,
   and in the custom branch the h2 is display:none, leaving just its SVG.
   drop-shadow then reads their combined silhouette and the panel casts
   one shadow as one shape.

   Safe when there's no supporting text too — the parent then wraps the
   frame alone, so this matches what filtering the SVG directly did. */
.stencil-hero--mode-stencil .stencil-hero__preset-svg,
.stencil-hero--mode-stencil .stencil-hero__custom-svg {
  filter: none;
}
.stencil-hero--mode-stencil.stencil-hero--shadow-up .stencil-hero__content {
  filter: drop-shadow(0 -6px 14px rgba(0, 0, 0, 0.45));
}
.stencil-hero--mode-stencil.stencil-hero--shadow-down .stencil-hero__content {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
.stencil-hero--mode-stencil.stencil-hero--shadow-depth .stencil-hero__content {
  filter:
    drop-shadow(0 0 12px rgba(0, 0, 0, 0.35))
    drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}