/* =========================================================================
   Core theme — Image With Text. Rebuilt from zero.

   Design language is taken from Featured Products / Best Sellers: neutral
   surfaces, one accent, restrained borders, a serif display heading against a
   sans body, and spacing that comes from the theme rhythm rather than pinned
   pixels. Nothing here is a literal copy of those sections.

   Every --iwt-* property is written by section.php and every one of them is
   backed by a real Inspector control. Each falls back to a theme token, so a
   store that has never opened the Builder still renders a finished section.
   ========================================================================= */

.storly-iwt {
  --iwt-gap: clamp(32px, 5vw, 72px);
  --iwt-content-max: 560px;
  --iwt-radius: var(--r-lg, 10px);
  --iwt-heading-size: var(--core-heading-section, clamp(1.9rem, 3.4vw, 2.9rem));
  --iwt-body-size: 16px;
  --iwt-content-gap: 18px;
  --iwt-inset: var(--gutter);
  --iwt-ink: var(--text);
  --iwt-ink-soft: var(--text-s);
  --iwt-accent: var(--accent);
  --iwt-cta-bg: var(--btn-bg, var(--brand));
  --iwt-cta-ink: var(--btn-color, var(--on-brand));

  padding-block: var(--iwt-pad-top, var(--core-rhythm, 64px)) var(--iwt-pad-bottom, var(--core-rhythm, 64px));
  background: var(--iwt-bg, transparent);
  color: var(--iwt-ink);
}

/* The section owns its own inset so it lines up with the sections that use
   .container, without depending on a wrapper it does not render. */
.storly-iwt__grid {
  display: grid;
  gap: var(--iwt-gap);
  align-items: var(--iwt-align, center);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--iwt-inset);
}

.storly-iwt[data-valign="start"]  .storly-iwt__grid { --iwt-align: start; }
.storly-iwt[data-valign="center"] .storly-iwt__grid { --iwt-align: center; }
.storly-iwt[data-valign="end"]    .storly-iwt__grid { --iwt-align: end; }

/* The track is a length (full = the viewport) so the bleed below can do
   arithmetic with it; core-dna's --core-track-full is `none`. */
.storly-iwt[data-container="narrow"]  { --iwt-track: var(--core-track-narrow, 1040px); }
.storly-iwt[data-container="default"] { --iwt-track: var(--core-track-default, 1360px); }
.storly-iwt[data-container="wide"]    { --iwt-track: var(--core-track-wide, 1520px); }
.storly-iwt[data-container="full"]    { --iwt-track: 100vw; }
.storly-iwt__grid { max-width: var(--iwt-track, 100vw); }

/* ── Text only ──────────────────────────────────────────────────────────── */
/* With no image this stops being a split section and becomes a text block, so
   it has to be laid out like one. It used to keep --iwt-content-max (560px) and
   the start alignment of the split, which stranded the copy against the left
   edge of a 1360px band with the whole media half left empty.

   The copy takes the Core prose measure and the column is centred inside
   whatever container the merchant chose — the container choice is preserved,
   and an explicit Content max width still wins because section.php writes it as
   an inline property. Text alignment inside the column is untouched. */
.storly-iwt[data-has-media="0"] { --iwt-content-max: var(--core-track-prose, 72ch); }
/* width:100% is load-bearing. An auto inline margin stops a grid item from
   stretching, so without it the column shrink-wraps the text and its width
   drifts with the copy. With it the column fills the track up to the prose
   measure and the auto margins centre the remainder. */
.storly-iwt[data-has-media="0"] .storly-iwt__content {
  width: 100%;
  margin-inline: auto;
}

/* ── Desktop split ──────────────────────────────────────────────────────── */

@media (min-width: 1025px) {
  .storly-iwt__grid {
    grid-template-columns: var(--iwt-media-width, 50%) minmax(0, 1fr);
  }
  /* Media on the end: the column order flips, the source order does not, so
     the heading still precedes the image for screen readers. */
  .storly-iwt[data-media-side="end"] .storly-iwt__grid {
    grid-template-columns: minmax(0, 1fr) var(--iwt-media-width, 50%);
  }
  .storly-iwt[data-media-side="end"] .storly-iwt__media { order: 2; }
  .storly-iwt[data-media-side="end"] .storly-iwt__content { order: 1; }

  /* With no image the copy would otherwise stretch to a full-width measure. */
  .storly-iwt[data-has-media="0"] .storly-iwt__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Media ──────────────────────────────────────────────────────────────── */

.storly-iwt__media {
  margin: 0;
  min-width: 0;
  border-radius: var(--iwt-radius);
  overflow: hidden;
  background: var(--bg-t);
}

.storly-iwt__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--iwt-ratio);
  object-fit: var(--iwt-fit);
  object-position: var(--iwt-focal, 50% 50%);
}

/* Editorial media has a ceiling: a portrait ratio in a half-width column can
   otherwise run past a full viewport height and push the copy far down the
   page. The image crops to cover rather than growing unbounded. Full-bleed
   layouts (statement) opt out below. */
@media (min-width: 1025px) {
  .storly-iwt__img { max-height: var(--iwt-media-cap, min(74vh, 620px)); }
  .storly-iwt[data-layout="statement"] .storly-iwt__img { max-height: none; }
}

/* ── Content ────────────────────────────────────────────────────────────── */

.storly-iwt__content {
  display: flex;
  flex-direction: column;
  gap: var(--iwt-content-gap);
  min-width: 0;
  max-width: var(--iwt-content-max);
}

.storly-iwt[data-text-align="center"] .storly-iwt__content {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.storly-iwt__eyebrow {
  margin: 0;
  color: var(--iwt-accent);
  font-size: var(--core-eyebrow-size, 11.5px);
  font-weight: var(--core-eyebrow-weight, 600);
  letter-spacing: var(--core-eyebrow-tracking, .14em);
  text-transform: var(--core-eyebrow-transform, uppercase);
}

.storly-iwt__heading {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--iwt-heading-size);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--iwt-ink);
}

.storly-iwt__body {
  margin: 0;
  color: var(--iwt-ink-soft);
  font-size: var(--iwt-body-size);
  line-height: var(--lh-body, 1.62);
  /* Caps the measure even when the merchant widens the content column. */
  max-width: 62ch;
}

.storly-iwt__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 6px;
}

.storly-iwt__note {
  margin: 0;
  color: var(--text-m);
  font-size: var(--core-eyebrow-size, 11.5px);
}

/* ── CTA ────────────────────────────────────────────────────────────────── */

.storly-iwt__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding-inline: 24px;
  border: 1px solid transparent;
  border-radius: var(--btn-radius, var(--r-sm, 6px));
  background: var(--iwt-cta-bg);
  color: var(--iwt-cta-ink);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: .02em;
  text-decoration: none;
  transition: transform var(--dur-fast, .16s) var(--ease), opacity var(--dur-fast, .16s) var(--ease);
}
.storly-iwt__cta svg { width: 16px; height: 16px; }
.storly-iwt__cta:hover { opacity: .92; transform: translateY(-1px); }
.storly-iwt__cta:focus-visible { outline: 2px solid var(--iwt-accent); outline-offset: 3px; }

.storly-iwt[data-cta-style="outline"] .storly-iwt__cta {
  background: transparent;
  border-color: color-mix(in srgb, var(--iwt-ink) 24%, transparent);
  color: var(--iwt-ink);
}
.storly-iwt[data-cta-style="link"] .storly-iwt__cta {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--iwt-accent);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.storly-iwt[data-cta-style="link"] .storly-iwt__cta:hover { transform: none; }

/* ── Tablet ─────────────────────────────────────────────────────────────── */
/* The split survives to tablet but stops being lopsided: a 62% media column at
   860px leaves the copy too narrow to read. */

@media (min-width: 768px) and (max-width: 1024px) {
  .storly-iwt__grid,
  .storly-iwt[data-media-side="end"] .storly-iwt__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 40px);
  }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
/* Purpose-built rather than a squeezed split: one column, the media takes a
   calmer ratio, the copy gets a real measure, and the CTA becomes a full-width
   tap target. */

@media (max-width: 767px) {
  .storly-iwt__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 5vw, 30px);
  }

  .storly-iwt__content { max-width: none; }

  .storly-iwt__img { aspect-ratio: var(--iwt-ratio-mobile, 4 / 3); }

  .storly-iwt[data-mobile-order="content-first"] .storly-iwt__media { order: 2; }
  .storly-iwt[data-mobile-order="content-first"] .storly-iwt__content { order: 1; }

  .storly-iwt { --iwt-content-gap: 14px; }
  .storly-iwt__heading {
  }

  .storly-iwt__actions { width: 100%; }
  .storly-iwt[data-cta-style="solid"] .storly-iwt__cta,
  .storly-iwt[data-cta-style="outline"] .storly-iwt__cta {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .storly-iwt { --iwt-body-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .storly-iwt__cta { transition: none; }
  .storly-iwt__cta:hover { transform: none; }
}

/* --------------------------------------------- editorial capability layer --
   The section could already put an image beside text; what it could not do was
   change the *kind* of editorial moment it is. A contrast panel, a bled image,
   a focal point and a mobile composition of its own are what separate a
   magazine spread from a feature block, and all four are ordinary settings
   here - no niche selectors, nothing the Builder cannot reach. */

.storly-iwt__image { object-position: var(--iwt-focal, 50% 50%); }

/* Content surfaces. "contrast" deliberately borrows the section background
   rather than inventing a colour, so it stays inside the merchant's palette. */
.storly-iwt[data-content-surface="panel"] .storly-iwt__content,
.storly-iwt[data-content-surface="contrast"] .storly-iwt__content {
  padding: var(--iwt-content-pad, 32px);
  border-radius: var(--iwt-content-radius, 0);
}
.storly-iwt[data-content-surface="panel"] .storly-iwt__content {
  background: var(--surface);
}
.storly-iwt[data-content-surface="contrast"] .storly-iwt__content {
  background: var(--core-primary, var(--text));
  color: var(--core-on-primary);
}
.storly-iwt[data-content-surface="contrast"] .storly-iwt__title,
.storly-iwt[data-content-surface="contrast"] .storly-iwt__eyebrow,
.storly-iwt[data-content-surface="contrast"] .storly-iwt__text { color: inherit; }

/* A bled image is what makes an editorial split read as a spread rather than a
   card. Only from tablet up: on a phone the media is already full width.

   The media is a grid column, so `50% - 50vw` (which assumes a centred
   full-width block) overshot the screen by hundreds of pixels. The real
   distance is the gutter outside the centred track plus the grid's inset. */
@media (min-width: 768px) {
  /* Statement is already a full band: the image is the section's background. */
  .storly-iwt[data-media-bleed="1"]:not([data-layout="statement"]) {
    --iwt-bleed: calc((min(100vw, var(--iwt-track, 100vw)) - 100vw) / 2 - var(--iwt-inset, 0px));
    overflow-x: clip;
  }
  .storly-iwt[data-media-bleed="1"][data-media-side="start"]:not([data-layout="statement"]) .storly-iwt__media {
    margin-inline-start: var(--iwt-bleed);
  }
  .storly-iwt[data-media-bleed="1"][data-media-side="end"]:not([data-layout="statement"]) .storly-iwt__media {
    margin-inline-end: var(--iwt-bleed);
  }
}

/* ------------------------------------------------- mobile as a composition -- */
@media (max-width: 767px) {
  .storly-iwt[style*="--iwt-mobile-pad"] { padding-block: var(--iwt-mobile-pad); }
  .storly-iwt[style*="--iwt-mobile-media-h"] .storly-iwt__media {
    aspect-ratio: auto;
    height: var(--iwt-mobile-media-h);
  }
  .storly-iwt[data-mobile-align="start"] .storly-iwt__content { text-align: start; align-items: flex-start; }
  .storly-iwt[data-mobile-align="center"] .storly-iwt__content { text-align: center; align-items: center; }
  .storly-iwt[data-mobile-cta="full"] .storly-iwt__cta { width: 100%; justify-content: center; }
  /* A panel that keeps desktop padding on a phone leaves no room for the words. */
  .storly-iwt[data-content-surface="panel"] .storly-iwt__content,
  .storly-iwt[data-content-surface="contrast"] .storly-iwt__content {
    padding: clamp(20px, 6vw, 32px);
  }
  .storly-iwt[data-media-bleed="1"] .storly-iwt__media { margin-inline: calc(50% - 50vw); }
}

/* ============================================================================
   Composition variants (real DOM behaviour, not a column ratio)
   ----------------------------------------------------------------------------
   copy-led   — the copy leads; media is a small supporting column
   statement  — the media is a full band and the copy sits on it, centred
   overlap    — the copy is a card that overlaps the media edge
   Each keys off data-layout only; no niche selectors, no new markup.
   ========================================================================== */

/* ── copy-led ─────────────────────────────────────────────────────────────
   Small image, large voice. The heading steps up and the measure widens. */
@media (min-width: 1025px) {
  .storly-iwt[data-layout="copy-led"] .storly-iwt__grid { align-items: center; }
}
.storly-iwt[data-layout="copy-led"] {
  --iwt-heading-size: clamp(2.1rem, 3.6vw, 3.2rem);
  --iwt-content-max: 640px;
}
.storly-iwt[data-layout="copy-led"] .storly-iwt__body { max-width: 66ch; }

/* ── statement ────────────────────────────────────────────────────────────
   The image becomes the section. Copy is centred on it behind a readable
   scrim, with room to breathe above and below. */
.storly-iwt[data-layout="statement"] {
  position: relative;
  isolation: isolate;
  color: #fff;
  --iwt-ink: #fff;
  --iwt-ink-soft: rgba(255, 255, 255, .84);
}
/* Comes after the media-direction rules above, so a single-column track wins on
   source order for every media-side value without an !important. */
.storly-iwt[data-layout="statement"] .storly-iwt__grid {
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: clamp(360px, 52vh, 560px);
  padding-block: clamp(56px, 9vw, 128px);
  gap: 0;
}
.storly-iwt[data-layout="statement"] .storly-iwt__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
}
.storly-iwt[data-layout="statement"] .storly-iwt__img { height: 100%; aspect-ratio: auto; }
.storly-iwt[data-layout="statement"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 11, 13, .42), rgba(10, 11, 13, .58)),
    radial-gradient(120% 92% at 50% 50%, rgba(10, 11, 13, .30) 0%, rgba(10, 11, 13, .64) 100%);
}
.storly-iwt[data-layout="statement"] .storly-iwt__content {
  align-items: center;
  text-align: center;
  max-width: min(760px, 92%);
  gap: clamp(14px, 2vw, 22px);
}
.storly-iwt[data-layout="statement"] .storly-iwt__heading {
  font-size: clamp(2.2rem, 5vw, 4rem);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.storly-iwt[data-layout="statement"] .storly-iwt__body { text-shadow: 0 1px 14px rgba(0, 0, 0, .4); }
.storly-iwt[data-layout="statement"] .storly-iwt__cta {
  background: #fff;
  color: #14161a;
  border-color: #fff;
}
.storly-iwt[data-layout="statement"][data-cta-style="outline"] .storly-iwt__cta {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}
.storly-iwt[data-layout="statement"] .storly-iwt__eyebrow { color: rgba(255, 255, 255, .88); }
/* No image yet: fall back to a brand-wash band so the section still reads. */
.storly-iwt[data-layout="statement"][data-has-media="0"] {
  color: var(--text);
  --iwt-ink: var(--text);
  --iwt-ink-soft: var(--text-s);
  background: color-mix(in srgb, var(--brand) 8%, var(--bg));
}
.storly-iwt[data-layout="statement"][data-has-media="0"]::after { display: none; }
.storly-iwt[data-layout="statement"][data-has-media="0"] .storly-iwt__heading { text-shadow: none; }
.storly-iwt[data-layout="statement"][data-has-media="0"] .storly-iwt__cta {
  background: var(--iwt-cta-bg);
  color: var(--iwt-cta-ink);
  border-color: transparent;
}

/* ── overlap ──────────────────────────────────────────────────────────────
   The copy is a raised card that steps over the image. Reads as a magazine
   spread; only from tablet up (stacked on a phone). */
@media (min-width: 1025px) {
  .storly-iwt[data-layout="overlap"] .storly-iwt__grid {
    grid-template-columns: minmax(0, 58%) minmax(0, 1fr);
    align-items: center;
  }
  .storly-iwt[data-layout="overlap"][data-media-side="end"] .storly-iwt__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 58%);
  }
  .storly-iwt[data-layout="overlap"] .storly-iwt__content {
    position: relative;
    z-index: 2;
    margin-inline-start: -14%;
    padding: clamp(28px, 3vw, 44px);
    background: var(--surface);
    border: 1px solid var(--border-l, rgba(0, 0, 0, .06));
    border-radius: var(--iwt-content-radius, var(--r-lg, 12px));
    box-shadow: var(--shadow-lg, 0 30px 70px rgba(17, 19, 23, .12));
    max-width: 520px;
  }
  .storly-iwt[data-layout="overlap"][data-media-side="end"] .storly-iwt__content {
    margin-inline: 0 -14%;
    justify-self: end;
  }
  /* A contrast panel keeps its own colour but still overlaps. */
  .storly-iwt[data-layout="overlap"][data-content-surface="contrast"] .storly-iwt__content {
    background: var(--core-primary, var(--text));
    border-color: transparent;
  }
}

/* =========================================================================
   Geometry correction.

   The two halves used to be sized independently: the picture took its natural
   ratio while the copy took its content height, so a white content panel
   floated at a different height from the image with a gap between them and
   dead space under both. They are now one band — equal columns, the picture
   filling its side, the copy centred in a matching block.

   Layered after the block above so every --iwt-* control a merchant sets still
   wins; nothing here fixes a colour or a size the schema owns.

   From 768px: the section is already two columns on a tablet, and there the
   halves drifted apart just as they used to on desktop.
   ========================================================================= */

@media (min-width: 768px) {
  /* Stretch is the default so the halves match; a merchant who deliberately
     picked start/end vertical alignment still gets it. */
  .storly-iwt[data-valign="center"] .storly-iwt__grid { align-items: stretch; }

  /* The picture fills its column; it never sets the band's height. With
     `height: 100%` inside a row sized by its own content the image fell back to
     its natural ratio, so a portrait photo made the section taller than the
     screen. Now the copy and a minimum height decide, and the picture covers. */
  .storly-iwt[data-has-media="1"]:not([data-layout="statement"]) .storly-iwt__media {
    position: relative;
    min-height: var(--iwt-band-min, clamp(360px, 38vw, 560px));
  }
  .storly-iwt[data-has-media="1"]:not([data-layout="statement"]) .storly-iwt__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    object-fit: var(--iwt-fit, cover);
  }

  /* The copy fills its half and centres inside it, so the two sides share a
     top and a bottom edge instead of drifting apart. */
  .storly-iwt[data-has-media="1"] .storly-iwt__content {
    justify-content: center;
    height: 100%;
    max-width: none;
  }
  /* The measure stays readable — it is the panel that grew, not the line. */
  .storly-iwt[data-has-media="1"] .storly-iwt__content > * { max-width: var(--iwt-content-max, 46ch); }
  .storly-iwt[data-has-media="1"][data-text-align="end"] .storly-iwt__content > * { margin-inline-start: auto; }
  .storly-iwt[data-has-media="1"][data-text-align="center"] .storly-iwt__content > * { margin-inline: auto; }

  /* A content surface is a panel, not a card adrift: it takes the band's
     height and its own padding rather than hugging the text. */
  .storly-iwt[data-content-surface]:not([data-content-surface="none"]) .storly-iwt__content {
    padding: var(--iwt-content-pad, clamp(32px, 4vw, 64px));
    border-radius: var(--iwt-radius);
  }
}

/* On a phone the band becomes two stacked blocks; the picture keeps a shape of
   its own rather than inheriting a desktop full-height rule. */
@media (max-width: 767px) {
  .storly-iwt[data-has-media="1"] .storly-iwt__img {
    height: auto;
    aspect-ratio: var(--iwt-ratio, 4 / 3);
    object-fit: cover;
  }
}

/* =========================================================================
   Editorial pass.

   The band was correct but plain: an eyebrow floating above a heading, a
   generic pill for the call to action, and no structure holding the column
   together. This gives it the same vocabulary as the rest of Core — an eyebrow
   set against a rule, a tighter display face, a hairline closing the copy, a
   letterspaced action, and the picture framed rather than simply cropped.

   Every rule is scoped so a merchant's own choice still wins: colours, sizes,
   radius and cta_style all come from the controls above.
   ========================================================================= */

/* Eyebrow against a short rule, the way the footer and account pages set one. */
.storly-iwt__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: .18em;
}
.storly-iwt__eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: .5;
}
/* Centred copy puts the rule on both sides; right-aligned copy leads with it. */
.storly-iwt[data-text-align="center"] .storly-iwt__eyebrow { justify-content: center; }
.storly-iwt[data-text-align="center"] .storly-iwt__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: .5;
}

/* A display face that forms a shape rather than one long line. */
.storly-iwt__heading {
  letter-spacing: -.03em;
  text-wrap: balance;
}
.storly-iwt[data-has-media="1"] .storly-iwt__heading { max-width: 18ch; }
.storly-iwt[data-text-align="center"] .storly-iwt__heading { margin-inline: auto; }

.storly-iwt__body { max-width: 46ch; }

/* One hairline closing the copy, before the action. */
.storly-iwt__actions { position: relative; padding-block-start: clamp(20px, 2.6vw, 28px); }
.storly-iwt__actions::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: min(100%, 22rem);
  height: 1px;
  background: color-mix(in srgb, currentColor 16%, transparent);
}
.storly-iwt[data-text-align="center"] .storly-iwt__actions::before { inset-inline: 0; margin-inline: auto; }

/* The action reads as a considered control, not a default pill. */
.storly-iwt__cta {
  min-height: 50px;
  padding-inline: clamp(22px, 2.4vw, 30px);
  border-radius: min(var(--iwt-cta-radius, var(--btn-radius, 8px)), 4px);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
/* The link variant is a rule under the words, not a button pretending to be one. */
.storly-iwt[data-cta-style="link"] .storly-iwt__cta {
  min-height: 0;
  padding-inline: 0;
  border: 0;
  border-block-end: 1px solid currentColor;
  border-radius: 0;
  background: none;
  padding-block-end: 4px;
}
.storly-iwt[data-cta-style="link"] .storly-iwt__cta:hover { opacity: .62; }

/* The picture is framed, the way the sign-in visual is — a hairline set in
   from the edge reads as a print rather than a cropped background. */
.storly-iwt__media { position: relative; }
.storly-iwt__media::after {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.1vw, 18px);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: calc(var(--iwt-radius) * .6);
  pointer-events: none;
}
/* A square-cornered image gets a square frame. */
.storly-iwt[style*="--iwt-radius:0"] .storly-iwt__media::after { border-radius: 0; }